@campxdev/shared 1.6.11 → 1.7.0

package/exports.ts

@@ -13,6 +13,7 @@ export { default as ConfirmContextProvider } from './src/components/PopupConfirm
 export { default as DialogProvider } from './src/components/DrawerWrapper/DrawerWrapper'
 export { default as Providers } from './src/contexts/Providers'
 export { default as PublicProviders } from './src/contexts/PublicProviders'
+export { default as QueryClientProvider } from './src/contexts/QueryClientProvider'
 
 export * from './src/shared-state'
 export * from './src/assets/images'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.6.11",
+  "version": "1.7.0",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/Form/Form.tsx

@@ -1,76 +1,56 @@
-import axios, { axiosErrorToast } from '../../config/axios'
 import { yupResolver } from '@hookform/resolvers/yup'
-import { Alert, Box, Button, ButtonProps, Typography } from '@mui/material'
-import RenderForm, { generateYupSchema, RenderFormProps } from './RenderForm'
+import { Alert, Box, ButtonProps, Typography } from '@mui/material'
+import { AxiosResponse } from 'axios'
 import { ReactNode, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { useMutation, useQueryClient } from 'react-query'
-import { toast } from 'react-toastify'
-
-const makePostRequest = async ({
-  endpoint,
-  postBody,
-}: {
-  endpoint: string
-  postBody: any
-}) => {
-  const method = postBody?.id ? 'PUT' : 'POST'
-  const url = postBody?.id ? `${endpoint}/${postBody?.id}` : endpoint
-  return await axios({
-    url,
-    method,
-    data: postBody,
-  })
-}
+import { axiosErrorToast } from '../../config/axios'
+import ActionButton from '../ActionButton'
+import RenderForm, { generateYupSchema, RenderFormProps } from './RenderForm'
 
 interface FormProps extends Omit<RenderFormProps, 'control'> {
   buttonProps?: ButtonProps
   submitBtn?: { label?: ReactNode }
-  cancelBtn?: { label?: ReactNode }
-  onSubmit?: (formData) => any
-  onCancel?: () => void
-  endPoint?: string
+  cancelBtn?: { label?: ReactNode; hide: boolean }
   defaultValues?: any
   refetchKey?: string
-  onSuccess?: () => void
   previousData?: any
+  onCancel?: () => void
+  postFunction: (body: any) => Promise<AxiosResponse>
+  onPostSuccess: (response: any) => void
+  onPostError: (error: any) => void
 }
 
 export default function Form({
   submitBtn = { label: 'Submit' },
-  cancelBtn = { label: 'Cancel' },
+  cancelBtn = { label: 'Cancel', hide: false },
   buttonProps,
-  onSubmit = () => {},
-  endPoint,
   defaultValues,
   cols,
   fields,
   dropdowns,
   refetchKey,
-  onSuccess = () => {},
   onCancel,
   previousData,
+  postFunction,
+  onPostSuccess,
+  onPostError,
+  gap,
 }: FormProps) {
   const queryClient = useQueryClient()
   const [error, setError] = useState<any>(null)
   const { control, watch, handleSubmit } = useForm({
-    defaultValues,
+    defaultValues: previousData ? previousData : null,
     resolver: yupResolver(generateYupSchema([fields])),
   })
 
-  const {
-    data,
-    mutate,
-    isLoading: posting,
-  } = useMutation(makePostRequest, {
+  const { mutate, isLoading: posting } = useMutation(postFunction, {
     onSuccess(data) {
       queryClient.invalidateQueries(refetchKey)
-      toast.success('Created/Updated Successfully')
-      onSuccess && onSuccess()
+      onPostSuccess && onPostSuccess(data)
     },
     onError(error: any) {
-      setError(error?.response?.data?.message)
-      axiosErrorToast(error)
+      onPostError ? onPostError(error) : axiosErrorToast(error)
     },
   })
 
@@ -82,12 +62,7 @@ export default function Form({
   return (
     <form
       onSubmit={handleSubmit((originalFormData) => {
-        const modifiedFormData = onSubmit(originalFormData) ?? originalFormData
-
-        mutate({
-          endpoint: endPoint,
-          postBody: modifiedFormData,
-        })
+        mutate(originalFormData)
       }, onError)}
     >
       <RenderForm
@@ -102,22 +77,30 @@ export default function Form({
         sx={{
           display: 'flex',
           gap: '20px',
-          marginTop: '1rem',
+          marginTop: gap,
+          justifyContent: 'center',
         }}
       >
-        <Button fullWidth type="submit" {...buttonProps}>
-          {submitBtn?.label}
-        </Button>
-        <Button
-          fullWidth
-          variant="outlined"
-          onClick={() => {
-            onCancel ? onCancel() : null
-          }}
+        <ActionButton
+          loading={posting}
+          disabled={posting}
+          type="submit"
           {...buttonProps}
         >
-          {cancelBtn?.label}
-        </Button>
+          {submitBtn?.label}
+        </ActionButton>
+        {!cancelBtn?.hide && (
+          <ActionButton
+            fullWidth
+            variant="outlined"
+            onClick={() => {
+              onCancel ? onCancel() : null
+            }}
+            {...buttonProps}
+          >
+            {cancelBtn?.label}
+          </ActionButton>
+        )}
       </Box>
     </form>
   )

package/src/components/index.ts

@@ -28,6 +28,7 @@ import AsyncSearchSelect from './Input/AsyncSearchSelect'
 import FilterButton from './FilterComponents/FilterButton'
 import Helmet from './Layout/Helmet'
 import NavigationTabs from './Tabs/NavigationTabs'
+import GlobalNetworkLoadingIndicator from './ErrorBoundary/GlobalNetworkLoadingIndicator'
 import { CustomDialog } from './ModalButtons/DialogButton'
 import { CustomDrawer } from './ModalButtons/DrawerButton'
 export { default as Image } from './Image'
@@ -88,6 +89,7 @@ export {
   NavigationTabs,
   CustomDialog,
   CustomDrawer,
+  GlobalNetworkLoadingIndicator,
 }
 
 export * from './UploadButton/types'