Merge pull request #4 from AlexStack/nextjs14

Add useConfirmationDialog & SubmitButton example

Author: AlexStack

.vscode/settings.json

@@ -3,7 +3,7 @@
   "editor.formatOnSave": true,
   "editor.tabSize": 2,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   // Tailwind CSS Autocomplete, add more if used in projects
   "tailwindCSS.classAttributes": [

README.md

@@ -12,6 +12,12 @@ If you prefer Tailwind css, check this: [Tailwind-CSS-Version](https://github.co
 
 </div>
 
+## Demo
+
+![](./public/images/cover.png)
+
+🚘🚘🚘 [**Click here to see an online demo**](https://mui-nextjs-ts.vercel.app) 🚘🚘🚘
+
 ## Features
 
 This repository is 🔋 battery packed with:

public/images/cover.png

@@ -15,8 +15,7 @@ export const metadata: Metadata = {
   },
   description: SITE_CONFIG.description,
   robots: { index: true, follow: true },
-  // !STARTERCONF this is the default favicon, you can generate your own from https://realfavicongenerator.net/
-  // ! copy to /favicon folder
+  metadataBase: new URL(SITE_CONFIG.url),
   icons: {
     icon: '/favicon/favicon.ico',
     shortcut: '/favicon/favicon-16x16.png',

src/app/layout.tsx

@@ -2,13 +2,16 @@
 
 import styled from '@emotion/styled';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Save } from '@mui/icons-material';
+import { NextPlan, 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 useConfirmationDialog from '@/hooks/useConfirmDialog';
+
 import { AlertBar, AlertBarProps } from '@/components/shared/AlertBar';
+import SubmitButton from '@/components/shared/SubmitButton';
 
 import { consoleLog } from '@/utils/shared/console-log';
 import { getApiResponse } from '@/utils/shared/get-api-response';
@@ -37,22 +40,27 @@ type FormValues = z.infer<typeof zodSchema>;
 const ReactHookForm: React.FC = () => {
   const apiEndpoint = '/api/test';
   const [apiResult, setApiResult] = React.useState<FormValues>();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
 
   const [alertBarProps, setAlertBarProps] = useState<AlertBarProps>({
     message: '',
     severity: 'info',
   });
 
+  const dialog = useConfirmationDialog();
+
   const {
     handleSubmit,
     control,
     formState: { errors, isValid },
+    setValue,
   } = useForm<FormValues>({
     resolver: zodResolver(zodSchema),
   });
 
   const onSubmit: SubmitHandler<FormValues> = async (data) => {
     try {
+      setIsSubmitting(true);
       const result = await getApiResponse<{
         reqData: FormValues;
       }>({
@@ -62,14 +70,16 @@ const ReactHookForm: React.FC = () => {
       });
       setApiResult(result?.reqData);
       consoleLog('getApiResponse result', result, errors);
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      setIsSubmitting(false);
 
       setAlertBarProps({
         message: 'Form submitted successfully',
         severity: 'success',
       });
     } catch (error) {
       consoleLog('handleSubmit ERROR', error);
-
+      setIsSubmitting(false);
       setAlertBarProps({
         message: 'Form submission failed',
         severity: 'error',
@@ -90,7 +100,6 @@ const ReactHookForm: React.FC = () => {
   return (
     <StyledForm onSubmit={handleSubmit(onSubmit)}>
       <Box sx={{ m: 2 }}>
-        {/* <label>Name:</label> */}
         <Controller
           name='name'
           control={control}
@@ -107,7 +116,6 @@ const ReactHookForm: React.FC = () => {
       </Box>
 
       <Box sx={{ m: 2 }}>
-        {/* <label>Email:</label> */}
         <Controller
           name='email'
           control={control}
@@ -122,19 +130,48 @@ const ReactHookForm: React.FC = () => {
           </FormHelperText>
         )}
       </Box>
-      {apiResult && (
+      {apiResult && !isSubmitting && (
         <Box sx={{ m: 2, color: 'green' }}>
           API result from {apiEndpoint}: {apiResult.name} & {apiResult.email}
         </Box>
       )}
-      <Button variant='contained' type='submit' startIcon={<Save />}>
-        Test react hook form with zod
-      </Button>
+
+      <SubmitButton
+        isSubmitting={isSubmitting}
+        submittingText='Fetching API ...'
+      >
+        <Button variant='contained' type='submit' startIcon={<Save />}>
+          Test react hook form with zod
+        </Button>
+      </SubmitButton>
+
+      <Box sx={{ m: 5 }}>
+        <Button
+          variant='outlined'
+          onClick={() => {
+            const randomNumber = Math.floor(Math.random() * 90) + 10;
+            dialog.openConfirmDialog({
+              title: 'Change form name',
+              content: `Are you sure to change above form name to Alex ${randomNumber} and submit?`,
+              onConfirm: () => {
+                setValue('name', `Alex ${randomNumber}`);
+                setValue('email', 'alex@test.com');
+                handleSubmit(onSubmit)();
+              },
+            });
+          }}
+          endIcon={<NextPlan />}
+        >
+          Test MUI confirmation dialog
+        </Button>
+      </Box>
 
       <AlertBar
         onClose={() => setAlertBarProps({ message: '' })}
         {...alertBarProps}
       />
+
+      {dialog.renderConfirmationDialog()}
     </StyledForm>
   );
 };

src/components/shared/ReactHookForm.tsx

@@ -0,0 +1,41 @@
+import { ButtonProps, CircularProgress } from '@mui/material';
+import * as React from 'react';
+
+export interface SubmitButtonProps {
+  children: React.ReactElement<ButtonProps>;
+  isSubmitting?: boolean;
+  submittingColor?: string;
+  submittingSize?: string | number;
+  submittingText?: string;
+}
+
+const SubmitButton = ({
+  children,
+  isSubmitting,
+  submittingColor,
+  submittingSize = '1rem',
+  submittingText = 'Submitting...',
+}: SubmitButtonProps) => {
+  const submittingIconColor = submittingColor || children.props.color;
+  return (
+    <>
+      {React.cloneElement(children, {
+        startIcon: !isSubmitting ? (
+          children.props.startIcon
+        ) : (
+          <CircularProgress
+            style={{ color: submittingIconColor }}
+            size={submittingSize}
+          />
+        ),
+        disabled: children.props.disabled ?? isSubmitting,
+        children:
+          isSubmitting && submittingText
+            ? submittingText
+            : children.props.children,
+      })}
+    </>
+  );
+};
+
+export default SubmitButton;

src/components/shared/SubmitButton.tsx

@@ -0,0 +1,133 @@
+import styled from '@emotion/styled';
+import { Close } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import Button, { ButtonProps } from '@mui/material/Button';
+import Dialog, { DialogProps } from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import React, { cloneElement, ReactNode, useState } from 'react';
+
+export interface ConfirmationDialogProps {
+  title: string;
+  content: ReactNode;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  cancelText?: ReactNode;
+  confirmText?: ReactNode;
+  cancelButton?: React.ReactElement<ButtonProps>;
+  confirmButton?: React.ReactElement<ButtonProps>;
+  dialogPaperProps?: DialogProps['PaperProps'];
+  autoClose?: boolean; // auto close dialog after confirm
+  hideCancelButton?: boolean;
+  hideCloseButton?: boolean;
+}
+
+const StyledContentDiv = styled.div`
+  min-width: 19rem; // 19x16 = 304px
+  .MuiDialogTitle-root {
+    padding: 1rem;
+  }
+  .MuiDialogContent-root {
+    padding: 0 1rem 1rem 1rem;
+  }
+  .close-button {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+`;
+
+const useConfirmationDialog = () => {
+  const defaultDialogProps: ConfirmationDialogProps = {
+    title: '',
+    content: '',
+    autoClose: true,
+    hideCancelButton: false,
+    hideCloseButton: false,
+  };
+  const [open, setOpen] = useState(false);
+  const [dialogProps, setDialogProps] =
+    useState<ConfirmationDialogProps>(defaultDialogProps);
+
+  const handleOpen = (config: ConfirmationDialogProps) => {
+    setDialogProps({
+      ...defaultDialogProps,
+      ...config,
+      confirmButton: config.confirmButton || (
+        <Button color='primary' variant='contained'>
+          {config.confirmText || 'OK'}
+        </Button>
+      ),
+      cancelButton: config.cancelButton || (
+        <Button color='primary'>{config.cancelText || 'Cancel'}</Button>
+      ),
+    });
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setDialogProps({
+      ...defaultDialogProps,
+      title: '',
+      content: '',
+    });
+  };
+
+  const handleConfirm = () => {
+    dialogProps.onConfirm?.();
+    dialogProps.autoClose && handleClose();
+  };
+
+  const handleCancel = () => {
+    dialogProps.onCancel?.();
+    dialogProps.autoClose && handleClose();
+  };
+
+  const renderConfirmationDialog = () => {
+    return (
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        PaperProps={dialogProps.dialogPaperProps}
+      >
+        {dialogProps.title && (
+          <StyledContentDiv>
+            <DialogTitle>{dialogProps.title}</DialogTitle>
+            {!dialogProps.hideCloseButton && (
+              <IconButton
+                className='close-button'
+                color='inherit'
+                onClick={handleCancel}
+                aria-label='close'
+              >
+                <Close />
+              </IconButton>
+            )}
+            <DialogContent>{dialogProps.content}</DialogContent>
+            <DialogActions>
+              {dialogProps.cancelButton &&
+                !dialogProps.hideCancelButton &&
+                cloneElement(dialogProps.cancelButton, {
+                  onClick: handleCancel,
+                })}
+              {dialogProps.confirmButton &&
+                cloneElement(dialogProps.confirmButton, {
+                  onClick: handleConfirm,
+                })}
+            </DialogActions>
+          </StyledContentDiv>
+        )}
+      </Dialog>
+    );
+  };
+
+  return {
+    renderConfirmationDialog,
+    openConfirmDialog: handleOpen,
+    closeConfirmDialog: handleClose,
+  };
+};
+
+export default useConfirmationDialog;