AddEventToPublishSchedule + Edit/Delete Days + Edit/Delete PS Events

.eslintrc.json

@@ -8,6 +8,7 @@
     "plugin:react/recommended",
     "plugin:prettier/recommended"
   ],
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaFeatures": {
         "jsx": true

package.json

@@ -27,7 +27,6 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.4",
     "react-html-email": "^3.0.0",
-    "react-icons": "^5.0.1",
     "react-router-dom": "^6.20.0",
     "react-script": "^2.0.5",
     "react-icons": "^5.0.1",

src/App.jsx

@@ -15,7 +15,6 @@ import PublishedSchedule from './pages/PublishedSchedule/PublishedSchedule';
 import Playground from './pages/Playground/Playground';
 import Planner from './pages/Planner/Planner';
 import Navbar from './components/Navbar/Navbar';
-import NotificationSandbox from './pages/NotificationSandbox/NotificationSandbox';
 import Accounts from './pages/Accounts/Accounts';
 import { AuthContextProvider, useAuthContext } from './common/AuthContext';
 
@@ -56,13 +55,6 @@ const App = () => {
               <Route exact path="/signUp" element={<SignUp />} />
               <Route exact path="/emailAction" element={<EmailAction redirectPath="/" />} />
               <Route exact path="/awaitConfirmation" element={<AwaitConfirmation redirectPath="/" />} />
-              <Route
-                exact
-                path="/notification-sandbox"
-                element={
-                  <NotificationSandbox />
-                }
-              />
               <Route
                 exact
                 path="/catalog"
@@ -99,7 +91,7 @@ const App = () => {
                     redirectPath="/login"
                     roles={[ADMIN_ROLE]}
                   />
-                } />  
+                } />
             </Route>
           </Routes>
         </Router>

src/components/AddDayForm/AddDayForm.jsx

@@ -0,0 +1,153 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import {
+    Box,
+    FormLabel,
+    Input,
+    FormControl,
+    FormErrorMessage,
+    Button,
+    Textarea,
+    useToast,
+    Heading,
+    Flex
+} from '@chakra-ui/react';
+import { PropTypes } from 'prop-types';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm } from 'react-hook-form';
+import * as yup from 'yup';
+import { NPOBackend } from '../../utils/auth_utils';
+
+const schema = yup.object({
+  date: yup.date().nullable().transform((curr, orig) => orig === '' ? null : curr).required('Date required'),
+  location: yup.string().required('Location required').max(50, 'Location exceeds 50 character limit'),
+  details: yup
+    .string()
+    .max(50, 'Details exceeds 50 character limit'),
+});
+
+const AddDayForm = ({ onClose, onOpen, setDayId, dayData, setShouldDataRevalidate }) => {
+  const toast = useToast();
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(schema),
+  });
+
+  const submitData = async data => {
+    const { date, details, location } = data;
+    toast.closeAll();
+    try {
+      const payload = {
+        eventDate: date,
+        location: location,
+        notes: details,
+      };
+
+      let response;
+      if (dayData) {
+        response = await NPOBackend.put(`/day/${dayData.id}`, payload);
+        setShouldDataRevalidate(true);
+      } else {
+        response = await NPOBackend.post('/day/', payload);
+      }
+
+      if (response.status === 200 || (response.status == 201 && response.data.status === 'Success')) {
+        const id = dayData ? dayData.id : response.data['id'];
+        setDayId(id);
+        onOpen(id);
+      } else if (response.status == 201 && response.data.status === 'Failed') {
+        toast({
+          title: 'This date already exists in the schedule.',
+          description: `${date.toLocaleDateString()}`,
+          status: 'error',
+          variant: 'subtle',
+          position: 'top-right',
+          containerStyle: {
+          mt: '6rem',
+          },
+          duration: 3000,
+          isClosable: true,
+        });
+      }
+
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  return (
+    <Box p="20px">
+      <Heading size="lg" textAlign="center" mb="8px" color="#2D3748">{!dayData ? 'Add New Day' : 'Edit Day Details'}</Heading>
+      <form onSubmit={handleSubmit(data => submitData(data))}>
+        <Box mb="4vh">
+          {/* DATE */}
+          <Box mb="15px">
+            <FormControl isInvalid={errors && errors.date} >
+              <FormLabel fontWeight="bold" color="gray.600">Date *</FormLabel>
+              <Input
+                size="md"
+                type="date"
+                {...register('date')}
+                defaultValue={dayData && dayData.eventDate}
+              />
+              <FormErrorMessage>{errors.date && errors.date.message}</FormErrorMessage>
+            </FormControl>
+          </Box>
+
+          {/* LOCATION */}
+          <Box mb="15px">
+            <FormControl isInvalid={errors && errors.location} >
+              <FormLabel fontWeight="bold" color="gray.600">Location *</FormLabel>
+              <Input placeholder='Location' {...register('location')} defaultValue={dayData && dayData.location}/>
+              <FormErrorMessage>{errors.location && errors.location.message}</FormErrorMessage>
+            </FormControl>
+          </Box>
+
+
+          {/* DETAILS */}
+          <Box mb="15px">
+            <FormControl isInvalid={errors && errors.details}>
+              <FormLabel fontWeight="bold" color="gray.600">Details</FormLabel>
+              <Textarea placeholder='Details' {...register('details')} defaultValue={dayData && dayData.details}/>
+              <FormErrorMessage>
+                {errors.details && errors.details.message}
+              </FormErrorMessage>
+            </FormControl>
+          </Box>
+        </Box>
+
+        <Flex justifyContent="space-between">
+          <Button width="48%" size='lg' onClick={onClose}>
+              Cancel
+          </Button>
+          <Button
+            width="48%"
+            type='submit'
+            size='lg'
+            bgColor="#2c93d1"
+            color="white"
+            _hover={{ bgColor: '#1b6896' }}
+          >
+            {!dayData ? '+ Add To Schedule' : 'Save Changes'}
+          </Button>
+        </Flex>
+      </form>
+    </Box>
+  );
+};
+
+AddDayForm.propTypes = {
+  onClose: PropTypes.func,
+  onOpen: PropTypes.func,
+  setDayId: PropTypes.func,
+  dayData: PropTypes.object,
+  setShouldDataRevalidate: PropTypes.func
+};
+AddDayForm.defaultProps = {
+  onClose: () => {},
+  onOpen: () => {},
+  dayData: null
+};
+export default AddDayForm;