Merge pull request #31 from hack4impact-upenn/edit-resource

Edit resource

client/package.json

@@ -37,6 +37,7 @@
     "@mui/system": "^5.5.2",
     "@reduxjs/toolkit": "^1.8.1",
     "axios": "^1.1.2",
+    "html-to-text": "^9.0.0",
     "jodit": "^3.23.1",
     "jodit-react": "^1.3.31",
     "prop-types": "^15.8.1",
@@ -55,6 +56,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/html-to-text": "^8.1.1",
     "@types/jest": "^29.1.2",
     "@types/node": "^18.8.3",
     "@types/react": "^18.0.21",

client/src/AdminDashboard/DeleteQuestionButton.tsx

@@ -4,11 +4,11 @@ import { Navigate, useNavigate } from 'react-router-dom';
 import { deleteQuestion } from './api'; // change to deleteQuestion
 import LoadingButton from '../components/buttons/LoadingButton';
 import ConfirmationModal from '../components/ConfirmationModal';
+import { IQuestion } from '../util/types/question';
 
 interface DeleteQuestionButtonProps {
-  isQuestion: boolean;
-  text: string;
-  removeRow: (question: string) => void;
+  question: IQuestion;
+  removeRow: (question: IQuestion) => void;
 }
 
 /**
@@ -20,28 +20,27 @@ interface DeleteQuestionButtonProps {
  * function is called upon successfully deletion of user from the database.
  */
 function DeleteQuestionButton({
-  isQuestion,
-  text,
+  question,
   removeRow,
 }: DeleteQuestionButtonProps) {
   const navigate = useNavigate();
 
   const [isLoading, setLoading] = useState(false);
   async function handleDelete() {
     setLoading(true);
-    if (true) {
-      // (await deleteQuestion(text)) {//if you comment this out it'll go to the login page but rn this never returns true bc theres no user created that it can delete
-      removeRow(text);
+    if (await deleteQuestion(question)) {
+      // if you comment this out it'll go to the login page but rn this never returns true bc theres no user created that it can delete
+      removeRow(question);
       // go to new page just to check button functionality
-      navigate('/login');
+      // navigate('/login');
     } else {
       setLoading(false);
     }
   }
   if (isLoading) {
     return <LoadingButton />;
   }
-  if (isQuestion) {
+  if (question.isQuestion) {
     // valid question
     return (
       <ConfirmationModal

client/src/AdminDashboard/EditQuestionButton.tsx

@@ -1,14 +1,19 @@
 import React, { useState } from 'react';
 import Button from '@mui/material/Button';
-import { Navigate, useNavigate } from 'react-router-dom';
+import { Navigate, useNavigate, Link } from 'react-router-dom';
 import { editQuestion } from './api';
 import LoadingButton from '../components/buttons/LoadingButton';
 import ConfirmationModal from '../components/ConfirmationModal';
+import { IQuestion } from '../util/types/question';
+import EditResource from '../components/EditResource';
+import EditQuestion from '../components/EditQuestion';
+import { IAnswer } from '../util/types/answer';
 
 interface EditQuestionButtonProps {
   qID: string;
   isQuestion: boolean;
   text: string;
+  question: IQuestion;
   editRow: (qID: string, question: string, newText: string) => void;
 }
 
@@ -24,28 +29,41 @@ function EditQuestionButton({
   qID,
   isQuestion,
   text,
+  question,
   editRow,
 }: EditQuestionButtonProps) {
   const navigate = useNavigate();
 
-  const questionVals = {
-    '63699fdbe0cca0b76f26576a': 'updated question text',
+  const tempAnswer1: IAnswer = {
+    _id: '6369a05ce0cca0b76f26576c',
+    text: '2x edited answer text 1',
+    resultantQuestionId: '63751d7cc26b48cf7f1d9724',
+    resourceContent: '',
+    resourceLink: '',
   };
-  const answerVals = {
-    '6369a04ee0cca0b76f26576b': 'lalalala',
-    '6369a05ce0cca0b76f26576c': 'hehehehehe',
+  const tempAnswer2: IAnswer = {
+    _id: '6369a04ee0cca0b76f26576b',
+    text: '2x edited answer text 2',
+    resultantQuestionId: '63751d7cc26b48cf7f1d9724',
+    resourceContent: '',
+    resourceLink: '',
+  };
+  const tempQuestion: IQuestion = {
+    _id: '63699fdbe0cca0b76f26576a',
+    text: '2x edited question text',
+    isQuestion: true,
+    resultantAnswers: [tempAnswer1, tempAnswer2],
   };
 
   const [isLoading, setLoading] = useState(false);
   async function handleEdit() {
     setLoading(true);
-    // edit question needs to take in new text that user has typed in
-    if (await editQuestion(questionVals, answerVals)) {
+    // tempQuestion should be replaced with question prop. Question needs to have all correct edited values. Shouldn't this happen in EditorGUI?
+    if (await editQuestion(tempQuestion)) {
       // navigate('/newquestion'); // go to create new question page
       // const newtext = newquestionpage.getData(); //this isnt real, but //click save in newquestion page; should return new text data
       // editRow(text, newtext); //basically just deletes the row for now
       // overwrite current row text
-      console.log('hi');
     } else {
       setLoading(false);
     }
@@ -56,18 +74,28 @@ function EditQuestionButton({
   if (isQuestion) {
     // valid question
     return (
-      <ConfirmationModal
-        buttonText="Edit Question"
-        title="Are you sure you want to edit this question?"
-        body="This action is permanent. Question information will not be able to be recovered."
-        onConfirm={() => handleEdit()}
-      />
+      <div>
+        <Link
+          to="/editQuestion"
+          state={{ question }}
+          style={{ textDecoration: 'none' }}
+        >
+          <Button variant="outlined">Edit Question</Button>
+        </Link>
+      </div>
     );
   }
+
   return (
-    <Button variant="outlined" disabled>
-      Question is Invalid
-    </Button>
+    <div>
+      <Link
+        to="/editResource"
+        state={{ question }}
+        style={{ textDecoration: 'none' }}
+      >
+        <Button variant="outlined">Edit Resource</Button>
+      </Link>
+    </div>
   );
 }