Categories POC

src/components/filter/CategorySelect.js

@@ -0,0 +1,54 @@
+import styled from 'styled-components/macro'
+
+const TagContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+`
+
+const Tag = styled.div`
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 12px;
+  background: ${({ theme, selected }) =>
+    selected ? theme.transparentOrange : ''};
+  border: 1px solid;
+  color: ${({ theme, selected }) =>
+    selected ? theme.secondaryText : theme.text};
+  border-radius: 16px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: ${({ theme }) => theme.primaryLight};
+    color: ${({ theme }) => theme.white};
+    border-color: ${({ theme }) => theme.primaryLight};
+  }
+`
+
+const CategorySelect = ({ categories, onChange }) => {
+  const toggleCategory = (category) => {
+    const newCategories = { ...categories }
+    newCategories[category] = !newCategories[category]
+    onChange(newCategories)
+  }
+
+  return (
+    <TagContainer>
+      {Object.entries(categories).map(([category, enabled]) => (
+        <Tag
+          key={category}
+          selected={enabled}
+          onClick={() => toggleCategory(category)}
+        >
+          {category === 'noCategory'
+            ? 'No Category'
+            : category.charAt(0).toUpperCase() + category.slice(1)}
+        </Tag>
+      ))}
+    </TagContainer>
+  )
+}
+
+export default CategorySelect

src/components/filter/Filter.js

@@ -5,12 +5,14 @@ import { useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components/macro'
 
 import {
+  categoryChanged,
   invasiveChanged,
   muniChanged,
   selectionChanged,
 } from '../../redux/viewChange'
 import buildSelectTree from '../../utils/buildSelectTree'
 import Input from '../ui/Input'
+import CategorySelect from './CategorySelect'
 import FilterButtons from './FilterButtons'
 import LabeledCheckbox from './LabeledCheckbox'
 import RCTreeSelectSkeleton from './RCTreeSelectSkeleton'
@@ -58,7 +60,7 @@ const Filter = () => {
   )
 
   const dispatch = useDispatch()
-  const { countsById, types, muni, invasive } = useSelector(
+  const { countsById, types, muni, invasive, categories } = useSelector(
     (state) => state.filter,
   )
 
@@ -71,15 +73,28 @@ const Filter = () => {
         showOnlyOnMap,
         searchValue,
         types,
+        Object.entries(categories)
+          .filter(([_, enabled]) => enabled)
+          .map(([category]) => category),
       ),
-    [typesAccess, countsById, showOnlyOnMap, searchValue, types],
+    [typesAccess, countsById, showOnlyOnMap, searchValue, types, categories],
   )
 
   const { t } = useTranslation()
   return (
     <>
       <div>
         <EdibleTypeText>{t('glossary.types')}</EdibleTypeText>
+        <CategorySelect
+          categories={categories}
+          onChange={(newCategories) => {
+            Object.entries(newCategories).forEach(([category, enabled]) => {
+              if (categories[category] !== enabled) {
+                dispatch(categoryChanged(category, enabled))
+              }
+            })
+          }}
+        />
         <SearchInput
           onChange={(e) => setSearchValueDebounced(e.target.value)}
           placeholder={t('type')}

src/components/filter/TreeSelectView.js

@@ -113,54 +113,58 @@ const TreeSelectView = ({
     const isExpanded = Boolean(expandedNodes.has(node.id) | isDisabled)
 
     return (
-      <React.Fragment key={node.id}>
-        <TreeNode style={{ paddingLeft: `${level * 1.25}em` }}>
-          <ControlsContainer>
-            {node.children.length > 0 ? (
-              <ToggleButton
-                onClick={() => handleToggle(node.id)}
+      node.isVisible && (
+        <React.Fragment key={node.id}>
+          <TreeNode style={{ paddingLeft: `${level * 1.25}em` }}>
+            <ControlsContainer>
+              {node.children.some((c) => c.isVisible) ? (
+                <ToggleButton
+                  onClick={() => handleToggle(node.id)}
+                  disabled={isDisabled}
+                >
+                  <ArrowIcon
+                    style={{
+                      transform: `rotate(${isExpanded ? 90 : 0}deg)`,
+                      transition: 'transform 0.2s',
+                      width: '12px',
+                      height: '12px',
+                      opacity: isDisabled ? 0.5 : 1,
+                    }}
+                  />
+                </ToggleButton>
+              ) : (
+                <ChevronSpace />
+              )}
+              <Checkbox
+                type="checkbox"
+                checked={node.isSelected}
+                ref={(el) => {
+                  if (el) {
+                    el.indeterminate = node.isIndeterminate
+                  }
+                }}
+                onChange={() => !isDisabled && handleCheckboxChange(node)}
                 disabled={isDisabled}
-              >
-                <ArrowIcon
-                  style={{
-                    transform: `rotate(${isExpanded ? 90 : 0}deg)`,
-                    transition: 'transform 0.2s',
-                    width: '12px',
-                    height: '12px',
-                    opacity: isDisabled ? 0.5 : 1,
-                  }}
-                />
-              </ToggleButton>
-            ) : (
-              <ChevronSpace />
-            )}
-            <Checkbox
-              type="checkbox"
-              checked={node.isSelected}
-              ref={(el) => {
-                if (el) {
-                  el.indeterminate = node.isIndeterminate
-                }
-              }}
-              onChange={() => !isDisabled && handleCheckboxChange(node)}
-              disabled={isDisabled}
-            />
-          </ControlsContainer>
-          <NodeContent>
-            {node.commonName && (
-              <CommonName isDisabled={isDisabled}>{node.commonName}</CommonName>
-            )}
-            {node.scientificName && (
-              <ScientificName isDisabled={isDisabled}>
-                {node.scientificName}
-              </ScientificName>
-            )}
-            <Count>({node.count})</Count>
-          </NodeContent>
-        </TreeNode>
-        {isExpanded &&
-          node.children.map((child) => renderNode(child, level + 1))}
-      </React.Fragment>
+              />
+            </ControlsContainer>
+            <NodeContent>
+              {node.commonName && (
+                <CommonName isDisabled={isDisabled}>
+                  {node.commonName}
+                </CommonName>
+              )}
+              {node.scientificName && (
+                <ScientificName isDisabled={isDisabled}>
+                  {node.scientificName}
+                </ScientificName>
+              )}
+              <Count>({node.count})</Count>
+            </NodeContent>
+          </TreeNode>
+          {isExpanded &&
+            node.children.map((child) => renderNode(child, level + 1))}
+        </React.Fragment>
+      )
     )
   }
 

src/components/filter/components/filter/CategorySelect.js

@@ -0,0 +1,50 @@
+import styled from 'styled-components/macro'
+
+const TagContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+`
+
+const Tag = styled.div`
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 12px;
+  background: ${({ theme, selected }) =>
+    selected ? theme.primary : theme.background};
+  color: ${({ theme, selected }) => (selected ? theme.white : theme.text)};
+  border: 1px solid ${({ theme }) => theme.border};
+  border-radius: 16px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: ${({ theme }) => theme.primaryLight};
+    color: ${({ theme }) => theme.white};
+  }
+`
+
+const CategorySelect = ({ categories, onChange }) => {
+  const toggleCategory = (category) => {
+    const newCategories = { ...categories }
+    newCategories[category] = !newCategories[category]
+    onChange(newCategories)
+  }
+
+  return (
+    <TagContainer>
+      {Object.entries(categories).map(([category, enabled]) => (
+        <Tag
+          key={category}
+          selected={enabled}
+          onClick={() => toggleCategory(category)}
+        >
+          {category.charAt(0).toUpperCase() + category.slice(1)}
+        </Tag>
+      ))}
+    </TagContainer>
+  )
+}
+
+export default CategorySelect

