Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

(activity): Activity creation changes #1104

Open
wants to merge 1 commit into
base: staging
Choose a base branch
from
Open

(activity): Activity creation changes #1104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions zubhub_frontend/zubhub/public/locales/en/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -961,6 +961,7 @@
"createActivity": {
"welcomeMsg": {
"primary": "Create Activity",
"secondary": "Tell us about your informative activity!",
"edit": "Update Activity"
},
"inputs": {
Expand Down Expand Up @@ -1082,9 +1083,10 @@
},
"buttons": {
"Next": "Next",
"Prev": "Prev",
"Prev": "Previous",
"Submit": "Submit For Review",
"Edit": "Save Changes"
"Edit": "Save Changes",
"create": "Create"
}
},

Expand Down Expand Up @@ -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": {
Expand Down
12 changes: 12 additions & 0 deletions zubhub_frontend/zubhub/src/views/activity_details/ActivityDetails.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
});
14 changes: 5 additions & 9 deletions zubhub_frontend/zubhub/src/views/activity_details/ActivityDetailsV2.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for doing this @brrkrmn ! seeing untranslated strings stresses me out a lotttttt

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh I know @NdibeRaymond , this part was edited in the activity details page PR which uses all text from translation, so I didn't want to redo the work here 😅

{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>
Expand Down
153 changes: 48 additions & 105 deletions zubhub_frontend/zubhub/src/views/create_activity/CreateActivity.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
Expand All @@ -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) {
Expand All @@ -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;
Expand All @@ -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}
Expand All @@ -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 */}
Expand All @@ -226,7 +169,7 @@ export default function CreateActivity(props) {
primaryButtonOutlinedStyle
startIcon={<ArrowBackIosRounded className={classes.nextButton} />}
>
Previous
{t('createActivity.buttons.Prev')}
</CustomButton>
)}

Expand All @@ -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>
Expand Down
Loading
Loading