Grouping: added uncategorized

src/components/todoStuff/todos.js

@@ -7,6 +7,7 @@ import TodoSidebar from './todoSidebar.js'
 
 import Sidebar from '../sidebar.js'
 
+import styles from './todo.module.css'
 // import styles from './todos.module.css'
 import constants from '../../constants.json'
 
@@ -21,7 +22,8 @@ export default function Todos() {
   const [categories, setCategories] = useState(null)
   const [userId, setUserId] = useState(null)
   const [sidebarCard, setSidebarCard] = useState(null)
-  const [groups, setGroups] = useState(null)
+  const [namedGroups, setGroups] = useState(null)
+  const [selectedGroup, setSelectedGroup] = useState(null)
 
   useEffect(() => {
     console.info('Fetching todos')
@@ -83,6 +85,58 @@ export default function Todos() {
     }
   })
 
+  const groups = cards.reduce((acc, card) => {
+    if (!acc.includes(card.group) && card.group) {
+      acc.push(card.group)
+    }
+    return acc
+  }, [])
+
+  const renderGrouper = () => {
+    const sg = namedGroups[selectedGroup]
+    return (
+      <>
+        <div className={styles.groupContainer}>
+          {groups.map((group) => {
+            const namedGroup = namedGroups[group]
+            return (
+              <div
+                className={`${styles.group} ${group === selectedGroup &&
+                  styles.selectedGroup}`}
+                key={group}
+                onClick={() => {
+                  setSelectedGroup(group)
+                }}
+              >
+                {namedGroup ? namedGroup.name : group}
+              </div>
+            )
+          })}
+          <div
+            className={`${styles.group} ${'uncat' === selectedGroup &&
+              styles.selectedGroup}`}
+            onClick={() => {
+              setSelectedGroup('uncat')
+            }}
+          >
+            {'Kategorizálatlan'}
+          </div>
+          <div
+            className={styles.group}
+            onClick={() => {
+              setSelectedGroup(null)
+            }}
+          >
+            {'Összes'}
+          </div>
+        </div>
+        {sg && sg.description ? (
+          <div className={styles.groupDescription}>{sg.description}</div>
+        ) : null}
+      </>
+    )
+  }
+
   return (
     <div>
       {sidebarCard && (
@@ -112,6 +166,7 @@ export default function Todos() {
           />
         </Sidebar>
       )}
+      {renderGrouper()}
       <div
         style={{
           // width: '100%',
@@ -124,7 +179,7 @@ export default function Todos() {
           userId={userId}
           categories={categories}
           onCardClick={onClick}
-          namedGroups={groups}
+          selectedGroup={selectedGroup}
         />
         <TodoTable
           tables={tables}
@@ -132,6 +187,7 @@ export default function Todos() {
           userId={userId}
           categories={categories}
           onClick={onClick}
+          selectedGroup={selectedGroup}
         />
       </div>
     </div>