Merge pull request #529 from Gmin2/api-types

feat(types): Added types in `useApiCall` hooks
vitessio · May 20, 2024 · fda5237 · fda5237
2 parents f514475 + b141b5a
commit fda5237
Show file tree

Hide file tree

Showing 11 changed files with 213 additions and 85 deletions.
diff --git a/website/src/pages/ComparePage/ComparePage.tsx b/website/src/pages/ComparePage/ComparePage.tsx
@@ -20,8 +20,8 @@ import RingLoader from "react-spinners/RingLoader";
 import useApiCall from "../../utils/Hook";
 import Hero from "./components/Hero";
 import Macrobench from "../../common/Macrobench";
-import Microbench from "../MicroPage/components/Microbench/Microbench";
-
+import { CompareData } from '@/types'
+ 
 export default function Compare() {
   const urlParams = new URLSearchParams(window.location.search);
 
@@ -31,11 +31,11 @@ export default function Compare() {
   });
 
   const {
-    data: dataMacrobench,
+    data: compareData,
     isLoading: isMacrobenchLoading,
     textLoading: macrobenchTextLoading,
     error: macrobenchError,
-  } = useApiCall(
+  } = useApiCall<CompareData>(
     `${import.meta.env.VITE_API_URL}macrobench/compare?new=${gitRef.new}&old=${gitRef.old}`
   );
 
@@ -62,11 +62,11 @@ export default function Compare() {
         </div>
       )}
 
