Grouping: added uncategorized

src/components/todoStuff/todoBoard.js

@@ -1,12 +1,18 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import TodoCard from './todoCard.js'
 
 import styles from './todoBoard.module.css'
 
 export default function TodoBoard(props) {
-  const { columns, cards, userId, categories, onCardClick, namedGroups } = props
-  const [selectedGroup, setSelectedGroup] = useState(null)
+  const {
+    columns,
+    cards,
+    userId,
+    categories,
+    onCardClick,
+    selectedGroup,
+  } = props
 
   const clickableTypes = Object.keys(columns).reduce((acc, key) => {
     const col = columns[key]
@@ -16,52 +22,8 @@ export default function TodoBoard(props) {
     return acc
   }, [])
 
-  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}
-            onClick={() => {
-              setSelectedGroup(null)
-            }}
-          >
-            {'Összes'}
-          </div>
-        </div>
-        {sg && sg.description ? (
-          <div className={styles.groupDescription}>{sg.description}</div>
-        ) : null}
-      </>
-    )
-  }
-
   return (
     <div className={styles.tableContainer}>
-      {renderGrouper()}
       <div className={styles.table}>
         {Object.keys(columns).map((key) => {
           const category = columns[key]
@@ -69,23 +31,27 @@ export default function TodoBoard(props) {
             <div className={styles.tableCol} key={key}>
               <div className={styles.categoryName}>{category.name}</div>
               {cards.map((card, i) => {
-                if (card.state === key) {
-                  if (selectedGroup && card.group !== selectedGroup) {
-                    return null
-                  }
-                  return (
-                    <TodoCard
-                      key={i}
-                      cardData={card}
-                      userId={userId}
-                      categories={categories}
-                      onClick={onCardClick}
-                      clickable={clickableTypes.includes(key)}
-                    />
-                  )
-                } else {
+                const shouldHide =
+                  card.state !== key ||
+                  (selectedGroup !== null &&
+                    selectedGroup !== 'uncat' &&
+                    card.group !== selectedGroup) ||
+                  (selectedGroup === 'uncat' && card.group !== undefined)
+
+                if (shouldHide) {
                   return null
                 }
+
+                return (
+                  <TodoCard
+                    key={i}
+                    cardData={card}
+                    userId={userId}
+                    categories={categories}
+                    onClick={onCardClick}
+                    clickable={clickableTypes.includes(key)}
+                  />
+                )
               })}
             </div>
           )

src/components/todoStuff/todoBoard.module.css

@@ -21,25 +21,3 @@
 .tableCol {
   flex: 1;
 }
-
-.groupDescription {
-  font-size: 16px;
-  padding: 4px;
-}
-
-.groupContainer {
-  display: flex;
-}
-
-.group {
-  padding: 8px 16px;
-  cursor: pointer;
-}
-
-.group:hover {
-  background-color: #333;
-}
-
-.selectedGroup {
-  background-color: #444;
-}

src/components/todoStuff/todoTable.js

@@ -5,7 +5,7 @@ import TodoRow from './todoRow.js'
 import styles from './todoTable.module.css'
 
 export default function TodoBoard(props) {
-  const { tables, cards, userId, categories, onClick } = props
+  const { tables, cards, userId, categories, onClick, selectedGroup } = props
 
   return (
     <div className={styles.tableContainer}>
@@ -21,6 +21,17 @@ export default function TodoBoard(props) {
             <div className={styles.container} key={key}>
               <div className={styles.title}>{table.name}</div>
               {tableCards.map((card, i) => {
+                const shouldHide =
+                  card.state !== key ||
+                  (selectedGroup !== null &&
+                    selectedGroup !== 'uncat' &&
+                    card.group !== selectedGroup) ||
+                  (selectedGroup === 'uncat' && card.group !== undefined)
+
+                if (shouldHide) {
+                  return null
+                }
+
                 return (
                   <TodoRow
                     onClick={onClick}

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>