Merge pull request #33 from hack4impact-upenn/delete-resource

Delete resource

Author: rosewang01

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn pre-commit 
+# yarn pre-commit 

.husky/pre-push

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn pre-push
+# yarn pre-push

client/src/AdminDashboard/AdminDashboardPage.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Typography, Grid, AppBar } from '@mui/material';
+import { Typography, Grid } from '@mui/material';
 import ScreenGrid from '../components/ScreenGrid';
-// import UserTable from './QuestionTable';
 import QuestionTable from './QuestionTable';
 
 /**

client/src/AdminDashboard/DeleteQuestionButton.tsx

@@ -1,60 +1,55 @@
 import React, { useState } from 'react';
 import Button from '@mui/material/Button';
-import { Navigate, useNavigate } from 'react-router-dom';
-import { deleteQuestion } from './api'; // change to deleteQuestion
+import { deleteResource } from './api'; // change to deleteQuestion
 import LoadingButton from '../components/buttons/LoadingButton';
 import ConfirmationModal from '../components/ConfirmationModal';
 import { IQuestion } from '../util/types/question';
 
 interface DeleteQuestionButtonProps {
+  id: string;
   question: IQuestion;
   removeRow: (question: IQuestion) => void;
 }
 
 /**
  * The button component which, when clicked, will delete the question from the database.
  * If the user is not a valid question, button will be unclickable //this is kinda unnecessary lowkey
- * @param isQuestion - whether the question is valid
- * @param text - the text of the question to delete
+ * @param id - id of the question to delete
+ * @param question - the question to delete
  * @param removeRow - a function which removes a row from the question table. This
  * function is called upon successfully deletion of user from the database.
  */
 function DeleteQuestionButton({
+  id,
   question,
   removeRow,
 }: DeleteQuestionButtonProps) {
-  const navigate = useNavigate();
-
   const [isLoading, setLoading] = useState(false);
-  async function handleDelete() {
+
+  async function handleDeleteResource() {
     setLoading(true);
-    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');
-    } else {
-      setLoading(false);
-    }
+    await deleteResource(id);
+    removeRow(question);
+    setLoading(false);
   }
   if (isLoading) {
     return <LoadingButton />;
   }
   if (question.isQuestion) {
-    // valid question
     return (
-      <ConfirmationModal
-        buttonText="Remove Question"
-        title="Are you sure you want to remove this question?"
-        body="This action is permanent. Question information will not be able to be recovered."
-        onConfirm={() => handleDelete()}
-      />
+      <Button variant="outlined" disabled>
+        Delete Question
+      </Button>
     );
   }
+  // resource
   return (
-    <Button variant="outlined" disabled>
-      Question is Invalid
-    </Button>
+    <ConfirmationModal
+      buttonText="Remove Resource"
+      title="Are you sure you want to remove this resource?"
+      body="This action is permanent. Resource information will not be able to be recovered."
+      onConfirm={() => handleDeleteResource()}
+    />
   );
 }
 

client/src/AdminDashboard/EditQuestionButton.tsx

@@ -1,77 +1,23 @@
 import React, { useState } from 'react';
 import Button from '@mui/material/Button';
 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;
 }
 
 /**
  * The button component which, when clicked, will edit the question from the database.
  * If the user is not a valid question, button will be unclickable //this is kinda unnecessary lowkey
- * @param isQuestion - whether the question is valid
- * @param text - the text of the question to edit
- * @param editRow - a function which edits a row from the question table. should be called after editing the user
+ * @param question - the question to edit
  * data in the database if put data works right lol
  */
