From bc776b3307c975f826afb1338874330924d601ba Mon Sep 17 00:00:00 2001
From: mrfry <mrfry@airmail.cc>
Date: Mon, 21 Dec 2020 10:59:16 +0100
Subject: [PATCH 1/3] Added groups

---
 src/components/todoStuff/todoBoard.js         | 53 +++++++++++++++++--
 src/components/todoStuff/todoBoard.module.css | 22 ++++++++
 src/components/todoStuff/todoCard.js          |  9 ++--
 src/components/todoStuff/todoCard.module.css  |  5 +-
 src/components/todoStuff/todoRow.js           | 11 ++--
 src/components/todoStuff/todoRow.module.css   |  4 +-
 src/components/todoStuff/todoSidebar.js       |  1 +
 src/components/todoStuff/todos.js             |  3 ++
 8 files changed, 94 insertions(+), 14 deletions(-)

diff --git a/src/components/todoStuff/todoBoard.js b/src/components/todoStuff/todoBoard.js
index 36d0abd..ae8a07a 100644
--- a/src/components/todoStuff/todoBoard.js
+++ b/src/components/todoStuff/todoBoard.js
@@ -1,11 +1,12 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import TodoCard from './todoCard.js'
 
 import styles from './todoBoard.module.css'
 
 export default function TodoBoard(props) {
-  const { columns, cards, userId, categories, onCardClick } = props
+  const { columns, cards, userId, categories, onCardClick, namedGroups } = props
+  const [selectedGroup, setSelectedGroup] = useState(null)
 
   const clickableTypes = Object.keys(columns).reduce((acc, key) => {
     const col = columns[key]
@@ -15,8 +16,52 @@ 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]
@@ -25,7 +70,9 @@ export default function TodoBoard(props) {
               <div className={styles.categoryName}>{category.name}</div>
               {cards.map((card, i) => {
                 if (card.state === key) {
-                  // TODO: determine if clickable here
+                  if (selectedGroup && card.group !== selectedGroup) {
+                    return null
+                  }
                   return (
                     <TodoCard
                       key={i}
diff --git a/src/components/todoStuff/todoBoard.module.css b/src/components/todoStuff/todoBoard.module.css
index 7e603fa..eb8af1a 100644
--- a/src/components/todoStuff/todoBoard.module.css
+++ b/src/components/todoStuff/todoBoard.module.css
@@ -21,3 +21,25 @@
 .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;
+}
diff --git a/src/components/todoStuff/todoCard.js b/src/components/todoStuff/todoCard.js
index 051832a..7dd8313 100644
--- a/src/components/todoStuff/todoCard.js
+++ b/src/components/todoStuff/todoCard.js
@@ -4,12 +4,15 @@ import styles from './todoCard.module.css'
 
 export default function TodoCard(props) {
   const { categories, onClick, userId } = props
-  const { name, category, points, votes, id } = props.cardData
+  const { name, category, points, votes, id, group } = props.cardData
   const voted = votes.includes(userId)
 
   return (
     <div
-      className={`${styles.card} ${voted && styles.voted}`}
+      className={styles.card}
+      style={{
+        border: `2px solid ${group || '#99f'}`,
+      }}
       onClick={() => {
         onClick(props.cardData)
       }}
@@ -31,7 +34,7 @@ export default function TodoCard(props) {
         </span>
       </div>
       <div className={styles.numbers}>
-        <div>
+        <div className={`${voted && styles.voted}`}>
           <div>{`Votes: ${votes.length}`}</div>
         </div>
         <div>{points}</div>
diff --git a/src/components/todoStuff/todoCard.module.css b/src/components/todoStuff/todoCard.module.css
index 86cb918..c015768 100644
--- a/src/components/todoStuff/todoCard.module.css
+++ b/src/components/todoStuff/todoCard.module.css
@@ -1,5 +1,4 @@
 .card {
-  border: 2px solid #99f;
   border-radius: 2px;
   padding: 5px;
   margin: 6px 3px;
@@ -7,7 +6,7 @@
 }
 
 .voted {
-  border: 2px solid #cf9;
+  color: #cf9;
 }
 
 .card:hover {
@@ -26,8 +25,8 @@
 }
 
 .category {
-  word-break: break-all;
   font-size: 10px;
+  white-space: nowrap;
 }
 
 .numbers {
diff --git a/src/components/todoStuff/todoRow.js b/src/components/todoStuff/todoRow.js
index cba5bee..13ad19a 100644
--- a/src/components/todoStuff/todoRow.js
+++ b/src/components/todoStuff/todoRow.js
@@ -4,7 +4,7 @@ import styles from './todoRow.module.css'
 
 export default function TodoRow(props) {
   const { categories, userId, onClick } = props
-  const { name, category, votes, id } = props.rowData
+  const { name, category, votes, id, group } = props.rowData
   const voted = votes.includes(userId)
 
   return (
@@ -12,7 +12,10 @@ export default function TodoRow(props) {
       onClick={() => {
         onClick(props.rowData)
       }}
-      className={`${styles.row} ${voted && styles.voted}`}
+      className={styles.row}
+      style={{
+        border: `2px solid ${group || '#99f'}`,
+      }}
     >
       <div className={styles.id}>{`#${id}`}</div>
       <div className={styles.description}>{name}</div>
@@ -30,7 +33,9 @@ export default function TodoRow(props) {
           {categories[category].name}
         </div>
       </div>
-      <div className={styles.votes}>{`Votes: ${votes.length}`}</div>
+      <div
+        className={`${styles.votes} ${voted && styles.voted}`}
+      >{`Votes: ${votes.length}`}</div>
     </div>
   )
 }
diff --git a/src/components/todoStuff/todoRow.module.css b/src/components/todoStuff/todoRow.module.css
index 90085de..1e8c573 100644
--- a/src/components/todoStuff/todoRow.module.css
+++ b/src/components/todoStuff/todoRow.module.css
@@ -33,7 +33,7 @@
 }
 
 .voted {
-  border: 2px solid #cf9;
+  color: #cf9;
 }
 
 .catName {
@@ -41,6 +41,6 @@
 }
 
 .category {
-  word-break: break-all;
   font-size: 10px;
+  white-space: nowrap;
 }
diff --git a/src/components/todoStuff/todoSidebar.js b/src/components/todoStuff/todoSidebar.js
index c57c6f2..ee6c41e 100644
--- a/src/components/todoStuff/todoSidebar.js
+++ b/src/components/todoStuff/todoSidebar.js
@@ -20,6 +20,7 @@ export default function Todos({ card, userId, categories, columns, voteOn }) {
             color: 'white',
             borderRadius: '2px',
             padding: '0px 2px',
+            whiteSpace: 'nowrap',
           }}
         >
           {categories[category].name}
diff --git a/src/components/todoStuff/todos.js b/src/components/todoStuff/todos.js
index 3388cb1..d2b808c 100644
--- a/src/components/todoStuff/todos.js
+++ b/src/components/todoStuff/todos.js
@@ -21,6 +21,7 @@ export default function Todos() {
   const [categories, setCategories] = useState(null)
   const [userId, setUserId] = useState(null)
   const [sidebarCard, setSidebarCard] = useState(null)
+  const [groups, setGroups] = useState(null)
 
   useEffect(() => {
     console.info('Fetching todos')
@@ -37,6 +38,7 @@ export default function Todos() {
 
   const setTodos = (data) => {
     setCategories(data.todos.categories)
+    setGroups(data.todos.groups)
     setUserId(data.userId)
 
     setCards(data.todos.cards)
@@ -122,6 +124,7 @@ export default function Todos() {
           userId={userId}
           categories={categories}
           onCardClick={onClick}
+          namedGroups={groups}
         />
         <TodoTable
           tables={tables}

From 68c5ca81663754e14315b3e8a4bb236c5dac5a55 Mon Sep 17 00:00:00 2001
From: mrfry <mrfry@airmail.cc>
Date: Mon, 21 Dec 2020 13:20:35 +0100
Subject: [PATCH 2/3] Grouping: added uncategorized

---
 src/components/todoStuff/todoBoard.js         | 90 ++++++-------------
 src/components/todoStuff/todoBoard.module.css | 22 -----
 src/components/todoStuff/todoTable.js         | 13 ++-
 src/components/todoStuff/todos.js             | 60 ++++++++++++-
 4 files changed, 98 insertions(+), 87 deletions(-)

diff --git a/src/components/todoStuff/todoBoard.js b/src/components/todoStuff/todoBoard.js
index ae8a07a..9e95298 100644
--- a/src/components/todoStuff/todoBoard.js
+++ b/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>
           )
diff --git a/src/components/todoStuff/todoBoard.module.css b/src/components/todoStuff/todoBoard.module.css
index eb8af1a..7e603fa 100644
--- a/src/components/todoStuff/todoBoard.module.css
+++ b/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;
-}
diff --git a/src/components/todoStuff/todoTable.js b/src/components/todoStuff/todoTable.js
index 01e7ae9..dcff74e 100644
--- a/src/components/todoStuff/todoTable.js
+++ b/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}
diff --git a/src/components/todoStuff/todos.js b/src/components/todoStuff/todos.js
index d2b808c..1bc560b 100644
--- a/src/components/todoStuff/todos.js
+++ b/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>

From b581969ede00b8b39d541ab262678c536a8d86a5 Mon Sep 17 00:00:00 2001
From: mrfry <mrfry@airmail.cc>
Date: Mon, 21 Dec 2020 13:21:35 +0100
Subject: [PATCH 3/3] Grouping: added uncategorized

---
 src/components/todoStuff/todo.module.css | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/components/todoStuff/todo.module.css

diff --git a/src/components/todoStuff/todo.module.css b/src/components/todoStuff/todo.module.css
new file mode 100644
index 0000000..79f61a5
--- /dev/null
+++ b/src/components/todoStuff/todo.module.css
@@ -0,0 +1,22 @@
+.groupDescription {
+  font-size: 16px;
+  padding: 4px;
+}
+
+.groupContainer {
+  display: flex;
+}
+
+.group {
+  padding: 8px 16px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.group:hover {
+  background-color: #333;
+}
+
+.selectedGroup {
+  background-color: #444;
+}