From f13d01d3bfa537512fb64038694c242b1871bd94 Mon Sep 17 00:00:00 2001 From: Iris <2300018151@qq.com> Date: Sun, 23 Apr 2023 16:29:36 -0500 Subject: [PATCH] fix(alicefate): return error page when Url wrong --- .../components/modules/EditIdea/EditIdea.js | 207 +++++++++++------- .../CommentsForm/DisplayComments.js | 7 +- .../WorkshoppingPage/WorkshoppingPage.js | 69 ++++-- .../modules/WorkshoppingPage/useFetchIdea.js | 52 +++-- 4 files changed, 213 insertions(+), 122 deletions(-) diff --git a/apps/ideaspace/src/components/modules/EditIdea/EditIdea.js b/apps/ideaspace/src/components/modules/EditIdea/EditIdea.js index 6e1131b15..45db4c09f 100644 --- a/apps/ideaspace/src/components/modules/EditIdea/EditIdea.js +++ b/apps/ideaspace/src/components/modules/EditIdea/EditIdea.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import axios from 'axios'; +import Error from "next/error"; import { useRouter } from 'next/router'; import { useUserDataContext } from '@devlaunchers/components/context/UserDataContext'; @@ -7,9 +8,8 @@ import SignInSection from '../../common/SignInSection/SignInSection'; import BackButton from '../../common/BackButton/BackButton'; import IdeaForm from '../../common/IdeaForm/IdeaForm'; import useConfirm from '../../common/DialogBox/DialogBox'; -import getNotice from '../../common/DialogBox/NoticeBox'; import * as Yup from 'yup'; -import { atoms,organisms } from '@devlaunchers/components/src/components'; +import { atoms, organisms } from '@devlaunchers/components/src/components'; import { HeadWapper, @@ -17,7 +17,7 @@ import { StyledRanbow, } from './StyledEditIdea'; -function SubmissionForm() { +function EditIdea() { let { userData, setUserData, isAuthenticated } = useUserDataContext(); if (process.env.NEXT_PUBLIC_NAME == 'DEVELOPMENT') { isAuthenticated = true; @@ -32,13 +32,34 @@ function SubmissionForm() { const [sending, setSending] = React.useState(false); const [unsavedChanges, setunsavedChanges] = useState(false); const [Dialog, confirmLeave] = useConfirm( - 'You have unsaved changes', + ['You have unsaved changes', '', ''], 'Are you sure you want to discard the changes and leave?', + ['alternative primary', 'CANCEL', 'LEAVE'], ); const [urrl, setUrrl] = useState(''); - const [Notice, confirmNotice] = getNotice( - 'Idea updated successfully', + const [UpdateSucceed, confirmSucceed] = useConfirm( + ['Idea updated successfully', '', ''], + '', + ['primary', 'got it'], + ); + + const [UpdateFailure, confirmFailure] = useConfirm( + ['Unable to update your idea', '', ''], + 'Please try again.', + ['primary', 'close'], + ); + + const [NotAuthor, confirmNotAuthor] = useConfirm( + ["This is not your idea.", '', ''], + '', + ['primary', 'close'], + ); + + const [ArchivedIdea, confirmArchive] = useConfirm( + ["This idea has been archived.", '', ''], + 'To workshop on it, you need to reactivate it first.', + ['primary', 'got it'], ); const [card, setCard] = React.useState({ @@ -51,57 +72,81 @@ function SubmissionForm() { extraInfo: '', involveLevel: '', status: '', - hourCommitmentMin: 0, - hourCommitmentMax: 0, - difficultyLevel: 'Beginner', }); + const [getError, setGetError] = React.useState(false); React.useEffect(() => { + const rejectUser = async () => { + if (!(await confirmNotAuthor())) { + window.history.back(-1); + } + } + + const rejectAuthor = async () => { + if (!(await confirmArchive())) { + router.push(`/ideaspace/workshop/${ideaId}`); + } + } + if (ideaId) { axios.get(`${process.env.NEXT_PUBLIC_STRAPI_URL}/idea-cards/${ideaId}`) .then(response => { if (response.status === 200) { - if(userData.id !== 0){ - if(response.data.author.id == userData.id){ - setCard(response.data); - }else{ - alert("This is not your idea. You can't edit it."); - window.history.back(-1); + if (userData.id !== 0) { + if (response.data.author.id == userData.id) { + if (response.data?.status == 'archived') { + rejectAuthor(); + } else { + setCard(response.data); + } + } else { + rejectUser(); } } + } }) + .catch(error => { + console.log(error); + setGetError(true); + }) } - }, [ideaId,userData.id]); + }, [ideaId, userData.id]); const SignupSchema = Yup.object().shape({ - ideaName: Yup.string().required('Idea Name is Required.'), - description: Yup.string().required('Idea Description is Required.'), - experience: Yup.string().required('Experience is Required.'), - features: Yup.string().required('Idea Feature is Required.'), + ideaName: Yup.string().trim().required('Idea Name is Required.'), + description: Yup.string().trim().required('Idea Description is Required.'), + experience: Yup.string().trim().required('Experience is Required.'), + features: Yup.string().trim().required('Idea Feature is Required.'), + involveLevel: Yup.string().required('Level of involvement is Required.'), }); const submitHandler = async (values) => { - if (values == card) { - alert("nothing chage"); - return; - } + values['ideaName'] = values['ideaName'].trim(); + values['tagline'] = values['tagline'].trim(); + values['description'] = values['description'].trim(); + values['targetAudience'] = values['targetAudience'].trim(); + values['features'] = values['features'].trim(); + values['experience'] = values['experience'].trim(); + values['extraInfo'] = values['extraInfo'].trim(); setSending(true); - const res = await axios.put( - `${process.env.NEXT_PUBLIC_STRAPI_URL}/idea-cards/${ideaId}`, - values - ); - - if (res.status === 200) { - setunsavedChanges(false); - if (await confirmNotice()){ - setUrrl(`/ideaspace/workshop/${res.data.id}`); + try { + const res = await axios.put( + `${process.env.NEXT_PUBLIC_STRAPI_URL}/idea-cards/${ideaId}`, + values + ); + + if (res.status === 200) { + setunsavedChanges(false); + if (!(await confirmSucceed())) { + setUrrl(`/ideaspace/workshop/${ideaId}`); + } } - } else { - alert('Unable to update your idea.'); + } catch (error) { setSending(false); setunsavedChanges(true); + confirmFailure(); } }; @@ -119,8 +164,8 @@ function SubmissionForm() { return 'You have unsaved changes. Do you really want to leave?'; } }; - - if (unsavedChanges && urrl == '' ) { + + if (unsavedChanges && urrl == '') { const routeChangeStart = (url) => { handleDialog(url); router.events.emit('routeChangeError'); @@ -131,9 +176,9 @@ function SubmissionForm() { router.events.off('routeChangeStart', routeChangeStart); }; } else if (urrl !== '') { - if (urrl == 'back'){ + if (urrl == 'back') { window.history.back(-1); - }else{ + } else { router.push(urrl); } } @@ -147,47 +192,51 @@ function SubmissionForm() { } } - return ( - <> - - - Dev Ideas - - - - - - Have an idea for a development project?
- Share your idea with us! - - - - {!isAuthenticated ? ( - - ) : ( - <> - - - + } else { + + return ( + <> + + Dev Ideas + + + + - - )} - - ); - + + Have an idea for a development project?
+ Share your idea with us! + + + + {!isAuthenticated ? ( + + ) : ( + <> + + + + + + )} + + ); + } } -export default SubmissionForm; +export default EditIdea; diff --git a/apps/ideaspace/src/components/modules/WorkshoppingPage/CommentsForm/DisplayComments.js b/apps/ideaspace/src/components/modules/WorkshoppingPage/CommentsForm/DisplayComments.js index 5fe2797dd..eaef879df 100644 --- a/apps/ideaspace/src/components/modules/WorkshoppingPage/CommentsForm/DisplayComments.js +++ b/apps/ideaspace/src/components/modules/WorkshoppingPage/CommentsForm/DisplayComments.js @@ -1,6 +1,5 @@ import React, { useEffect, useState } from 'react'; import Comment from './SingleComment'; -import axios from 'axios'; function DisplayComments(props) { @@ -8,14 +7,10 @@ function DisplayComments(props) { useEffect(() => { if (props.selectedCard.id != undefined) { - axios.get(`${process.env.NEXT_PUBLIC_STRAPI_URL}/idea-cards/${props.selectedCard.id}`) - .then(response => { - setData((response.data.comments).sort((a, b) => a.published_at < b.published_at ? 1 : -1)) - }) + setData((props.selectedCard.comments).sort((a, b) => a.published_at < b.published_at ? 1 : -1)) } }, [props.selectedCard]) - const commentNodes = data.map(comment => ( {comment.text} diff --git a/apps/ideaspace/src/components/modules/WorkshoppingPage/WorkshoppingPage.js b/apps/ideaspace/src/components/modules/WorkshoppingPage/WorkshoppingPage.js index 8414b21ce..43504b87d 100644 --- a/apps/ideaspace/src/components/modules/WorkshoppingPage/WorkshoppingPage.js +++ b/apps/ideaspace/src/components/modules/WorkshoppingPage/WorkshoppingPage.js @@ -1,10 +1,12 @@ import React, { useState } from 'react'; +import Error from "next/error"; import { useRouter } from 'next/router'; import CommentList from './CommentsForm/DisplayComments'; import CommentForm from './CommentsForm/CommentForm'; import { IdeaOverview } from './IdeaOverview/IdeaOverview'; import theme from '../../../styles/theme'; import CircularIndeterminateLoader from '../Loader/CircularIndeterminateLoader' +import useConfirm from '../../common/DialogBox/DialogBox'; import { Form, Comments @@ -22,31 +24,50 @@ function WorkshoppingPage() { const { ideaId } = router.query; const [handleChange, setHandleChange] = useState(''); const [handleTextChange, setHandleTextChange] = useState(''); - const { data, loading } = useFetchIdea(ideaId) - return ( - - {loading === true ? - - : - - - -
- - - - - {/* a count of the comments in the comment feed: */} - {/*
Comment Feed: {data.comments.length}
*/} - - -
- } - + const { data, loading, hidden, getError } = useFetchIdea(ideaId) + + const [ArchivedIdea, confirmArchived] = useConfirm( + ["This Idea has been archived.", '', ''], + "You can't workshop on it.", + ['primary', 'got it', ''], ); + + React.useEffect(async () => { + if (hidden) { + await confirmArchived(); + window.history.back(-1); + } + }, [hidden]); + + if (getError) { + return ; + } else { + return ( + + + {loading === true ? + + : + + + +
+ + + + + {/* a count of the comments in the comment feed: */} + {/*
Comment Feed: {data.comments.length}
*/} + + +
+ } + + ); + } } export default WorkshoppingPage; diff --git a/apps/ideaspace/src/components/modules/WorkshoppingPage/useFetchIdea.js b/apps/ideaspace/src/components/modules/WorkshoppingPage/useFetchIdea.js index 9f8a3dfc0..b045c6748 100644 --- a/apps/ideaspace/src/components/modules/WorkshoppingPage/useFetchIdea.js +++ b/apps/ideaspace/src/components/modules/WorkshoppingPage/useFetchIdea.js @@ -1,8 +1,17 @@ import { useState, useEffect } from 'react'; import axios from 'axios'; - +import { useUserDataContext } from '@devlaunchers/components/context/UserDataContext'; export const useFetchIdea = (ideaId) => { + let { userData, setUserData, isAuthenticated } = useUserDataContext(); + if (process.env.NEXT_PUBLIC_NAME == 'DEVELOPMENT') { + useEffect(() => { + setUserData({ ...userData, id: 30 }); + }, []); + } + + const [hidden, setHidden] = useState(false); + const [getError, setGetError] = useState(false); const [loading, setLoading] = useState(false); const [data, setData] = useState({ ideaName: '', @@ -13,22 +22,39 @@ export const useFetchIdea = (ideaId) => { comments: [], author: {}, }); - useEffect(() => { - const fetchIdea = async (ideaId) => { - setLoading(true) - const response = await axios.get(`${process.env.NEXT_PUBLIC_STRAPI_URL}/idea-cards/${ideaId}`); - setLoading(false) - if (response.data) { - setData(response.data) - } - } + const [sourceData, setSourceData] = useState({ + ideaName: '', + discord: '', + description: '', + email: '', + created_at: '', + comments: [], + author: {}, + }); + + useEffect(async () => { try { if (ideaId) { - fetchIdea(ideaId) + setLoading(true) + const response = await axios.get(`${process.env.NEXT_PUBLIC_STRAPI_URL}/idea-cards/${ideaId}`); + setLoading(false) + if (response.data) { + setSourceData(response.data); + } } - } catch(error) { + } catch (error) { console.log(error) + setGetError(true); } }, [ideaId, setLoading, setData]); - return { data, loading }; + + useEffect(() => { + if (sourceData.status == "archived" && sourceData.author.id !== userData.id) { + setHidden(true); + } else { + setData(sourceData); + } + }, [sourceData, userData]); + + return { data, loading, hidden, getError }; };