@campxdev/shared 1.10.18 → 1.10.19

package/src/components/ModalButtons/PopoverButton.tsx

@@ -1,99 +1,99 @@
-import { Grow, Popover, PopoverProps } from '@mui/material'
-import { TransitionProps } from '@mui/material/transitions'
-import { ReactNode, forwardRef, useState } from 'react'
-
-export const Transition = forwardRef(function Transition(
-  props: TransitionProps & {
-    children: React.ReactElement
-  },
-  ref: React.Ref<unknown>,
-) {
-  return <Grow timeout={1000} ref={ref} {...props} />
-})
-
-interface PopoverButtonProps {
-  anchor: (props: { open: (e: any) => void }) => ReactNode
-  content: (props: { close: () => void }) => ReactNode
-  popoverProps?: Omit<PopoverProps, 'open'>
-  onDialogClose?: () => void
-}
-
-export default function PopoverButton({
-  content,
-  popoverProps,
-  onDialogClose,
-  anchor,
-}: PopoverButtonProps) {
-  const [popperAnchor, setPopperAnchor] = useState(null)
-
-  const onClose = () => {
-    onDialogClose && onDialogClose()
-    setPopperAnchor(null)
-  }
-
-  const onOpen = (e) => {
-    setPopperAnchor(e.currentTarget)
-  }
-
-  return (
-    <>
-      {anchor({
-        open: onOpen,
-      })}
-      <CustomPopover
-        open={Boolean(popperAnchor)}
-        content={content}
-        popoverProps={popoverProps}
-        onClose={onClose}
-        popperAnchor={popperAnchor}
-      />
-    </>
-  )
-}
-
-interface CustomDialogProps {
-  content: (props: { close: () => void }) => ReactNode
-  onClose: () => void
-  open: boolean
-  popoverProps?: Omit<PopoverProps, 'open'>
-  popperAnchor: any
-}
-
-export const CustomPopover = ({
-  onClose,
-  popoverProps,
-  content,
-  open,
-  popperAnchor,
-}: CustomDialogProps) => {
-  return (
-    <>
-      <Popover
-        onClose={onClose}
-        open={open}
-        transitionDuration={140}
-        TransitionComponent={Transition}
-        PaperProps={{
-          ...popoverProps?.PaperProps,
-          elevation: 2,
-          sx: {
-            borderRadius: '10px',
-            border: '1px solid #1212121A',
-            boxShadow: '0px 4px 16px #0000000F',
-          },
-        }}
-        anchorEl={popperAnchor}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
-        sx={{
-          ...popoverProps?.sx,
-        }}
-        {...popoverProps}
-      >
-        {content({ close: onClose })}
-      </Popover>
-    </>
-  )
-}
+import { Grow, Popover, PopoverProps } from '@mui/material'
+import { TransitionProps } from '@mui/material/transitions'
+import { ReactNode, forwardRef, useState } from 'react'
+
+export const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement
+  },
+  ref: React.Ref<unknown>,
+) {
+  return <Grow timeout={1000} ref={ref} {...props} />
+})
+
+interface PopoverButtonProps {
+  anchor: (props: { open: (e: any) => void }) => ReactNode
+  content: (props: { close: () => void }) => ReactNode
+  popoverProps?: Omit<PopoverProps, 'open'>
+  onDialogClose?: () => void
+}
+
+export default function PopoverButton({
+  content,
+  popoverProps,
+  onDialogClose,
+  anchor,
+}: PopoverButtonProps) {
+  const [popperAnchor, setPopperAnchor] = useState(null)
+
+  const onClose = () => {
+    onDialogClose && onDialogClose()
+    setPopperAnchor(null)
+  }
+
+  const onOpen = (e) => {
+    setPopperAnchor(e.currentTarget)
+  }
+
+  return (
+    <>
+      {anchor({
+        open: onOpen,
+      })}
+      <CustomPopover
+        open={Boolean(popperAnchor)}
+        content={content}
+        popoverProps={popoverProps}
+        onClose={onClose}
+        popperAnchor={popperAnchor}
+      />
+    </>
+  )
+}
+
+interface CustomDialogProps {
+  content: (props: { close: () => void }) => ReactNode
+  onClose: () => void
+  open: boolean
+  popoverProps?: Omit<PopoverProps, 'open'>
+  popperAnchor: any
+}
+
+export const CustomPopover = ({
+  onClose,
+  popoverProps,
+  content,
+  open,
+  popperAnchor,
+}: CustomDialogProps) => {
+  return (
+    <>
+      <Popover
+        onClose={onClose}
+        open={open}
+        transitionDuration={140}
+        TransitionComponent={Transition}
+        PaperProps={{
+          ...popoverProps?.PaperProps,
+          elevation: 2,
+          sx: {
+            borderRadius: '10px',
+            border: '1px solid #1212121A',
+            boxShadow: '0px 4px 16px #0000000F',
+          },
+        }}
+        anchorEl={popperAnchor}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        sx={{
+          ...popoverProps?.sx,
+        }}
+        {...popoverProps}
+      >
+        {content({ close: onClose })}
+      </Popover>
+    </>
+  )
+}

