navigation

src_generic/components/ResourceView.tsx

@@ -4,6 +4,7 @@ import { ResourceConfig } from '../types/config';
 import { useResource } from '../hooks/useResource';
 import GenericForm from './GenericForm';
 import EnhancedTable from './EnhancedTable';
+import { useParams, useLocation, useNavigate, Routes, Route } from 'react-router-dom';
 
 interface ResourceViewProps {
   config: ResourceConfig;
@@ -11,68 +12,75 @@ interface ResourceViewProps {
 }
 
 export default function ResourceView({ config, onNavigateToResource }: ResourceViewProps) {
-  const [view, setView] = React.useState<'list' | 'create' | 'edit'>('list');
-  const [selectedItem, setSelectedItem] = React.useState<any>(null);
+  const { id } = useParams();
+  const location = useLocation();
+  const navigate = useNavigate();
+  
+  const isCreate = location.pathname.endsWith('/create');
+  const isEdit = location.pathname.includes('/edit/');
+  const isView = !!id && !isEdit;
+  const isList = !id && !isCreate;
 
-  const { useList, useCreate, useUpdate, useDelete } = useResource(config);
+  const { useList, useRead, useCreate, useUpdate, useDelete } = useResource(config);
 
-  const { data, isLoading, error } = useList();
+  const listQuery = useList();
+  const itemQuery = useRead(id || "");
+  
   const createMutation = useCreate();
   const updateMutation = useUpdate();
   const deleteMutation = useDelete();
 
   const handleEdit = (item: any) => {
-    setSelectedItem(item);
-    setView('edit');
+    navigate(`/${config.name}/edit/${item[config.primaryKey]}`);
   };
 
   const handleCreate = () => {
-    setSelectedItem(null);
-    setView('create');
+    navigate(`/${config.name}/create`);
   };
 
   const handleSave = async (formData: any) => {
     try {
-      if (view === 'edit') {
-        const id = formData[config.primaryKey];
-        await updateMutation.mutateAsync({ id, data: formData });
+      if (isEdit) {
+        await updateMutation.mutateAsync({ id: id!, data: formData });
       } else {
         await createMutation.mutateAsync(formData);
       }
-      setView('list');
+      navigate(`/${config.name}`);
     } catch (err) {
       console.error('Save failed:', err);
     }
   };
 
-  const handleDelete = async (id: string) => {
+  const handleDelete = async (itemId: string) => {
     if (window.confirm('Are you sure you want to delete this item?')) {
-      await deleteMutation.mutateAsync(id);
+      await deleteMutation.mutateAsync(itemId);
     }
   };
 
-  if (isLoading) return <CircularProgress />;
-  if (error) return <Typography color="error">Error loading {config.pluralLabel}</Typography>;
+  if (isList && listQuery.isLoading) return <CircularProgress />;
+  if ((isEdit || isView) && itemQuery.isLoading) return <CircularProgress />;
 
   return (
     <Box>
-      {view === 'list' ? (
+      {isList ? (
         <EnhancedTable
           config={config}
-          data={data || []}
+          data={listQuery.data || []}
           onEdit={handleEdit}
           onDelete={handleDelete}
           onCreate={handleCreate}
-          onNavigateToResource={onNavigateToResource}
+          onNavigateToResource={(res, id) => navigate(`/${res}/${id}`)}
         />
       ) : (
         <Paper sx={{ p: 4 }}>
           <GenericForm
             config={config}
-            initialData={selectedItem}
+            initialData={isCreate ? null : itemQuery.data}
             onSave={handleSave}
-            onCancel={() => setView('list')}
+            onCancel={() => navigate(`/${config.name}`)}
             loading={createMutation.isPending || updateMutation.isPending}
+            readOnly={isView}
+            onEditClick={() => navigate(`/${config.name}/edit/${id}`)}
           />
         </Paper>
       )}