Added hide
This commit is contained in:
parent
9e88b973fb
commit
05c4818877
@ -2,5 +2,6 @@
|
||||
<project version="4">
|
||||
<component name="PrettierConfiguration">
|
||||
<option name="myRunOnSave" value="true" />
|
||||
<option name="myRunOnReformat" value="true" />
|
||||
</component>
|
||||
</project>
|
@ -2,8 +2,14 @@ import { FC } from "react";
|
||||
|
||||
interface PageHeadingProps {
|
||||
title: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export const PageHeading: FC<PageHeadingProps> = ({ title }) => (
|
||||
<h3 className="font-bold text-xl tracking-wide">{title}</h3>
|
||||
export const PageHeading: FC<PageHeadingProps> = ({ title, onClick }) => (
|
||||
<h3
|
||||
className="font-bold text-xl tracking-wide hover:underline"
|
||||
onClick={onClick}
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
);
|
||||
|
@ -1,3 +1,8 @@
|
||||
export const ProjectsHeading = (props: { title: string }) => (
|
||||
<h5 className="text-sm font-bold">{props.title}</h5>
|
||||
export const ProjectsHeading = (props: {
|
||||
title: string;
|
||||
onClick: () => void;
|
||||
}) => (
|
||||
<h5 className="text-sm font-bold hover:underline" onClick={props.onClick}>
|
||||
{props.title}
|
||||
</h5>
|
||||
);
|
||||
|
@ -2,13 +2,14 @@ import { Todo } from "@src/core/entities/todo";
|
||||
import { TodoItem } from "@src/components/todos/todoItem";
|
||||
import { AddTodo } from "@src/components/todos/addTodo";
|
||||
import { useUpdateTodo } from "@src/presentation/hooks/socketHooks";
|
||||
import { useMemo } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
|
||||
export const TodoList = (props: {
|
||||
todos: Todo[];
|
||||
hideDone: boolean;
|
||||
hideProject: boolean;
|
||||
project: string;
|
||||
folded: boolean;
|
||||
}) => {
|
||||
const { updateTodo } = useUpdateTodo();
|
||||
|
||||
@ -25,6 +26,8 @@ export const TodoList = (props: {
|
||||
|
||||
return (
|
||||
<>
|
||||
{props.folded && <div>...</div>}
|
||||
<div className={`space-y-2 ${props.folded ? "hidden" : "block"}`}>
|
||||
<ul id="inbox">
|
||||
{todos.map((t, i) => (
|
||||
<li key={i}>
|
||||
@ -39,6 +42,7 @@ export const TodoList = (props: {
|
||||
))}
|
||||
</ul>
|
||||
<AddTodo project={props.project} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -4,7 +4,46 @@ import { ProjectsHeading } from "@src/components/common/headings/projectsHeading
|
||||
import { groupByProjects } from "@src/core/actions/utility/groupByProjects";
|
||||
import { todosApi } from "@src/infrastructure/apis/todosApi";
|
||||
import { AddTodo } from "@src/components/todos/addTodo";
|
||||
import { useMemo } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
|
||||
function Inbox(props: { groupedTodos: any }) {
|
||||
const [folded, setFolded] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<PageHeading
|
||||
title="Inbox"
|
||||
onClick={() => setFolded((folded) => !folded)}
|
||||
/>
|
||||
<TodoList
|
||||
todos={props.groupedTodos["inbox"]}
|
||||
hideDone
|
||||
project={""}
|
||||
hideProject={false}
|
||||
folded={folded}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProjectItem(props: { title: string; groupedTodos: any }) {
|
||||
const [folded, setFolded] = useState(false);
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<ProjectsHeading
|
||||
title={props.title}
|
||||
onClick={() => setFolded((folded) => !folded)}
|
||||
/>
|
||||
<TodoList
|
||||
todos={props.groupedTodos[props.title]}
|
||||
hideDone
|
||||
project={props.title}
|
||||
hideProject
|
||||
folded={folded}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const HomePage = () => {
|
||||
const { data, isLoading } = todosApi.useGetActiveTodosQuery();
|
||||
@ -32,28 +71,14 @@ const HomePage = () => {
|
||||
return (
|
||||
<main className="py-8 px-14 space-y-6">
|
||||
<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={""}
|
||||
hideProject={false}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{groupedTodos["inbox"] && <Inbox groupedTodos={groupedTodos} />}
|
||||
{sections &&
|
||||
sections.map((section) => (
|
||||
<div key={section} className="space-y-2">
|
||||
<ProjectsHeading title={section} />
|
||||
<TodoList
|
||||
todos={groupedTodos[section]}
|
||||
hideDone
|
||||
project={section}
|
||||
hideProject
|
||||
<ProjectItem
|
||||
key={section}
|
||||
title={section}
|
||||
groupedTodos={groupedTodos}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{onlyActiveTodos && onlyActiveTodos.length === 0 && (
|
||||
<div className="space-y-4">
|
||||
|
Loading…
Reference in New Issue
Block a user