Contribute page imporvements, sidebar for cards

src/components/todoStuff/todos.js

@@ -3,7 +3,11 @@ import React, { useState, useEffect } from 'react'
 import LoadingIndicator from '../LoadingIndicator.js'
 import TodoBoard from './todoBoard.js'
 import TodoTable from './todoTable.js'
+import TodoSidebar from './todoSidebar.js'
 
+import Sidebar from '../sidebar.js'
+
+// import styles from './todos.module.css'
 import constants from '../../constants.json'
 
 const byVotes = (a, b) => {
@@ -13,11 +17,10 @@ const byVotes = (a, b) => {
 export default function Todos() {
   const [loaded, setLoaded] = useState(false)
   const [columns, setColumns] = useState(null)
-  const [boardCards, setBoardCards] = useState(null)
-  const [tables, setTables] = useState(null)
-  const [tableCards, setTableCards] = useState(null)
+  const [cards, setCards] = useState(null)
   const [categories, setCategories] = useState(null)
   const [userId, setUserId] = useState(null)
+  const [sidebarCard, setSidebarCard] = useState(null)
 
   useEffect(() => {
     console.info('Fetching todos')
@@ -36,72 +39,98 @@ export default function Todos() {
     setCategories(data.todos.categories)
     setUserId(data.userId)
 
-    let bCards = []
-    let tCards = []
-    data.todos.cards.forEach((card) => {
-      if (data.todos.columns[card.state].type === 'table') {
-        tCards.push(card)
-      } else {
-        bCards.push(card)
-      }
-    })
-
-    setTableCards(tCards.sort(byVotes))
-    setBoardCards(bCards.sort(byVotes))
-
-    let cols = {}
-    let tables = {}
-    Object.keys(data.todos.columns).forEach((key) => {
-      const col = data.todos.columns[key]
-      if (col.type !== 'table') {
-        cols = {
-          ...cols,
-          [key]: col,
-        }
-      } else {
-        tables = {
-          ...tables,
-          [key]: col,
-        }
-      }
-    })
-    setColumns(cols)
-    setTables(tables)
-
+    setCards(data.todos.cards)
+    setColumns(data.todos.columns)
     setLoaded(true)
   }
 
-  const onCardClick = (id) => {
-    fetch(`${constants.apiUrl}todos?id=${id}`, {
-      credentials: 'include',
-    })
-      .then((resp) => {
-        return resp.json()
-      })
-      .then((data) => {
-        setTodos(data)
-      })
+  const onClick = (card) => {
+    setSidebarCard(card.id)
   }
 
   if (!loaded) {
     return <LoadingIndicator />
   }
 
+  let bCards = []
+  let tCards = []
+  cards.forEach((card) => {
+    if (columns[card.state].type === 'table') {
+      tCards.push(card)
+    } else {
+      bCards.push(card)
+    }
+  })
+  bCards = bCards.sort(byVotes)
+  tCards = tCards.sort(byVotes)
+
+  let cols = {}
+  let tables = {}
+  Object.keys(columns).forEach((key) => {
+    const col = columns[key]
+    if (col.type !== 'table') {
+      cols = {
+        ...cols,
+        [key]: col,
+      }
+    } else {
+      tables = {
+        ...tables,
+        [key]: col,
+      }
+    }
+  })
+
   return (
     <div>
-      <TodoBoard
-        columns={columns}
-        cards={boardCards}
-        userId={userId}
-        categories={categories}
-        onCardClick={onCardClick}
-      />
-      <TodoTable
-        tables={tables}
-        cards={tableCards}
-        userId={userId}
-        categories={categories}
-      />
+      {sidebarCard && (
+        <Sidebar
+          onClose={() => {
+            setSidebarCard(null)
+          }}
+        >
+          <TodoSidebar
+            card={cards.find((card) => {
+              return card.id === sidebarCard
+            })}
+            userId={userId}
+            categories={categories}
+            columns={columns}
+            voteOn={(card) => {
+              fetch(`${constants.apiUrl}todos?id=${card.id}`, {
+                credentials: 'include',
+              })
+                .then((resp) => {
+                  return resp.json()
+                })
+                .then((data) => {
+                  setTodos(data)
+                })
+            }}
+          />
+        </Sidebar>
+      )}
+      <div
+        style={{
+          // width: '100%',
+          marginRight: sidebarCard ? 380 : 0,
+        }}
+      >
+        <TodoBoard
+          columns={cols}
+          cards={bCards}
+          userId={userId}
+          categories={categories}
+          onCardClick={onClick}
+        />
+        <TodoTable
+          tables={tables}
+          cards={tCards}
+          userId={userId}
+          categories={categories}
+          onClick={onClick}
+        />
+      </div>
     </div>
   )
 }