Merge pull request #461 from rendely/main

Add multi select to see multiple subreddits at once

components/Search.tsx

@@ -1,12 +1,12 @@
 import {
-  Autocomplete,
   Badge,
-  createStyles,
   Group,
-  SelectItemProps
+  MultiSelect,
+  SelectItem,
+  SelectItemProps,
+  createStyles
 } from '@mantine/core'
 import {useDebouncedValue} from '@mantine/hooks'
-import {IconSearch} from '@tabler/icons-react'
 import {forwardRef} from 'react'
 import useSWR from 'swr'
 import {useRedditContext} from '~/components/RedditProvider'
@@ -38,10 +38,21 @@ const AutoCompleteItem = forwardRef<HTMLDivElement, ItemProps>(
 )
 AutoCompleteItem.displayName = 'AutoCompleteItem'
 
+/**
+ * Stores items selected by multi select
+ */
+let storedData: (string | SelectItem)[] = [{label: 'gif', value: 'gif'}]
+
+function storeValue(values: any) {
+  storedData = values.map((value: any) => {
+    return {value: value, label: value}
+  })
+}
+
 /**
  * Search component.
  *
- * @see https://mantine.dev/core/autocomplete/
+ * @see https://mantine.dev/core/multi-select/
  */
 export default function Search() {
   const {setSubreddit, searchInput, setSearchInput, subReddit} =
@@ -62,20 +73,45 @@ export default function Search() {
     setSearchInput(string)
   }
 
+  /**
+   * get item data to populate typeahead and combine with already selected items
+   */
+  function formatItems(i: {value: string; label: string}) {
+    return {value: i.value, label: i.value}
+  }
+
+  function getData(): (string | SelectItem)[] {
+    let itemOptions
+    if (results) {
+      itemOptions = [...storedData, ...results.map(formatItems)]
+    } else if (beforeSearch) {
+      itemOptions = [...storedData, ...beforeSearch.map(formatItems)]
+    } else {
+      itemOptions = ['Empty']
+    }
+    return itemOptions
+  }
+
   return (
     <>
-      <Autocomplete
+      <MultiSelect
         aria-label="Search sub-reddits"
         className={classes.searchBar}
-        data={results ? results : beforeSearch ? beforeSearch : []}
-        icon={<IconSearch />}
-        itemComponent={AutoCompleteItem}
+        clearable
+        clearSearchOnBlur
+        clearSearchOnChange
+        data={getData()}
+        hoverOnSearchChange
         nothingFound="No subs found. Try searching for something else."
-        onChange={handleSearch}
-        onItemSubmit={(value) => setSubreddit(value.value)}
-        placeholder={subReddit}
-        size="lg"
-        value={searchInput}
+        onChange={(values) => {
+          storeValue(values)
+          setSubreddit(encodeURI(values.join('%2B')))
+          setSearchInput('')
+        }}
+        onSearchChange={handleSearch}
+        placeholder="Pick all that you like"
+        searchable
+        searchValue={searchInput}
       />
       <Settings />
     </>

public/sitemap-0.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://redditviewer.vercel.app</loc><lastmod>2023-03-17T12:19:39.508Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://redditviewer.vercel.app</loc><lastmod>2023-04-08T22:29:59.520Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>