@campxdev/shared 1.10.36 → 1.10.38

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

@@ -1,27 +1,27 @@
-import { Avatar, Box, styled } from '@mui/material'
-
-export const StyledBox = styled(Box)({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-})
-
-export const StyledBoxContainer = styled(Box)({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  margin: '10px 5px',
-})
-
-export const StyledBoxCard = styled(Box)({
-  display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fill, minmax(500px, 1fr))',
-  gap: '1rem',
-})
-
-export const AvatarStyled = styled(Avatar)({
-  height: '50px',
-  width: '50px',
-  backgroundColor: '#F4F4F4',
-  marginRight: '10px',
-})
+import { Avatar, Box, styled } from '@mui/material'
+
+export const StyledBox = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+})
+
+export const StyledBoxContainer = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  margin: '10px 5px',
+})
+
+export const StyledBoxCard = styled(Box)({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(500px, 1fr))',
+  gap: '1rem',
+})
+
+export const AvatarStyled = styled(Avatar)({
+  height: '50px',
+  width: '50px',
+  backgroundColor: '#F4F4F4',
+  marginRight: '10px',
+})

package/src/components/MyProfile/Experience/Experience.tsx

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

package/src/components/MyProfile/Experience/ExperienceCard.tsx

@@ -1,63 +1,65 @@
-import { Box, Card, Typography } from '@mui/material'
-import moment from 'moment'
-import { EditButton } from '../../IconButtons'
-import { ExperienceIcon } from '../../IconButtons/Icons'
-import { DialogButton } from '../../ModalButtons'
-import { ExperienceForm } from './ExperienceForm'
-import { AvatarStyled, StyledBox } from './Styles'
-
-const ExperienceCard = ({ data }) => {
-  return (
-    <div>
-      <Card
-        sx={{
-          padding: '20px ',
-        }}
-      >
-        <StyledBox>
-          <Box
-            sx={{
-              display: 'flex',
-            }}
-          >
-            <AvatarStyled>
-              <ExperienceIcon />
-            </AvatarStyled>
-
-            <Box sx={{ marginTop: '8px', marginRight: '5px' }}>
-              <Typography variant="body2">{data?.title}</Typography>
-              <Typography variant="subtitle2">
-                {moment(data?.fromDate).format('DD MMMM, YYYY')} -
-                {moment(data?.toDate).format('DD MMMM, YYYY')}
-              </Typography>
-            </Box>
-          </Box>
-          <Box
-            sx={{
-              display: 'flex',
-            }}
-          >
-            <DialogButton
-              key={data?.id}
-              title={'Edit Experience'}
-              anchor={({ open }) => <EditButton onClick={open} />}
-              content={({ close }) => (
-                <ExperienceForm data={data} hideDialog={close} />
-              )}
-            />
-          </Box>
-        </StyledBox>
-        <Box
-          sx={{
-            paddingTop: '10px',
-          }}
-        >
-          <Typography variant="h5">{data?.organizationName}</Typography>
-          <Typography variant="subtitle2">{data?.description}</Typography>
-        </Box>
-      </Card>
-    </div>
-  )
-}
-
-export default ExperienceCard
+import { Box, Card, Typography } from '@mui/material'
+import moment from 'moment'
+import { EditButton } from '../../IconButtons'
+import { ExperienceIcon } from '../../IconButtons/Icons'
+import { DialogButton } from '../../ModalButtons'
+import { ExperienceForm } from './ExperienceForm'
+import { AvatarStyled, StyledBox } from './Styles'
+
+const ExperienceCard = ({ data }) => {
+  return (
+    <div>
+      <Card
+        sx={{
+          padding: '20px ',
+        }}
+      >
+        <StyledBox>
+          <Box
+            sx={{
+              display: 'flex',
+            }}
+          >
+            <AvatarStyled>
+              <ExperienceIcon />
+            </AvatarStyled>
+
+            <Box sx={{ marginTop: '8px', marginRight: '5px' }}>
+              <Typography variant="body2">{data?.title}</Typography>
+              <Typography variant="subtitle2">
+                {moment(data?.fromDate).format('DD MMMM, YYYY')} -
+                {data?.toDate
+                  ? moment(data?.toDate).format('DD MMMM, YYYY')
+                  : 'Present'}
+              </Typography>
+            </Box>
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+            }}
+          >
+            <DialogButton
+              key={data?.id}
+              title={'Edit Experience'}
+              anchor={({ open }) => <EditButton onClick={open} />}
+              content={({ close }) => (
+                <ExperienceForm data={data} hideDialog={close} />
+              )}
+            />
+          </Box>
+        </StyledBox>
+        <Box
+          sx={{
+            paddingTop: '10px',
+          }}
+        >
+          <Typography variant="h5">{data?.organizationName}</Typography>
+          <Typography variant="subtitle2">{data?.description}</Typography>
+        </Box>
+      </Card>
+    </div>
+  )
+}
+
+export default ExperienceCard

