add RTK Query

- refactor Process Pending Bids to use it [#188786478]
GamesDoneQuick · Feb 6, 2025 · bc0a762 · bc0a762
1 parent 70a2ec3
commit bc0a762
Show file tree

Hide file tree

Showing 52 changed files with 1,223 additions and 1,104 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -97,7 +97,7 @@
           {
             "vars": "all",
             "args": "none",
-            "varsIgnorePattern": "^React$|^_$"
+            "varsIgnorePattern": "^React$|^_"
           }
         ]
       }

diff --git a/bundles/admin/app.js b/bundles/admin/app.js
@@ -1,18 +1,16 @@
 import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { Provider } from 'react-redux';
 import { Outlet, Route, Routes } from 'react-router';
 import { BrowserRouter, Link } from 'react-router-dom';
 
 import { useConstants } from '@common/Constants';
 import Loading from '@common/Loading';
-import { actions } from '@public/api';
-import { usePermission } from '@public/api/helpers/auth';
-import V2HTTPUtils from '@public/apiv2/HTTPUtils';
+import { useCSRFToken, usePermission } from '@public/api/helpers/auth';
+import { setRoot, useEventsQuery } from '@public/apiv2/reducers/trackerApi';
+import { useAppDispatch } from '@public/apiv2/Store';
 import Dropdown from '@public/dropdown';
 import Spinner from '@public/spinner';
 
-import { setAPIRoot } from '@tracker/Endpoints';
-
 import NotFound from '../public/notFound';
 import ScheduleEditor from './scheduleEditor';
 
@@ -26,23 +24,20 @@ function EventMenu(name) {
   return (
     EventMenuComponents[name] ||
     (EventMenuComponents[name] = function EventMenuInner() {
-      const { events, status } = useSelector(state => ({
-        events: state.models.event,
-        status: state.status,
-      }));
+      const { data: events, isLoading } = useEventsQuery();
       const sortedEvents = React.useMemo(
-        () => [...(events || [])].sort((a, b) => b.datetime.localeCompare(a.datetime)),
+        () => [...(events || [])].sort((a, b) => b.datetime.toSeconds() - a.datetime.toSeconds()),
         [events],
       );
 
       return (
-        <Spinner spinning={status.event === 'loading'}>
+        <Spinner spinning={isLoading}>
           {name}
           <ul style={{ display: 'block' }}>
             {sortedEvents &&
               sortedEvents.map(e => (
-                <li key={e.pk}>
-                  <Link to={`${e.pk}`}>{e.short}</Link>
+                <li key={e.id}>
+                  <Link to={`${e.id}`}>{e.short}</Link>
                   {(!e.allow_donations || e.locked) && '🔒'}
                 </li>
               ))}
@@ -54,9 +49,9 @@ function EventMenu(name) {
 }
 
 function DropdownMenu({ name, path }) {
-  const events = useSelector(state => state.models.event);
+  const { data: events } = useEventsQuery();
   const sortedEvents = React.useMemo(
-    () => [...(events || [])].sort((a, b) => b.datetime.localeCompare(a.datetime)),
+    () => [...(events || [])].sort((a, b) => b.datetime.toSeconds() - a.datetime.toSeconds()),
     [events],
   );
 
@@ -74,8 +69,8 @@ function DropdownMenu({ name, path }) {
         <ul style={{ display: 'block' }}>
           {sortedEvents &&
             sortedEvents.map(e => (
-              <li key={e.pk}>
-                <Link to={`${path}/${e.pk}`}>{e.short}</Link>
+              <li key={e.id}>
+                <Link to={`${path}/${e.id}`}>{e.short}</Link>
                 {(!e.allow_donations || e.locked) && '🔒'}
               </li>
             ))}
@@ -88,12 +83,11 @@ function DropdownMenu({ name, path }) {
 function Menu() {
   const { ADMIN_ROOT } = useConstants();
   const canViewBids = usePermission('tracker.view_bid');
-  const { status } = useSelector(state => ({
-    status: state.status,
-  }));
+  const { isLoading } = useEventsQuery();
+
   return (
     <div style={{ height: 60, display: 'flex', alignItems: 'center' }}>
-      <Spinner spinning={status.event !== 'success'}>
+      <Spinner spinning={isLoading}>
         {ADMIN_ROOT && (
           <>
             <a href={ADMIN_ROOT}>Admin Home</a>
@@ -112,38 +106,20 @@ function Menu() {
   );
 }
 
-function App({ rootPath }) {
-  const dispatch = useDispatch();
-
-  const [ready, setReady] = React.useState(false);
-
-  const { status } = useSelector(state => ({
-    status: state.status,
-  }));
+function App({ rootPath, oldStore }) {
+  const dispatch = useAppDispatch();
 
-  const { API_ROOT, APIV2_ROOT } = useConstants();
-  const canViewBids = usePermission('tracker.view_bid');
+  const { APIV2_ROOT, PAGINATION_LIMIT } = useConstants();
+  const csrfToken = useCSRFToken();
+  const { isLoading } = useEventsQuery();
 
   React.useLayoutEffect(() => {
-    setAPIRoot(API_ROOT);
-    V2HTTPUtils.setAPIRoot(APIV2_ROOT);
-    setReady(true);
-  }, [API_ROOT, APIV2_ROOT]);
-
-  React.useEffect(() => {
-    if (ready) {
-      dispatch(actions.singletons.fetchMe());
-    }
-  }, [dispatch, ready]);
-
-  React.useEffect(() => {
-    if (status.event !== 'success' && status.event !== 'loading' && ready) {
-      dispatch(actions.models.loadModels('event'));
-    }
-  }, [dispatch, status.event, ready]);
+    dispatch(setRoot({ root: APIV2_ROOT, limit: PAGINATION_LIMIT, csrfToken }));
+  }, [APIV2_ROOT, csrfToken, PAGINATION_LIMIT, dispatch]);
+  const canViewBids = usePermission('tracker.view_bid');
 
   return (
-    <Spinner spinning={!ready}>
+    <Spinner spinning={isLoading}>
       <BrowserRouter>
         <Routes>
           <Route path={rootPath}>
@@ -160,7 +136,9 @@ function App({ rootPath }) {
                 path="schedule_editor/:eventId"
                 element={
                   <React.Suspense fallback={<Loading />}>
-                    <ScheduleEditor />
+                    <Provider store={oldStore}>
+                      <ScheduleEditor />
+                    </Provider>
                   </React.Suspense>
                 }
               />