fix resource remount

usecollapsar · Oct 22, 2023 · 440d7d6 · 440d7d6
1 parent 5e9a988
commit 440d7d6
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 19 deletions.
diff --git a/setup.py b/setup.py
@@ -8,7 +8,7 @@
     # Versions should comply with PEP440.  For a discussion on single-sourcing
     # the version across setup.py and the project code, see
     # https://packaging.python.org/en/latest/single_source_version.html
-    version="0.0.6",
+    version="0.0.7",
     packages=[
         "collapsar",
         "collapsar.config",

diff --git a/src/collapsar/assets/js/components/Sidebar.tsx b/src/collapsar/assets/js/components/Sidebar.tsx
@@ -1,15 +1,19 @@
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
-import { Link, useLocation } from "react-router-dom";
-import { FaUser } from "react-icons/fa6";
+import { Link, useLocation, useNavigate, useSearchParams } from "react-router-dom";
 
 export function Sidebar({ className }) {
   const menuItems = window.Collapsar.sidebar.items;
   const location = useLocation();
+  const navigate = useNavigate();
 
   const checkCurrentRoute = (route) => {
     return route == location.pathname ? "secondary" : "ghost";
-  }
+  };
+
+  const handleChangeRoute = (route) => {
+    navigate({pathname: route}, { replace: true });
+  };
 
   return (
     <div className={cn("pb-12", className)}>
@@ -19,7 +23,10 @@ export function Sidebar({ className }) {
             Collapsar
           </h2>
           <div className="space-y-1">
-            <Button variant={checkCurrentRoute("/")} className="w-full justify-start">
+            <Button
+              variant={checkCurrentRoute("/")}
+              className="w-full justify-start"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -46,10 +53,13 @@ export function Sidebar({ className }) {
             </h2>
             <div className="space-y-1">
               {menuItems[key].map((item, k) => (
-                <Button key={k} variant={checkCurrentRoute("/resource/" + item.urikey)} className="w-full justify-start" asChild>
-                  <Link to={"/resource/" + item.urikey}>
-                    {item.title}
-                  </Link>
+                <Button
+                  key={k}
+                  variant={checkCurrentRoute("/resource/" + item.urikey)}
+                  className="w-full justify-start"
+                  onClick={() => handleChangeRoute("/resource/" + item.urikey)}
+                >
+                  {item.title}
                 </Button>
               ))}
             </div>

diff --git a/src/collapsar/assets/js/pages/ResourceIndex.tsx b/src/collapsar/assets/js/pages/ResourceIndex.tsx
@@ -46,9 +46,10 @@ export function ResourceIndex() {
   const [searchParams, setSearchParams] = useSearchParams()
 
   const [pagination, setPagination] = React.useState({
-    pageIndex: searchParams.has('page') ? parseInt(searchParams.get('page')) : 1,
+    pageIndex: 0,
     pageSize: 10,
   });
+
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
     []
   );
@@ -57,12 +58,10 @@ export function ResourceIndex() {
   const [rowSelection, setRowSelection] = React.useState({});
 
   const handlePagination = ({ page }) => {
-    axios.get(`/collapsar/api/${resource}?page=${page}`).then((response) => {
+    axios.get(`/collapsar/api/${resource}?page=${page + 1}`).then((response) => {
       setData(response.data.data);
       setFields(response.data.fields);
       setMeta(response.data.meta);
-
-      setSearchParams(`?${new URLSearchParams({ page: response.data.meta.current_page })}`)
     });
   };
 
@@ -161,9 +160,13 @@ export function ResourceIndex() {
     },
   });
 
+  React.useEffect(() => {
+    setSearchParams(`?${new URLSearchParams({ page: table.getState().pagination.pageIndex + 1 })}`)
+  }, [pagination]);
+
   React.useEffect(() => {
     handlePagination({ page: table.getState().pagination.pageIndex });
-  }, [resource, pagination]);
+  }, [pagination, resource]);
 
   return (
     <div className="w-full">
@@ -269,14 +272,14 @@ export function ResourceIndex() {
         </div>
 
         <div className="flex-1 text-sm text-muted-foreground">
-              Page {table.getState().pagination.pageIndex} of{" "} {meta.last_page}
+              Page {table.getState().pagination.pageIndex + 1} of{" "} {meta.last_page}
         </div>
         <div className="space-x-2">
           <Button
             variant="outline"
             size="sm"
             onClick={() => table.previousPage()}
-            disabled={table.getState().pagination.pageIndex <= 1}
+            disabled={!table.getCanPreviousPage()}
           >
             Previous
           </Button>

diff --git a/src/collapsar/assets/js/services/router.tsx b/src/collapsar/assets/js/services/router.tsx
@@ -2,12 +2,18 @@ import { Layout } from "../pages/Layout";
 import { ResourceIndex } from "../pages/ResourceIndex";
 
 import {
-  createBrowserRouter,
+  createBrowserRouter, useParams,
 } from "react-router-dom";
 import { ResourceEdit } from "@/pages/ResourceEdit";
 import { ResourceShow } from "@/pages/ResourceShow";
 import axios from "axios";
 
+// use proxy to remount component on resource change
+const ResourceIndexProxy = (props: any) =>
+{
+  const { resource } = useParams();
+  return <ResourceIndex key={resource} {...props} />;
+}
 
 const routes = [
   {
@@ -16,7 +22,7 @@ const routes = [
     children: [
       {
         path: 'resource/:resource',
-        element: <ResourceIndex />,
+        element: <ResourceIndexProxy />,
       },
       {
         path: 'resource/:resource/:id',
@@ -48,7 +54,7 @@ const routes = [
         element: <ResourceEdit />,
         loader: async ({params}) => {
           const res = await axios.get(`/collapsar/api/${params.resource}/creation-fields`)
-            
+
           return {
             isCreating: true,
             fields: res.data.fields,