Add sections

src/client/src/components/todos/addTodo.tsx

@@ -4,7 +4,7 @@ import { AddTodoForm } from "@src/components/todos/collapsed/addTodoForm";
 import { CollapsedState } from "@src/components/todos/collapsed/collapsedState";
 import { useCreateTodo } from "@src/presentation/hooks/socketHooks";
 
-export function AddTodo(props: {}) {
+export function AddTodo(props: { project: string }) {
   const { createTodo } = useCreateTodo();
 
   const [collapsed, setCollapsed] = useState<CollapsedState>(
@@ -21,6 +21,7 @@ export function AddTodo(props: {}) {
 
   return (
     <AddTodoForm
+      project={props.project}
       onAdd={(todoName, project) => {
         createTodo(todoName, project);
       }}

src/client/src/components/todos/collapsed/addTodoForm.tsx

@@ -3,9 +3,10 @@ import { FC, useState } from "react";
 export const AddTodoForm: FC<{
   onAdd: (todoName: string, project: string) => void;
   onClose: () => void;
-}> = ({ onAdd, onClose }) => {
+  project: string;
+}> = ({ onAdd, onClose, ...props }) => {
   const [todoName, setTodoName] = useState("");
-  const [project, setProject] = useState("");
+  const [project, setProject] = useState(props.project);
 
   return (
     <form

src/client/src/components/todos/todoList.tsx

@@ -3,7 +3,11 @@ import { TodoItem } from "@src/components/todos/todoItem";
 import { AddTodo } from "@src/components/todos/addTodo";
 import { useUpdateTodoState } from "@src/presentation/hooks/socketHooks";
 
-export const TodoList = (props: { todos: Todo[]; hideDone: boolean }) => {
+export const TodoList = (props: {
+  todos: Todo[];
+  hideDone: boolean;
+  project: string;
+}) => {
   const { updateTodoState } = useUpdateTodoState();
 
   return (
@@ -23,7 +27,7 @@ export const TodoList = (props: { todos: Todo[]; hideDone: boolean }) => {
             </li>
           ))}
       </ul>
-      <AddTodo />
+      <AddTodo project={props.project} />
     </>
   );
 };

src/client/src/pages/index.tsx

@@ -1,15 +1,59 @@
 import { PageHeading } from "@src/components/common/headings/pageHeading";
 import { TodoList } from "@src/components/todos";
 import { useSelectInboxTodos } from "@src/presentation/hooks/socketHooks";
+import { ProjectsHeading } from "@src/components/common/headings/projectsHeading";
+import { AddTodo } from "@src/components/todos/addTodo";
+
+const groupByProjects = (arr) => {
+  if (!arr) {
+    return {};
+  }
+  const criteria = "project";
+
+  return arr.reduce(function (acc, currentValue) {
+    const currentValueElement = currentValue[criteria] || "inbox";
+
+    if (!acc[currentValueElement]) {
+      acc[currentValueElement] = [];
+    }
+    acc[currentValueElement].push(currentValue);
+    return acc;
+  }, {});
+};
 
 const HomePage = () => {
   const { todos, loading } = useSelectInboxTodos();
+  const groupedTodos = groupByProjects(todos);
+  const sections = Object.keys(groupedTodos)
+    .filter((s) => s !== "inbox")
+    .sort();
 
   return (
     <main className="py-8 px-14 space-y-6">
-      <section className="space-y-2 mx-auto max-w-4xl">
-        <PageHeading title="Inbox" />
-        <TodoList todos={loading ? [] : todos} hideDone />
+      <section className="space-y-8 mx-auto max-w-4xl">
+        {groupedTodos["inbox"] && (
+          <div className="space-y-2">
+            <PageHeading title="Inbox" />
+            <TodoList todos={groupedTodos["inbox"]} hideDone project={""} />
+          </div>
+        )}
+        {sections &&
+          sections.map((section) => (
+            <div key={section} className="space-y-2">
+              <ProjectsHeading title={section} />
+              <TodoList
+                todos={groupedTodos[section]}
+                hideDone
+                project={section}
+              />
+            </div>
+          ))}
+        {!loading && todos && todos.length === 0 && (
+          <div className="space-y-4">
+            <PageHeading title="You're done!" />
+            <AddTodo project={""} />
+          </div>
+        )}
       </section>
     </main>
   );