Add sections
This commit is contained in:
parent
3fa4714ba0
commit
6ed71eb8f8
@ -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);
|
||||
}}
|
||||
|
@ -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
|
||||
|
@ -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} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -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">
|
||||
<section className="space-y-8 mx-auto max-w-4xl">
|
||||
{groupedTodos["inbox"] && (
|
||||
<div className="space-y-2">
|
||||
<PageHeading title="Inbox" />
|
||||
<TodoList todos={loading ? [] : todos} hideDone />
|
||||
<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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user