-      {!isMacrobenchLoading && !macrobenchTextLoading && dataMacrobench && (
+      {!isMacrobenchLoading && !macrobenchTextLoading && compareData && compareData.length > 0 && (
         <section className="flex flex-col items-center">
           <h3 className="my-6 text-primary text-2xl">Macro Benchmarks</h3>
           <div className="flex flex-col gap-y-20">
-            {dataMacrobench.map((macro, index) => {
+            {compareData.map((macro, index) => {
               return (
                 <div key={index}>
                   <Macrobench

diff --git a/website/src/pages/DailyPage/DailyPage.tsx b/website/src/pages/DailyPage/DailyPage.tsx
@@ -22,41 +22,54 @@ import useApiCall from "../../utils/Hook";
 import ResponsiveChart from "./components/Chart";
 import DailySummary from "./components/DailySummary";
 import Hero from "./components/Hero";
+import { MacroData, MacroDataValue } from "@/types";
 
 import { secondToMicrosecond } from "../../utils/Utils";
 
+interface DailySummarydata {
+  name: string;
+  data : { total_qps: MacroDataValue }[];
+}
+
+type NumberDataPoint = { x: string; y: number};
+type StringDataPoint = { x: string; y: string };
+
+type ChartDataItem =
+  | { id: string; data: NumberDataPoint[] }
+  | { id: string; data: StringDataPoint[] };
+
 export default function DailyPage() {
   const urlParams = new URLSearchParams(window.location.search);
-  const [benchmarkType, setBenchmarktype] = useState(
-    urlParams.get("type") == null ? "OLTP" : urlParams.get("type")
+  const [benchmarkType, setBenchmarktype] = useState<string>(
+    urlParams.get("type") ?? "OLTP"
   );
 
   const {
     data: dataDailySummary,
     isLoading: isLoadingDailySummary,
     error: errorDailySummary,
-  } = useApiCall(`${import.meta.env.VITE_API_URL}daily/summary`);
+  } = useApiCall<DailySummarydata>(`${import.meta.env.VITE_API_URL}daily/summary`);
 
   const {
     data: dataDaily,
     error: dailyError,
     textLoading: dailyTextLoading,
-  } = useApiCall(`${import.meta.env.VITE_API_URL}daily?type=${benchmarkType}`);
+  } = useApiCall<MacroData>(`${import.meta.env.VITE_API_URL}daily?type=${benchmarkType}`);
 
   const navigate = useNavigate();
 
   useEffect(() => {
     navigate(`?type=${benchmarkType}`);
   }, [benchmarkType]);
 
-  const TPSData = [
+  const TPSData: { id: string; data: NumberDataPoint[] }[] = [
     {
       id: "TPS",
       data: [],
     },
   ];
 
-  const QPSData = [
+  const QPSData: { id: string; data: NumberDataPoint[] }[] = [
     {
       id: "Reads",
       data: [],
@@ -77,14 +90,14 @@ export default function DailyPage() {
     },
   ];
 
-  const latencyData = [
+  const latencyData: { id: string; data: NumberDataPoint[] }[] = [
     {
       id: "Latency",
       data: [],
     },
   ];
 
-  const CPUTimeData = [
+  const CPUTimeData : { id: string; data: StringDataPoint[] }[]= [
     {
       id: "Total",
       data: [],
@@ -99,7 +112,7 @@ export default function DailyPage() {
     },
   ];
 
-  const MemBytesData = [
+  const MemBytesData: { id: string; data: NumberDataPoint[] }[] = [
     {
       id: "Total",
       data: [],
@@ -188,7 +201,11 @@ export default function DailyPage() {
     });
   }
 
-  const allChartData = [
+  const allChartData: {
+    data: ChartDataItem[];
+    title: string;
+    colors: string[];
+  }[] = [
     {
       data: QPSData,
       title: "QPS (Queries per second)",
@@ -234,9 +251,9 @@ export default function DailyPage() {
         </div>
       )}
 
-      {!errorDailySummary && dataDailySummary && (
+      {!errorDailySummary && dataDailySummary && dataDailySummary.length > 0 &&(
         <>
-          <section className="flex p-page justify-center flex-wrap gap-10 py-10">
+          <section className="flex p-page justif-center flex-wrap gap-10 py-10">
             {dataDailySummary.map((dailySummary, index) => {
               return (
                 <DailySummary
@@ -258,7 +275,7 @@ export default function DailyPage() {
               {allChartData.map((chartData, index) => (
                 <div key={index} className="relative w-full h-[500px]">
                   <ResponsiveChart
-                    data={chartData.data}
+                    data={chartData.data as any}
                     title={chartData.title}
                     colors={chartData.colors}
                     isFirstChart={index === 0}

diff --git a/website/src/pages/ForeignKeysPage/ForeignKeysPage.tsx b/website/src/pages/ForeignKeysPage/ForeignKeysPage.tsx
@@ -17,23 +17,36 @@ limitations under the License.
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import RingLoader from "react-spinners/RingLoader";
-
+import { MacrosData } from '@/types'
 
 import { errorApi } from "../../utils/Utils";
 import Hero from "./components/Hero";
 import FK from "./components/FK";
 
-const ForeignKeys = () => {
+interface Ref {
+  Name: string;
+  CommitHash: string;
+  Version: {
+    Major: number;
+    Minor: number;
+    Patch: number;
+  };
+  RCnumber: number;
+}
+
+interface ForeignKeysProps {}
+
+const ForeignKeys: React.FC<ForeignKeysProps> = () => {
   const urlParams = new URLSearchParams(window.location.search);
 
-  const [gitRef, setGitRef] = useState({
+  const [gitRef, setGitRef] = useState<{ tag: string }>({
     tag: urlParams.get("tag") || "",
   });
 
-  const [dataRefs, setDataRefs] = useState();
-  const [dataFKs, setDataFKs] = useState([]);
-  const [error, setError] = useState<null | string>(null);
-  const [loading, setLoading] = useState(true);
+  const [dataRefs, setDataRefs] = useState<Ref[] | undefined>();
+  const [dataFKs, setDataFKs] = useState<MacrosData[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
 
   async function loadRefs() {
     try {
@@ -49,7 +62,7 @@ const ForeignKeys = () => {
 
   async function loadData() {
     const commits = {
-      tag: dataRefs.filter((r) => r.Name === gitRef.tag)[0].CommitHash,
+      tag: dataRefs?.filter((r) => r.Name === gitRef.tag)[0]?.CommitHash || "",
     };
 
     setLoading(true);

diff --git a/website/src/pages/PRPage/PRPage.tsx b/website/src/pages/PRPage/PRPage.tsx
@@ -20,6 +20,7 @@ import useApiCall from "../../utils/Hook";
 import RingLoader from "react-spinners/RingLoader";
 
 import { formatDate, errorApi } from "../../utils/Utils";
+import { prDataTypes } from "@/types";
 
 export default function PRPage() {
   const { pull_nb } = useParams();
@@ -28,13 +29,15 @@ export default function PRPage() {
     data: dataSinglePr,
     isLoading: singlePrLoading,
     error: singlePrError,
-  } = useApiCall(`${import.meta.env.VITE_API_URL}pr/info/${pull_nb}`, []);
+  } = useApiCall<prDataTypes>(`${import.meta.env.VITE_API_URL}pr/info/${pull_nb}`);
+
+  const singlePrData = dataSinglePr.length > 0 ? dataSinglePr[0] : null;
 
   const isComparisonAvailable =
-    dataSinglePr.Base !== "" && dataSinglePr.Head !== "";
+    singlePrData?.Base !== "" && singlePrData?.Head !== "";
 
   if (
-    dataSinglePr.error ==
+    singlePrData?.error ==
     "GET https://api.github.com/repos/vitessio/vitess/pulls/13675: 404 Not Found []"
   ) {
     return (
@@ -65,19 +68,19 @@ export default function PRPage() {
                   >
                     [#{pull_nb}]
                   </Link>{" "}
-                  {dataSinglePr.Title}
+                  {singlePrData?.Title}
                 </h2>
                 <span>
-                  By {dataSinglePr.Author} at{" "}
-                  {formatDate(dataSinglePr.CreatedAt)}{" "}
+                  By {singlePrData?.Author} at{" "}
+                  {formatDate(singlePrData?.CreatedAt)}{" "}
                 </span>
               </div>
 
               {isComparisonAvailable && (
                 <div className="flex justify-center items-center">
                   <Link
                     className="text-primary p-6 border border-primary rounded-xl duration-300 hover:bg-primary hover:bg-opacity-20 hover:scale-105 whitespace-nowrap"
-                    to={`/compare?ltag=${dataSinglePr.Base}&rtag=${dataSinglePr.Head}`}
+                    to={`/compare?ltag=${singlePrData?.Base}&rtag=${singlePrData?.Head}`}
                   >
                     Compare with base commit
                   </Link>
@@ -87,16 +90,16 @@ export default function PRPage() {
             <div className="flex flex-col justify-between p-5 text-lg leading-loose">
               {isComparisonAvailable ? (
                 <>
-                  <span>Base: {dataSinglePr.Base}</span>
-                  <span>Head: {dataSinglePr.Head}</span>
+                  <span>Base: {singlePrData?.Base}</span>
+                  <span>Head: {singlePrData?.Head}</span>
                 </>
               ) : (
                 <div>
                   The Base and Head commit information is not available for this
                   pull request.
                 </div>
               )}
-              <span>{dataSinglePr.error}</span>
+              <span>{singlePrData?.error}</span>
             </div>
           </div>
         )}

diff --git a/website/src/pages/PRsPage/PRsPage.tsx b/website/src/pages/PRsPage/PRsPage.tsx
@@ -21,13 +21,14 @@ import useApiCall from "../../utils/Hook";
 import RingLoader from "react-spinners/RingLoader";
 
 import PRTable from "./components/PRTable";
+import { prDataTypes } from "@/types";
 
 export default function PRsPage() {
   const {
     data: dataPRList,
     isLoading: isPRListLoading,
     error: PRListError,
-  } = useApiCall(`${import.meta.env.VITE_API_URL}pr/list`, []);
+  } = useApiCall<prDataTypes>(`${import.meta.env.VITE_API_URL}pr/list`);
 
   return (
     <>

diff --git a/website/src/pages/SearchPage/SearchPage.tsx b/website/src/pages/SearchPage/SearchPage.tsx
@@ -21,6 +21,7 @@ import useApiCall from "../../utils/Hook";
 
 import Hero from "./components/Hero";
 import SearchMacro from "./components/SearchMacro";
+import { SearchData } from "@/types";
 
 export default function SearchPage() {
   const urlParams = new URLSearchParams(window.location.search);
@@ -30,7 +31,9 @@ export default function SearchPage() {
     data: dataSearch,
     isLoading: isSearchLoading,
     error: searchError,
-  } = useApiCall(`${import.meta.env.VITE_API_URL}search?sha=${gitRef}`);
+  } = useApiCall<SearchData>(
+    `${import.meta.env.VITE_API_URL}search?sha=${gitRef}`
+  );
 
   const navigate = useNavigate();
 
@@ -42,27 +45,35 @@ export default function SearchPage() {
     <>
       <Hero setGitRef={setGitRef} />
 
-      {searchError && <div className="text-red-500 text-center my-2">{searchError}</div>}
+      {searchError && (
+        <div className="text-red-500 text-center my-2">{searchError}</div>
+      )}
 
       {isSearchLoading && (
         <div className="flex my-10 justify-center items-center">
           <RingLoader loading={isSearchLoading} color="#E77002" size={300} />
         </div>
       )}
 
-      {!isSearchLoading && dataSearch && (
+      {!isSearchLoading && dataSearch && dataSearch.length > 0 && (
         <section className="flex flex-col items-center p-page">
           <div className="w-1/2 flex flex-col gap-y-16">
-            {dataSearch.Macros &&
-              typeof dataSearch.Macros === "object" &&
-              Object.entries(dataSearch.Macros).map(function (
-                searchMacro,
-                index
-              ) {
-                return (
-                  <SearchMacro key={index} data={searchMacro} gitRef={gitRef} />
-                );
-              })}
+            {dataSearch.map((searchData, index) => (
+              <div key={index}>
+                {searchData.Macros &&
+                  typeof searchData.Macros === "object" &&
+                  Object.entries(searchData.Macros).map(
+                    ([macroName, macroData], idx) => (
+                      <SearchMacro
+                        key={`${index}-${idx}`}
+                        macroName={macroName}
+                        macroData={macroData}
+                        gitRef={gitRef}
+                      />
+                    )
+                  )}
+              </div>
+            ))}
           </div>
         </section>
       )}