fix: Repo count (#244)

* feat(data): add repo data again data was removed due to merge conflicts, added it back * fixes types * adds repo count * replace useRepositoriesList
open-sauced · Aug 21, 2022 · d59eef8 · d59eef8
1 parent acde3c1
commit d59eef8
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 232 deletions.
diff --git a/...ules/SelectableTable/selectable-table.tsx → ...ules/SelectableTable/repository-table.tsx b/...ules/SelectableTable/selectable-table.tsx → ...ules/SelectableTable/repository-table.tsx
@@ -12,7 +12,7 @@ import humanizeNumber from "../../../lib/utils/humanizeNumber";
 interface RepoSelectableTableProps {
   title: string;
   tableType: "participants";
-  rows: { title: string; stars: number; forks: number; persons: number }[];
+  rows: { name: string; stars: number; forks: number; persons: number, size: string }[];
 }
 
 const iconSuite = {
@@ -79,7 +79,7 @@ const RepoSelectableTable: React.FC<RepoSelectableTableProps> = ({ title, tableT
           </thead>
           <tbody>
             <tr className="h-3"></tr>
-            {rows?.map(({ title, stars, persons }, index) => {
+            {rows?.map(({ name, stars, persons, size }, index) => {
               return (
                 <tr
                   className={`hover:content-['${title}'] hover:bg-blue-100 cursor-pointer`}
@@ -90,12 +90,12 @@ const RepoSelectableTable: React.FC<RepoSelectableTableProps> = ({ title, tableT
                   }}
                 >
                   <td className="flex flex-row text-left p-2" ref={(element) => addCheckboxToRef(element)}>
-                    <Checkbox label="" /> {divSize > 0 && divSize < 350 ? truncateString(title, 3) : title}
+                    <Checkbox label="" /> {divSize > 0 && divSize < 350 ? truncateString(name, 3) : name}
                   </td>
                   <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">{persons}</td>
+                  <td className="text-right p-2">{humanizeNumber(parseInt(size))}</td>
                 </tr>
               );
             })}

diff --git a/components/organisms/Repositories/repositories.tsx b/components/organisms/Repositories/repositories.tsx
@@ -1,13 +1,15 @@
 import Card from "../../atoms/Card/card";
-import SelectableTable from "components/molecules/SelectableTable/selectable-table";
-import useRepositoriesList from "lib/hooks/useRepositoriesList";
+import SelectableTable from "components/molecules/SelectableTable/repository-table";
+import {useRepositoriesList} from "lib/hooks/useRepositoriesList";
 
 const Reports = (): JSX.Element => {
-  const { repositoriesList } = useRepositoriesList();
+  const { repoList, isLoading } = useRepositoriesList();
+  const data = repoList.data || {data: []};
+
   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">
-        <SelectableTable rows={repositoriesList} title="Repositories" tableType="participants" />
+        {isLoading ? <>...Loading</> : <SelectableTable rows={data} title="Repositories" tableType="participants" />}
       </Card>
     </div>
   );

diff --git a/components/organisms/ToolList/nav.tsx b/components/organisms/ToolList/nav.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Link from "next/link";
+import humanizeNumber from "../../../lib/utils/humanizeNumber";
 
 type toolListArray = {
   name: string;
@@ -40,7 +41,7 @@ const Nav: React.FC<NavProps> = ({ toolList, selectedTool = "dashboard", selecte
               {
                 tool.numOf &&
                   <div className="ml-2 py-0.5 px-1.5 h-fit bg-slate-200 text-slate-500 border rounded-full text-xs font-semibold">
-                    {tool.numOf}
+                    {humanizeNumber(tool.numOf)}
                   </div>
               }
             </div>

diff --git a/lib/hooks/useNav.ts b/lib/hooks/useNav.ts
@@ -1,7 +1,11 @@
 import { useRouter } from "next/router";
+import {useRepositoriesList} from "lib/hooks/useRepositoriesList";
+import humanizeNumber from "../utils/humanizeNumber";
 
 const useNav = () => {
   const router = useRouter();
+  const { repoList, isLoading } = useRepositoriesList();
+  const meta = repoList.meta || {};
 
   const defaultTools = [
     {
@@ -15,7 +19,7 @@ const useNav = () => {
     },
     {
       name: "Repositories",
-      numOf: 20
+      numOf: meta.itemCount
     },
     {
       name: "Contributors",
@@ -35,4 +39,4 @@ const useNav = () => {
   };
 };
 
-export default useNav;
+export default useNav;
diff --git a/lib/hooks/useRepoList.ts b/lib/hooks/useRepoList.ts
diff --git a/lib/hooks/useRepositoriesList.ts b/lib/hooks/useRepositoriesList.ts
@@ -1,201 +1,14 @@
+import useSWR from "swr";
+
 const useRepositoriesList = () => {
-  const repositoriesList = [
-    {
-      title: "freecodecamp",
-      stars: 100,
-      forks: 20,
-      persons: 40,
-      unknown: 5
-    },
-    {
-      title: "free-programming-books",
-      stars: 60,
-      forks: 10,
-      persons: 20,
-      unknown: 5
-    },
-    {
-      title: "material-ui",
-      stars: 20,
-      forks: 30,
-      persons: 10,
-      unknown: 2
-    },
-    {
-      title: "react",
-      stars: 100,
-      forks: 20,
-      persons: 30,
-      unknown: 10
-    },
-    {
-      title: "java-design-patterns",
-      stars: 20,
-      forks: 14,
-      persons: 10,
-      unknown: 0
-    },{
-      title: "freecodecamp",
-      stars: 100,
-      forks: 20,
-      persons: 40,
-      unknown: 5
-    },
-    {
-      title: "free-programming-books",
-      stars: 60,
-      forks: 10,
-      persons: 20,
-      unknown: 5
-    },
-    {
-      title: "material-ui",
-      stars: 20,
-      forks: 30,
-      persons: 10,
-      unknown: 2
-    },
-    {
-      title: "react",
-      stars: 100,
-      forks: 20,
-      persons: 30,
-      unknown: 10
-    },
-    {
-      title: "java-design-patterns",
-      stars: 20,
-      forks: 14,
-      persons: 10,
-      unknown: 0
-    },{
-      title: "freecodecamp",
-      stars: 100,
-      forks: 20,
-      persons: 40,
-      unknown: 5
-    },
-    {
-      title: "free-programming-books",
-      stars: 60,
-      forks: 10,
-      persons: 20,
-      unknown: 5
-    },
-    {
-      title: "material-ui",
-      stars: 20,
-      forks: 30,
-      persons: 10,
-      unknown: 2
-    },
-    {
-      title: "react",
-      stars: 100,
-      forks: 20,
-      persons: 30,
-      unknown: 10
-    },
-    {
-      title: "java-design-patterns",
-      stars: 20,
-      forks: 14,
-      persons: 10,
-      unknown: 0
-    },{
-      title: "freecodecamp",
-      stars: 100,
-      forks: 20,
-      persons: 40,
-      unknown: 5
-    },
-    {
-      title: "free-programming-books",
-      stars: 60,
-      forks: 10,
-      persons: 20,
-      unknown: 5
-    },
-    {
-      title: "material-ui",
-      stars: 20,
-      forks: 30,
-      persons: 10,
-      unknown: 2
-    },
-    {
-      title: "react",
-      stars: 100,
-      forks: 20,
-      persons: 30,
-      unknown: 10
-    },
-    {
-      title: "java-design-patterns",
-      stars: 20,
-      forks: 14,
-      persons: 10,
-      unknown: 0
-    },{
-      title: "freecodecamp",
-      stars: 100,
-      forks: 20,
-      persons: 40,
-      unknown: 5
-    },
-    {
-      title: "free-programming-books",
-      stars: 60,
-      forks: 10,
-      persons: 20,
-      unknown: 5
-    },
-    {
-      title: "material-ui",
-      stars: 20,
-      forks: 30,
-      persons: 10,
-      unknown: 2
-    },
-    {
-      title: "react",
-      stars: 100,
-      forks: 20,
-      persons: 30,
-      unknown: 10
-    },
-    {
-      title: "java-design-patterns",
-      stars: 20,
-      forks: 14,
-      persons: 10,
-      unknown: 0
-    },{
-      title: "freecodecamp",
-      stars: 100,
-      forks: 20,
-      persons: 40,
-      unknown: 5
-    },
-    {
-      title: "free-programming-books",
-      stars: 60,
-      forks: 10,
-      persons: 20,
-      unknown: 5
-    },
-    {
-      title: "material-ui",
-      stars: 20,
-      forks: 30,
-      persons: 10,
-      unknown: 2
-    }
-  ];
+  const { data, error, mutate } = useSWR("repos/list");
 
   return {
-    repositoriesList
+    repoList: data || {data: []},
+    isLoading: !error && !data,
+    isError: !!error,
+    mutate
   };
 };
 
-export default useRepositoriesList;
+export {useRepositoriesList};
diff --git a/stories/molecules/selectable-table.stories.tsx b/stories/molecules/selectable-table.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import SelectableTable from "../../components/molecules/SelectableTable/selectable-table";
+import SelectableTable from "../../components/molecules/SelectableTable/repository-table";
 
 const storyConfig = {
   title: "Design System/Molecules/Selectable Table",
@@ -11,34 +11,39 @@ export default storyConfig;
 
 const testRows = [
   {
-    title: "freecodecamp",
+    name: "freecodecamp",
     stars: 100,
     forks: 20,
-    persons: 5
+    persons: 5,
+    size: "30984"
   },
   {
-    title: "free-programming-books",
+    name: "free-programming-books",
     stars: 60,
     forks: 10,
-    persons: 5
+    persons: 5,
+    size: "30984"
   },
   {
-    title: "material-ui",
+    name: "material-ui",
     stars: 20,
     forks: 30,
-    persons: 2
+    persons: 2,
+    size: "30984"
   },
   {
-    title: "react",
+    name: "react",
     stars: 100,
     forks: 20,
-    persons: 10
+    persons: 10,
+    size: "30984"
   },
   {
-    title: "java-design-patterns",
+    name: "java-design-patterns",
     stars: 20,
     forks: 14,
-    persons: 0
+    persons: 0,
+    size: "30984"
   }
 ];
 

diff --git a/stories/organisms/tool-nav.stories.tsx b/stories/organisms/tool-nav.stories.tsx
@@ -24,4 +24,4 @@ const ToolNavTemplate: ComponentStory<typeof Nav> = (args) => <Nav {...args}/>;
 
 //Default ToolNav
 export const Default = ToolNavTemplate.bind({});
-Default.args = { filterName: "test", selectedTool: "test 1", toolList: testTools };
+Default.args = { filterName: "test", selectedTool: "test 1", toolList: testTools };