package/src/components/ModalButtons/index.tsx

@@ -1,4 +1,4 @@
-import DialogButton from './DialogButton'
-import DrawerButton from './DrawerButton'
-
-export { DialogButton, DrawerButton }
+import DialogButton from './DialogButton'
+import DrawerButton from './DrawerButton'
+
+export { DialogButton, DrawerButton }

package/src/components/MyProfile/Education/Education.tsx

@@ -1,47 +1,47 @@
-/* eslint-disable no-console */
-/* eslint-disable react/jsx-key */
-import { Typography } from '@mui/material'
-import ActionButton from '../../ActionButton'
-import { DrawerButton } from '../../ModalButtons'
-import NoDataSection from '../NoDataSection'
-import EducationCard from './EducationCard'
-import { EducationForm } from './EducationForm'
-import { StyledBoxCard, StyledBoxContainer } from './Styles'
-
-const Education = ({ educations }) => {
-  const isEducation = educations && educations?.length > 0
-  return isEducation ? (
-    <>
-      <StyledBoxContainer>
-        <Typography variant="h3">Education</Typography>
-        <DrawerButton
-          anchor={({ open }) => (
-            <ActionButton onClick={open} variant="text">
-              +Add Education
-            </ActionButton>
-          )}
-          content={({ close }) => (
-            <EducationForm data={null} hideDialog={close} />
-          )}
-          title="Add Education"
-        />
-      </StyledBoxContainer>
-      <StyledBoxCard>
-        {educations.map((data) => (
-          <EducationCard data={data} />
-        ))}
-      </StyledBoxCard>
-    </>
-  ) : (
-    <NoDataSection
-      title="Education"
-      subtitle="Add your Education"
-      addButtonTitle="Add Education"
-      addButtonContent={({ close }) => (
-        <EducationForm data={null} hideDialog={close} />
-      )}
-    />
-  )
-}
-
-export default Education
+/* eslint-disable no-console */
+/* eslint-disable react/jsx-key */
+import { Typography } from '@mui/material'
+import ActionButton from '../../ActionButton'
+import { DrawerButton } from '../../ModalButtons'
+import NoDataSection from '../NoDataSection'
+import EducationCard from './EducationCard'
+import { EducationForm } from './EducationForm'
+import { StyledBoxCard, StyledBoxContainer } from './Styles'
+
+const Education = ({ educations }) => {
+  const isEducation = educations && educations?.length > 0
+  return isEducation ? (
+    <>
+      <StyledBoxContainer>
+        <Typography variant="h3">Education</Typography>
+        <DrawerButton
+          anchor={({ open }) => (
+            <ActionButton onClick={open} variant="text">
+              +Add Education
+            </ActionButton>
+          )}
+          content={({ close }) => (
+            <EducationForm data={null} hideDialog={close} />
+          )}
+          title="Add Education"
+        />
+      </StyledBoxContainer>
+      <StyledBoxCard>
+        {educations.map((data) => (
+          <EducationCard data={data} />
+        ))}
+      </StyledBoxCard>
+    </>
+  ) : (
+    <NoDataSection
+      title="Education"
+      subtitle="Add your Education"
+      addButtonTitle="Add Education"
+      addButtonContent={({ close }) => (
+        <EducationForm data={null} hideDialog={close} />
+      )}
+    />
+  )
+}
+
+export default Education

package/src/components/MyProfile/Education/EducationCard.tsx

