Add sections
Some checks failed
continuous-integration/drone/pr Build is passing
continuous-integration/drone/push Build is failing

This commit is contained in:
Kasper Juul Hermansen 2021-11-15 19:26:48 +01:00
parent 3fa4714ba0
commit 6ed71eb8f8
Signed by: kjuulh
GPG Key ID: 0F95C140730F2F23
4 changed files with 58 additions and 8 deletions

View File

@ -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);
}}

View File

@ -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

View File

@ -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} />
</>
);
};

View File

@ -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>
);