-function EditQuestionButton({
-  qID,
-  isQuestion,
-  text,
-  question,
-  editRow,
-}: EditQuestionButtonProps) {
+function EditQuestionButton({ question }: EditQuestionButtonProps) {
   const navigate = useNavigate();
 
-  const tempAnswer1: IAnswer = {
-    _id: '6369a05ce0cca0b76f26576c',
-    text: '2x edited answer text 1',
-    resultantQuestionId: '63751d7cc26b48cf7f1d9724',
-    resourceContent: '',
-    resourceLink: '',
-  };
-  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);
-    // 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
-    } else {
-      setLoading(false);
-    }
-  }
-  if (isLoading) {
-    return <LoadingButton />;
-  }
-  if (isQuestion) {
+  if (question.isQuestion) {
     // valid question
     return (
       <div>

client/src/AdminDashboard/QuestionTable.tsx

@@ -4,35 +4,20 @@
  */
 import React, { useEffect, useState } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
-import { EnhancedEncryptionRounded } from '@mui/icons-material';
 import { PaginationTable, TColumn } from '../components/PaginationTable';
-import DeleteUserButton from './DeleteUserButton';
 import DeleteQuestionButton from './DeleteQuestionButton';
-import PromoteUserButton from './PromoteUserButton';
 import { useData } from '../util/api';
-import { useAppSelector } from '../util/redux/hooks';
-import { selectUser } from '../util/redux/userSlice';
-import IUser from '../util/types/user';
 import { IQuestion } from '../util/types/question';
-import { IResource } from '../util/types/resource';
 import EditQuestionButton from './EditQuestionButton';
-import { deleteQuestion } from './api';
+import { deleteResource } from './api';
 
 interface AdminDashboardRow {
   key: string;
   question: string;
-  // promote: React.ReactElement;
+  deleteButton: React.ReactElement;
   edit: React.ReactElement;
 }
 
-// const testq: IQuestion = {
-//   //required params: text, resultantAnswerIds, isQuestion
-//   text: '',
-//   resultantAnswerIds: [],
-//   isQuestion: true,
-
-// };
-
 /**
  * The standalone table component for holding information about the users in
  * the database and allowing admins to remove users and promote users to admins.
@@ -48,87 +33,54 @@ function QuestionTable() {
     { id: 'edit', label: 'Edit' },
   ];
 
-  const [selectedRow, setSelectedRow] = useState({});
-
   // Used to create the data type to create a row in the table
   function createAdminDashboardRow(
     question: IQuestion, // IUser, //fix this to question type
-    // promote: React.ReactElement,
+    deleteButton: React.ReactElement,
     edit: React.ReactElement,
   ): AdminDashboardRow {
-    // const { _id, qstn } = user;
-    const { _id, text, resultantAnswers, isQuestion } = question;
+    const { _id, text } = question;
     return {
       key: _id,
       question: text,
-      // resultantAnswerIds: resultantAnswerIds,
-      // isQuestion: isQuestion,
-      // promote,
+      deleteButton,
       edit,
     };
   }
 
   const [questionList, setQuestionList] = useState<IQuestion[]>([]);
   const questions = useData('admin/allQuestions'); // this is a route for GETTING ALL question data; TODO: update later
-  // TESTING:
-  // const questions = testq;
-
-  // const self = useAppSelector(selectUser);
 
   // Upon getting the list of users for the database, set the state of the userList to contain all users except for logged in user
   useEffect(() => {
-    setQuestionList(
-      // questions?.data.filter( //don't actually need the filter i think but it's fine just making sure text isn't empty
-      //   (entry: IQuestion) => entry && entry.text,// && entry.text !== self.text,
-      // ),
-      questions?.data,
-      // TESTING:
-      // [questions, questions], //testing
-    );
-  }, [questions]); // [questions, self]); //should i actually be returning self here
+    setQuestionList(questions?.data);
+  }, [questions]);
 
   // update state of userlist to remove a user from  the frontend representation of the data
-  const removeQuestion = (question: IQuestion) => {
+  const removeResource = (question: IQuestion) => {
     setQuestionList(
       questionList.filter(
         (entry: IQuestion) =>
           entry &&
           entry.text &&
           entry.text !== question.text &&
           // eslint-disable-next-line no-underscore-dangle
-          entry._id !== question._id, //! == question.text,
+          entry._id !== question._id,
       ),
     );
-    deleteQuestion(question);
+    // eslint-disable-next-line no-underscore-dangle
+    deleteResource(question._id);
   };
 
   const handleEditChange = (oldQ: IQuestion, newQ: IQuestion) => {
-    // setQuestionList(event.target.value);
-    removeQuestion(oldQ);
-    // addQuestion(newQ);
-    console.log('value is:', newQ.text);
+    setQuestionList(
+      questionList.map((q: IQuestion) =>
+        // eslint-disable-next-line no-underscore-dangle
+        q.text === oldQ.text && q._id === oldQ._id ? newQ : q,
+      ),
+    );
   };
 
-  function editRow(row: IQuestion, newText: string) {
-    console.log('khgfjgfsjgfliglkghd');
-    // row.text = newText; // 'hello ' + row.text;
-  }
-
-  // idrk what this is but updated it for question
-  // update state of userlist to promote a user on the frontend representation
-  // const updateQuestion = (text: string) => {
-  //   setQuestionList(
-  //     questionList.map((entry) => {
-  //       if (entry.text !== text) {
-  //         return entry;
-  //       }
-  //       const newEntry = entry;
-  //       newEntry.isQuestion = true;
-  //       return newEntry;
-  //     }),
-  //   );
-  // };
-
   // if the questionlist is not yet populated, display a loading spinner
   if (!questionList) {
     return (
@@ -143,36 +95,17 @@ function QuestionTable() {
       rows={questionList.map((question: IQuestion) =>
         createAdminDashboardRow(
           question,
-          <EditQuestionButton
+          <DeleteQuestionButton
             // eslint-disable-next-line no-underscore-dangle
-            qID={question._id}
-            isQuestion={question.isQuestion}
-            text={question.text}
+            id={question._id}
             question={question}
-            editRow={() => editRow(question, '')}
-            // open up text editor
-            // extract inputted text data from text editor GUI
-            // if isQuestion true --> replace current question.text with data from text editor GUI
-            // else (isQuestion false) --> take answer IDs and resource descriptions to replace all resource description text with the data from text editor GUI
-            // embedded links (clickable)
-            // save and turn off editing mode
+            removeRow={() => removeResource(question)}
           />,
-
-          // <PromoteUserButton
-          //   isQuestion={question.isQuestion}
-          //   email={question.text}
-          //   updateAdmin={updateAdmin}
-          // />,
+          <EditQuestionButton question={question} />,
         ),
       )}
       columns={columns}
     />
-
-    // <TableRow
-    //   onClick={() => setSelectedRow(row)}
-    //   key={row.name}
-    //   sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-    // ></TableRow>
   );
 }