How to use the match-sorter.rankings function in match-sorter

async function onSubmit(event) {
    event.preventDefault()
    if (!tweets && window.location.href.includes("mobile.twitter.com")) {
      return alert(
        `Shucks, you found that one little thing that doesn't work. You are on 'mobile.twitter.com' and it's not loading bookmarks for some reason. Change to 'twitter.com' and then it should work`
      )
    }

    if (!tweets) {
      return alert("Oh snap, no bookmarked tweets are loaded. Wait a little longer or reload to try again")
    }

    const query = event.target.elements[0].value
    const results = matchSorter(tweets, query, {
      keys: [
        { key: "full_text", threshold: matchSorter.rankings.ACRONYM },
        { key: "user.screen_name", threshold: matchSorter.rankings.ACRONYM },
        { key: "user.name", threshold: matchSorter.rankings.ACRONYM },
      ],
      keepDiacritics: true,
    })
    // console.log("Bookmark search results", results)
    setResults(results)
  }

if (!tweets && window.location.href.includes("mobile.twitter.com")) {
      return alert(
        `Shucks, you found that one little thing that doesn't work. You are on 'mobile.twitter.com' and it's not loading bookmarks for some reason. Change to 'twitter.com' and then it should work`
      )
    }

    if (!tweets) {
      return alert("Oh snap, no bookmarked tweets are loaded. Wait a little longer or reload to try again")
    }

    const query = event.target.elements[0].value
    const results = matchSorter(tweets, query, {
      keys: [
        { key: "full_text", threshold: matchSorter.rankings.ACRONYM },
        { key: "user.screen_name", threshold: matchSorter.rankings.ACRONYM },
        { key: "user.name", threshold: matchSorter.rankings.ACRONYM },
      ],
      keepDiacritics: true,
    })
    // console.log("Bookmark search results", results)
    setResults(results)
  }

);

  // this will be the same every time and because this re-renders on every
  // keystroke I'm pretty sure useMemo is appropriate here.
  const topics = React.useMemo(() => {
    return result.data.topics.map(e => ({
      name: e.name,
    }));
  }, [result.data.topics]);

  const [search, setSearch] = React.useState("");
  const searchInputRef = React.useRef();
  const filteredTopics = matchSorter(topics, search, {
    keys: [
      // "name",
      { key: "name", threshold: matchSorter.rankings.CONTAINS },
    ],
  });

  return (
    <div style="{{">
      <div>
        <label>Search Topics: </label>
        <input id="search-input"> setSearch(searchInputRef.current.value), {
            wait: 200,
          })}
          type="search"
          autoFocus
        /&gt;</div></div>

// keystroke I'm pretty sure useMemo is appropriate here.
  const blogposts = React.useMemo(() => {
    return result.blogposts.edges.map(e => ({
      ...e.node.fields,
      excerpt: e.node.excerpt,
    }))
  }, [result.blogposts.edges])

  const [search, setSearch] = React.useState('')
  const searchInputRef = React.useRef()
  const filteredBlogPosts = matchSorter(blogposts, search, {
    keys: [
      'title',
      'categories',
      'keywords',
      {key: 'description', threshold: matchSorter.rankings.CONTAINS},
      {key: 'excerpt', threshold: matchSorter.rankings.CONTAINS},
    ],
  })

  return (
    <div>
      <div>
        <h1>Search Kent C. Dodds Blogposts</h1>
      </div>
      <small>
        {`If you can't find what you're looking for with this, try `}
        <a href="https://www.google.com/search?q=site%3Areact-vis.com%2Fblog+testing">
          using Google
        </a>
        {'.'}
      </small></div>

function RepoList({repos, filter}) {
  const matchingRepos = matchSorter(repos, filter, {
    keys: [
      'name',
      {maxRanking: matchSorter.rankings.SIMPLE_MATCH, key: 'language'},
      {maxRanking: matchSorter.rankings.CONTAINS, key: 'description'},
    ],
  })
  return (
    <ul>
      {matchingRepos.map(repo =&gt; (
        
      ))}
    </ul>
  )

export const sortEmojiMatches = (query: string, maxResults = -1) => {
  const results = matchSorter(emojiList, query, {
    keys: ['name', item => item.description.replace(/[^\w]/g, '')],
    threshold: matchSorter.rankings.CONTAINS,
  });

  return take(results, maxResults);
};

function RepoList({repos, filter}) {
  const matchingRepos = matchSorter(repos, filter, {
    keys: [
      'name',
      {maxRanking: matchSorter.rankings.SIMPLE_MATCH, key: 'language'},
      {maxRanking: matchSorter.rankings.CONTAINS, key: 'description'},
    ],
  })
  return (
    <ul>
      {matchingRepos.map(repo =&gt; (
        
      ))}
    </ul>

filterMethod: (filter: any, rows: any) => {
        return matchSorter(rows, filter.value, {
          keys: ["url"],
          threshold: matchSorter.rankings.CONTAINS
        });
      },
      filterAll: true

const blogposts = React.useMemo(() => {
    return result.blogposts.edges.map(e => ({
      ...e.node.fields,
      excerpt: e.node.excerpt,
    }))
  }, [result.blogposts.edges])

  const [search, setSearch] = React.useState('')
  const searchInputRef = React.useRef()
  const filteredBlogPosts = matchSorter(blogposts, search, {
    keys: [
      'title',
      'categories',
      'keywords',
      {key: 'description', threshold: matchSorter.rankings.CONTAINS},
      {key: 'excerpt', threshold: matchSorter.rankings.CONTAINS},
    ],
  })

  return (
    <div>
      <div>
        <h1>Search Kent C. Dodds Blogposts</h1>
      </div>
      <small>
        {`If you can't find what you're looking for with this, try `}
        <a href="https://www.google.com/search?q=site%3Areact-vis.com%2Fblog+testing">
          using Google
        </a>
        {'.'}
      </small>
      <div></div></div>