feat: add AlertBar & styled component example

Author: AlexStack

src/components/Homepage.tsx

@@ -76,7 +76,7 @@ export default function Homepage({
 
           <Box sx={{ m: 5 }}>
             <h4>
-              Test local NextJs API /api/test method POST with form variables
+              Test local NextJs API /api/tes POST method (client-side component)
             </h4>
             <ReactHookForm />
           </Box>

src/components/shared/AlertBar.tsx

@@ -0,0 +1,60 @@
+import CloseIcon from '@mui/icons-material/Close';
+import {
+  Alert,
+  AlertColor,
+  IconButton,
+  Slide,
+  Snackbar,
+  SnackbarOrigin,
+} from '@mui/material';
+
+export interface AlertBarProps {
+  message: React.ReactNode;
+  onClose?: () => void;
+  severity?: AlertColor;
+  vertical?: SnackbarOrigin['vertical'];
+  horizontal?: SnackbarOrigin['horizontal'];
+  autoHideSeconds?: number;
+  transitionSeconds?: number;
+}
+
+// my personal alert bar, feel free to use it, examples are in ReactHookForm.tsx
+export const AlertBar = ({
+  message,
+  severity = 'info',
+  vertical = 'bottom',
+  horizontal = 'center',
+  onClose,
+  autoHideSeconds = 5,
+  transitionSeconds = 0.5,
+}: AlertBarProps) => {
+  return message ? (
+    <Snackbar
+      anchorOrigin={{ vertical, horizontal }}
+      open={!!message}
+      onClose={onClose}
+      autoHideDuration={autoHideSeconds * 1000}
+      TransitionComponent={(props) => <Slide {...props} direction='up' />}
+      transitionDuration={transitionSeconds * 1000}
+      action={
+        <IconButton
+          size='small'
+          aria-label='close'
+          color='inherit'
+          onClick={onClose}
+        >
+          <CloseIcon fontSize='small' />
+        </IconButton>
+      }
+    >
+      <Alert
+        onClose={onClose}
+        severity={severity}
+        variant='filled'
+        sx={{ width: '100%' }}
+      >
+        {message}
+      </Alert>
+    </Snackbar>
+  ) : null;
+};

src/components/shared/ReactHookForm.tsx

@@ -1,29 +1,52 @@
 'use client';
 
+import styled from '@emotion/styled';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Box, Button, FormHelperText } from '@mui/material';
-import React from 'react';
+import { Save } from '@mui/icons-material';
+import { Box, Button, FormHelperText, TextField } from '@mui/material';
+import React, { useEffect, useState } from 'react';
 import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { AlertBar, AlertBarProps } from '@/components/shared/AlertBar';
+
 import { consoleLog } from '@/utils/shared/console-log';
 import { getApiResponse } from '@/utils/shared/get-api-response';
 
 const zodSchema = z.object({
-  name: z.string().min(5).nonempty({ message: 'Name is required' }),
-  email: z.string().min(10).email({ message: 'Invalid email address' }),
+  name: z
+    .string()
+    .min(3, { message: 'Name must contain at least 3 characters' })
+    .nonempty({ message: 'Name is required' }),
+  email: z
+    .string()
+    .min(10, { message: 'Email must contain at least 10 characters' })
+    .email({ message: 'Invalid email address' }),
 });
 
+const StyledForm = styled.form`
+  .MuiFormHelperText-root {
+    text-align: center;
+    color: darkred;
+    margin-bottom: 1rem;
+  }
+`;
+
 type FormValues = z.infer<typeof zodSchema>;
 
 const ReactHookForm: React.FC = () => {
   const apiEndpoint = '/api/test';
   const [apiResult, setApiResult] = React.useState<FormValues>();
 
+  const [alertBarProps, setAlertBarProps] = useState<AlertBarProps>({
+    message: '',
+    severity: 'info',
+  });
+
   const {
     handleSubmit,
     control,
-    formState: { errors },
+    formState: { errors, isValid },
   } = useForm<FormValues>({
     resolver: zodResolver(zodSchema),
   });
@@ -39,20 +62,42 @@ const ReactHookForm: React.FC = () => {
       });
       setApiResult(result?.reqData);
       consoleLog('getApiResponse result', result, errors);
+
+      setAlertBarProps({
+        message: 'Form submitted successfully',
+        severity: 'success',
+      });
     } catch (error) {
       consoleLog('handleSubmit ERROR', error);
+
+      setAlertBarProps({
+        message: 'Form submission failed',
+        severity: 'error',
+      });
     }
   };
 
+  useEffect(() => {
+    if (!isValid && Object.keys(errors).length > 0) {
+      setAlertBarProps({
+        message: 'Please fix the form errors',
+        severity: 'warning',
+        autoHideSeconds: 4,
+      });
+    }
+  }, [isValid, errors]);
+
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
+    <StyledForm onSubmit={handleSubmit(onSubmit)}>
       <Box sx={{ m: 2 }}>
-        <label>Name:</label>
+        {/* <label>Name:</label> */}
         <Controller
           name='name'
           control={control}
           defaultValue=''
-          render={({ field }) => <input {...field} />}
+          render={({ field }) => (
+            <TextField label='Name' {...field} size='small' />
+          )}
         />
         {errors.name && (
           <FormHelperText sx={{ textAlign: 'center' }}>
@@ -62,12 +107,14 @@ const ReactHookForm: React.FC = () => {
       </Box>
 
       <Box sx={{ m: 2 }}>
-        <label>Email:</label>
+        {/* <label>Email:</label> */}
         <Controller
           name='email'
           control={control}
           defaultValue=''
-          render={({ field }) => <input {...field} />}
+          render={({ field }) => (
+            <TextField label='Email' {...field} size='small' />
+          )}
         />
         {errors.email && (
           <FormHelperText sx={{ textAlign: 'center' }}>
@@ -80,10 +127,15 @@ const ReactHookForm: React.FC = () => {
           API result from {apiEndpoint}: {apiResult.name} & {apiResult.email}
         </Box>
       )}
-      <Button variant='contained' type='submit'>
+      <Button variant='contained' type='submit' startIcon={<Save />}>
         Test react hook form with zod
       </Button>
-    </form>
+
+      <AlertBar
+        onClose={() => setAlertBarProps({ message: '' })}
+        {...alertBarProps}
+      />
+    </StyledForm>
   );
 };