Merge pull request #11 from kk-watanabe/add_connect_API_and_page

Add connect api and page
zukki30 · May 25, 2022 · 84769d0 · 84769d0 · vercel · May 25, 2022
2 parents 8d2a374 + 2f0a312
commit 84769d0
Show file tree

Hide file tree

Showing 12 changed files with 234 additions and 304 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="robots" content="none" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>My cost check</title>
   </head>

diff --git a/src/Router.tsx b/src/Router.tsx
@@ -2,6 +2,7 @@ import { Route, ReactLocation } from "@tanstack/react-location";
 import Home from "@/pages/Home";
 import GraphDetail from "@/pages/GraphDetail";
 
+// const history = createHashHistory();
 export const location = new ReactLocation();
 
 export const routes: Route[] = [
@@ -10,7 +11,16 @@ export const routes: Route[] = [
     element: <Home />,
   },
   {
-    path: ":id",
-    element: <GraphDetail />,
+    path: "graph",
+    children: [
+      {
+        path: "/",
+        element: <Home />,
+      },
+      {
+        path: ":id",
+        element: <GraphDetail />,
+      },
+    ],
   },
 ];
diff --git a/src/components/common/Loading.tsx b/src/components/common/Loading.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+import styled from "styled-components";
+import tw from "twin.macro";
+
+const LoadingContainer = styled.header`
+  ${tw`
+    w-full
+    h-screen
+    flex
+    justify-center
+    content-center
+  `}
+`;
+
+const LoadingIcon = styled.div`
+  ${tw`
+    animate-spin
+    h-10
+    w-10
+    border-4
+    border-sky-500
+    rounded-full
+    border-t-transparent
+  `}
+`;
+const Loading = () => {
+  return (
+    <LoadingContainer>
+      <LoadingIcon />
+    </LoadingContainer>
+  );
+};
+
+export default Loading;
diff --git a/src/hooks/swr-hooks.ts b/src/hooks/swr-hooks.ts
@@ -0,0 +1,31 @@
+import useSWR from "swr";
+import { collection, getDocs, query } from "firebase/firestore";
+import { firestore } from "@/providers/FirebaseProvider";
+import { buildCosts } from "@/utils/type-utils";
+
+const useFetcher = async (url: string) => {
+  const costsResult = await getDocs(query(collection(firestore, url)));
+
+  return costsResult.docs.map(buildCosts);
+};
+
+/**
+ * useSWR を使用する
+ * @returns
+ */
+export const useFetchCostsWithSWR = (url: string) => {
+  const {
+    data,
+    error,
+    mutate: setCosts,
+  } = useSWR(url, useFetcher, {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+  });
+  const costs = data === undefined ? [] : data;
+  const isLoading = !error && !data;
+  const isError = error;
+
+  return { costs, isLoading, isError, setCosts };
+};
diff --git a/src/pages/GraphDetail.tsx b/src/pages/GraphDetail.tsx
@@ -5,7 +5,12 @@ import { useNavigate, useLocation } from "@tanstack/react-location";
 import styled from "styled-components";
 import tw from "twin.macro";
 
-import { graphBgColors, graphBorderColors, ColorType } from "@/const/color";
+import { useUserContext } from "@/providers/UserProvider";
+import { useFetchCostsWithSWR } from "@/hooks/swr-hooks";
+
+import { ColorType } from "@/const/color";
+
+import Loading from "@/components/common/Loading";
 
 import Button from "@/components/elements/Button";
 import Title from "@/components/elements/Title";
@@ -14,7 +19,7 @@ import Table from "@/components/elements/Table";
 
 import VerticalBarChart, { VerticalBarChartData } from "@/components/graph/VerticalBarChart";
 
-import { getColorType } from "@/utils/color-utils";
+import { getColorType, getBgColoos, getBorderColoos } from "@/utils/color-utils";
 
 const DetailContainer = styled.div`
   ${tw`
