Merge pull request #164 from ScoreTrak/fix-queries

Fix react queries
ScoreTrak · Jan 13, 2023 · 8c85af3 · 8c85af3
2 parents ec13ac5 + e1c55b1
commit 8c85af3
Show file tree

Hide file tree

Showing 35 changed files with 2,468 additions and 1,687 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@buf/grpc_web_scoretrak_scoretrakapis": "^1.11.7",
+    "@buf/grpc_web_scoretrak_scoretrakapis": "^1.14.13",
     "@date-io/core": "^1.3.13",
     "@material-table/core": "^4.3.44",
     "@material-ui/core": "^4.11.3",
@@ -13,17 +13,18 @@
     "@nivo/core": "^0.79.0",
     "@nivo/tooltip": "0.79.0",
     "@tanstack/react-query": "^4.2.1",
+    "@tanstack/react-query-devtools": "^4.16.1",
     "file-saver": "^2.0.2",
     "google-protobuf": "^3.14.0-rc.1",
-    "grpc-web": "^1.2.1",
+    "grpc-web": "^1.4.2",
     "jwt-decode": "^3.1.1",
     "notistack": "^1.0.10",
     "npm-watch": "^0.11.0",
     "prop-types": ">= 15.5.10 < 16.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-full-screen": "^1.1.1",
-    "react-hook-form": "^6.11.0",
+    "react-hook-form": "^6.15.8",
     "react-json-view": "^1.21.3",
     "react-router-dom": "^6.3.0",
     "react-use": "^17.4.0"
