fix: Replaced fetchpaths with includes

Author: Zenoo

README.md

@@ -24,6 +24,8 @@
 
 ### How to seed your database
 
+- Edit `server/prisma/seed.ts`
+
 - Run `npm run db:seed`
 
 ## Deployment

client/src/api/RecordRoutes.ts

@@ -1,4 +1,4 @@
-import { Record } from '@fullstack-typescript-monorepo/prisma';
+import { Prisma, Record } from '@fullstack-typescript-monorepo/prisma';
 import Fetch from '../utils/fetcher';
 import Super from './Super';
 import { User } from './UserRoutes';
@@ -7,8 +7,15 @@ export type RecordWithAuthor = Record & {
   author: User;
 };
 
+export type RecordUpdate = Partial<Record> & {
+  author?: {
+    create?: Prisma.RecordCreateWithoutAuthorInput;
+    update?: Prisma.RecordUpdateWithoutAuthorInput;
+  }
+};
+
 const RecordRoutes = {
-  ...Super<Record>('record'),
+  ...Super<Record, RecordUpdate>('record'),
   list: (object?: string) => Fetch<RecordWithAuthor[]>('/api/record/list', {
     object,
   }),

client/src/api/RequestRoutes.ts

@@ -1,8 +1,10 @@
 import { Request } from '@fullstack-typescript-monorepo/prisma';
 import Super from './Super';
 
+export type RequestUpdate = Partial<Request>;
+
 const RequestRoutes = {
-  ...Super<Request>('request'),
+  ...Super<Request, RequestUpdate>('request'),
 };
 
 export default RequestRoutes;

client/src/api/Super.ts

@@ -1,35 +1,38 @@
+import { PrismaInclude } from '@fullstack-typescript-monorepo/core';
 import { TableState } from '../components/Datatable';
 import Fetch from '../utils/fetcher';
 
-export type RecursivePartial<T> = {
-  [P in keyof T]?: RecursivePartial<T[P]>;
-};
-
 export interface getProps {
   id: number;
-  fetchPath: string;
+  include?: PrismaInclude;
 }
 
-const Super = <Model>(model: string) => ({
-  insert: (data: Partial<Model>, fetchPath?: string) => Fetch<Model>(`/api/${model}`, data, 'PUT', { fetchPath }),
-  get: ({ id, fetchPath }: getProps) => Fetch<Model>(`/api/${model}/${id}`, {
-    fetchPath,
-  }),
-  getAll: (fetchPath: string) => Fetch<Model[]>(`/api/${model}/all`, {
-    fetchPath,
-  }),
-  getAllAsCsv: (fetchPath: string, title: string) => Fetch<Blob>(`/api/${model}/all/csv`, {
-    fetchPath,
+const Super = <Model, Setter extends object>(model: string) => ({
+  insert: (data: Setter) => Fetch<Model>(`/api/${model}`, data, 'PUT'),
+  get: ({ id, include }: getProps) => Fetch<Model>(`/api/${model}/${id}/get`, {
+    include,
+  }, 'POST'),
+  getAll: (include: PrismaInclude) => Fetch<Model[]>(`/api/${model}/all`, {
+    include,
+  }, 'POST'),
+  getAllAsCsv: (title: string) => Fetch<Blob>(`/api/${model}/all/csv`, {
     title,
   }),
   table: (
-    fetchPath: string,
     state: TableState,
+    include?: PrismaInclude,
   ) => Fetch<{ data: Model[], count: number }>(`/api/${model}/table`, {
-    fetchPath,
     state,
+    include,
+  }, 'POST'),
+  update: (
+    id: number,
+    data: Setter,
+    include?: PrismaInclude
+  ) => Fetch<Model>(`/api/${model}/${id}/update`, {
+    data,
+    include,
   }, 'POST'),
-  update: (id: number, data: RecursivePartial<Model>, fetchPath?: string) => Fetch<Model>(`/api/${model}/${id}`, data, 'POST', { fetchPath }),
   delete: (id: number) => Fetch<never>(`/api/${model}/${id}`, {}, 'DELETE'),
 });
 

client/src/api/UserRoutes.ts

@@ -1,13 +1,20 @@
-import { Person, User as _User } from '@fullstack-typescript-monorepo/prisma';
+import { Person, Prisma, User as _User } from '@fullstack-typescript-monorepo/prisma';
 import Fetch from '../utils/fetcher';
 import Super from './Super';
 
 export interface User extends Omit<_User, 'password'> {
   person: Person;
 }
 
+export type UserUpdate = Partial<_User> & {
+  person?: {
+    create?: Prisma.PersonCreateWithoutUserInput;
+    update?: Prisma.PersonUpdateWithoutUserInput;
+  }
+};
+
 const UserRoutes = {
-  ...Super<User>('user'),
+  ...Super<User, UserUpdate>('user'),
   authenticate: (login: string, password: string): Promise<User> => Fetch<User>('/api/user/authenticate', {
     login,
     password,

client/src/components/Datatable.tsx

@@ -19,9 +19,8 @@ export interface TableState {
 }
 
 interface DatatableProps<DataType, Model> extends Omit<DataGridProps, 'columns' | 'rows'> {
-  fetchPath: string;
   getter: (params: TableState) => Promise<{ data: DataType[], count: number }>;
-  setter?: (id: number, data: Partial<DataType>, fetchPath: string) => Promise<Model>;
+  setter?: (id: number, data: Partial<DataType>) => Promise<Model>;
   columns: GridColumns;
   options?: Omit<DataGridProps, 'columns' | 'rows'>;
   globalCsvExport: GlobalCsvExport;
@@ -33,7 +32,6 @@ interface DatatableProps<DataType, Model> extends Omit<DataGridProps, 'columns'
  * Datatable component
  */
 const Datatable = <DataType extends WithId, Model>({
-  fetchPath,
   getter,
   columns,
   options,
@@ -140,7 +138,7 @@ const Datatable = <DataType extends WithId, Model>({
     },
     processRowUpdate: (row: DataType) => {
       if (setter) {
-        const response = setter(row.id, row, fetchPath);
+        const response = setter(row.id, row);
         Alert.open('success', t('updateSuccess'));
         return response;
       }

client/src/components/DatatableGlobalExport.tsx

@@ -7,8 +7,7 @@ import { useLoader } from '../hooks/useLoader';
 import catchError from '../utils/catchError';
 
 export type GlobalCsvExport = {
-  fetcher: (fetchPath: string, title: string) => Promise<Blob>;
-  fetchPath: string;
+  fetcher: (title: string) => Promise<Blob>;
   title: string;
 };
 
@@ -27,7 +26,6 @@ const DatatableGlobalExport = (props: DatatableGlobalExportProps) => {
   const globalExport = useCallback(async () => {
     Loader.open();
     const blob = await globalCsvExport.fetcher(
-      globalCsvExport.fetchPath,
       globalCsvExport.title,
     ).catch(catchError(Alert, t));
 

client/src/components/forms/UserForm.tsx

@@ -1,9 +1,9 @@
-import { User } from '@fullstack-typescript-monorepo/prisma';
 import { LoadingButton } from '@mui/lab';
 import { Box, Checkbox, Divider, FormControlLabel, Grid, TextField } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import UserRoutes from '../../api/UserRoutes';
+import { useNavigate } from 'react-router';
+import UserRoutes, { UserUpdate } from '../../api/UserRoutes';
 import { useAlert } from '../../hooks/useAlert';
 import useForm from '../../hooks/useForm';
 import { useLoader } from '../../hooks/useLoader';
@@ -30,23 +30,21 @@ const UserForm = ({ data }: Props) => {
   const Alert = useAlert();
   const Loader = useLoader();
   const { t } = useTranslation('user');
+  const navigate = useNavigate();
 
   const { register, handleSubmit, formState: { isSubmitting }, reset } = useForm<Data>('user', {
     defaultValues: data,
   });
 
   // Submit user data
   const onSubmit = async (formData: Data) => {
-    const processedData: Partial<User> = {
+    const processedData: UserUpdate = {
       admin: formData.admin,
       login: formData.login,
       active: true,
-      personId: formData.idperson,
     };
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const personData = {
-      id: formData.idperson,
       firstName: formData.firstName,
       lastName: formData.lastName,
       email: formData.email,
@@ -55,21 +53,29 @@ const UserForm = ({ data }: Props) => {
 
     Loader.open();
     if (formData.id) { // Edition
-      processedData.id = formData.id;
       if (formData.password.length) {
         await UserRoutes.changePassword(formData.id, formData.password);
       }
 
-      await UserRoutes.update(formData.id, processedData).then(() => {
+      await UserRoutes.update(formData.id, {
+        ...processedData,
+        person: {
+          update: personData,
+        },
+      }).then(() => {
         Alert.open('success', 'Saved');
       }).catch(catchError(Alert, t));
     } else { // Addition
       processedData.password = formData.password;
       await UserRoutes.insert({
         ...processedData,
         connexionToken: '',
+        person: {
+          create: personData,
+        },
       }).then(() => {
         Alert.open('success', 'New user added');
+        navigate('/app/admin/user/list');
         reset();
       }).catch(catchError(Alert, t));
     }
@@ -79,7 +85,7 @@ const UserForm = ({ data }: Props) => {
   return (
     <form autoComplete="off" onSubmit={handleSubmit(onSubmit)}>
       <Grid container spacing={3} sx={{ pb: 2 }}>
-        <Grid item md={6} xs={12}>
+        <Grid item xs={12}>
           <FormControlLabel
             control={<Checkbox {...register('admin', 'checkbox')} defaultChecked={data.admin} />}
             label={t('giveAdminRights')}

client/src/hooks/useAlert.tsx

@@ -41,7 +41,7 @@ export const AlertProvider = ({ children }: AlertProviderProps) => {
   return (
     <AlertContext.Provider value={methods}>
       {children}
-      <Snackbar onClose={closeAlert} open={alert} sx={{ zIndex: 100 }}>
+      <Snackbar onClose={closeAlert} open={alert} sx={{ zIndex: 2100 }}>
         <Alert onClose={closeAlert} severity={alertSeverity} sx={{ boxShadow: 8 }} variant="filled">
           {alertMessage}
         </Alert>

client/src/layouts/TableLayout.tsx

@@ -1,3 +1,4 @@
+import { PrismaInclude } from '@fullstack-typescript-monorepo/core';
 import { Box, BoxProps, Button, ButtonGroup, Paper } from '@mui/material';
 import { DataGridProps, GridRowId } from '@mui/x-data-grid';
 import React, { useCallback, useState } from 'react';
@@ -15,12 +16,12 @@ interface TableOptions extends Omit<DataGridProps, 'rows'> {
 }
 
 interface TableLayoutProps<DataType, Model> {
-  fetchPath: string;
+  include?: PrismaInclude;
   getter: (
-    fetchPath: string,
     state: TableState,
+    include?: PrismaInclude,
   ) => Promise<{ data: Model[], count: number }>;
-  setter?: (id: number, data: Partial<DataType>, fetchPath: string) => Promise<Model>;
+  setter?: (id: number, data: Partial<DataType>, include?: object) => Promise<Model>;
   mapper?: (rows: Model) => DataType;
   add?: () => void;
   edit?: (id: number) => void;
@@ -39,7 +40,7 @@ interface TableLayoutProps<DataType, Model> {
  * Datatable component
  */
 const TableLayout = <DataType extends WithId, Model extends WithId>({
-  fetchPath,
+  include,
   getter,
   setter,
   mapper,
@@ -70,7 +71,7 @@ const TableLayout = <DataType extends WithId, Model extends WithId>({
    */
   const handleGetter = useCallback((params: TableState) => {
     if (authed) {
-      return getter(fetchPath, params).then((response) => ({
+      return getter(params, include).then((response) => ({
         data: response.data.map((item) => ({
           deleted, // Hack to force data reload on deletion, useless server-side
           ...mapper ? mapper(item) : item as unknown as DataType,
@@ -82,23 +83,22 @@ const TableLayout = <DataType extends WithId, Model extends WithId>({
       });
     }
     return Promise.resolve({ data: [], count: 0 });
-  }, [Alert, authed, deleted, fetchPath, getter, mapper, t]);
+  }, [Alert, authed, deleted, getter, include, mapper, t]);
 
   // Update actions table on setter call
   const handleSetter = useCallback((
     id: number,
     data: Partial<DataType>,
-    path: string,
   ) => new Promise<Model>((resolve, reject) => {
     if (setter) {
-      setter(id, data, path).then((response) => {
+      setter(id, data, include).then((response) => {
         resolve(response);
         setNewRecord((prev) => prev + 1);
       }).catch(reject);
     } else {
       reject();
     }
-  }), [setter]);
+  }), [include, setter]);
 
   // Enable/disable buttons based on row selection
   const handleSelection = useCallback((data: GridRowId[]) => {
@@ -182,7 +182,6 @@ const TableLayout = <DataType extends WithId, Model extends WithId>({
             <Datatable<DataType, Model>
               {...tableOptions}
               onSelectionModelChange={handleSelection}
-              fetchPath={fetchPath}
               getter={handleGetter}
               setter={setter ? handleSetter : undefined}
               globalCsvExport={globalCsvExport}