improve activity created modal

use translations and change publish button's label to create remove banner from activity creation form make created activities unpublished by default
unstructuredstudio · Jul 17, 2024 · d68c340 · d68c340
1 parent c3f4f34
commit d68c340
Show file tree

Hide file tree

Showing 5 changed files with 690 additions and 808 deletions.
diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -961,6 +961,7 @@
   "createActivity": {
     "welcomeMsg": {
       "primary": "Create Activity",
+      "secondary": "Tell us about your informative activity!",
       "edit": "Update Activity"
     },
     "inputs": {
@@ -1082,9 +1083,10 @@
     },
     "buttons": {
       "Next": "Next",
-      "Prev": "Prev",
+      "Prev": "Previous",
       "Submit": "Submit For Review",
-      "Edit": "Save Changes"
+      "Edit": "Save Changes",
+      "create": "Create"
     }
   },
 
@@ -1132,6 +1134,10 @@
           "proceed": "Proceed",
           "success": "activity Created successfully",
           "forbidden": "You must be staff monitor ao educator to be able to create a new activity "
+        },
+        "modal": {
+          "primary": "Congratulations your activity has been successfully created!",
+          "secondary": "Once your activity is published, you can share it with the world!"
         }
       },
       "edit": {

diff --git a/zubhub_frontend/zubhub/src/views/activity_details/ActivityDetails.styles.js b/zubhub_frontend/zubhub/src/views/activity_details/ActivityDetails.styles.js
@@ -84,4 +84,16 @@ export const activityDefailsStyles = theme => ({
     gap: 32,
     marginTop: 20,
   },
+  dialogCloseButton: {
+    display: 'flex',
+    justifyContent: 'end',
+    marginTop: '-1em',
+  },
+  dialogTitle: {
+    fontWeight: 600,
+    fontSize: '1em',
+  },
+  dialogText: {
+    fontSize: '1.1em',
+  },
 });
diff --git a/zubhub_frontend/zubhub/src/views/activity_details/ActivityDetailsV2.jsx b/zubhub_frontend/zubhub/src/views/activity_details/ActivityDetailsV2.jsx
@@ -23,7 +23,6 @@ import ReactQuill from 'react-quill';
 import { useSelector } from 'react-redux';
 import { useReactToPrint } from 'react-to-print';
 import Html2Pdf from 'html2pdf.js';
-
 import ZubHubAPI from '../../api';
 import { colors } from '../../assets/js/colors';
 import { ClapBorderIcon } from '../../assets/js/icons/ClapIcon';
