contro-bar/filter: fixing behavior & fix spacing (styling)

liqd · Oct 6, 2022 · 51e0258 · 51e0258
1 parent 8a798e4
commit 51e0258
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 15 deletions.
diff --git a/meinberlin/apps/budgeting/assets/ControlBarDropdown.jsx b/meinberlin/apps/budgeting/assets/ControlBarDropdown.jsx
@@ -1,28 +1,33 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 
 export const ControlBarDropdown = props => {
-  const { filter: { label, choices, current, icons } } = props
+  const { filter } = props
+  const [currentChoiceName, setCurrentChoiceName] = useState(filter.current)
 
-  const onSelectFilter = filter => {
-    props.onSelectFilter(filter)
+  const onSelectFilter = filterChoice => {
+    setCurrentChoiceName(filterChoice[1])
+    props.onSelectFilter(filterChoice)
   }
 
   const getFilterByValue = filterval => {
-    return choices.find(choice => choice[0] === filterval)
+    return filter.choices.find(choice => choice[0] === filterval)
   }
 
   useEffect(() => {
-    if (!current) {
-      if (props.filter.default) {
-        onSelectFilter(getFilterByValue(props.filter.default))
+    if (!filter.current) {
+      if (filter.default) {
+        const filterChoice = getFilterByValue(filter.default)
+        setCurrentChoiceName(filterChoice[1])
+        onSelectFilter(filterChoice)
       } else {
-        onSelectFilter(choices[0])
+        setCurrentChoiceName(filter.choices[0])
+        onSelectFilter(filter.choices[0])
       }
     }
-  })
+  }, [])
 
   const getIcon = choiceIndex => {
-    return icons.find(icon => icon[0] === choiceIndex)
+    return filter.icons.find(icon => icon[0] === choiceIndex)
   }
 
   return (
@@ -36,12 +41,12 @@ export const ControlBarDropdown = props => {
         aria-expanded="false"
         id={props.filterId}
       >
-        {current ? `${label}: ${current}` : `${label}`}
+        {`${filter.label}: ${currentChoiceName}`}
         <i className="fa fa-caret-down" aria-hidden />
       </button>
       <ul aria-labelledby={props.filterId} className="dropdown-menu">
-        {choices.map((choice, idx) => {
-          const icon = icons && getIcon(choice[0])
+        {filter.choices.map((choice, idx) => {
+          const icon = filter.icons && getIcon(choice[0])
           return (
             <li key={`filter-choice_${idx}`}>
               <button onClick={() => onSelectFilter(choice)}>

diff --git a/meinberlin/apps/budgeting/assets/__tests__/ControlBarDropdown.jest.jsx b/meinberlin/apps/budgeting/assets/__tests__/ControlBarDropdown.jest.jsx
@@ -78,7 +78,7 @@ test('ControlBarDropdown with default selection', () => {
         default: 'all',
         label: 'categories',
         icons: [['1', 'some/url']],
-        choices: [['1', 'all'], ['2', 'category1']]
+        choices: [['all', 'All'], ['1', 'category1']]
       }}
       onSelectFilter={onSelectFilterFn}
     />

diff --git a/meinberlin/assets/scss/components/_control-bar.scss b/meinberlin/assets/scss/components/_control-bar.scss
@@ -7,6 +7,11 @@
         display: inline-block;
         vertical-align: top;
         margin-bottom: 0;
+
+        & > button,
+        & > form > input {
+            margin-bottom: $spacer;
+        }
     }
 
     @media (min-width: $breakpoint) {