add error for form

Author: giladfuchs

react/src/store/generalSlice.ts

@@ -41,14 +41,13 @@ export const createOrUpdateRow = createAsyncThunk<
     unknown,
     { model: ModelType; id: number | string; data: Record<string, FieldValue>; message: string },
     { rejectValue: string }
->('models/create_or_update_row', async ({ model, id, data, message }, thunkApi: GetThunkAPI<{ rejectValue: string }>) => {
+>('models/create_or_update_row', async ({ model, id, data, message }, thunkApi: GetThunkAPI<{ rejectValue: unknown }>) => {
     try {
         const res = await API.post(`/${model}/${id}`, data);
         toast.success(message);
         return res.data;
     } catch (err: unknown) {
-        const msg = err instanceof Error ? err.message : 'Failed to save row';
-        return thunkApi.rejectWithValue(msg);
+        return thunkApi.rejectWithValue(err);
     }
 });
 

react/src/ui-component/cards/MainCard.tsx

@@ -1,4 +1,4 @@
-import React, { Ref } from 'react';
+import { CSSProperties, forwardRef, ReactNode, Ref } from 'react';
 import { useTheme, SxProps, Theme } from '@mui/material/styles';
 import { Card, CardContent, CardHeader, Divider, Typography, CardProps, CardHeaderProps, CardContentProps } from '@mui/material';
 
@@ -7,21 +7,21 @@ const headerSX = { '& .MuiCardHeader-action': { mr: 0 } };
 export interface MainCardProps extends Omit<CardProps, 'content' | 'title' | 'children' | 'sx'> {
     border?: boolean;
     boxShadow?: boolean;
-    children: React.ReactNode | string;
-    style?: React.CSSProperties;
+    children: ReactNode | string;
+    style?: CSSProperties;
     content?: boolean;
     className?: string;
     contentClass?: string;
     contentSX?: CardContentProps['sx'];
     darkTitle?: boolean;
     sx?: SxProps<Theme>; // you said this is always an object
-    secondary?: CardHeaderProps['action'] | React.ReactNode;
+    secondary?: CardHeaderProps['action'] | ReactNode;
     shadow?: string;
     elevation?: number;
-    title?: React.ReactNode | string;
+    title?: ReactNode | string;
 }
 
-const MainCard = React.forwardRef<HTMLDivElement, MainCardProps>(function MainCard(
+const MainCard = forwardRef<HTMLDivElement, MainCardProps>(function MainCard(
     {
         border = true,
         boxShadow,
@@ -54,9 +54,9 @@ const MainCard = React.forwardRef<HTMLDivElement, MainCardProps>(function MainCa
 
     return (
         <Card ref={ref} {...others} sx={mergedSx}>
-            {!darkTitle && title && <CardHeader sx={headerSX} title={title} action={secondary as React.ReactNode} />}
+            {!darkTitle && title && <CardHeader sx={headerSX} title={title} action={secondary as ReactNode} />}
             {darkTitle && title && (
-                <CardHeader sx={headerSX} title={<Typography variant="h3">{title}</Typography>} action={secondary as React.ReactNode} />
+                <CardHeader sx={headerSX} title={<Typography variant="h3">{title}</Typography>} action={secondary as ReactNode} />
             )}
             {title && <Divider />}
             {content ? (

react/src/ui-component/form/Form.tsx

@@ -1,24 +1,28 @@
+import { useState } from 'react';
+import { isAxiosError } from 'axios';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Button } from '@mui/material';
 import { DefaultRootStateProps, ModelType, create_form_fields, FormField, get_form_by_model, FieldValue, FormModelType } from '@/types';
 import { array_obj_to_obj_with_key } from '@/utils/transformation';
 import { createOrUpdateRow } from '@/store/generalSlice';
 import { useAppDispatch } from '@/store';
-import { FormattedMessage, useIntl } from 'react-intl';
 import DynamicForm from './DynamicForm';
-import { Button } from '@mui/material';
 import MainCard from '../cards/MainCard';
+import FormError from '@/ui-component/form/FormError';
 
-const Form = () => {
+export default function Form() {
     const intl = useIntl();
-
     const dispatch = useAppDispatch();
 
     const navigate = useNavigate();
     const { id, model } = useParams() as {
         id: string;
         model: ModelType;
     };
+    const [fieldError, setFieldError] = useState<string | null>(null);
+
     const { models, student_id, user_id } = useSelector((state: DefaultRootStateProps) => state.general);
 
     const is_add: boolean = id === 'add';
@@ -33,22 +37,40 @@ const Form = () => {
         const data: Record<string, FieldValue> = Object.fromEntries(
             send_fields
                 .filter((f: FormField) => f.key != null)
-                .map<[string, FieldValue]>((f) => [String(f.key), typeof f.value === 'string' ? f.value.trim() : (f.value ?? null)])
+                .map<[string, FieldValue]>((f) => {
+                    if (typeof f.value === 'string') {
+                        const trimmed = f.value.trim();
+                        return [String(f.key), trimmed === '' ? null : trimmed];
+                    }
+                    return [String(f.key), f.value ?? null];
+                })
         );
         if ([ModelType.student, ModelType.assignment].includes(model)) {
             data.teacher_id = user_id;
         }
         if (model === ModelType.assignment) {
             data.student_id = student_id;
         }
+
         try {
             const message = intl.formatMessage({ id: is_add ? 'toast.create_success' : 'toast.edit_success' }, { model });
             await dispatch(createOrUpdateRow({ model, data, id, message })).unwrap();
             if (model === ModelType.teacher) navigate(`/login`);
             else if (model === ModelType.student && is_add) navigate(`/${ModelType.student}`);
             else navigate(`/view/${student_id}`);
-        } catch (err) {
-            console.error('Error submitting form:', err);
+        } catch (err: unknown) {
+            if (isAxiosError(err)) {
+                let intlId = err.response?.data?.message ?? 'form.error';
+
+                const errors = err.response?.data?.errors;
+                if (Array.isArray(errors) && errors.length > 0 && errors[0]?.field) {
+                    intlId = `form.label.${errors[0].field}`;
+                }
+
+                setFieldError(intlId);
+            } else {
+                setFieldError('form.error');
+            }
         }
     };
 
@@ -58,8 +80,7 @@ const Form = () => {
                 <FormattedMessage id="form.button.back" />
             </Button>
             <DynamicForm title={title} fields={fields} onSubmit={handleSubmit} />
+            {fieldError && <FormError fieldError={fieldError} />}
         </MainCard>
     );
-};
-
-export default Form;
+}

react/src/ui-component/form/FormError.tsx

@@ -0,0 +1,31 @@
+import { FormattedMessage, useIntl } from 'react-intl';
+import { toast } from 'sonner';
+import { Typography } from '@mui/material';
+
+export default function FormError({ fieldError }: { fieldError: string }) {
+    const intl = useIntl();
+    const isFieldSpecific = fieldError.startsWith('form.label.');
+    const isUnique = fieldError.includes('unique:');
+
+    let baseFieldId = isUnique
+        ? fieldError.slice(fieldError.indexOf('unique:') + 'unique:'.length)
+        : fieldError.slice('form.label.'.length);
+    toast.error(intl.formatMessage({ id: 'form.error' }), {
+        description: isUnique
+            ? intl.formatMessage({ id: 'form.error.unique' }, { field: intl.formatMessage({ id: baseFieldId }) })
+            : intl.formatMessage({ id: 'form.error.required.dynamic' }, { field: intl.formatMessage({ id: baseFieldId }) })
+    });
+    return (
+        <Typography textAlign="center" fontSize={isFieldSpecific ? '2em' : '2em'} color="error" mt={2}>
+            {isUnique ? (
+                <FormattedMessage id="form.error.unique" values={{ field: intl.formatMessage({ id: baseFieldId }) }} />
+            ) : isFieldSpecific ? (
+                <FormattedMessage id="form.error.required.dynamic" values={{ field: intl.formatMessage({ id: baseFieldId }) }} />
+            ) : fieldError === 'form.error' ? (
+                <FormattedMessage id={fieldError} />
+            ) : (
+                <>{fieldError}</>
+            )}
+        </Typography>
+    );
+}

react/src/ui-component/table/MuiTable.tsx

@@ -9,13 +9,11 @@ import { fetchRowsByModel } from '@/store/generalSlice';
 import { useAppDispatch } from '@/store';
 import { DefaultRootStateProps, get_columns_mui_by_model, ModelType, MUITableModelType } from '@/types';
 
-const MuiTable = ({ model }: { model: ModelType }) => {
+export default function MuiTable({ model }: { model: ModelType }) {
     const cells = get_columns_mui_by_model(model);
     const dispatch = useAppDispatch();
+    const rows: MUITableModelType[] = useSelector((state: DefaultRootStateProps) => state.general.models[model] as MUITableModelType[]);
 
-    const rows: MUITableModelType[] = Array.isArray(useSelector((state: DefaultRootStateProps) => state.general.models[model]))
-        ? (useSelector((state: DefaultRootStateProps) => state.general.models[model]) as MUITableModelType[])
-        : [];
     useEffect(() => {
         dispatch(fetchRowsByModel({ model }));
     }, [dispatch, model]);
@@ -58,6 +56,4 @@ const MuiTable = ({ model }: { model: ModelType }) => {
             </MainCard>
         </Grid>
     );
-};
-
-export default MuiTable;
+}

react/src/ui-component/table/ag-grid/AGTableRenderer.tsx

@@ -12,7 +12,7 @@ const defaultColDef: ColDef = {
     sortable: true
 };
 
-const AGTableRenderer = ({ cols, rows }: { cols: ColDef<AGTableModelType>[]; rows: AGTableModelType[] }) => {
+export default function AGTableRenderer({ cols, rows }: { cols: ColDef<AGTableModelType>[]; rows: AGTableModelType[] }) {
     const intl = useIntl();
     const customization = useSelector((state: DefaultRootStateProps) => state.customization);
 
@@ -47,6 +47,4 @@ const AGTableRenderer = ({ cols, rows }: { cols: ColDef<AGTableModelType>[]; row
             />
         </div>
     );
-};
-
-export default AGTableRenderer;
+}

react/src/utils/locales/en.json

@@ -5,6 +5,12 @@
     "grade": "Grade",
     "title": "Title",
     "detail": "Detail",
+    "form.label.name": "Name",
+    "form.label.id": "ID",
+    "form.label.phone": "Phone",
+    "form.label.grade": "Grade",
+    "form.label.title": "Title",
+    "form.label.detail": "Detail",
     "form_header_add_teacher": "Add Teacher",
     "form_header_add_student": "Add Student",
     "form_header_add_assignment": "Add Assignment",
@@ -24,5 +30,9 @@
     "success.delete.student": "Student deleted successfully\nAlso all of their assignments were deleted.",
     "success.delete.assignment": "Assignment deleted successfully",
     "toast.create_success": "Successfully created {model}",
-    "toast.edit_success": "Successfully updated {model}"
+    "toast.edit_success": "Successfully updated {model}",
+
+    "form.error": "Save failed",
+    "form.error.unique": "The field {field} must be unique",
+    "form.error.required.dynamic": "The field {field} is required"
 }