PR9: fix(alicefate): return error page when Url wrong

apps/ideaspace/src/components/modules/EditIdea/EditIdea.js

@@ -1,23 +1,23 @@
 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';
 
 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,
   Headline,
   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 (
-    <>
-
-      <HeadWapper>
-        <Headline>Dev Ideas</Headline>
-        <StyledRanbow>
-          <atoms.Layer hasRainbowBottom />
-        </StyledRanbow>
-        <BackButton 
-          buttonType="confirm"
-          clickHandler={backHandler}
-        />
-        <atoms.Typography type='h4' >
-          Have an idea for a development project?<br />
-          Share your idea with us!
-        </atoms.Typography>
-      </HeadWapper>
-
-      {!isAuthenticated ? (
-        <SignInSection
-          label='Please sign in to edit your idea!'
-          redirectURL='https://devlaunchers.org/ideaspace/dashboard'
-        />
-      ) : (
-        <>
-          <Dialog />
-          <Notice />
-          <IdeaForm
-            initialValues={card}
-            SignupSchema={SignupSchema}
-            submitHandler={submitHandler}
-            unsavedHandler={setunsavedChanges}
-            formButton="save"
-            sending={sending}
+  if (getError) {
+    return <Error statusCode={404} title="page Not Found" />
+  } else {
+
+    return (
+      <>
+        <HeadWapper>
+          <Headline>Dev Ideas</Headline>
+          <StyledRanbow>
+            <atoms.Layer hasRainbowBottom />
+          </StyledRanbow>
+          <BackButton
+            buttonType="confirm"
             clickHandler={backHandler}
           />
-        </>
-      )}
-    </>
-  );
-
+          <atoms.Typography type='h4' >
+            Have an idea for a development project?<br />
+            Share your idea with us!
+          </atoms.Typography>
+        </HeadWapper>
+
+        {!isAuthenticated ? (
+          <SignInSection
+            label='Please sign in to edit your idea!'
+            redirectURL='https://devlaunchers.org/ideaspace/dashboard'
+          />
+        ) : (
+          <>
+            <Dialog />
+            <UpdateSucceed /><UpdateFailure />
+            <NotAuthor /><ArchivedIdea />
+            <IdeaForm
+              initialValues={card}
+              SignupSchema={SignupSchema}
+              submitHandler={submitHandler}
+              unsavedHandler={setunsavedChanges}
+              formButton="save"
+              sending={sending}
+              clickHandler={backHandler}
+            />
+          </>
+        )}
+      </>
+    );
+  }
 }
 
-export default SubmissionForm;
+export default EditIdea;

apps/ideaspace/src/components/modules/WorkshoppingPage/CommentsForm/DisplayComments.js

@@ -1,21 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import Comment from './SingleComment';
-import axios from 'axios';
 
 function DisplayComments(props) {
 
   const [data, setData] = useState([])
 
   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 author={comment.author} key={comment.id} id={comment.id}>
       {comment.text}