feat(ActiveFiltersList): Show the text search and categories in the l…

…ist view

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@headlessui/react": "1.7.8",
+    "@tailwindcss/container-queries": "0.1.1",
     "date-fns": "2.29.3",
     "maplibre-gl": "2.4.0",
     "next": "13.4.12",

pages/map.tsx

@@ -13,9 +13,9 @@ import { useDistanceToUser } from '@lib/hooks/useDistanceToUser'
 import { useUserGeolocation } from '@lib/hooks/useUserGeolocation'
 import { useFiltersWithActiveProp } from '@lib/hooks/useFiltersWithActiveProp'
 import { getFilteredFacilities } from '@lib/facilityFilterUtil'
-import { Button } from '@components/Button'
 import { FacilityListItem } from '@components/FacilityListItem'
 import { useActiveIdsBySearchTerm } from '@lib/hooks/useActiveIdsBySearchTerm'
+import ActiveFiltersList from '@components/ActiveFiltersList'
 
 export const getStaticProps: GetStaticProps = async () => {
   const { texts, labels, records } = await loadData()
@@ -122,35 +122,23 @@ const MapPage: Page<MapProps> = ({ records: originalRecords }) => {
             : `${texts.resultPageTitle} – ${texts.siteTitle}`}
         </title>
       </Head>
-      {labels.filter((label) => label.isActive).length > 0 && (
+      <ActiveFiltersList />
+
+      {filteredRecords.length === 0 && (
         <div className="p-5 border-b border-gray-20 bg-gray-10 bg-opacity-25">
-          <p className="text-sm font-bold">{texts.resultPageIntro}</p>
-          <ul className="mt-2 md:mt-3 flex flex-wrap gap-1 md:gap-2">
-            {labels
-              .filter((label) => label.isActive)
-              .map((label) => (
-                <Button
-                  key={label.id}
-                  tag="button"
-                  disabled={true}
-                  scheme="primary"
-                  size="extrasmall"
-                  className="!bg-primary !text-white !cursor-default flex gap-x-1 items-center"
-                >
-                  {label.fields.text}
-                </Button>
-              ))}
-          </ul>
+          <p className="text-sm font-bold">{texts.noResults}</p>
         </div>
       )}
 
-      <ul className="pb-28">
-        {filteredRecords.map((record) => (
-          <li key={record.id}>
-            <FacilityListItem facility={record} />
-          </li>
-        ))}
-      </ul>
+      {filteredRecords.length > 0 && (
+        <ul className="pb-28">
+          {filteredRecords.map((record) => (
+            <li key={record.id}>
+              <FacilityListItem facility={record} />
+            </li>
+          ))}
+        </ul>
+      )}
     </>
   )
 }

src/components/ActiveFiltersList.tsx

@@ -0,0 +1,60 @@
+import { useTexts } from '@lib/TextsContext'
+import { useFiltersWithActiveProp } from '@lib/hooks/useFiltersWithActiveProp'
+import React from 'react'
+import { getCategoriesTexts } from './TextSearch'
+import {
+  urlSearchCategoriesToStateSearchCategories,
+  useUrlState,
+} from '@lib/UrlStateContext'
+import { GristLabelType } from '@common/types/gristData'
+import { Button } from './Button'
+
+function ActiveFiltersList(): JSX.Element | null {
+  const texts = useTexts()
+  const [urlState] = useUrlState()
+  const labels = useFiltersWithActiveProp()
+  const categoriesTexts = getCategoriesTexts(texts)
+  const categoriesCount = Object.keys(categoriesTexts).length
+  const categories = urlSearchCategoriesToStateSearchCategories(
+    urlState.qCategories
+  )
+
+  const categoryFilters = Object.entries(categories)
+    .filter(([, isActive]) => isActive)
+    .map(([key]) => ({
+      id: key,
+      fields: {
+        text: categoriesTexts[key as keyof typeof categoriesTexts],
+      },
+    }))
+
+  const allFilters = [
+    ...(urlState.q ? [{ id: 'search', fields: { text: urlState.q } }] : []),
+    ...(categoryFilters.length < categoriesCount ? categoryFilters : []),
+    ...labels.filter((label) => label.isActive),
+  ] as GristLabelType[]
+
+  if (allFilters.length === 0) return null
+
+  return (
+    <div className="p-5 border-b border-gray-20 bg-gray-10 bg-opacity-25">
+      <p className="text-sm font-bold">{texts.resultPageIntro}</p>
+      <ul className="mt-2 md:mt-3 flex flex-wrap gap-1 md:gap-2">
+        {allFilters.map((label) => (
+          <Button
+            key={label.id}
+            tag="button"
+            disabled={true}
+            scheme="primary"
+            size="extrasmall"
+            className="!bg-primary !text-white !cursor-default flex gap-x-1 items-center"
+          >
+            {label.fields.text}
+          </Button>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default ActiveFiltersList

src/components/FiltersList.tsx

@@ -96,7 +96,7 @@ export const FiltersList: FC<{
   }
 
   return (
-    <div className="pb-20 lg:pb-0">
+    <div className="pb-20 lg:pb-0 @container">
       <div className="md:pt-10 flex flex-wrap gap-x-8 pb-6 md:pb-8">
         <ul className="flex flex-wrap gap-2 place-content-start mb-5">
           <FiltersTagsList
@@ -141,7 +141,7 @@ export const FiltersList: FC<{
             urlState.qCategories
           )}
         />
-        <div className="block w-full md:w-[324px] z-10">
+        <div className="block w-full @md:w-[324px] z-10">
           <Listbox
             label={texts.filtersSearchTargetLabel}
             options={targetGroups

src/components/TextSearch.tsx

@@ -1,4 +1,4 @@
-import { useTexts } from '@lib/TextsContext'
+import { TextsMapType, useTexts } from '@lib/TextsContext'
 import React, { useEffect, useState } from 'react'
 import TextInput from './TextInput'
 import Checkbox from './Checkbox'
@@ -19,6 +19,8 @@ interface TextSearchProps extends StateType {
   onChange: (state: Partial<StateType>) => void
 }
 
+type CategoriesTextMapType = Record<keyof CategoriesType, string>
+
 function TextSearch({
   text: initialText,
   categories,
@@ -31,43 +33,25 @@ function TextSearch({
     setText(initialText || '')
   }, [initialText])
 
-  const checkboxes = [
-    {
-      id: 'categorySelfHelp',
-      labelText: texts.textSearchCategorySelfHelp,
-    },
-    {
-      id: 'categoryAdvising',
-      labelText: texts.textSearchCategoryAdvising,
-    },
-    {
-      id: 'categoryClinics',
-      labelText: texts.textSearchCategoryClinics,
-    },
-    {
-      id: 'categoryOnlineOffers',
-      labelText: texts.textSearchCategoryOnlineOffers,
-    },
-    {
-      id: 'categoryDisctrictOfficeHelp',
-      labelText: texts.textSearchCategoryDisctrictOfficeHelp,
-    },
-  ]
+  const categoriesTexts = getCategoriesTexts(texts)
+  const checkboxes = Object.keys(categoriesTexts).map((categoryKey) => ({
+    id: categoryKey,
+    labelText: categoriesTexts[categoryKey as keyof CategoriesTextMapType],
+  }))
 
   return (
-    <fieldset className="w-full md:w-[324px]" aria-labelledby="textSearchLabel">
+    <fieldset
+      className="w-full @md:w-[324px]"
+      aria-labelledby="textSearchLabel"
+    >
       <TextInput
         id="textSearch"
         className="mb-2"
         min={3}
         labelText={texts.textSearchLabel}
         placeholder={texts.textSearchPlaceholder}
-        onChange={(evt) => {
-          setText(evt.target.value)
-        }}
-        onBlur={() => {
-          onChange({ categories, text })
-        }}
+        onChange={(evt) => setText(evt.target.value)}
+        onBlur={() => onChange({ categories, text })}
         onKeyDown={(evt) => {
           if (evt.key === 'Enter') {
             onChange({ categories, text })
@@ -103,4 +87,16 @@ function TextSearch({
   )
 }
 
+export const getCategoriesTexts = (
+  texts: TextsMapType
+): CategoriesTextMapType => {
+  return {
+    categorySelfHelp: texts.textSearchCategorySelfHelp,
+    categoryAdvising: texts.textSearchCategoryAdvising,
+    categoryClinics: texts.textSearchCategoryClinics,
+    categoryOnlineOffers: texts.textSearchCategoryOnlineOffers,
+    categoryDisctrictOfficeHelp: texts.textSearchCategoryDisctrictOfficeHelp,
+  }
+}
+
 export default TextSearch

tailwind.config.js

@@ -67,5 +67,6 @@ module.exports = {
   plugins: [
     require('@tailwindcss/line-clamp'),
     require('@tailwindcss/typography'),
+    require('@tailwindcss/container-queries'),
   ],
 }