src/redux/filterSlice.js

@@ -47,6 +47,13 @@ export const filterSlice = createSlice({
     invasive: false,
     isLoading: false,
     countsById: {},
+    categories: {
+      forager: true,
+      freegan: true,
+      grafter: false,
+      honeybee: false,
+      noCategory: false,
+    },
   },
   reducers: {
     openFilter: (state) => {
@@ -55,6 +62,10 @@ export const filterSlice = createSlice({
     closeFilter: (state) => {
       state.isOpenInMobileLayout = false
     },
+    categoryChanged: (state, action) => {
+      const { category, value } = action.payload
+      state.categories[category] = value
+    },
   },
   extraReducers: {
     [fetchFilterCounts.pending]: (state) => {
@@ -79,13 +90,11 @@ export const filterSlice = createSlice({
 
     [fetchAndLocalizeTypes.fulfilled]: (state, action) => {
       const typesAccess = action.payload
-      state.types = typesAccess
-        .selectableTypesWithCategories('forager', 'freegan')
-        .map((t) => t.id)
+      state.types = typesAccess.selectableTypes().map((t) => t.id)
     },
   },
 })
 
-export const { openFilter, closeFilter } = filterSlice.actions
+export const { openFilter, closeFilter, categoryChanged } = filterSlice.actions
 
 export default filterSlice.reducer

src/redux/mapSlice.js

@@ -12,13 +12,30 @@ export const fetchMapLocations = createAsyncThunk(
   'map/fetchMapLocations',
   async (_, { getState }) => {
     const state = getState()
-    const { types, muni, invasive } = state.filter
+    const { types, muni, invasive, categories } = state.filter
     const { lastMapView } = state.viewport
+    const { typesAccess } = state.type
+
     if (lastMapView) {
       const { bounds, zoom, center: _ } = lastMapView
+
+      const filteredTypes = types?.filter((typeId) => {
+        const type = typesAccess.getType(typeId)
+        return type.categories.length === 0
+          ? categories.noCategory
+          : type.categories.some((cat) => categories[cat])
+      })
+
       return await getLocations(
         selectParams(
-          { types, muni, invasive, bounds, zoom, center: undefined },
+          {
+            types: filteredTypes,
+            muni,
+            invasive,
+            bounds,
+            zoom,
+            center: undefined,
+          },
           { limit: 250 },
         ),
       )
@@ -32,13 +49,21 @@ export const fetchMapClusters = createAsyncThunk(
   'map/fetchMapClusters',
   async (_, { getState }) => {
     const state = getState()
-    const { types, muni, invasive } = state.filter
+    const { types, muni, invasive, categories } = state.filter
     const { lastMapView } = state.viewport
+    const { typesAccess } = state.type
     if (lastMapView) {
       const { bounds, zoom, center: _ } = lastMapView
+
+      const filteredTypes = types?.filter((typeId) => {
+        const type = typesAccess.getType(typeId)
+        return type.categories.length === 0
+          ? categories.noCategory
+          : type.categories.some((cat) => categories[cat])
+      })
       return await getClusters(
         selectParams({
-          types,
+          types: filteredTypes,
           muni,
           invasive,
           bounds,

src/redux/viewChange.js

@@ -37,3 +37,16 @@ export const selectionChanged = (types) => (dispatch) => {
   dispatch(updateSelection({ types }))
   dispatch(fetchLocations())
 }
+
+export const categoryChanged = (category, value) => (dispatch, getState) => {
+  const currentCategories = getState().filter.categories
+  dispatch(
+    updateSelection({
+      categories: {
+        ...currentCategories,
+        [category]: value,
+      },
+    }),
+  )
+  dispatch(fetchLocations())
+}