@@ -38,104 +43,15 @@ const DetailButton = styled(Button)`
   `}
 `;
 
-const dummyCosts: Cost[] = [
-  {
-    id: "credit-card-a",
-    name: "クレジットカードA",
-    dates: [
-      {
-        label: "2020/08",
-        amount: 12300,
-      },
-      {
-        label: "2020/09",
-        amount: 23300,
-      },
-      {
-        label: "2020/10",
-        amount: 10000,
-      },
-      {
-        label: "2020/11",
-        amount: 8300,
-      },
-      {
-        label: "2020/12",
-        amount: 15700,
-      },
-      {
-        label: "2021/01",
-        amount: 19000,
-      },
-    ],
-  },
-  {
-    id: "credit-card-b",
-    name: "クレジットカードB",
-    dates: [
-      {
-        label: "2020/08",
-        amount: 10000,
-      },
-      {
-        label: "2020/09",
-        amount: 13300,
-      },
-      {
-        label: "2020/10",
-        amount: 4000,
-      },
-      {
-        label: "2020/11",
-        amount: 6300,
-      },
-      {
-        label: "2020/12",
-        amount: 4700,
-      },
-      {
-        label: "2021/01",
-        amount: 9000,
-      },
-    ],
-  },
-  {
-    id: "credit-card-c",
-    name: "クレジットカードC",
-    dates: [
-      {
-        label: "2020/08",
-        amount: 1500,
-      },
-      {
-        label: "2020/09",
-        amount: 1300,
-      },
-      {
-        label: "2020/10",
-        amount: 3000,
-      },
-      {
-        label: "2020/11",
-        amount: 3300,
-      },
-      {
-        label: "2020/12",
-        amount: 2700,
-      },
-      {
-        label: "2021/01",
-        amount: 4500,
-      },
-    ],
-  },
-];
-
 const GraphDetail = () => {
+  const { uid } = useUserContext();
+  const costsUrl = `users/${uid}/costs`;
+  const { costs, isLoading } = useFetchCostsWithSWR(costsUrl);
+
   const navigate = useNavigate();
   const location = useLocation();
-  const pageId = location.current.pathname.replace("/", "");
 
+  const [cost, setCost] = useState<Cost | null>(null);
   const [labels, setLabels] = useState<string[]>([]);
   const [datasets, setDatasets] = useState<VerticalBarChartData[]>([]);
   const data = {
@@ -152,47 +68,58 @@ const GraphDetail = () => {
   };
 
   useEffect(() => {
-    const result = dummyCosts;
-    const findResult = result.find((r) => r.id === pageId) as Cost;
-    const findIndex = result.findIndex((r) => r.id === pageId);
-
-    setColorType(getColorType(findIndex));
-
-    const labels = findResult.dates.map((date) => date.label);
-    setLabels(labels);
-    setTableHeadData(["", ...labels]);
-
-    const amounts = findResult.dates.map((date) => date.amount);
-    setDatasets([
-      {
-        label: findResult.name,
-        data: amounts,
-        backgroundColor: graphBgColors[findIndex],
-        borderColor: graphBorderColors[findIndex],
-        borderWidth: 1,
-      },
-    ]);
-    const tableBodyDataCells = [findResult.name, ...amounts.map((d) => d.toLocaleString())];
-    setTableBodyData([tableBodyDataCells]);
-  }, [pageId]);
-
-  return (
-    <DetailContainer>
-      <Title text="クレジットカードAの1年間のデータ" level={1} color={colorType} />
-
-      <DetailBody>
-        <Card>
-          <VerticalBarChart data={data} />
-        </Card>
-      </DetailBody>
-
-      <DetailBody>
-        <Table headColor={colorType} headData={tableHeadData} bodyData={tableBodyData} />
-      </DetailBody>
-
-      <DetailButton label="TOPに戻る" color="normal" onClick={handleClick} />
-    </DetailContainer>
-  );
+    if (costs.length > 0) {
+      const bgColors = getBgColoos(costs);
+      const borderColors = getBorderColoos(costs);
+
+      const pageId = location.current.pathname.replace("/graph/", "");
+      const findResult = costs.find((cost) => cost.id === pageId) as Cost;
+      setCost(findResult);
+
+      const findIndex = costs.findIndex((cost) => cost.id === pageId);
+
+      setColorType(getColorType(bgColors[findIndex]));
+
+      const labels = findResult.dates.map((date) => date.label);
+      setLabels(labels);
+      setTableHeadData(["", ...labels]);
+
+      const amounts = findResult.dates.map((date) => date.amount);
+      setDatasets([
+        {
+          label: findResult.name,
+          data: amounts,
+          backgroundColor: bgColors[findIndex],
+          borderColor: borderColors[findIndex],
+          borderWidth: 1,
+        },
+      ]);
+      const tableBodyDataCells = [findResult.name, ...amounts.map((d) => d.toLocaleString())];
+      setTableBodyData([tableBodyDataCells]);
+    }
+  }, [costs, location]);
+
+  if (isLoading && cost === null) {
+    return <Loading />;
+  } else {
+    return (
+      <DetailContainer>
+        <Title text={`${cost?.name}の1年間のデータ`} level={1} color={colorType} />
+
+        <DetailBody>
+          <Card>
+            <VerticalBarChart data={data} />
+          </Card>
+        </DetailBody>
+
+        <DetailBody>
+          <Table headColor={colorType} headData={tableHeadData} bodyData={tableBodyData} />
+        </DetailBody>
+
+        <DetailButton label="TOPに戻る" color="normal" onClick={handleClick} />
+      </DetailContainer>
+    );
+  }
 };
 
 export default GraphDetail;