@@ -283,24 +282,21 @@ export default function ActivityDetailsV2(props) {
       </div>
 
       <Modal.WithIcon icon={<FiShare size={30} />} maxWidth="xs" open={open} onClose={toggleDialog}>
-        <div style={{ display: 'flex', justifyContent: 'end' }}>
+        <div className={classes.dialogCloseButton}>
           <IconButton onClick={toggleDialog}>
             <CloseOutlined />
           </IconButton>
         </div>
 
         <DialogTitle>
-          <Typography align="center" className={clsx(commonClasses.title2, classes.dialogTitle)}>
-            Congratulations your Activity has been successfully created!
+          <Typography align="center" className={classes.dialogTitle}>
+            {t('activityDetails.activity.create.modal.primary')}
           </Typography>
         </DialogTitle>
         <DialogContent>
-          <Typography align="center">
-            Share your activity with the world. Post it on the following platforms:
+          <Typography align="center" className={classes.dialogText}>
+            {t('activityDetails.activity.create.modal.secondary')}
           </Typography>
-          <div className={clsx(commonClasses.displayFlex, commonClasses.justifyCenter)} style={{ margin: '20px 0' }}>
-            <SocialButtons containerStyle={{ gap: 50 }} withColor link facebook whatsapp />
-          </div>
         </DialogContent>
       </Modal.WithIcon>
     </div>

diff --git a/zubhub_frontend/zubhub/src/views/create_activity/CreateActivity.jsx b/zubhub_frontend/zubhub/src/views/create_activity/CreateActivity.jsx
@@ -1,46 +1,22 @@
 import { makeStyles } from '@mui/styles';
-import {
-  Box,
-  CircularProgress,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Grid,
-  Link,
-  Typography,
-  useMediaQuery,
-} from '@mui/material';
+import { Box, Dialog, Grid, Typography, useMediaQuery } from '@mui/material';
 import React, { useEffect, useRef, useState } from 'react';
-import { CustomButton, Modal, PreviewActivity, TagsInput } from '../../components';
 import StepWizard from 'react-step-wizard';
-import {
-  ArrowBackIosRounded,
-  ArrowForwardIosRounded,
-  CloseOutlined,
-  CloudDoneOutlined,
-  DoneRounded,
-  KeyboardBackspaceRounded,
-} from '@mui/icons-material';
-import { AiOutlineExclamationCircle } from 'react-icons/ai';
-import { createActivityStyles } from './CreateActivity.styles';
+import { ArrowBackIosRounded, ArrowForwardIosRounded, DoneRounded } from '@mui/icons-material';
+import { useFormik } from 'formik';
+import { useSelector } from 'react-redux';
 import clsx from 'clsx';
-import { colors } from '../../assets/js/colors';
+import { CustomButton, PreviewActivity } from '../../components';
+import { createActivityStyles } from './CreateActivity.styles';
 import styles from '../../assets/js/styles';
 import { useDomElementHeight } from '../../hooks/useDomElementHeight.hook';
-import { toast } from 'react-toastify';
-import { useFormik } from 'formik';
 import * as script from './script';
-import CreateActivityStep1 from './create_activity_step1';
 import Step1 from './step1/Step1';
 import Step2 from './step2/Step2';
-import { useSelector } from 'react-redux';
 
-const DRAFT_STATUSES = { saved: 'SAVED', saving: 'SAVING', idle: 'IDLE' };
 const steps = ['Activity Basics', 'Activity Details'];
 
-let firstRender = true;
+const firstRender = true;
 
 export default function CreateActivity(props) {
   const { height } = useDomElementHeight('navbar-root');
@@ -54,13 +30,44 @@ export default function CreateActivity(props) {
 
   const [activeStep, setActiveStep] = useState(1);
   const [state, setState] = useState({ ...JSON.parse(JSON.stringify(script.vars.default_state)) });
-  const [draftStatus, setDraftStatus] = useState(DRAFT_STATUSES.idle);
   const [completedSteps, setcompletedSteps] = useState([]);
   const [preview, setPreview] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
   const isActive = index => index + 1 === activeStep;
   const isCompleted = index => completedSteps.includes(index + 1);
+  const { t } = props;
+  const formikStep1 = useFormik(script.step1Schema);
+  const formikStep2 = useFormik(script.step2Schema);
+
+  const checkErrors = () => {
+    if (activeStep === 1) {
+      return formikStep1.setTouched({ title: true }, true);
+    }
+
+    if (activeStep === 2) {
+      return formikStep2.setTouched({ introduction: true }, true);
+    }
+  };
+
+  const go = direction => {
+    if (direction === 'next') {
+      if (activeStep !== 3) {
+        wizardRef.current.nextStep();
+        const completedStepsTemp = [...new Set([...completedSteps, activeStep])];
+        setcompletedSteps(completedStepsTemp);
+        if (activeStep !== 2) {
+          setActiveStep(step => step + 1);
+        }
+      }
+    }
+    if (direction === 'prev') {
+      if (activeStep !== 1) {
+        wizardRef.current.previousStep();
+        setActiveStep(step => step - 1);
+      }
+    }
+  };
 
   const handleSetState = obj => {
     if (obj) {
@@ -76,34 +83,17 @@ export default function CreateActivity(props) {
         setIsLoading(true);
         script
           .getActivity({ ...props, auth, formikStep1, formikStep2 }, state)
-          .then(result => {})
+          .then(() => {})
           .finally(() => setIsLoading(false));
       }
     }
   }, []);
 
   const togglePreview = () => setPreview(!preview);
 
-  useEffect(() => {
-    if (isLoading) {
-      setDraftStatus(DRAFT_STATUSES.saving);
-    } else {
-      setDraftStatus(DRAFT_STATUSES.saved);
-    }
-  }, [isLoading]);
-
-  const draftContainerText = () => {
-    if (draftStatus === DRAFT_STATUSES.idle) return 'Draft';
-    if (draftStatus === DRAFT_STATUSES.saving) return !isSmallScreen ? 'Saving to draft' : 'Saving...';
-    if (draftStatus === DRAFT_STATUSES.saved) return !isSmallScreen ? 'Saved to draft' : '';
-  };
-
-  const formikStep1 = useFormik(script.step1Schema);
-  const formikStep2 = useFormik(script.step2Schema);
-
   const previous = () => go('prev');
   const next = async () => {
-    let error = await checkErrors();
+    const error = await checkErrors();
 
     console.log(error);
     if (Object.keys(error || {}).length > 0) return;
@@ -116,48 +106,19 @@ export default function CreateActivity(props) {
         step2Values: formikStep2.values,
         props: { ...props, auth },
         state,
-        handleSetState: handleSetState,
+        handleSetState,
         step: activeStep,
       },
       success => {
         if (success) {
-          if (activeStep == 1) go('next');
-          if (activeStep == 2) props.navigate(`/activities/${props.params.id}?success=true`);
+          if (activeStep === 1) go('next');
+          if (activeStep === 2) props.navigate(`/activities/${props.params.id}?success=true`);
           setIsLoading(false);
         }
       },
     );
   };
 
-  const checkErrors = () => {
-    if (activeStep === 1) {
-      return formikStep1.setTouched({ title: true }, true);
-    }
-
-    if (activeStep === 2) {
-      return formikStep2.setTouched({ introduction: true }, true);
-    }
-  };
-
-  const go = direction => {
-    if (direction === 'next') {
-      if (activeStep !== 3) {
-        wizardRef.current.nextStep();
-        let completedStepsTemp = [...new Set([...completedSteps, activeStep])];
-        setcompletedSteps(completedStepsTemp);
-        if (activeStep !== 2) {
-          setActiveStep(step => step + 1);
-        }
-      }
-    }
-    if (direction === 'prev') {
-      if (activeStep !== 1) {
-        wizardRef.current.previousStep();
-        setActiveStep(step => step - 1);
-      }
-    }
-  };
-
   const renderSteps = steps.map((label, index) => (
     <Box
       key={index}
@@ -181,30 +142,12 @@ export default function CreateActivity(props) {
       <Dialog open={preview} fullScreen>
         <PreviewActivity {...props} onClose={togglePreview} />
       </Dialog>
-      {/* Banner */}
-      <Box className={classes.banner}>
-        <KeyboardBackspaceRounded />
-        <>
-          <CustomButton onClick={togglePreview} className={classes.previewButton} variant="outlined">
-            Preview
-          </CustomButton>
-          <Box className={clsx(classes.draft, draftStatus === DRAFT_STATUSES.saved && classes.savedToDraft)}>
-            {draftStatus === DRAFT_STATUSES.saving ? <CircularProgress size={20} color="inherit" /> : null}
-            {draftStatus === DRAFT_STATUSES.saved ? <CloudDoneOutlined size={20} color="inherit" /> : null}
-
-            <Link className={classes.linkToDraft} href={`/creators/${props.auth?.username}/drafts`}>
-              <Typography>{draftContainerText()}</Typography>
-            </Link>
-          </Box>
-        </>
-      </Box>
-
       {/* Form */}
       <Box className={classes.formContainer}>
         <Grid item md={12} lg={12}>
           <Box sx={{ textAlign: isSmallScreen ? 'left' : 'center' }}>
-            <Typography className={clsx(commonClasses.title1)}>Create Activity</Typography>
-            <Typography>Tell us about your informative activity !</Typography>
+            <Typography className={clsx(commonClasses.title1)}>{t('createActivity.welcomeMsg.primary')}</Typography>
+            <Typography>{t('createActivity.welcomeMsg.secondary')}</Typography>
           </Box>
 
           {/* Step Navigation UI */}
@@ -226,7 +169,7 @@ export default function CreateActivity(props) {
               primaryButtonOutlinedStyle
               startIcon={<ArrowBackIosRounded className={classes.nextButton} />}
             >
-              Previous
+              {t('createActivity.buttons.Prev')}
             </CustomButton>
           )}
 
@@ -237,7 +180,7 @@ export default function CreateActivity(props) {
             primaryButtonStyle
             endIcon={<ArrowForwardIosRounded className={classes.nextButton} />}
           >
-            {activeStep == 2 ? 'Publish' : 'Next'}
+            {activeStep === 2 ? t('createActivity.buttons.create') : t('createActivity.buttons.Next')}
           </CustomButton>
         </Box>
       </Box>