chore: refactor code to avoid unnecessary renderings

alevidals · Apr 5, 2024 · 532715f · 532715f
1 parent d6a290b
commit 532715f
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 71 deletions.
diff --git a/src/__tests__/integration/planets.test.tsx b/src/__tests__/integration/planets.test.tsx
@@ -1,4 +1,5 @@
 import { PlanetsList } from "@/components/planets-list";
+import { PlanetsListsFilter } from "@/components/planets-lists-filter";
 import { render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeAll, describe, expect, test, vi } from "vitest";
@@ -61,7 +62,12 @@ describe("Planets page test", () => {
   });
 
   test("should display the new name after edit", async () => {
-    const screen = render(<PlanetsList planets={planets} />);
+    const screen = render(
+      <div>
+        <PlanetsListsFilter />
+        <PlanetsList planets={planets} />
+      </div>,
+    );
     const buttons = screen.getAllByRole("button");
     const firstPlanetDropdown = buttons[1];
 

diff --git a/src/app/planets/[id]/page.tsx b/src/app/planets/[id]/page.tsx
@@ -12,6 +12,13 @@ type Props = {
   params: { id: string };
 };
 
+const formatter = new Intl.ListFormat("en", {
+  style: "long",
+  type: "conjunction",
+});
+
+const numberFormatter = new Intl.NumberFormat("en");
+
 export default function PlanetsPage({ params }: Props) {
   const isDesktop = useMediaQuery("(min-width: 768px)");
 
@@ -35,13 +42,6 @@ export default function PlanetsPage({ params }: Props) {
     notFound();
   }
 
-  const formatter = new Intl.ListFormat("en", {
-    style: "long",
-    type: "conjunction",
-  });
-
-  const numberFormatter = new Intl.NumberFormat("en");
-
   const formattedDiameter = numberFormatter.format(planet.diameter);
   const formattedClimates = formatter.format(
     planet.climates.flatMap(({ climate }, index) => {

diff --git a/src/app/planets/page.tsx b/src/app/planets/page.tsx
@@ -1,4 +1,5 @@
 import { PlanetsList } from "@/components/planets-list";
+import { PlanetsListsFilter } from "@/components/planets-lists-filter";
 import { getPlanets } from "@/lib/planets";
 import { Suspense } from "react";
 
@@ -8,6 +9,7 @@ export default async function PlanetsPage() {
   return (
     <main>
       <Suspense>
+        <PlanetsListsFilter />
         <PlanetsList planets={planets} />
       </Suspense>
     </main>

diff --git a/src/components/planet-card.tsx b/src/components/planet-card.tsx
@@ -16,13 +16,13 @@ type Props = {
   planet: Planet;
 };
 
-export function PlanetCard({ planet }: Props) {
-  const listFormatter = new Intl.ListFormat("en", {
-    style: "long",
-    type: "conjunction",
-  });
-  const numberFormatter = new Intl.NumberFormat("en");
+const listFormatter = new Intl.ListFormat("en", {
+  style: "long",
+  type: "conjunction",
+});
+const numberFormatter = new Intl.NumberFormat("en");
 
+export function PlanetCard({ planet }: Props) {
   return (
     <Card className="hover:border-primary overflow-hidden relative">
       <CardHeader className="flex flex-row justify-between items-center space-y-0 gap-x-4">

diff --git a/src/components/planets-list.tsx b/src/components/planets-list.tsx
@@ -2,7 +2,6 @@
 
 import { Pagination } from "@/components/pagination";
 import { PlanetCard } from "@/components/planet-card";
-import { PlanetsListsFilter } from "@/components/planets-lists-filter";
 import { HoverBorderGradient } from "@/components/ui/hover-border-gradient";
 
 import { planetsAtom } from "@/lib/atoms";
@@ -17,10 +16,81 @@ type Props = {
   planets: Planet[];
 };
 
+type FilterAndSortPlanetsArgs = {
+  planets: Planet[];
+  search: string;
+  orderBy: OrderByField;
+  order: Order;
+  page: number;
+};
+
+function filterAndSortPlanets(args: FilterAndSortPlanetsArgs) {
+  const { planets, search, orderBy, order, page } = args;
+
+  let filteredAndSortedPlanets = [...(planets ?? [])];
+
+  if (search) {
+    filteredAndSortedPlanets = planets?.filter(
+      (planet) =>
+        planet.name.toLowerCase().includes(search.toLowerCase()) ||
+        planet.climates.some(({ climate }) =>
+          climate.toLocaleLowerCase().includes(search.toLowerCase()),
+        ) ||
+        planet.terrains.some(({ terrain }) =>
+          terrain.toLocaleLowerCase().includes(search.toLowerCase()),
+        ),
+    );
+  }
+
+  if (orderBy) {
+    filteredAndSortedPlanets = filteredAndSortedPlanets.sort((a, b) => {
+      if (orderBy === "name") {
+        return a.name.localeCompare(b.name);
+      }
+
+      if (orderBy === "diameter") {
+        return a.diameter - b.diameter;
+      }
+
+      if (orderBy === "climates") {
+        return a.climates.join().localeCompare(b.climates.join());
+      }
+
+      if (orderBy === "terrains") {
+        return a.terrains.join().localeCompare(b.terrains.join());
+      }
+
+      if (orderBy === "residents") {
+        return a.residents.length - b.residents.length;
+      }
+
+      return 0;
+    });
+
+    if (order === "desc") {
+      filteredAndSortedPlanets = filteredAndSortedPlanets.reverse();
+    }
+  }
+
+  const totalItems = filteredAndSortedPlanets.length;
+
+  const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
+
+  filteredAndSortedPlanets = filteredAndSortedPlanets.slice(
+    (page - 1) * ITEMS_PER_PAGE,
+    page * ITEMS_PER_PAGE,
+  );
+
+  return {
+    filteredAndSortedPlanets,
+    totalItems,
+    totalPages,
+  };
+}
+
 function PlanetsNotFound() {
   return (
     <>
-      <PlanetsListsFilter />
       <div className="flex flex-col items-center justify-center h-96 mx-auto max-w-xl text-balance text-center">
         <p className="text-lg">
           "Looks like the Force isn't strong with this search! Try altering your
@@ -42,7 +112,6 @@ function PlanetsNotFound() {
 function EmptyPlanetsList() {
   return (
     <>
-      <PlanetsListsFilter />
       <div className="flex flex-col items-center justify-center h-96 mx-auto max-w-xl text-balance text-center">
         <p className="text-lg">
           "Exploring a galaxy far, far away... But for now, our planetary
@@ -57,7 +126,6 @@ function EmptyPlanetsList() {
 function PageOutOfBound() {
   return (
     <>
-      <PlanetsListsFilter />
       <div className="flex items-center justify-center h-96 mx-auto max-w-xl text-balance text-center">
         <div>
           <p className="text-lg">
@@ -103,60 +171,15 @@ export function PlanetsList({ planets: initialPlanets }: Props) {
     );
   }
 
-  let filteredAndSortedPlanets = [...(planets ?? [])];
-
-  if (search) {
-    filteredAndSortedPlanets = planets?.filter(
-      (planet) =>
-        planet.name.toLowerCase().includes(search.toLowerCase()) ||
-        planet.climates.some(({ climate }) =>
-          climate.toLocaleLowerCase().includes(search.toLowerCase()),
-        ) ||
-        planet.terrains.some(({ terrain }) =>
-          terrain.toLocaleLowerCase().includes(search.toLowerCase()),
-        ),
-    );
-  }
-
-  if (orderBy) {
-    filteredAndSortedPlanets = filteredAndSortedPlanets.sort((a, b) => {
-      if (orderBy === "name") {
-        return a.name.localeCompare(b.name);
-      }
-
-      if (orderBy === "diameter") {
-        return a.diameter - b.diameter;
-      }
-
-      if (orderBy === "climates") {
-        return a.climates.join().localeCompare(b.climates.join());
-      }
-
-      if (orderBy === "terrains") {
-        return a.terrains.join().localeCompare(b.terrains.join());
-      }
-
-      if (orderBy === "residents") {
-        return a.residents.length - b.residents.length;
-      }
-
-      return 0;
+  const { filteredAndSortedPlanets, totalItems, totalPages } =
+    filterAndSortPlanets({
+      planets,
+      search,
+      orderBy,
+      order,
+      page,
     });
 
-    if (order === "desc") {
-      filteredAndSortedPlanets = filteredAndSortedPlanets.reverse();
-    }
-  }
-
-  const totalItems = filteredAndSortedPlanets.length;
-
-  const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
-
-  filteredAndSortedPlanets = filteredAndSortedPlanets.slice(
-    (page - 1) * ITEMS_PER_PAGE,
-    page * ITEMS_PER_PAGE,
-  );
-
   if (
     totalPages !== 0 &&
     (page > totalPages || filteredAndSortedPlanets.length === 0)
@@ -167,7 +190,6 @@ export function PlanetsList({ planets: initialPlanets }: Props) {
   if (filteredAndSortedPlanets.length > 0) {
     return (
       <>
-        <PlanetsListsFilter />
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
           {filteredAndSortedPlanets.map((planet) => (
             <PlanetCard planet={planet} key={planet.id} />

diff --git a/src/components/planets-lists-filter.tsx b/src/components/planets-lists-filter.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Button } from "@/components/ui/button";
 import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
 import { Input } from "@/components/ui/input";