Add memoization on index
This commit is contained in:
parent
3eb0e0592d
commit
107ac563e0
@ -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,10 +44,7 @@ const HomePage = () => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{sections &&
|
{sections &&
|
||||||
sections.map(
|
sections.map((section) => (
|
||||||
(section) =>
|
|
||||||
groupedTodos[section].filter((t) => t.status !== true).length !==
|
|
||||||
0 && (
|
|
||||||
<div key={section} className="space-y-2">
|
<div key={section} className="space-y-2">
|
||||||
<ProjectsHeading title={section} />
|
<ProjectsHeading title={section} />
|
||||||
<TodoList
|
<TodoList
|
||||||
@ -44,8 +54,7 @@ const HomePage = () => {
|
|||||||
hideProject
|
hideProject
|
||||||
/>
|
/>
|
||||||
</div>
|
</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!" />
|
||||||
|
Loading…
Reference in New Issue
Block a user