@@ -1,62 +1,62 @@
-import { Box, Card, Typography } from '@mui/material'
-import moment from 'moment'
-import { EditButton } from '../../IconButtons'
-import { EducationIcon } from '../../IconButtons/Icons'
-import { DrawerButton } from '../../ModalButtons'
-import { EducationForm } from './EducationForm'
-import { AvatarStyled, StyledBox } from './Styles'
-
-const EducationCard = ({ data }) => {
-  return (
-    <div>
-      <Card
-        sx={{
-          padding: '20px ',
-        }}
-      >
-        <StyledBox>
-          <Box
-            sx={{
-              display: 'flex',
-            }}
-          >
-            <AvatarStyled>
-              <EducationIcon />
-            </AvatarStyled>
-
-            <Box sx={{ marginTop: '8px', marginRight: '5px' }}>
-              <Typography variant="body2">{data?.institution}</Typography>
-              <Typography variant="subtitle2">
-                {moment(data?.startDate).format('DD MMMM, YYYY')} -
-                {moment(data?.endDate).format('DD MMMM, YYYY')}
-              </Typography>
-            </Box>
-          </Box>
-          <Box
-            sx={{
-              display: 'flex',
-            }}
-          >
-            <DrawerButton
-              title={'Edit Education'}
-              anchor={({ open }) => <EditButton onClick={open} />}
-              content={({ close }) => (
-                <EducationForm data={data} hideDialog={close} />
-              )}
-            />
-          </Box>
-        </StyledBox>
-        <Box
-          sx={{
-            paddingTop: '10px',
-          }}
-        >
-          <Typography variant="h5">{data?.name}</Typography>
-          <Typography variant="subtitle2">{data?.description}</Typography>
-        </Box>
-      </Card>
-    </div>
-  )
-}
-
-export default EducationCard
+import { Box, Card, Typography } from '@mui/material'
+import moment from 'moment'
+import { EditButton } from '../../IconButtons'
+import { EducationIcon } from '../../IconButtons/Icons'
+import { DrawerButton } from '../../ModalButtons'
+import { EducationForm } from './EducationForm'
+import { AvatarStyled, StyledBox } from './Styles'
+
+const EducationCard = ({ data }) => {
+  return (
+    <div>
+      <Card
+        sx={{
+          padding: '20px ',
+        }}
+      >
+        <StyledBox>
+          <Box
+            sx={{
+              display: 'flex',
+            }}
+          >
+            <AvatarStyled>
+              <EducationIcon />
+            </AvatarStyled>
+
+            <Box sx={{ marginTop: '8px', marginRight: '5px' }}>
+              <Typography variant="body2">{data?.institution}</Typography>
+              <Typography variant="subtitle2">
+                {moment(data?.startDate).format('DD MMMM, YYYY')} -
+                {moment(data?.endDate).format('DD MMMM, YYYY')}
+              </Typography>
+            </Box>
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+            }}
+          >
+            <DrawerButton
+              title={'Edit Education'}
+              anchor={({ open }) => <EditButton onClick={open} />}
+              content={({ close }) => (
+                <EducationForm data={data} hideDialog={close} />
+              )}
+            />
+          </Box>
+        </StyledBox>
+        <Box
+          sx={{
+            paddingTop: '10px',
+          }}
+        >
+          <Typography variant="h5">{data?.name}</Typography>
+          <Typography variant="subtitle2">{data?.description}</Typography>
+        </Box>
+      </Card>
+    </div>
+  )
+}
+
+export default EducationCard

package/src/components/MyProfile/Education/EducationForm.tsx

