From 107ac563e0cc124c97e08a61e57999567426d12f Mon Sep 17 00:00:00 2001
From: kjuulh <contact@kjuulh.io>
Date: Sun, 21 Nov 2021 17:13:59 +0100
Subject: [PATCH] Add memoization on index

---
 src/client/src/pages/index.tsx | 47 ++++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/client/src/pages/index.tsx b/src/client/src/pages/index.tsx
index 4dfcd4a..91350c2 100644
--- a/src/client/src/pages/index.tsx
+++ b/src/client/src/pages/index.tsx
@@ -4,18 +4,31 @@ 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";
 
 const HomePage = () => {
   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) {
     return "loading...";
   }
 
-  const groupedTodos = groupByProjects(data);
-  const sections = Object.keys(groupedTodos)
-    .filter((s) => s !== "inbox")
-    .sort();
   return (
     <main className="py-8 px-14 space-y-6">
       <section className="space-y-8 mx-auto max-w-4xl">
@@ -31,21 +44,17 @@ const HomePage = () => {
           </div>
         )}
         {sections &&
-          sections.map(
-            (section) =>
-              groupedTodos[section].filter((t) => t.status !== true).length !==
-                0 && (
-                <div key={section} className="space-y-2">
-                  <ProjectsHeading title={section} />
-                  <TodoList
-                    todos={groupedTodos[section]}
-                    hideDone
-                    project={section}
-                    hideProject
-                  />
-                </div>
-              )
-          )}
+          sections.map((section) => (
+            <div key={section} className="space-y-2">
+              <ProjectsHeading title={section} />
+              <TodoList
+                todos={groupedTodos[section]}
+                hideDone
+                project={section}
+                hideProject
+              />
+            </div>
+          ))}
         {data && data.length === 0 && (
           <div className="space-y-4">
             <PageHeading title="You're done!" />