Merge branch 'backend_delete_form' into backend_create_form

SteveShengStar · Apr 7, 2023 · 705ad70 · 705ad70
2 parents 0845c64 + a4215d6
commit 705ad70
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 81 deletions.
diff --git a/frontend/components/molecules/Form/FieldSection.js b/frontend/components/molecules/Form/FieldSection.js
@@ -7,6 +7,7 @@ import RadioSection from '../../molecules/Form/RadioSection';
 import BooleanRadioSection from '../../molecules/Form/BooleanRadioSection';
 import CheckboxSection from '../../molecules/Form/CheckboxSection';
 import MenuSection from '../../molecules/Form/MenuSection';
+import { getDefaultErrorText } from '../../../util';
 
 const TitleSection = ({ text, required }) => {
     return (
@@ -27,15 +28,16 @@ const DescriptionSection = ({ text }) => {
 const FieldSection = ({
     title,
     description = '',
-    type = 'text',
+    type,
     required,
     onChange,
     name,
     value,
     hasError = false,
-    errorText = 'Incorrect answer provided. Please double-check your answer.',
+    errorText,
     options = [],
 }) => {
+    const errorMessage = errorText ?? getDefaultErrorText(type, errorText);
     const theme = useContext(ThemeContext);
     const renderInputField = (type) => {
         switch (type) {
@@ -132,7 +134,7 @@ const FieldSection = ({
             <SystemComponent>{renderInputField(type)}</SystemComponent>
             {hasError && (
                 <SystemComponent textAlign='left' color='red'>
-                    {errorText}
+                    {errorMessage}
                 </SystemComponent>
             )}
         </SystemComponent>

diff --git a/frontend/components/molecules/PopupBanner.js b/frontend/components/molecules/PopupBanner.js
@@ -1,6 +1,6 @@
-import React from 'react';
-import styled from 'styled-components';
-import { capitalize } from 'lodash';
+import React, { useContext } from 'react';
+import styled, { ThemeContext } from 'styled-components';
+import { SystemComponent } from '../atoms/SystemComponents';
 
 const Banner = styled.div`
     width: 350px;
@@ -21,67 +21,56 @@ const Banner = styled.div`
     margin-top: 30px;
 `;
 
-const Text = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    flex-direction: column;
-`;
-
 const BannerText = styled.h4`
-    font-family: 'Nunito Sans';
-    margin: 0;
-    font-size: 14px;
-`;
-
-const BannerSubtitle = styled.h5`
     font-family: 'Nunito Sans';
     margin: 0;
     font-size: 16px;
 `;
 
-const BannerHeadingSection = styled.div`
+const BannerIcon = styled.div`
     display: flex;
     align-items: center;
 `;
 
-const PopupBanner = ({ visible, faClassName, status, message }) => {
+const PopupBanner = ({ visible, faClassName, iconColor, message }) => {
     return (
         <Banner style={{ display: visible ? 'flex' : 'none' }}>
-            <BannerHeadingSection>
+            <BannerIcon>
                 <i
                     class={faClassName}
                     style={{
-                        color: 'purple',
-                        padding: '0 15px',
-                        fontSize: '20px',
+                        color: iconColor,
+                        paddingRight: '15px',
+                        fontSize: '30px',
                     }}
                 ></i>
-            </BannerHeadingSection>
-            <Text>
-                <BannerSubtitle>{capitalize(status)}</BannerSubtitle>
+            </BannerIcon>
+            <SystemComponent>
                 <BannerText>{message}</BannerText>
-            </Text>
+            </SystemComponent>
         </Banner>
     );
 };
 
 export const SuccessBanner = ({ visible, message }) => {
+    const theme = useContext(ThemeContext);
     return (
         <PopupBanner
             visible={visible}
             faClassName={'fa-solid fa-circle-check'}
-            status='success'
+            iconColor={theme.colors.success}
             message={message}
         />
     );
 };
 
 export const ErrorBanner = ({ visible, message }) => {
+    const theme = useContext(ThemeContext);
     return (
         <PopupBanner
             visible={visible}
             faClassName={'fa fa-exclamation-circle'}
-            status='error'
+            iconColor={theme.colors.error}
             message={message}
         />
     );

diff --git a/frontend/components/theme.js b/frontend/components/theme.js
@@ -103,6 +103,7 @@ const theme = {
         action: primaryBlue,
         primaryBlue,
         alertAction: alertRed,
+        error: alertRed,
         foreground: black,
         background: white,
         black,
@@ -117,6 +118,7 @@ const theme = {
         software: softwareMagenta,
         mechanical: mechRed,
         electrical: electricalGreen,
+        success: electricalGreen,
         admin: adminPurple,
         exec: execYellow,
         infrastructure: infraOrange,

diff --git a/frontend/hooks/usePopupBanner.js b/frontend/hooks/usePopupBanner.js
@@ -28,7 +28,7 @@ const usePopupBanner = (successMessage, errorMessage) => {
         setTimeout(() => {
             setSuccessBannerVisible(false);
             successCallback();
-        }, 5000);
+        }, 3500);
     };
 
     const showErrorBanner = () => {

diff --git a/frontend/util.js b/frontend/util.js
@@ -33,6 +33,10 @@ export const validateFields = (formValues, sectionMetadataByName) => {
                 return;
             }
         }
+        if (sectionMetadataByName[sectionName].name == 'fullName') {
+            validationResult[sectionName] = validateName(value);
+            return;
+        }
 
         switch (dataType) {
             case 'email':
@@ -130,6 +134,31 @@ export const scrollToFirstError = (formSections, formErrors) => {
     }
 };
 
+export const getDefaultErrorText = (type, errorText) => {
+    switch (type) {
+        case 'email':
+            errorText = 'Please enter a valid email.';
+            break;
+        case 'phone':
+            errorText = 'Please enter a valid 10 digit phone number.';
+            break;
+        case 'text':
+            errorText = 'Please provide a response to this question.';
+            break;
+        case 'numbers':
+            errorText = 'Please provide a valid numerical input';
+            break;
+        case 'menu_single':
+        case 'menu_multi':
+        case 'checkbox':
+        case 'radio':
+        case 'boolean':
+            errorText = 'Please select an option above.';
+            break;
+    }
+    return errorText;
+};
+
 const validateNotEmpty = (value) => {
     if (Array.isArray(value)) {
         return value && value.length > 0;

diff --git a/pages/form/[formName].js b/pages/form/[formName].js
@@ -25,7 +25,7 @@ import { updateUser } from '../../frontend/store/reducers/userReducer';
 import _ from 'lodash';
 
 const SUBMIT_SUCCESS_MSG =
-    'Form successfully submitted. Taking you back to Home Page in 5 seconds.';
+    'Form successfully submitted. Taking you back to Home Page in 4 seconds.';
 const SUBMIT_ERROR_MSG =
     'Error occurred. Please contact Waterloop Web Team for assistance.';
 
@@ -94,6 +94,7 @@ const Form = () => {
             sectionMetadataByName[section.name] = {
                 type: section.type,
                 required: section.required,
+                name: section.name,
             };
         });
         const hasValidationPassed = validateFields(

diff --git a/pages/form/admin/index.js b/pages/form/admin/index.js
@@ -11,23 +11,9 @@ import Button from '../../../frontend/components/atoms/Button';
 import usePopupBanner from '../../../frontend/hooks/usePopupBanner';
 import { v4 as uuidv4 } from 'uuid';
 
-const EditFormButton = styled(Button)`
-    width: 100%;
-    height: 60px;
-    margin-bottom: 10px;
-    margin-top: 10px;
-    border-radius: 5px;
-`;
-
-const ExportButton = styled(Button)`
-    width: 100%;
-    height: 60px;
-    border-radius: 5px;
-`;
-
 const CreateFormButton = styled(Button)`
     width: 20%;
-    height: 40px;
+    height: 35px;
     margin-bottom: ${(props) => props.theme.space.headerBottomMargin}px;
     margin-top: 16px;
     border-radius: 5px;
@@ -135,12 +121,12 @@ const BulletOverride = styled(Bullet)`
 
 const BulletsSection = styled(SystemComponent)`
     align-self: start; /* this section's text should be left-aligned */
-    height: 200px;
+    height: 120px;
 `;
 
-const EXPORT_SUCCESS_MSG = 'Form Responses Exported to Google Drive.';
+const EXPORT_SUCCESS_MSG = 'Form was successfully exported.';
 const EXPORT_ERROR_MSG =
-    'Error occurred. Please contact Waterloop Web Team for assistance.';
+    'Form could not be exported. Please contact Waterloop Web Team for assistance.';
 
 const FormMetadataSection = ({
     src,
@@ -191,36 +177,69 @@ const FormMetadataSection = ({
                         <BulletOverride margin='10px' key={i} text={bullet} />
                     ))}
                 </BulletsSection>
-                <EditFormButton
-                    onClick={(e) => {
-                        e.preventDefault();
-                        router.push('/form/edit/' + formName);
-                    }}
-                >
-                    Edit Form
-                </EditFormButton>
-                <ExportButton
-                    onClick={(e) => {
-                        e.preventDefault();
-                        fetch('/api/google/export/' + formName, {
-                            method: 'POST',
-                            headers: {
-                                Accept: 'application/json',
-                                'Content-Type': 'application/json',
-                            },
-                        })
-                            .then((res) => {
-                                showSuccessBanner();
-                            })
-                            .catch((e) => {
-                                console.error(e);
-                                showErrorBanner();
-                            });
-                    }}
-                    variant='white'
+                <SystemComponent
+                    width='100%'
+                    height='35px'
+                    marginBottom='5px'
+                    boxSizing='border-box'
                 >
-                    Export Responses
-                </ExportButton>
+                    <Button
+                        height='100%'
+                        width='100%'
+                        onClick={(e) => {
+                            e.preventDefault();
+                            router.push('/form/edit/' + formName);
+                        }}
+                    >
+                        <i className='fa-solid fa-pen-to-square' />
+                        {'  '}Edit Form
+                    </Button>
+                </SystemComponent>
+                <SystemComponent display='flex' height='35px' width='100%'>
+                    <SystemComponent width='60%'>
+                        <Button
+                            height='100%'
+                            width='100%'
+                            variant='white'
+                            onClick={(e) => {
+                                e.preventDefault();
+                                fetch('/api/google/export/' + formName, {
+                                    method: 'POST',
+                                    headers: {
+                                        Accept: 'application/json',
+                                        'Content-Type': 'application/json',
+                                    },
+                                })
+                                    .then(() => {
+                                        showSuccessBanner();
+                                    })
+                                    .catch((e) => {
+                                        console.error(e);
+                                        showErrorBanner();
+                                    });
+                            }}
+                        >
+                            <i className='fa-solid fa-file-export' />
+                            {'  '}Export Responses
+                        </Button>
+                    </SystemComponent>
+                    <SystemComponent width='40%'>
+                        <Button
+                            height='100%'
+                            width='100%'
+                            variant='white'
+                            onClick={(e) => {
+                                e.preventDefault();
+                                navigator.clipboard.writeText(
+                                    'localhost:3000/form/' + formName
+                                );
+                            }}
+                        >
+                            <i className='fa-solid fa-link' />
+                            {'  '}Copy Link
+                        </Button>
+                    </SystemComponent>
+                </SystemComponent>
             </FormInfoCard>
         </>
     );

diff --git a/pages/form/edit/[formName].js b/pages/form/edit/[formName].js
@@ -38,7 +38,11 @@ const validateCorrectNumberOfOptions = (sections) => {
             case 'radio':
             case 'menu_single':
             case 'menu_multi':
-                return s.options && s.options.length > 1;
+                return (
+                    s.options &&
+                    s.options.length > 1 &&
+                    s.options.filter((opt) => opt || opt === false).length > 1
+                );
         }
         return true;
     });
@@ -501,7 +505,6 @@ const FormEditor = () => {
                 <Card
                     display='grid'
                     gridTemplateColumns='1fr'
-                    gridColumnGap={theme.space[5]}
                     gridRowGap={theme.space[5]}
                     width={['500px', '700px', '800px']}
                     marginBottom={`${theme.space[7]}px`}