refactor: Add types to useRepositoriesList hook (#277)

* Initial commit of updating useRepositories hook types. * Added interface for RepoList api response. Need someone to critique this. * Moving repo type definitions to a new file called additional.d.ts so that the entire app has access to these types. * Corrected type errors from the change to RepoList type change. * Updated types and humanizing item count based on code review. Also renamed selectabletable file to repository table. Will reach out to TED for help with remaining code review updates. * Made some changes based on code review and pairing session with 0-vortex. * Added updates around simple error handling based on code review. * Making some changes based on code review feedback. * Removed duplicate type from types definition file. * Updated dashboard and repositories based on code review.
open-sauced · Sep 2, 2022 · 4f1a771 · 4f1a771
1 parent 06b1720
commit 4f1a771
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 151 deletions.
diff --git a/...ules/SelectableTable/repository-table.tsx → ...ules/RepositoryTable/repository-table.tsx b/...ules/SelectableTable/repository-table.tsx → ...ules/RepositoryTable/repository-table.tsx
@@ -12,7 +12,7 @@ import humanizeNumber from "../../../lib/utils/humanizeNumber";
 interface RepoSelectableTableProps {
   title: string;
   tableType: "participants";
-  rows: { name: string; stars: number; forks: number; persons: number, size: string }[];
+  rows: DBRepo[];
 }
 
 const iconSuite = {
@@ -79,7 +79,7 @@ const RepoSelectableTable: React.FC<RepoSelectableTableProps> = ({ title, tableT
           </thead>
           <tbody>
             <tr className="h-3"></tr>
-            {rows?.map(({ name, stars, persons, size }, index) => {
+            {rows?.map(({ name, stars, size }, index) => {
               return (
                 <tr
                   className={`hover:content-['${title}'] hover:bg-blue-100 cursor-pointer`}
@@ -95,7 +95,7 @@ const RepoSelectableTable: React.FC<RepoSelectableTableProps> = ({ title, tableT
                   <td className="text-right p-2">{humanizeNumber(stars)}</td>
                   <td className="text-right p-2">{humanizeNumber(12)}</td>
                   <td className="text-right p-2">{humanizeNumber(1234)}</td>
-                  <td className="text-right p-2">{humanizeNumber(parseInt(size))}</td>
+                  <td className="text-right p-2">{humanizeNumber(size)}</td>
                 </tr>
               );
             })}

diff --git a/components/organisms/Dashboard/dashboard.tsx b/components/organisms/Dashboard/dashboard.tsx
@@ -1,11 +1,53 @@
-import useDashBoardData from "lib/hooks/useDashboardData";
+import { useRepositoriesList } from "lib/hooks/useRepositoriesList";
 import Card from "../../atoms/Card/card";
 import DashboardScatterChart from "components/molecules/DashboardScatterChart/dashboard-scatter-chart";
 import HighlightCard from "components/molecules/HighlightCard/highlight-card";
 import humanizeNumber from "lib/utils/humanizeNumber";
+import { useEffect, useState } from "react";
 
 export const Dashboard = (): JSX.Element => {
-  const { scatterOptions, repoListMetaData, isLoading } = useDashBoardData();
+  const { meta, isError } = useRepositoriesList();
+  const [ itemCountText, setItemCountText ] = useState("Loading...");
+
+  const scatterOptions = {
+    xAxis: {},
+    yAxis: {},
+    series: [
+      {
+        symbolSize: 20,
+        data: [
+          [10.0, 8.04],
+          [8.07, 6.95],
+          [13.0, 7.58],
+          [9.05, 8.81],
+          [11.0, 8.33],
+          [14.0, 7.66],
+          [13.4, 6.81],
+          [10.0, 6.33],
+          [14.0, 8.96],
+          [12.5, 6.82],
+          [9.15, 7.2],
+          [11.5, 7.2],
+          [3.03, 4.23],
+          [12.2, 7.83],
+          [2.02, 4.47],
+          [1.05, 3.33],
+          [4.05, 4.96],
+          [6.03, 7.24],
+          [12.0, 6.26],
+          [12.0, 8.84],
+          [7.08, 5.82],
+          [5.02, 5.68]
+        ],
+        type: "scatter"
+      }
+    ]
+  };
+
+  useEffect(() => {
+    if(meta) setItemCountText(`of ${humanizeNumber(meta.itemCount)}`);
+    if(isError) setItemCountText("of unknown...");
+  }, [ isError, meta ]);
 
   return (
     <div className="flex flex-col w-full gap-4">
@@ -18,7 +60,7 @@ export const Dashboard = (): JSX.Element => {
           increased={true}
           numChanged={38}
           percentage={40}
-          percentageLabel={isLoading ? "Loading..." : `of ${humanizeNumber(repoListMetaData.itemCount)}`}
+          percentageLabel={itemCountText}
         />
         <HighlightCard
           url="/hacktoberfest/pull%20requests"
@@ -28,7 +70,7 @@ export const Dashboard = (): JSX.Element => {
           increased={true}
           numChanged={98}
           percentage={80}
-          percentageLabel={isLoading ? "Loading..." : `of ${humanizeNumber(repoListMetaData.itemCount)}`}
+          percentageLabel={itemCountText}
         />
         <HighlightCard
           url="/hacktoberfest/pull%20requests"
@@ -38,7 +80,7 @@ export const Dashboard = (): JSX.Element => {
           increased={false}
           numChanged={38}
           percentage={37}
-          percentageLabel={isLoading ? "Loading..." : `of ${humanizeNumber(repoListMetaData.itemCount)}`}
+          percentageLabel={itemCountText}
         />
         <HighlightCard
           url="/hacktoberfest/pull%20requests"
@@ -48,7 +90,7 @@ export const Dashboard = (): JSX.Element => {
           increased={false}
           numChanged={85}
           percentage={77}
-          percentageLabel={isLoading ? "Loading..." : `of ${humanizeNumber(repoListMetaData.itemCount)}`}
+          percentageLabel={itemCountText}
         />
       </section>
       <section className="flex flex-col lg:flex-row max-w-full gap-4 mb-6">

diff --git a/components/organisms/Repositories/repositories.tsx b/components/organisms/Repositories/repositories.tsx
@@ -1,15 +1,18 @@
 import Card from "../../atoms/Card/card";
-import SelectableTable from "components/molecules/SelectableTable/repository-table";
+import RepositoryTable from "components/molecules/RepositoryTable/repository-table";
 import {useRepositoriesList} from "lib/hooks/useRepositoriesList";
 
 const Reports = (): JSX.Element => {
-  const { repoList, isLoading } = useRepositoriesList();
-  const data = repoList.data || {data: []};
+  const { data, isError, isLoading } = useRepositoriesList();
 
   return (
     <div className="flex flex-col w-full gap-4">
       <Card className="w-full lg:w-[calc(50%-(1rem/2))] xl:!w-[calc(40%-(1rem/2))] px-1 xs:px-5 py-5">
-        {isLoading ? <>...Loading</> : <SelectableTable rows={data} title="Repositories" tableType="participants" />}
+        <>
+          {isLoading && <>...Loading</>}
+          {isError && <>An error has occured...</>}
+          {data && <RepositoryTable rows={data} title="Repositories" tableType="participants" />}
+        </>
       </Card>
     </div>
   );

diff --git a/lib/hooks/useDashboardData.ts b/lib/hooks/useDashboardData.ts
diff --git a/lib/hooks/useNav.ts b/lib/hooks/useNav.ts
@@ -1,10 +1,9 @@
 import { useRouter } from "next/router";
-import {useRepositoriesList} from "lib/hooks/useRepositoriesList";
+import { useRepositoriesList } from "lib/hooks/useRepositoriesList";
 
 const useNav = () => {
   const router = useRouter();
-  const { repoList, isLoading } = useRepositoriesList();
-  const meta = repoList.meta || {};
+  const { meta, isError, isLoading } = useRepositoriesList();
 
   const defaultTools = [
     {
@@ -18,7 +17,7 @@ const useNav = () => {
     },
     {
       name: "Repositories",
-      numOf: meta.itemCount
+      numOf: isLoading || isError ? 0 : meta.itemCount
     },
     {
       name: "Contributors",

diff --git a/lib/hooks/useRepositoriesList.ts b/lib/hooks/useRepositoriesList.ts
@@ -1,10 +1,16 @@
 import useSWR from "swr";
 
+interface PaginatedRepoResponse {
+  readonly data: DBRepo[];
+  readonly meta: Meta;
+}
+
 const useRepositoriesList = () => {
-  const { data, error, mutate } = useSWR("repo/list");
+  const { data, error, mutate } = useSWR<PaginatedRepoResponse, Error>("repo/list");
 
   return {
-    repoList: data || {data: []},
+    data: data?.data ?? [],
+    meta: data?.meta ?? { itemCount: 0 },
     isLoading: !error && !data,
     isError: !!error,
     mutate

diff --git a/next-types.d.ts b/next-types.d.ts
@@ -0,0 +1,11 @@
+// User defined type definitions. Please add type definitions for global types here
+
+interface DBRepo {
+  readonly size: number,
+  readonly stars: number,
+  readonly name: string
+}
+
+interface Meta {
+  readonly itemCount: number,
+}
diff --git a/stories/molecules/repository-table.stories.tsx b/stories/molecules/repository-table.stories.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import RepositoryTable from "../../components/molecules/RepositoryTable/repository-table";
+
+const storyConfig = {
+  title: "Design System/Molecules/Repository Table",
+  component: "RepositoryTable"
+};
+
+export default storyConfig;
+
+const testRows = [
+  {
+    name: "freecodecamp",
+    stars: 100,
+    size: 30984
+  },
+  {
+    name: "free-programming-books",
+    stars: 60,
+    size: 30984
+  },
+  {
+    name: "material-ui",
+    stars: 20,
+    size: 30984
+  },
+  {
+    name: "react",
+    stars: 100,
+    size: 30984
+  },
+  {
+    name: "java-design-patterns",
+    stars: 20,
+    size: 30984
+  }
+];
+
+// SelectableTable Template
+const RepositoryTableTemplate: ComponentStory<typeof RepositoryTable> = (args) => <RepositoryTable {...args} />;
+
+// SelectableTable Default
+export const Default = RepositoryTableTemplate.bind({});
+Default.args = {title: "Test Title", tableType: "participants", rows: testRows };
diff --git a/stories/molecules/selectable-table.stories.tsx b/stories/molecules/selectable-table.stories.tsx
diff --git a/tsconfig.json b/tsconfig.json
@@ -22,6 +22,6 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "next-types.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }