update

huxulm · Feb 21, 2024 · b5a5ddc · b5a5ddc
1 parent c6321e2
commit b5a5ddc
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 36 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Routes, Route, Outlet, Link } from "react-router-dom";
 // import ContestList from "./ContestList";
 import Navbar from "react-bootstrap/esm/Navbar";
@@ -9,15 +8,15 @@ import GithubProfile from "./components/gh";
 import Zen from "./Zen";
 import Search from "./Search";
 
-const ContestList = React.lazy(() => import("./ContestList"));
+import ContestList from "./ContestList";
 
 export default function App() {
   return (
     <div>
       <Routes>
         <Route path="" element={<Layout />}>
           <Route index element={<ContestList />} />
-          <Route path="/'" index element={<ContestList />} />
+          <Route path="/" index element={<ContestList />} />
           <Route path="zen" index element={<Zen />} />
           <Route path="search" index element={<Search />} />
           <Route path="*" element={<NoMatch />} />

diff --git a/src/ContestList.tsx b/src/ContestList.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import Table from "react-bootstrap/Table";
 import Button from "react-bootstrap/Button";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
@@ -36,8 +36,9 @@ import { rankItem } from "@tanstack/match-sorter-utils";
 import { getMark, setMark, getSize, setSize } from "./store";
 
 import { useQuery } from "react-query";
-import { Contest, fetchData } from "./makeData";
+import { Contest } from "./makeData";
 import { useSolutions } from "./hooks/useSolutions";
+import { useContests } from "./hooks/useContests";
 
 const host = `https://leetcode.cn`;
 
@@ -129,7 +130,7 @@ const problemColDef = (id: string) => {
           >
             <a className="fr text-body" href={host + "/problems/" + sol[5] + "/solution/" + sol[1]}>题解</a>
           </OverlayTrigger></div>}
-          {!sol && display && <div className="fr-wrapper zen-spinner-td"><Spinner animation="border" size="sm" role="status"/></div>}
+          {!sol && display && <div className="fr-wrapper zen-spinner-td"><Spinner animation="border" size="sm" role="status" /></div>}
         </div>
       );
     },
@@ -261,6 +262,9 @@ function ContestList() {
   // solutions
   const { solutions, isPending } = useSolutions("");
 
+  // contests
+  const { contests, isPending: loading } = useContests();
+
   const querySolution = (id: any): any => {
     return solutions[id];
   }
@@ -292,10 +296,25 @@ function ContestList() {
 
   const dataQuery = useQuery(
     ["data", fetchDataOptions],
-    () => fetchData(fetchDataOptions),
+    () => {
+      return {
+        rows: contests.slice(
+          pageIndex * pageSize,
+          (pageIndex + 1) * pageSize
+        ),
+        pageCount: Math.ceil(contests.length / pageSize),
+      }
+    },
     { keepPreviousData: true }
   );
 
+  const [rows, pageCount] = useMemo(() => {
+    return [contests.slice(
+      pageIndex * pageSize,
+      (pageIndex + 1) * pageSize
+    ), Math.ceil(contests.length / pageSize)]
+  }, [pageIndex, pageSize, contests])
+
   const defaultData = React.useMemo(() => [], []);
 
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
@@ -309,9 +328,10 @@ function ContestList() {
   const [columnOrder, setColumnOrder] = React.useState<ColumnOrderState>([]);
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const table = useReactTable({
-    data: injectSolutionQuery(dataQuery.data?.rows ?? defaultData),
+    // data: injectSolutionQuery(dataQuery.data?.rows ?? defaultData),
+    data: injectSolutionQuery(rows),
     columns,
-    pageCount: dataQuery.data?.pageCount ?? -1,
+    pageCount: pageCount,
     enableColumnResizing: true,
     columnResizeMode: "onChange",
     state: {
@@ -460,7 +480,7 @@ function ContestList() {
             ))}
           </thead>
           <tbody>
-            {table.getRowModel().rows.map((row) => {
+            {!(isPending || loading) && table.getRowModel().rows.map((row) => {
               return (
                 <tr
                   key={row.id}
@@ -488,6 +508,10 @@ function ContestList() {
             })}
           </tbody>
         </Table>
+        {(isPending || loading) &&
+          <div className="w-100 p-3 border-0 text-center">
+              <Spinner />
+          </div>}
       </div>
       <div className="d-flex flex-row justify-content-center right-side">
         <Pagination className="me-2 mb-0">
@@ -602,8 +626,8 @@ function Filter({
             column.setFilterValue((old: [number, number]) => [value, old?.[1]])
           }
           placeholder={`Min ${column.getFacetedMinMaxValues()?.[0]
-              ? `(${column.getFacetedMinMaxValues()?.[0]})`
-              : ""
+            ? `(${column.getFacetedMinMaxValues()?.[0]})`
+            : ""
             }`}
         />
         <DebouncedInput
@@ -615,8 +639,8 @@ function Filter({
             column.setFilterValue((old: [number, number]) => [old?.[0], value])
           }
           placeholder={`Max ${column.getFacetedMinMaxValues()?.[1]
-              ? `(${column.getFacetedMinMaxValues()?.[1]})`
-              : ""
+            ? `(${column.getFacetedMinMaxValues()?.[1]})`
+            : ""
             }`}
         />
       </InputGroup>

diff --git a/src/Search.tsx b/src/Search.tsx
@@ -2,7 +2,12 @@ import { useSolutions } from "./hooks/useSolutions";
 import { useQuestionTags } from "./hooks/useQuestionTags";
 import { useTags } from "./hooks/useTags";
 import { useEffect, useState } from "react";
-import { Button, ButtonGroup, Col, Container, Form, InputGroup, Row, Spinner } from "react-bootstrap";
+import Button from "react-bootstrap/Button";
+import ButtonGroup from "react-bootstrap/ButtonGroup";
+import Col from "react-bootstrap/Col";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Spinner from "react-bootstrap/Spinner";
 import "./app.scss";
 
 const LC_HOST = `https://leetcode.cn`;

diff --git a/src/app.scss b/src/app.scss
@@ -77,6 +77,7 @@ table,
   border: 1px solid lightgray;
   width: fit-content;
   table-layout: fixed;
+  display: table;
 }
 
 .tr {

diff --git a/src/hooks/useContests.ts b/src/hooks/useContests.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState, useTransition } from "react"
+import { Contest, mapContests } from "../makeData";
+
+type Contests = any[];
+
+export function useContests() {
+    const [isPending, startTransition] = useTransition();
+    const [contests, setContests] = useState<Contest[]>([]);
+
+    useEffect(() => {
+        fetch("/lc-rating/contest.json?t=" + (new Date().getTime() / 100000).toFixed(0))
+            .then((res) => res.json())
+            .then((result: Contests) => {
+                startTransition(() => {
+                    setContests(mapContests(result));
+                });
+            });
+    }, []);
+
+    return {contests, isPending};
+}
diff --git a/src/makeData.ts b/src/makeData.ts
@@ -1,5 +1,3 @@
-import data from "./contest.json";
-
 export type Question = {
   title: string;
   slug: string;
@@ -20,7 +18,7 @@ export type Contest = {
   QuerySolution?: (id: any) => any;
 };
 
-export function makeContests() {
+export function mapContests(data: any[]) {
   return data.map((d: any): Contest => {
     let questions: any[] = d.questions && d.questions.length === 4? d.questions : new Array(4).fill({title: ""})
     return {
@@ -38,22 +36,4 @@ export function makeContests() {
       D_Rating: questions[3].rating,
     };
   });
-}
-
-const arr = makeContests();
-
-export async function fetchData(options: {
-  pageIndex: number
-  pageSize: number
-}) {
-  // Simulate some network latency
-  // await new Promise(r => setTimeout(r, 500))
-
-  return {
-    rows: arr.slice(
-      options.pageIndex * options.pageSize,
-      (options.pageIndex + 1) * options.pageSize
-    ),
-    pageCount: Math.ceil(data.length / options.pageSize),
-  }
 }