package/src/components/MyProfile/Experience/ExperienceForm.tsx

@@ -1,132 +1,134 @@
-/* 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, useQuery, useQueryClient } from 'react-query'
-import { toast } from 'react-toastify'
-import * as yup from 'yup'
-import axios, { axiosErrorToast } from '../../../config/axios'
-import ActionButton from '../../ActionButton'
-import { FormDatePicker, FormSingleSelect, FormTextField } from '../../HookForm'
-import { createUpdateExperience } from '../service'
-
-const schema = yup.object().shape({
-  experienceType: yup.string().required('Experience Type is required'),
-  title: yup.string().required('Title is required'),
-  organizationName: yup.string().required('Organization Name is required'),
-  fromDate: yup.string().required('FromDate is Required'),
-  toDate: yup
-    .string()
-    .required('To Date is Required')
-    .test(
-      'endDate',
-      'To date must be greater than  From date',
-      function (value) {
-        const { fromDate } = this.parent
-        if (!fromDate) return true
-        const startDateObj = new Date(fromDate)
-        const endDateObj = new Date(value)
-        return startDateObj < endDateObj
-      },
-    ),
-})
-
-export const ExperienceForm = ({ data, hideDialog }) => {
-  const queryClient = useQueryClient()
-
-  const { data: types } = useQuery('experience-type', () =>
-    axios.get('/square/experience/types').then((res) => res.data),
-  )
-  const { mutate, isLoading } = useMutation(createUpdateExperience, {
-    onSuccess: () => {
-      toast.success(data ? 'Experience Updated' : 'Experience Added')
-      queryClient.invalidateQueries('dashboard')
-      hideDialog()
-    },
-    onError: (err) => {
-      console.log(err)
-      axiosErrorToast(err)
-    },
-  })
-  const { control, handleSubmit, watch } = useForm({
-    resolver: yupResolver(schema),
-    defaultValues: {
-      ...data,
-      fromDate: data ? moment(data.fromDate).toISOString() : '',
-      toDate: data ? moment(data.toDate).toISOString() : '',
-    },
-  })
-  const onSubmit = (formData) => {
-    const postBody = {
-      ...formData,
-      fromDate: moment(formData?.fromDate).format('YYYY-MM-DD'),
-      toDate: moment(formData.toDate).format('YYYY-MM-DD'),
-    }
-    mutate(postBody)
-  }
-  const onError = (error) => {
-    console.log(error)
-  }
-  const selectedType = watch('experienceType')
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit, onError)}>
-      <Stack gap={2.5}>
-        <FormSingleSelect
-          name="experienceType"
-          label={'Experience Type'}
-          control={control}
-          required
-          options={types?.map((item) => ({
-            value: item,
-            label: item,
-          }))}
-        />
-        {selectedType && (
-          <>
-            <FormTextField
-              control={control}
-              name="title"
-              label="Title"
-              required
-            />
-            <FormTextField
-              control={control}
-              name="organizationName"
-              label="Organisation Name"
-              required
-            />
-            <FormDatePicker
-              control={control}
-              name="fromDate"
-              label="From"
-              required
-            />
-            <FormDatePicker
-              control={control}
-              name="toDate"
-              label="To"
-              required
-            />
-            <FormTextField
-              control={control}
-              name="description"
-              label="Description"
-              multiline
-              rows={4}
-            />
-          </>
-        )}
-      </Stack>
-      <Stack direction="row" gap={2} mt={3}>
-        <ActionButton type="submit" fullWidth loading={isLoading}>
-          {data ? 'Edit Experience' : 'Add Experience'}
-        </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, useQuery, useQueryClient } from 'react-query'
+import { toast } from 'react-toastify'
+import * as yup from 'yup'
+import axios, { axiosErrorToast } from '../../../config/axios'
+import ActionButton from '../../ActionButton'
+import {
+  FormDatePicker,
+  FormSingleCheckbox,
+  FormSingleSelect,
+  FormTextField,
+} from '../../HookForm'
+import { createUpdateExperience } from '../service'
+
+const schema = yup.object().shape({
+  experienceType: yup.string().required('Experience Type is required'),
+  title: yup.string().required('Title is required'),
+  organizationName: yup.string().required('Organization Name is required'),
+  fromDate: yup.string().required('FromDate is Required'),
+})
+
+export const ExperienceForm = ({ data, hideDialog }) => {
+  const queryClient = useQueryClient()
+
+  const { data: types } = useQuery('experience-type', () =>
+    axios.get('/square/experience/types').then((res) => res.data),
+  )
+  const { mutate, isLoading } = useMutation(createUpdateExperience, {
+    onSuccess: () => {
+      toast.success(data ? 'Experience Updated' : 'Experience Added')
+      queryClient.invalidateQueries('dashboard')
+      hideDialog()
+    },
+    onError: (err) => {
+      console.log(err)
+      axiosErrorToast(err)
+    },
+  })
+  const { control, handleSubmit, watch } = useForm({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      ...data,
+      fromDate: data ? moment(data.fromDate).toISOString() : '',
+      toDate: data?.toDate ? moment(data.toDate).toISOString() : '',
+    },
+  })
+  const onSubmit = (formData) => {
+    const postBody = {
+      ...formData,
+      fromDate: moment(formData?.fromDate).format('YYYY-MM-DD'),
+      toDate: currentlyWorking
+        ? null
+        : moment(formData.toDate).format('YYYY-MM-DD'),
+    }
+    mutate(postBody)
+  }
+  const onError = (error) => {
+    console.log(error)
+  }
+  const selectedType = watch('experienceType')
+  const currentlyWorking = watch('currentlyWorking')
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit, onError)}>
+      <Stack gap={2.5}>
+        <FormSingleSelect
+          name="experienceType"
+          label={'Experience Type'}
+          control={control}
+          required
+          options={types?.map((item) => ({
+            value: item,
+            label: item,
+          }))}
+        />
+        {selectedType && (
+          <>
+            <FormTextField
+              control={control}
+              name="title"
+              label="Title"
+              required
+            />
+            <FormTextField
+              control={control}
+              name="organizationName"
+              label="Organisation Name"
+              required
+            />
+            <FormSingleCheckbox
+              control={control}
+              name="currentlyWorking"
+              label="Currently Working"
+            />
+            <FormDatePicker
+              control={control}
+              name="fromDate"
+              label="From"
+              required
+            />
+            {!currentlyWorking && (
+              <FormDatePicker
+                control={control}
+                name="toDate"
+                label="To"
+                required
+              />
+            )}
+
+            <FormTextField
+              control={control}
+              name="description"
+              label="Description"
+              multiline
+              rows={4}
+            />
+          </>
+        )}
+      </Stack>
+      <Stack direction="row" gap={2} mt={3}>
+        <ActionButton type="submit" fullWidth loading={isLoading}>
+          {data ? 'Edit Experience' : 'Add Experience'}
+        </ActionButton>
+        <ActionButton variant="outlined" fullWidth onClick={() => hideDialog()}>
+          Cancel
+        </ActionButton>
+      </Stack>
+    </form>
+  )
+}

package/src/components/MyProfile/Experience/Styles.tsx

@@ -1,27 +1,27 @@
-import { Avatar, Box, styled } from '@mui/material'
-
-export const StyledBox = styled(Box)({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-})
-
-export const StyledBoxContainer = styled(Box)({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  margin: '10px 5px',
-})
-
-export const StyledBoxCard = styled(Box)({
-  display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fill, minmax(500px, 1fr))',
-  gap: '1rem',
-})
-
-export const AvatarStyled = styled(Avatar)({
-  height: '50px',
-  width: '50px',
-  backgroundColor: '#F4F4F4',
-  marginRight: '10px',
-})
+import { Avatar, Box, styled } from '@mui/material'
+
+export const StyledBox = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+})
+
+export const StyledBoxContainer = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  margin: '10px 5px',
+})
+
+export const StyledBoxCard = styled(Box)({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(500px, 1fr))',
+  gap: '1rem',
+})
+
+export const AvatarStyled = styled(Avatar)({
+  height: '50px',
+  width: '50px',
+  backgroundColor: '#F4F4F4',
+  marginRight: '10px',
+})