@@ -47,6 +48,7 @@
     ]
   },
   "devDependencies": {
+    "@hookform/devtools": "^4.3.0",
     "@types/file-saver": "^2.0.1",
     "@types/google-protobuf": "^3.7.4",
     "@types/material-ui": "^0.21.8",

diff --git a/scripts/generate-protoc-js.ps1 b/scripts/generate-protoc-js.ps1
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,5 @@
 import CssBaseline from "@material-ui/core/CssBaseline";
-import { PolicyProvider } from "./contexts/PolicyContext";
 import {
-  PaletteTypeProvider,
   usePaletteType,
 } from "./contexts/PaletteTypeContext";
 import { Route, Routes } from "react-router-dom";
@@ -10,7 +8,6 @@ import AuthLayout from "./layouts/AuthLayout";
 import SignIn from "./routes/auth/sign_in";
 import Settings from "./routes/settings";
 import Logs from "./routes/logs";
-import { ReportProvider } from "./contexts/ReportContext";
 import Ranks from "./routes/scoreboard/ranks";
 import Details from "./routes/scoreboard/details";
 import Scoreboard from "./routes/scoreboard";
@@ -26,8 +23,15 @@ import {
 } from "@material-ui/core/colors";
 import { SnackbarProvider } from "notistack";
 import { ThemeProvider } from "@material-ui/core/styles";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: Infinity,
+    },
+  },
+});
 
 function App() {
   const { paletteType } = usePaletteType();
@@ -48,6 +52,12 @@ function App() {
     [paletteType]
   );
 
+  // @ts-ignore
+  const bruh: (e: MouseEvent<HTMLDivElement, MouseEvent>) => void = (
+    // @ts-ignore
+    e: MouseEvent<HTMLDivElement, MouseEvent>
+  ) => {};
+
   return (
     <>
       <ThemeProvider theme={theme}>
@@ -62,8 +72,6 @@ function App() {
         >
           <CssBaseline />
           <QueryClientProvider client={queryClient}>
-            <PolicyProvider>
-              <ReportProvider>
                 <Routes>
                   <Route path={"/"} element={<ScoreboardLayout />}>
                     <Route index element={<Scoreboard />} />
@@ -83,8 +91,7 @@ function App() {
                     <Route index element={<Settings />} />
                   </Route>
                 </Routes>
-              </ReportProvider>
-            </PolicyProvider>
+            <ReactQueryDevtools initialIsOpen={true} />
           </QueryClientProvider>
         </SnackbarProvider>
       </ThemeProvider>

diff --git a/src/components/MainNav.tsx b/src/components/MainNav.tsx
@@ -11,30 +11,24 @@ import SettingsIcon from "@material-ui/icons/Settings";
 import DescriptionIcon from "@material-ui/icons/Description";
 import BarChartIcon from "@material-ui/icons/BarChart";
 import DetailsIcon from "@material-ui/icons/Details";
-import {
-  Link as RouterLink,
-  useNavigate,
-} from "react-router-dom";
-import { useReport } from "../contexts/ReportContext";
-import CheckCircleIcon from "@material-ui/icons/CheckCircle";
-import { usePolicy } from "../contexts/PolicyContext";
+import { Link as RouterLink, useNavigate } from "react-router-dom";
+import { usePolicySubscription } from "~/lib/queries/policies";
 
 const useStyles = makeStyles((_) => ({
   root: {
     flexGrow: 1,
   },
   toolbar: {
-    justifyContent: 'space-between'
+    justifyContent: "space-between",
   },
   title: {
     flexGrow: 1,
-    textDecoration: "none"
-  }
+    textDecoration: "none",
+  },
 }));
 
 export function MainNav() {
-  const policy = usePolicy();
-  const report = useReport();
+  usePolicySubscription();
   const theme = useTheme();
   const { togglePaletteType } = usePaletteType();
   const classes = useStyles();
@@ -48,7 +42,7 @@ export function MainNav() {
   return (
     <div className={classes.root}>
       <AppBar position="static">
-        <Container maxWidth={"xl"} >
+        <Container maxWidth={"xl"}>
           <Toolbar className={classes.toolbar}>
             <Box>
               <Typography
@@ -58,45 +52,48 @@ export function MainNav() {
                 color="inherit"
                 className={classes.title}
               >
-                {report?.Round === 0
-                  ? "Competition has not yet started!"
-                  : `Round: ${report?.Round}`}
+                {/*{report?.Round === 0*/}
+                {/*  ? "Competition has not yet started!"*/}
+                {/*  : `Round: ${report?.Round}`}*/}
               </Typography>
             </Box>
 
             <Box>
               {
                 <>
-                  {((policy && policy.showPoints?.value) ||
-                    token.getCurrentRole() === Role.Black) && (
-                    <IconButton component={RouterLink} to={"/scoreboard"}>
-                      <CheckCircleIcon />
-                    </IconButton>
-                  )}
+                  {/*{((policy && policy.showPoints?.value) ||*/}
+                  {/*  token.getCurrentRole() === Role.Black) && (*/}
+                  {/*  <IconButton component={RouterLink} to={"/scoreboard"}>*/}
+                  {/*    <CheckCircleIcon />*/}
+                  {/*  </IconButton>*/}
+                  {/*)}*/}
                   <IconButton component={RouterLink} to={"/scoreboard/ranks"}>
                     <BarChartIcon />
                   </IconButton>
                   {(token.getCurrentRole() === Role.Red ||
                     token.getCurrentRole() === Role.Blue ||
                     token.getCurrentRole() === Role.Black) && (
-                    <IconButton component={RouterLink} to={"/scoreboard/details"}>
+                    <IconButton
+                      component={RouterLink}
+                      to={"/scoreboard/details"}
+                    >
                       <DetailsIcon />
                     </IconButton>
                   )}
                 </>
               }
               {!token.isAValidToken() ? (
-                <Button component={RouterLink} to={"/auth/sign_in"} color={"inherit"}>
-                  <Typography>
-                    Sign In
-                  </Typography>
+                <Button
+                  component={RouterLink}
+                  to={"/auth/sign_in"}
+                  color={"inherit"}
+                >
+                  <Typography>Sign In</Typography>
                 </Button>
               ) : (
                 <>
                   <Button color={"inherit"} onClick={handleLogout}>
-                    <Typography>
-                      Sign Out
-                    </Typography>
+                    <Typography>Sign Out</Typography>
                   </Button>
                   {token.getCurrentRole() === Role.Black && (
                     <>
@@ -111,7 +108,11 @@ export function MainNav() {
                 </>
               )}
               <IconButton onClick={togglePaletteType}>
-                {theme.palette.type !== "light" ? <Brightness7 /> : <Brightness4 />}
+                {theme.palette.type !== "light" ? (
+                  <Brightness7 />
+                ) : (
+                  <Brightness4 />
+                )}
               </IconButton>
             </Box>
           </Toolbar>

diff --git a/src/components/ScoreBoard/Detail/BlackTeamPanel.tsx b/src/components/ScoreBoard/Detail/BlackTeamPanel.tsx
@@ -0,0 +1,43 @@
+import { CustomRow, Row } from "~/components/ScoreBoard/Detail/CustomRow";
+import TableContainer from "@material-ui/core/TableContainer";
+import Paper from "@material-ui/core/Paper";
+import Table from "@material-ui/core/Table";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import TableBody from "@material-ui/core/TableBody";
+import { useReportQuery } from "~/lib/queries/reports";
+
+
+export default function BlackTeamPanel() {
+  const {data: reportData, isLoading: reportIsLoading} = useReportQuery()
+
+  const data: Row[] = [];
+  if (reportData) {
+    Object.keys(reportData.Teams).forEach((team_id) => {
+      data.push({
+        team_id,
+        team_name: reportData.Teams[team_id].Name,
+      });
+    });
+    data.sort((a, b) => (a.team_name > b.team_name ? 1 : -1));
+  }
+  return (
+    <TableContainer component={Paper}>
+      <Table aria-label="collapsible table">
+        <TableHead>
+          <TableRow>
+            <TableCell />
+            <TableCell align="right">Team Name</TableCell>
+            <TableCell align="right">Team ID</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data.map((row) => (
+            <CustomRow key={row.team_id} row={row} />
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/src/components/ScoreBoard/CustomRow.tsx → ...omponents/ScoreBoard/Detail/CustomRow.tsx b/src/components/ScoreBoard/CustomRow.tsx → ...omponents/ScoreBoard/Detail/CustomRow.tsx