Add memoization on index

This commit is contained in:
Kasper Juul Hermansen 2021-11-21 17:13:59 +01:00
parent 3eb0e0592d
commit 107ac563e0
Signed by: kjuulh
GPG Key ID: 0F95C140730F2F23

View File

@ -4,18 +4,31 @@ import { ProjectsHeading } from "@src/components/common/headings/projectsHeading
import { groupByProjects } from "@src/core/actions/utility/groupByProjects"; import { groupByProjects } from "@src/core/actions/utility/groupByProjects";
import { todosApi } from "@src/infrastructure/apis/todosApi"; import { todosApi } from "@src/infrastructure/apis/todosApi";
import { AddTodo } from "@src/components/todos/addTodo"; import { AddTodo } from "@src/components/todos/addTodo";
import { useMemo } from "react";
const HomePage = () => { const HomePage = () => {
const { data, isLoading } = todosApi.useGetActiveTodosQuery(); const { data, isLoading } = todosApi.useGetActiveTodosQuery();
const onlyActiveTodos = useMemo(
() => data.filter((t) => t.status === false),
[data]
);
const groupedTodos = useMemo(
() => groupByProjects(onlyActiveTodos),
[onlyActiveTodos]
);
const sections = useMemo(
() =>
Object.keys(groupedTodos)
.filter((s) => s !== "inbox")
.sort(),
[groupedTodos]
);
if (isLoading) { if (isLoading) {
return "loading..."; return "loading...";
} }
const groupedTodos = groupByProjects(data);
const sections = Object.keys(groupedTodos)
.filter((s) => s !== "inbox")
.sort();
return ( return (
<main className="py-8 px-14 space-y-6"> <main className="py-8 px-14 space-y-6">
<section className="space-y-8 mx-auto max-w-4xl"> <section className="space-y-8 mx-auto max-w-4xl">
@ -31,21 +44,17 @@ const HomePage = () => {
</div> </div>
)} )}
{sections && {sections &&
sections.map( sections.map((section) => (
(section) => <div key={section} className="space-y-2">
groupedTodos[section].filter((t) => t.status !== true).length !== <ProjectsHeading title={section} />
0 && ( <TodoList
<div key={section} className="space-y-2"> todos={groupedTodos[section]}
<ProjectsHeading title={section} /> hideDone
<TodoList project={section}
todos={groupedTodos[section]} hideProject
hideDone />
project={section} </div>
hideProject ))}
/>
</div>
)
)}
{data && data.length === 0 && ( {data && data.length === 0 && (
<div className="space-y-4"> <div className="space-y-4">
<PageHeading title="You're done!" /> <PageHeading title="You're done!" />