diff --git a/.github/workflows/build_deploy_frontend.yml b/.github/workflows/build_deploy_frontend.yml index ff0610bee..8925e3fd0 100644 --- a/.github/workflows/build_deploy_frontend.yml +++ b/.github/workflows/build_deploy_frontend.yml @@ -37,8 +37,8 @@ jobs: - uses: unstructuredstudio/zubhub/.github/actions/scp_action@master with: - host: ${{ vars.DO_BACKEND_HOST }} - username: ${{ vars.DO_BACKEND_USERNAME }} + host: ${{ vars.DO_FRONTEND_HOST }} + username: ${{ vars.DO_FRONTEND_USERNAME }} key: ${{ secrets.DO_SSHKEY }} source: "." target: "/home/zubhub-frontend/zubhub" @@ -65,7 +65,7 @@ jobs: script: | docker system prune -a -f - + volumes=$(docker volume ls -q) # Loop through the volumes while IFS= read -r volume; do diff --git a/zubhub_frontend/zubhub/package-lock.json b/zubhub_frontend/zubhub/package-lock.json index 3da6c441f..84bdcfa64 100644 --- a/zubhub_frontend/zubhub/package-lock.json +++ b/zubhub_frontend/zubhub/package-lock.json @@ -23,6 +23,7 @@ "axios": "^1.5.1", "caniuse-lite": "^1.0.30001543", "classnames": "^2.2.6", + "clsx": "^2.1.0", "compressorjs": "^1.0.7", "dayjs": "^1.11.10", "formik": "^2.2.5", diff --git a/zubhub_frontend/zubhub/package.json b/zubhub_frontend/zubhub/package.json index e3337fd07..d3cf548c7 100644 --- a/zubhub_frontend/zubhub/package.json +++ b/zubhub_frontend/zubhub/package.json @@ -18,6 +18,7 @@ "axios": "^1.5.1", "caniuse-lite": "^1.0.30001543", "classnames": "^2.2.6", + "clsx": "^2.1.0", "compressorjs": "^1.0.7", "dayjs": "^1.11.10", "formik": "^2.2.5", diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json index 51afb1356..fc96bfddb 100644 --- a/zubhub_frontend/zubhub/public/locales/en/translation.json +++ b/zubhub_frontend/zubhub/public/locales/en/translation.json @@ -649,7 +649,7 @@ }, "activityLog": { "activity": "Activity Log", - "addActivityLog": "Seems like there isn't any activity on your account yet! Get involved to see activity logs!" + "addActivityLog": "Seems like there isn't any activity on your account yet! Get involved to see activity logs!" }, "team": "Team", "createteam": "Create Team", @@ -949,6 +949,7 @@ "primary": "Create Activity", "edit": "Update Activity" }, + "unauthorized": "You have to be an educator to create activities", "inputs": { "title": { "label": "Name your Activity", @@ -1191,4 +1192,4 @@ "buttonLabel": "Get Started" } } -} \ No newline at end of file +} diff --git a/zubhub_frontend/zubhub/src/components/Sidenav/data.js b/zubhub_frontend/zubhub/src/components/Sidenav/data.js index ce468a0dc..4900a4b4f 100644 --- a/zubhub_frontend/zubhub/src/components/Sidenav/data.js +++ b/zubhub_frontend/zubhub/src/components/Sidenav/data.js @@ -1,45 +1,43 @@ import { GiNotebook } from 'react-icons/gi'; -import { TEAM_ENABLED } from '../../utils.js'; import { RiLogoutBoxRFill, RiTeamFill } from 'react-icons/ri'; import { - Bookmark, - Dashboard, - EmojiObjects, - ExpandMore, - FeaturedPlayList, - Person, - PostAddOutlined, - Publish, - Settings, + Bookmark, + Dashboard, + EmojiObjects, + FeaturedPlayList, + Person, + PostAddOutlined, + Publish, } from '@mui/icons-material'; +import { TEAM_ENABLED } from '../../utils.js'; -export const links = ({ draftCount, myProjectCount, auth, t }) => [ - { label: t('pageWrapper.sidebar.projects'), link: '/', icon: Dashboard }, - { label: t('pageWrapper.sidebar.profile'), link: '/profile', icon: Person, reactIcon: true, requireAuth: true }, - { label: t('pageWrapper.sidebar.createProject'), link: '/projects/create', icon: EmojiObjects }, - ...(auth?.tags.includes('staff') - ? [{ label: t('pageWrapper.sidebar.createActivity'), link: '/activities/create', icon: PostAddOutlined }] - : []), - { - label: `${t('pageWrapper.sidebar.myDrafts')}`, - link: `/creators/${auth?.username}/drafts`, - icon: GiNotebook, - requireAuth: true, - customButton: true, - }, - { - label: `${t('pageWrapper.sidebar.myProjects')}`, - link: `/creators/${auth?.username}/projects`, - icon: Publish, - requireAuth: true, - customButton: true, - }, - { label: t('pageWrapper.sidebar.bookmarks'), link: '/projects/saved', icon: Bookmark, requireAuth: true }, - ...(TEAM_ENABLED ? [{ label: t('pageWrapper.sidebar.teams'), link: '/teams/all', icon: RiTeamFill }] : []), - { label: t('pageWrapper.sidebar.expoloreActivities'), link: 'https://kriti.unstructured.studio/', target: '_blank', icon: FeaturedPlayList }, +export const links = ({ auth, t }) => [ + { label: t('pageWrapper.sidebar.projects'), link: '/', icon: Dashboard }, + { label: t('pageWrapper.sidebar.profile'), link: '/profile', icon: Person, reactIcon: true, requireAuth: true }, + { label: t('pageWrapper.sidebar.createProject'), link: '/projects/create', icon: EmojiObjects }, + ...(auth?.tags.includes('staff') || auth?.tags.includes('educator') + ? [{ label: t('pageWrapper.sidebar.createActivity'), link: '/activities/create', icon: PostAddOutlined }] + : []), + { + label: `${t('pageWrapper.sidebar.myDrafts')}`, + link: `/creators/${auth?.username}/drafts`, + icon: GiNotebook, + requireAuth: true, + customButton: true, + }, + { + label: `${t('pageWrapper.sidebar.myProjects')}`, + link: `/creators/${auth?.username}/projects`, + icon: Publish, + requireAuth: true, + customButton: true, + }, + { label: t('pageWrapper.sidebar.bookmarks'), link: '/projects/saved', icon: Bookmark, requireAuth: true }, + ...(TEAM_ENABLED ? [{ label: t('pageWrapper.sidebar.teams'), link: '/teams/all', icon: RiTeamFill }] : []), + { label: t('pageWrapper.sidebar.expoloreActivities'), link: '/activities', icon: FeaturedPlayList }, ]; export const bottomLinks = ({ t }) => [ - // { label: t('pageWrapper.sidebar.settings'), link: '/settings', icon: Settings, requireAuth: true }, - { label: t('pageWrapper.sidebar.logout'), action: 'logout', icon: RiLogoutBoxRFill, red: true, requireAuth: true }, -]; \ No newline at end of file + // { label: t('pageWrapper.sidebar.settings'), link: '/settings', icon: Settings, requireAuth: true }, + { label: t('pageWrapper.sidebar.logout'), action: 'logout', icon: RiLogoutBoxRFill, red: true, requireAuth: true }, +]; diff --git a/zubhub_frontend/zubhub/src/views/create_activity/CreateActivity.jsx b/zubhub_frontend/zubhub/src/views/create_activity/CreateActivity.jsx index ec3c2b5df..5eac7c5ee 100644 --- a/zubhub_frontend/zubhub/src/views/create_activity/CreateActivity.jsx +++ b/zubhub_frontend/zubhub/src/views/create_activity/CreateActivity.jsx @@ -1,46 +1,30 @@ import { makeStyles } from '@mui/styles'; -import { - Box, - CircularProgress, - Dialog, - DialogActions, - DialogContent, - DialogContentText, - DialogTitle, - Grid, - Link, - Typography, - useMediaQuery, -} from '@mui/material'; +import { Box, CircularProgress, Dialog, Grid, Link, 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 { useFormik } from 'formik'; +import { useSelector } from 'react-redux'; import { ArrowBackIosRounded, ArrowForwardIosRounded, - CloseOutlined, CloudDoneOutlined, DoneRounded, KeyboardBackspaceRounded, } from '@mui/icons-material'; -import { AiOutlineExclamationCircle } from 'react-icons/ai'; -import { createActivityStyles } from './CreateActivity.styles'; 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'; +import ErrorPage from '../error/ErrorPage'; 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'); @@ -61,6 +45,9 @@ export default function CreateActivity(props) { 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 handleSetState = obj => { if (obj) { @@ -76,7 +63,7 @@ export default function CreateActivity(props) { setIsLoading(true); script .getActivity({ ...props, auth, formikStep1, formikStep2 }, state) - .then(result => {}) + .then(() => {}) .finally(() => setIsLoading(false)); } } @@ -98,37 +85,6 @@ export default function CreateActivity(props) { 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(); - - console.log(error); - if (Object.keys(error || {}).length > 0) return; - - setIsLoading(true); - - script.submitForm( - { - step1Values: formikStep1.values, - step2Values: formikStep2.values, - props: { ...props, auth }, - state, - handleSetState: handleSetState, - step: activeStep, - }, - success => { - if (success) { - 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); @@ -143,7 +99,7 @@ export default function CreateActivity(props) { if (direction === 'next') { if (activeStep !== 3) { wizardRef.current.nextStep(); - let completedStepsTemp = [...new Set([...completedSteps, activeStep])]; + const completedStepsTemp = [...new Set([...completedSteps, activeStep])]; setcompletedSteps(completedStepsTemp); if (activeStep !== 2) { setActiveStep(step => step + 1); @@ -157,6 +113,33 @@ export default function CreateActivity(props) { } } }; + const previous = () => go('prev'); + const next = async () => { + const error = await checkErrors(); + + console.log(error); + if (Object.keys(error || {}).length > 0) return; + + setIsLoading(true); + + script.submitForm( + { + step1Values: formikStep1.values, + step2Values: formikStep2.values, + props: { ...props, auth }, + state, + handleSetState, + step: activeStep, + }, + success => { + if (success) { + if (activeStep === 1) go('next'); + if (activeStep === 2) props.navigate(`/activities/${props.params.id}?success=true`); + setIsLoading(false); + } + }, + ); + }; const renderSteps = steps.map((label, index) => ( )); - return ( -
- - - - {/* Banner */} - - - <> - - Preview - - - {draftStatus === DRAFT_STATUSES.saving ? : null} - {draftStatus === DRAFT_STATUSES.saved ? : null} - - - {draftContainerText()} - - - - - - {/* Form */} - - - - Create Activity - Tell us about your informative activity ! - - - {/* Step Navigation UI */} - {renderSteps} + if (!auth?.tags.includes('educator') || !auth?.tags.includes('staff')) { + return ; + } else { + return ( +
+ + + + {/* Banner */} + + + <> + + Preview + + + {draftStatus === DRAFT_STATUSES.saving ? : null} + {draftStatus === DRAFT_STATUSES.saved ? : null} + + + {draftContainerText()} + + + + - - - - - - - + {/* Form */} + + + + Create Activity + Tell us about your informative activity ! + + + {/* Step Navigation UI */} + {renderSteps} + + + + + + + + + + {/* Previous and Next buttons */} + + {activeStep > 1 && ( + } + > + Previous + + )} - {/* Previous and Next buttons */} - - {activeStep > 1 && ( } + onClick={next} + loading={isLoading} + style={{ marginLeft: 'auto' }} + primaryButtonStyle + endIcon={} > - Previous + {activeStep === 2 ? 'Publish' : 'Next'} - )} - - } - > - {activeStep == 2 ? 'Publish' : 'Next'} - + - -
- ); +
+ ); + } }