fix refreshing

authstats/api.py

@@ -71,7 +71,9 @@ def get_report_for_corp(request, report_id: int, corp_id: int):
         run_report_for_corp.delay(corp_id, report_id)
         return {"report": {"name": f"{report.name}",
                            "corporation": corp.corporation_name},
-                "members": 0, "unknowns": 0}
+                "data": False,
+                "members": 0,
+                "unknowns": 0}
 
 
 @api.get(

authstats/static/authstats/bs5/manifest.json

@@ -1,21 +1,21 @@
 {
-  "_@libs-WcvQMhay.js": {
-    "file": "assets/@libs-WcvQMhay.js"
+  "_@libs-IGGVHKc5.js": {
+    "file": "assets/@libs-IGGVHKc5.js"
   },
-  "_@react-router-HszdzxGO.js": {
-    "file": "assets/@react-router-HszdzxGO.js",
+  "_@react-router-TzDMT6lp.js": {
+    "file": "assets/@react-router-TzDMT6lp.js",
     "imports": [
-      "_@libs-WcvQMhay.js"
+      "_@libs-IGGVHKc5.js"
     ]
   },
   "index.html": {
     "css": [
       "assets/index-TnUmiOMj.css"
     ],
-    "file": "assets/index-tti_gzcg.js",
+    "file": "assets/index-AC7NHWmz.js",
     "imports": [
-      "_@libs-WcvQMhay.js",
-      "_@react-router-HszdzxGO.js"
+      "_@libs-IGGVHKc5.js",
+      "_@react-router-TzDMT6lp.js"
     ],
     "isEntry": true,
     "src": "index.html"

frontend-bs5/build/static/.vite/manifest.json

@@ -1,21 +1,21 @@
 {
-  "_@libs-WcvQMhay.js": {
-    "file": "assets/@libs-WcvQMhay.js"
+  "_@libs-IGGVHKc5.js": {
+    "file": "assets/@libs-IGGVHKc5.js"
   },
-  "_@react-router-HszdzxGO.js": {
-    "file": "assets/@react-router-HszdzxGO.js",
+  "_@react-router-TzDMT6lp.js": {
+    "file": "assets/@react-router-TzDMT6lp.js",
     "imports": [
-      "_@libs-WcvQMhay.js"
+      "_@libs-IGGVHKc5.js"
     ]
   },
   "index.html": {
     "css": [
       "assets/index-TnUmiOMj.css"
     ],
-    "file": "assets/index-tti_gzcg.js",
+    "file": "assets/index-AC7NHWmz.js",
     "imports": [
-      "_@libs-WcvQMhay.js",
-      "_@react-router-HszdzxGO.js"
+      "_@libs-IGGVHKc5.js",
+      "_@react-router-TzDMT6lp.js"
     ],
     "isEntry": true,
     "src": "index.html"

frontend-bs5/build/static/index.html

@@ -78,9 +78,9 @@
         padding-top: 3.5em !important;
       }
     </style>
-    <script type="module" crossorigin src="./assets/index-tti_gzcg.js"></script>
-    <link rel="modulepreload" crossorigin href="./assets/@libs-WcvQMhay.js">
-    <link rel="modulepreload" crossorigin href="./assets/@react-router-HszdzxGO.js">
+    <script type="module" crossorigin src="./assets/index-AC7NHWmz.js"></script>
+    <link rel="modulepreload" crossorigin href="./assets/@libs-IGGVHKc5.js">
+    <link rel="modulepreload" crossorigin href="./assets/@react-router-TzDMT6lp.js">
     <link rel="stylesheet" crossorigin href="./assets/index-TnUmiOMj.css">
   </head>
 

frontend-bs5/package.json

@@ -6,11 +6,12 @@
     "@agney/react-loading": "^0.1.2",
     "@pvyparts/allianceauth-components": "^1.1.1",
     "@tanstack/react-query": "^5.8.4",
+    "@tanstack/react-query-devtools": "^5.40.0",
     "@tanstack/react-table": "^8.17.3",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "axios": "^0.21.4",
+    "axios": "^1.7.2",
     "javascript-time-ago": "^2.3.8",
     "js-cookies": "^1.0.4",
     "react": "^18.2.0",

frontend-bs5/src/components/HeaderMenu.jsx

@@ -38,15 +38,15 @@ const MenuRight = () => {
         <></>
       )}
       <Nav.Link href="/reports/add_corp_token">
-        <i class="fas fa-plus fa-fw"></i> Add Membership Token
+        <i className="fas fa-plus fa-fw"></i> Add Membership Token
       </Nav.Link>
       <div className="mx-1 my-auto p-0" style={{ width: "300px" }}>
         <CorpSelect />
       </div>
       <div className="mx-1 my-auto p-0" style={{ width: "300px" }}>
         <ReportSelect />
       </div>
-      <div class="vr ms-2"></div>
+      <div className="vr ms-2"></div>
     </>,
     menuRoot
   );

frontend-bs5/src/components/ReportHeader.jsx

@@ -57,14 +57,15 @@ export const ReportHeader = ({ reportData, isLoading = false }) => {
             {(aggregates?.length > 0 || reportData?.unknowns > 0) && (
               <>
                 {reportData?.unknowns > 0 && (
-                  <Badge onClick={() => setOpen(true)} bsStyle={"danger"} style={{ margin: "5px" }}>
+                  <Badge onClick={() => setOpen(true)} bg={"danger"} style={{ margin: "5px" }}>
                     Unknown Characters: {reportData?.unknowns}
                   </Badge>
                 )}
                 {aggregates.map((row) => {
                   let passRatio = row.pass / reportData?.members;
                   return (
                     <Badge
+                      key={row.header}
                       bg={
                         passRatio > 0.75
                           ? "success"

frontend-bs5/src/components/ReportTable.jsx

@@ -1,6 +1,6 @@
 import ErrorBoundary from "./ErrorBoundary";
 import BaseTable from "./Tables/BaseTable/BaseTable";
-import { CharacterPortrait } from "@pvyparts/allianceauth-components";
+import { CharacterPortrait, PanelLoader } from "@pvyparts/allianceauth-components";
 import React from "react";
 import { Button, Card } from "react-bootstrap";
 
@@ -24,11 +24,11 @@ export const ReportTable = ({ reportData }) => {
             cell: (row) =>
               row.getValue() ? (
                 <Button variant="success" size="sm">
-                  <i class="fas fa-check-circle"></i>
+                  <i className="fas fa-check-circle"></i>
                 </Button>
               ) : (
                 <Button variant="danger" size="sm">
-                  <i class="fas fa-times-circle"></i>
+                  <i className="fas fa-times-circle"></i>
                 </Button>
               ),
             // enableColumnFilter: false,
@@ -84,11 +84,10 @@ export const ReportTable = ({ reportData }) => {
         {data ? (
           <BaseTable {...{ data, columns }} hover={true} />
         ) : (
-          // <PanelLoader
-          //   title="Loading Report"
-          //   message="If this is a large report this may take considerable time"
-          // />
-          <p>Loading Report!</p>
+          <PanelLoader
+            title="Loading Report"
+            message="If this is a large report this may take considerable time"
+          />
         )}
       </ErrorBoundary>
     </Card.Body>

frontend-bs5/src/main.jsx

@@ -1,6 +1,7 @@
 import "./index.css";
 import { ReportPage } from "./pages/ReportPage";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import TimeAgo from "javascript-time-ago";
 import en from "javascript-time-ago/locale/en";
 import React from "react";
@@ -20,6 +21,7 @@ const ReportsView = () => {
           <Route path="reports/show/" element={<Navigate to={"/reports/show/0/0/"} />} />
         </Routes>
       </Router>
+      <ReactQueryDevtools initialIsOpen={true} />
     </QueryClientProvider>
   );
 };

frontend-bs5/src/pages/ReportPage.jsx

@@ -3,49 +3,55 @@ import { MenuRight } from "../components/HeaderMenu";
 import { ReportHeader } from "../components/ReportHeader";
 import { ReportMenu } from "../components/ReportMenu";
 import { ReportTable } from "../components/ReportTable";
+import { colourStyles } from "../components/Tables/BaseTable/BaseTableStyles";
 import { ErrorLoader, PanelLoader } from "@pvyparts/allianceauth-components";
 import { useQuery } from "@tanstack/react-query";
 import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
-export const ReportPage = () => {
-  let { corporationID, reportID } = useParams();
-  const [enabled, setEnabled] = useState(3000);
+const lessThanOneHourAgo = (date) => {
+  const HOUR = 1000 * 60 * 60;
+  const anHourAgo = Date.now() - HOUR;
 
-  useEffect(() => {
-    setEnabled(3000);
-  }, [corporationID, reportID]);
+  return new Date(date) > anHourAgo;
+};
 
-  const { isLoading, error, data, isFetching } = useQuery({
+export const ReportPage = () => {
+  let { corporationID, reportID } = useParams();
+  const query = useQuery({
     queryKey: ["dashboard", corporationID, reportID],
-    queryFn: () => loadReport(reportID, corporationID),
-
-    options: {
-      //refetchOnWindowFocus: false,
-      refetchInterval: enabled,
+    queryFn: () => {
+      return loadReport(reportID, corporationID);
+    },
+    refetchIntervalInBackground: true,
+    refetchInterval: (query) => {
+      console.log("qry", query.state.data?.updated, lessThanOneHourAgo(query.state.data?.updated));
+      return query.state.data
+        ? lessThanOneHourAgo(query.state.data?.updated)
+          ? null
+          : 3000
+        : 3000;
     },
   });
-  // what about cached data
-  if (data?.data && enabled) {
-    setEnabled(null);
-  }
+
+  console.log(query);
 
   return (
     <>
       <MenuRight />
       <ReportMenu />
-      <ReportHeader reportData={data} isLoading={isFetching | enabled} />
-      {error ? (
+      <ReportHeader reportData={query.data} isLoading={query.isFetching} />
+      {query.error ? (
         <ErrorLoader title="API Error" message="There was a problem loading data from the API" />
-      ) : isLoading ? (
+      ) : query.isLoading ? (
         <PanelLoader
           title="Loading Report"
           message="If this is a large report this may take considerable time"
         />
-      ) : data === false ? (
+      ) : query.data === false ? (
         <PanelLoader title="Please Select a Corporation and Report" />
       ) : (
-        <ReportTable reportData={data} />
+        <ReportTable reportData={query.data} />
       )}
     </>
   );