@@ -1,97 +1,97 @@
-/* eslint-disable no-console */
-import { yupResolver } from '@hookform/resolvers/yup'
-import { Stack } from '@mui/material'
-import moment from 'moment'
-import { useForm } from 'react-hook-form'
-import { useMutation, useQueryClient } from 'react-query'
-import { toast } from 'react-toastify'
-import * as yup from 'yup'
-import { axiosErrorToast } from '../../../config/axios'
-import ActionButton from '../../ActionButton'
-import { FormDatePicker, FormTextField } from '../../HookForm'
-import { createUpdateEducation } from '../service'
-
-const schema = yup.object().shape({
-  name: yup.string().required('Name is required'),
-  institution: yup.string().required('Institution is required'),
-  startDate: yup.string().required('From Date is required'),
-  description: yup.string().required('Description is required'),
-})
-
-export const EducationForm = ({ data, hideDialog }) => {
-  const queryClient = useQueryClient()
-  const { mutate, isLoading } = useMutation(createUpdateEducation, {
-    onSuccess: () => {
-      toast.success(data ? 'Education Updated' : 'Education Added')
-      queryClient.invalidateQueries('dashboard')
-      hideDialog()
-    },
-    onError: (err) => {
-      console.log(err)
-      axiosErrorToast(err)
-    },
-  })
-  const { control, handleSubmit } = useForm({
-    resolver: yupResolver(schema),
-    defaultValues: {
-      ...data,
-      startDate: data ? moment(data.startDate).toISOString() : '',
-      endDate: data ? moment(data.endDate).toISOString() : '',
-    },
-  })
-  const onSubmit = (formData) => {
-    const postBody = {
-      ...formData,
-      startDate: moment(formData?.startDate).format('YYYY-MM-DD'),
-      endDate: moment(formData.endDate).format('YYYY-MM-DD'),
-    }
-    mutate(postBody)
-  }
-  const onError = (error) => {
-    console.log(error)
-  }
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit, onError)}>
-      <Stack gap={2.5}>
-        <>
-          <FormTextField
-            control={control}
-            name="name"
-            label="Name of the education"
-            required
-          />
-          <FormTextField
-            control={control}
-            name="institution"
-            label="Institution"
-            required
-          />
-          <FormDatePicker
-            control={control}
-            name="startDate"
-            label="From Date"
-            required
-          />
-          <FormDatePicker control={control} name="endDate" label="To Date" />
-          <FormTextField
-            control={control}
-            multiline
-            rows={4}
-            name="description"
-            label="Description"
-            required
-          />
-        </>
-      </Stack>
-      <Stack direction="row" gap={2} mt={3}>
-        <ActionButton type="submit" fullWidth loading={isLoading}>
-          Submit
-        </ActionButton>
-        <ActionButton variant="outlined" fullWidth onClick={() => hideDialog()}>
-          Cancel
-        </ActionButton>
-      </Stack>
-    </form>
-  )
-}
+/* eslint-disable no-console */
+import { yupResolver } from '@hookform/resolvers/yup'
+import { Stack } from '@mui/material'
+import moment from 'moment'
+import { useForm } from 'react-hook-form'
+import { useMutation, useQueryClient } from 'react-query'
+import { toast } from 'react-toastify'
+import * as yup from 'yup'
+import { axiosErrorToast } from '../../../config/axios'
+import ActionButton from '../../ActionButton'
+import { FormDatePicker, FormTextField } from '../../HookForm'
+import { createUpdateEducation } from '../service'
+
+const schema = yup.object().shape({
+  name: yup.string().required('Name is required'),
+  institution: yup.string().required('Institution is required'),
+  startDate: yup.string().required('From Date is required'),
+  description: yup.string().required('Description is required'),
+})
+
+export const EducationForm = ({ data, hideDialog }) => {
+  const queryClient = useQueryClient()
+  const { mutate, isLoading } = useMutation(createUpdateEducation, {
+    onSuccess: () => {
+      toast.success(data ? 'Education Updated' : 'Education Added')
+      queryClient.invalidateQueries('dashboard')
+      hideDialog()
+    },
+    onError: (err) => {
+      console.log(err)
+      axiosErrorToast(err)
+    },
+  })
+  const { control, handleSubmit } = useForm({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      ...data,
+      startDate: data ? moment(data.startDate).toISOString() : '',
+      endDate: data ? moment(data.endDate).toISOString() : '',
+    },
+  })
+  const onSubmit = (formData) => {
+    const postBody = {
+      ...formData,
+      startDate: moment(formData?.startDate).format('YYYY-MM-DD'),
+      endDate: moment(formData.endDate).format('YYYY-MM-DD'),
+    }
+    mutate(postBody)
+  }
+  const onError = (error) => {
+    console.log(error)
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit, onError)}>
+      <Stack gap={2.5}>
+        <>
+          <FormTextField
+            control={control}
+            name="name"
+            label="Name of the education"
+            required
+          />
+          <FormTextField
+            control={control}
+            name="institution"
+            label="Institution"
+            required
+          />
+          <FormDatePicker
+            control={control}
+            name="startDate"
+            label="From Date"
+            required
+          />
+          <FormDatePicker control={control} name="endDate" label="To Date" />
+          <FormTextField
+            control={control}
+            multiline
+            rows={4}
+            name="description"
+            label="Description"
+            required
+          />
+        </>
+      </Stack>
+      <Stack direction="row" gap={2} mt={3}>
+        <ActionButton type="submit" fullWidth loading={isLoading}>
+          Submit
+        </ActionButton>
+        <ActionButton variant="outlined" fullWidth onClick={() => hideDialog()}>
+          Cancel
+        </ActionButton>
+      </Stack>
+    </form>
+  )
+}