Finish implementing include/exclude

This commit adds functionality that stores inclusions/exclusions as MentionItems and converts them back and forth into a list of strings as necessary

components/common/MentionTypeahead/index.tsx

@@ -54,15 +54,13 @@ const MentionTypeahead = ({
     ? (getCookie('NEXT_LOCALE') as string)
     : 'en'
 
-  console.log(inclusions)
-
   const [isLoading, setIsLoading] = useState(false)
   const [options, setOptions] = useState<Option[]>([])
 
   async function handleSearch(query: string) {
     setIsLoading(true)
 
-    const exclude = [...inclusions, ...exclusions]
+    const exclude = transformIntoString([...inclusions, ...exclusions])
 
     const response = await api.searchAll(query, exclude, locale)
     const results = response.data.results
@@ -71,7 +69,7 @@ const MentionTypeahead = ({
     setOptions(mapResults(results))
   }
 
-  function transform(object: RawSearchResponse) {
+  function transformIntoMentionItem(object: RawSearchResponse) {
     const result: MentionItem = {
       name: {
         en: object.name_en,
@@ -84,10 +82,14 @@ const MentionTypeahead = ({
     return result
   }
 
+  function transformIntoString(list: MentionItem[]) {
+    return list.map((item) => item.granblue_id)
+  }
+
   function mapResults(results: RawSearchResponse[]) {
     return results
       .map((rawObject: RawSearchResponse) => {
-        const object = transform(rawObject)
+        const object = transformIntoMentionItem(rawObject)
         return {
           granblue_id: object.granblue_id,
           element: object.element,

components/filters/FilterModal/index.tsx

@@ -95,6 +95,8 @@ const FilterModal = (props: Props) => {
 
   useEffect(() => {
     setFilterSet(props.filterSet)
+    setInclusions(props.filterSet.includes || [])
+    setExclusions(props.filterSet.excludes || [])
   }, [props.filterSet])
 
   useEffect(() => {
@@ -135,13 +137,13 @@ const FilterModal = (props: Props) => {
     if (maxButtonsCount) filters.button_count = maxButtonsCount
     if (maxTurnsCount) filters.turn_count = maxTurnsCount
 
+    if (inclusions.length > 0) filters.includes = inclusions
+    if (exclusions.length > 0) filters.excludes = exclusions
+
     if (props.persistFilters) {
       setCookie('filters', filters, { path: '/' })
     }
 
-    if (inclusions.length > 0) filters.includes = inclusions
-    if (exclusions.length > 0) filters.excludes = exclusions
-
     props.sendAdvancedFilters(filters)
     openChange()
   }

pages/teams.tsx

@@ -16,6 +16,7 @@ import { appState } from '~utils/appState'
 import { defaultFilterset } from '~utils/defaultFilters'
 import { elements, allElement } from '~data/elements'
 import { emptyPaginationObject } from '~utils/emptyStates'
+import { convertAdvancedFilters } from '~utils/convertAdvancedFilters'
 
 import ErrorSection from '~components/ErrorSection'
 import GridRep from '~components/GridRep'
@@ -157,7 +158,7 @@ const TeamsRoute: React.FC<Props> = ({
         raid: raid === 'all' ? undefined : raid,
         recency: recency !== -1 ? recency : undefined,
         page: currentPage,
-        ...advancedFilters,
+        ...convertAdvancedFilters(advancedFilters),
       }
 
       Object.keys(filters).forEach(
@@ -393,7 +394,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
     // Create filter object
     const filters: FilterObject = extractFilters(query, raidGroups)
     const params = {
-      params: { ...filters, ...advancedFilters },
+      params: { ...filters, ...convertAdvancedFilters(advancedFilters) },
     }
 
     // Set up empty variables

types/FilterSet.d.ts

@@ -13,6 +13,6 @@ interface FilterSet {
   name_quality?: boolean
   user_quality?: boolean
   original?: boolean
-  includes?: string
-  excludes?: string
+  includes?: MentionItem[]
+  excludes?: MentionItem[]
 }