From 69da4cd4046a838ddfef5bae1d216d764b7a1ace Mon Sep 17 00:00:00 2001 From: Cindy Zheng Date: Tue, 22 Feb 2022 13:08:45 -0800 Subject: [PATCH 01/11] Adding functionality to uploading grading script and assignment. --- frontend/src/App.tsx | 5 +- .../src/AssignmentView/AddAssignmentModal.tsx | 90 ++++++++++-- .../src/AssignmentView/AssignmentView.tsx | 16 +-- .../AssignmentView/UploadSubmissionModal.tsx | 134 ++++++++++++++++++ frontend/src/ClassView/ClassView.tsx | 17 ++- .../src/Context/StudentAssignmentContext.tsx | 12 ++ frontend/src/Context/UserContext.tsx | 4 +- 7 files changed, 252 insertions(+), 26 deletions(-) create mode 100644 frontend/src/AssignmentView/UploadSubmissionModal.tsx create mode 100644 frontend/src/Context/StudentAssignmentContext.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c977857..50a1313 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -16,12 +16,15 @@ import { useCookies } from "react-cookie"; const defaultUser = { user: { mode: "student", - class: {}, + class: { + id: "", + }, }, }; function App() { const [cookies, setCookies] = useCookies(["jwt"]); + return ( diff --git a/frontend/src/AssignmentView/AddAssignmentModal.tsx b/frontend/src/AssignmentView/AddAssignmentModal.tsx index 122d80a..45a765c 100644 --- a/frontend/src/AssignmentView/AddAssignmentModal.tsx +++ b/frontend/src/AssignmentView/AddAssignmentModal.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { FormEvent, useContext, useState } from "react"; import { useNavigate } from "react-router-dom"; import Container from "react-bootstrap/Container"; import Form from "react-bootstrap/Form"; @@ -6,30 +6,84 @@ import Button from "react-bootstrap/Button"; import Alert from "react-bootstrap/Alert"; import Stack from "react-bootstrap/Stack"; import Modal from "react-bootstrap/Modal"; +import { userContext } from "../Context/UserContext"; +//import { StudentAssignmentContext } from "../Context/StudentAssignmentContext"; // This view is a form for professors to add a assignment function AddAssignmentModal() { + //const studentAssignment = useContext(StudentAssignmentContext); + const user = useContext(userContext); const [error, setError] = useState(""); const nav = useNavigate(); const [show, setShow] = useState(false); + const [gradingScriptName, setGradingScriptName] = useState(""); + const [gradingScriptFile, setGradingScriptFile] = useState(""); + const [dueDate, setDueDate] = useState(""); const handleClose = () => setShow(false); const handleShow = () => setShow(true); - const submit: React.FormEventHandler = ( - e: React.FormEvent - ) => { + const onInputGradingScriptName = ({ + target: { value }, + }: { + target: { value: string }; + }) => setGradingScriptName(value); + + const onInputGradingScriptFile = ({ + target: { value }, + }: { + target: { value: string }; + }) => setGradingScriptFile(value); + + const onInputDueDate = ({ + target: { value }, + }: { + target: { value: string }; + }) => setDueDate(value); + + async function handleGradingScript() { + return fetch("http://localhost:8080/" + user.user.class.id + "/", { + method: "POST", + mode: "cors", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + GradingScriptName: gradingScriptName, + GradingScriptFile: gradingScriptFile, + }), + }) + .then((response) => { + if (response.status == 401) throw "Unauthorized"; + return response.json(); + }) + .catch((e) => { + setError( + `Failed uploading! Server responded with: ${String(e).replace( + "TypeError: ", + "" + )}` + ); + }); + } + + async function submit(e: FormEvent) { e.preventDefault(); - // send assignment data to database - // set up autograding (?) + //const response = await handleGradingScript(); + // TODO: The API call to submit a file is still unimplemented. Will fix when implemented setError((err) => (err ? "" : `File type is not supported`)); - nav("/professor/class/"); - }; + //nav("/professor/class/"); + } return ( <> - @@ -51,15 +105,27 @@ function AddAssignmentModal() { type="text" name="name" placeholder="Assignment Name" + value={gradingScriptName} + onChange={onInputGradingScriptName} /> Due Date - + Grading Script - + - ) : ( - - )} + {mode === "student" ? : }

{mode === "student" ? ( diff --git a/frontend/src/AssignmentView/UploadSubmissionModal.tsx b/frontend/src/AssignmentView/UploadSubmissionModal.tsx new file mode 100644 index 0000000..f90570e --- /dev/null +++ b/frontend/src/AssignmentView/UploadSubmissionModal.tsx @@ -0,0 +1,134 @@ +import React, { FormEvent, useState, useContext } from "react"; +import { useNavigate } from "react-router-dom"; +import Container from "react-bootstrap/Container"; +import Form from "react-bootstrap/Form"; +import Button from "react-bootstrap/Button"; +import Alert from "react-bootstrap/Alert"; +import Stack from "react-bootstrap/Stack"; +import Modal from "react-bootstrap/Modal"; +import { userContext } from "../Context/UserContext"; +import { StudentAssignmentContext } from "../Context/StudentAssignmentContext"; + +// This view is a form for professors to add a assignment +function UploadSubmissionModal() { + const studentAssignment = useContext(StudentAssignmentContext); + const user = useContext(userContext); + + const [error, setError] = useState(""); + const nav = useNavigate(); + + const [show, setShow] = useState(false); + const [submissionName, setSubmissionName] = useState(""); + const [submissionFile, setSubmissionFile] = useState(""); + const handleClose = () => setShow(false); + const handleShow = () => setShow(true); + + const onInputSubmissionName = ({ + target: { value }, + }: { + target: { value: string }; + }) => setSubmissionName(value); + + const onInputSubmissionFile = ({ + target: { value }, + }: { + target: { value: string }; + }) => setSubmissionFile(value); + + async function handleSubmission() { + return fetch( + "http://localhost:8080/" + + user.user.class.id + + "/" + + studentAssignment.assignment.assignment.id, + { + method: "POST", + mode: "cors", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + submissionName: submissionName, + submissionFile: submissionFile, + }), + } + ) + .then((response) => { + if (response.status == 401) throw "Unauthorized"; + return response.json(); + }) + .catch((e) => { + setError( + `Failed uploading! Server responded with: ${String(e).replace( + "TypeError: ", + "" + )}` + ); + }); + } + + async function submit(e: FormEvent) { + e.preventDefault(); + //const response = await handleSubmission(); + // TODO: The API call to submit a file is still unimplemented. Will fix when implemented + setError((err) => (err ? "" : `File type is not supported`)); + //nav("/professor/class/"); + } + + return ( + <> + + + + + Add Submission + + + + + {error && Failed to submit{error}} +
+ + Submission name + + + + Submission Upload + + + + + + +
+ + + + + + ); +} + +export default UploadSubmissionModal; diff --git a/frontend/src/ClassView/ClassView.tsx b/frontend/src/ClassView/ClassView.tsx index bdf43d1..4f0e219 100644 --- a/frontend/src/ClassView/ClassView.tsx +++ b/frontend/src/ClassView/ClassView.tsx @@ -1,6 +1,8 @@ import React from "react"; import { useNavigate } from "react-router-dom"; +import { StudentAssignmentContext } from "../Context/StudentAssignmentContext"; + import Container from "react-bootstrap/Container"; import Stack from "react-bootstrap/Stack"; import Button from "react-bootstrap/Button"; @@ -16,6 +18,17 @@ function ClassView() { const nav = useNavigate(); const mode: "student" | "faculty" = "student"; // should be taken from some app state / login info + const defaultAssignment = (id: string) => { + return { + assignment: { + mode: "student", + assignment: { + id: id, + }, + }, + }; + }; + const navToClassStats = () => { nav("/class/classstats"); }; @@ -37,7 +50,9 @@ function ClassView() {

My Assignments

{Assignments.map((x) => mode === "student" ? ( - + + + ) : ( ) diff --git a/frontend/src/Context/StudentAssignmentContext.tsx b/frontend/src/Context/StudentAssignmentContext.tsx new file mode 100644 index 0000000..17ad81f --- /dev/null +++ b/frontend/src/Context/StudentAssignmentContext.tsx @@ -0,0 +1,12 @@ +import React from "react"; + +const StudentAssignmentContext = React.createContext({ + assignment: { + mode: "student", + assignment: { + id: "", + }, + }, +}); + +export { StudentAssignmentContext }; diff --git a/frontend/src/Context/UserContext.tsx b/frontend/src/Context/UserContext.tsx index c32a818..1c8377e 100644 --- a/frontend/src/Context/UserContext.tsx +++ b/frontend/src/Context/UserContext.tsx @@ -3,7 +3,9 @@ import React from "react"; const userContext = React.createContext({ user: { mode: "student", - class: {}, + class: { + id: "", + }, }, }); From 4b3e6572022f28033442afb2c6522d06f1a18575 Mon Sep 17 00:00:00 2001 From: Cindy Zheng Date: Tue, 22 Feb 2022 13:12:50 -0800 Subject: [PATCH 02/11] Adding context file (basic) for professor --- .../src/AssignmentView/AddAssignmentModal.tsx | 32 +++++++++++-------- .../AssignmentView/UploadSubmissionModal.tsx | 2 +- frontend/src/ClassView/ClassView.tsx | 10 +++--- .../Context/ProfessorAssignmentContext.tsx | 9 ++++++ .../src/Context/StudentAssignmentContext.tsx | 5 +-- 5 files changed, 35 insertions(+), 23 deletions(-) create mode 100644 frontend/src/Context/ProfessorAssignmentContext.tsx diff --git a/frontend/src/AssignmentView/AddAssignmentModal.tsx b/frontend/src/AssignmentView/AddAssignmentModal.tsx index 45a765c..3549bb3 100644 --- a/frontend/src/AssignmentView/AddAssignmentModal.tsx +++ b/frontend/src/AssignmentView/AddAssignmentModal.tsx @@ -7,11 +7,11 @@ import Alert from "react-bootstrap/Alert"; import Stack from "react-bootstrap/Stack"; import Modal from "react-bootstrap/Modal"; import { userContext } from "../Context/UserContext"; -//import { StudentAssignmentContext } from "../Context/StudentAssignmentContext"; +import { ProfessorAssignmentContext } from "../Context/ProfessorAssignmentContext"; // This view is a form for professors to add a assignment function AddAssignmentModal() { - //const studentAssignment = useContext(StudentAssignmentContext); + const assignment = useContext(ProfessorAssignmentContext); const user = useContext(userContext); const [error, setError] = useState(""); const nav = useNavigate(); @@ -42,17 +42,23 @@ function AddAssignmentModal() { }) => setDueDate(value); async function handleGradingScript() { - return fetch("http://localhost:8080/" + user.user.class.id + "/", { - method: "POST", - mode: "cors", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - GradingScriptName: gradingScriptName, - GradingScriptFile: gradingScriptFile, - }), - }) + return fetch( + "http://localhost:8080/" + + user.user.class.id + + "/" + + assignment.assignment.id, + { + method: "POST", + mode: "cors", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + GradingScriptName: gradingScriptName, + GradingScriptFile: gradingScriptFile, + }), + } + ) .then((response) => { if (response.status == 401) throw "Unauthorized"; return response.json(); diff --git a/frontend/src/AssignmentView/UploadSubmissionModal.tsx b/frontend/src/AssignmentView/UploadSubmissionModal.tsx index f90570e..962da5d 100644 --- a/frontend/src/AssignmentView/UploadSubmissionModal.tsx +++ b/frontend/src/AssignmentView/UploadSubmissionModal.tsx @@ -40,7 +40,7 @@ function UploadSubmissionModal() { "http://localhost:8080/" + user.user.class.id + "/" + - studentAssignment.assignment.assignment.id, + studentAssignment.assignment.id, { method: "POST", mode: "cors", diff --git a/frontend/src/ClassView/ClassView.tsx b/frontend/src/ClassView/ClassView.tsx index 4f0e219..3a933aa 100644 --- a/frontend/src/ClassView/ClassView.tsx +++ b/frontend/src/ClassView/ClassView.tsx @@ -10,6 +10,7 @@ import Button from "react-bootstrap/Button"; import StudentAssignmentCard from "./StudentAssignmentCard"; import ProfessorAssignmentCard from "./ProfessorAssignmentCard"; import AddAssignmentModal from "../AssignmentView/AddAssignmentModal"; +import { ProfessorAssignmentContext } from "../Context/ProfessorAssignmentContext"; const Assignments = ["Assignment 1", "Assignment 2", "Assignment 3"]; // should be reading assignments from a database @@ -21,10 +22,7 @@ function ClassView() { const defaultAssignment = (id: string) => { return { assignment: { - mode: "student", - assignment: { - id: id, - }, + id: id, }, }; }; @@ -54,7 +52,9 @@ function ClassView() { ) : ( - + + + ) )} {mode === "student" ? null : } diff --git a/frontend/src/Context/ProfessorAssignmentContext.tsx b/frontend/src/Context/ProfessorAssignmentContext.tsx new file mode 100644 index 0000000..57bda17 --- /dev/null +++ b/frontend/src/Context/ProfessorAssignmentContext.tsx @@ -0,0 +1,9 @@ +import React from "react"; + +const ProfessorAssignmentContext = React.createContext({ + assignment: { + id: "", + }, +}); + +export { ProfessorAssignmentContext }; diff --git a/frontend/src/Context/StudentAssignmentContext.tsx b/frontend/src/Context/StudentAssignmentContext.tsx index 17ad81f..1aba6c5 100644 --- a/frontend/src/Context/StudentAssignmentContext.tsx +++ b/frontend/src/Context/StudentAssignmentContext.tsx @@ -2,10 +2,7 @@ import React from "react"; const StudentAssignmentContext = React.createContext({ assignment: { - mode: "student", - assignment: { - id: "", - }, + id: "", }, }); From b28ecfbfa6e4af0489e53e1af8bc9b73e3ef50e9 Mon Sep 17 00:00:00 2001 From: Cindy Zheng Date: Tue, 22 Feb 2022 13:08:45 -0800 Subject: [PATCH 03/11] Adding functionality to uploading grading script and assignment. --- frontend/src/App.tsx | 5 +- .../src/AssignmentView/AddAssignmentModal.tsx | 90 ++++++++++-- .../src/AssignmentView/AssignmentView.tsx | 16 +-- .../AssignmentView/UploadSubmissionModal.tsx | 134 ++++++++++++++++++ frontend/src/ClassView/ClassView.tsx | 3 +- .../src/Context/StudentAssignmentContext.tsx | 12 ++ frontend/src/Context/UserContext.tsx | 4 +- 7 files changed, 238 insertions(+), 26 deletions(-) create mode 100644 frontend/src/AssignmentView/UploadSubmissionModal.tsx create mode 100644 frontend/src/Context/StudentAssignmentContext.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c977857..50a1313 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -16,12 +16,15 @@ import { useCookies } from "react-cookie"; const defaultUser = { user: { mode: "student", - class: {}, + class: { + id: "", + }, }, }; function App() { const [cookies, setCookies] = useCookies(["jwt"]); + return ( diff --git a/frontend/src/AssignmentView/AddAssignmentModal.tsx b/frontend/src/AssignmentView/AddAssignmentModal.tsx index 122d80a..45a765c 100644 --- a/frontend/src/AssignmentView/AddAssignmentModal.tsx +++ b/frontend/src/AssignmentView/AddAssignmentModal.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { FormEvent, useContext, useState } from "react"; import { useNavigate } from "react-router-dom"; import Container from "react-bootstrap/Container"; import Form from "react-bootstrap/Form"; @@ -6,30 +6,84 @@ import Button from "react-bootstrap/Button"; import Alert from "react-bootstrap/Alert"; import Stack from "react-bootstrap/Stack"; import Modal from "react-bootstrap/Modal"; +import { userContext } from "../Context/UserContext"; +//import { StudentAssignmentContext } from "../Context/StudentAssignmentContext"; // This view is a form for professors to add a assignment function AddAssignmentModal() { + //const studentAssignment = useContext(StudentAssignmentContext); + const user = useContext(userContext); const [error, setError] = useState(""); const nav = useNavigate(); const [show, setShow] = useState(false); + const [gradingScriptName, setGradingScriptName] = useState(""); + const [gradingScriptFile, setGradingScriptFile] = useState(""); + const [dueDate, setDueDate] = useState(""); const handleClose = () => setShow(false); const handleShow = () => setShow(true); - const submit: React.FormEventHandler = ( - e: React.FormEvent - ) => { + const onInputGradingScriptName = ({ + target: { value }, + }: { + target: { value: string }; + }) => setGradingScriptName(value); + + const onInputGradingScriptFile = ({ + target: { value }, + }: { + target: { value: string }; + }) => setGradingScriptFile(value); + + const onInputDueDate = ({ + target: { value }, + }: { + target: { value: string }; + }) => setDueDate(value); + + async function handleGradingScript() { + return fetch("http://localhost:8080/" + user.user.class.id + "/", { + method: "POST", + mode: "cors", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + GradingScriptName: gradingScriptName, + GradingScriptFile: gradingScriptFile, + }), + }) + .then((response) => { + if (response.status == 401) throw "Unauthorized"; + return response.json(); + }) + .catch((e) => { + setError( + `Failed uploading! Server responded with: ${String(e).replace( + "TypeError: ", + "" + )}` + ); + }); + } + + async function submit(e: FormEvent) { e.preventDefault(); - // send assignment data to database - // set up autograding (?) + //const response = await handleGradingScript(); + // TODO: The API call to submit a file is still unimplemented. Will fix when implemented setError((err) => (err ? "" : `File type is not supported`)); - nav("/professor/class/"); - }; + //nav("/professor/class/"); + } return ( <> - @@ -51,15 +105,27 @@ function AddAssignmentModal() { type="text" name="name" placeholder="Assignment Name" + value={gradingScriptName} + onChange={onInputGradingScriptName} /> Due Date - + Grading Script - + - ) : ( - - )} + {mode === "student" ? : }

{mode === "student" ? ( diff --git a/frontend/src/AssignmentView/UploadSubmissionModal.tsx b/frontend/src/AssignmentView/UploadSubmissionModal.tsx new file mode 100644 index 0000000..f90570e --- /dev/null +++ b/frontend/src/AssignmentView/UploadSubmissionModal.tsx @@ -0,0 +1,134 @@ +import React, { FormEvent, useState, useContext } from "react"; +import { useNavigate } from "react-router-dom"; +import Container from "react-bootstrap/Container"; +import Form from "react-bootstrap/Form"; +import Button from "react-bootstrap/Button"; +import Alert from "react-bootstrap/Alert"; +import Stack from "react-bootstrap/Stack"; +import Modal from "react-bootstrap/Modal"; +import { userContext } from "../Context/UserContext"; +import { StudentAssignmentContext } from "../Context/StudentAssignmentContext"; + +// This view is a form for professors to add a assignment +function UploadSubmissionModal() { + const studentAssignment = useContext(StudentAssignmentContext); + const user = useContext(userContext); + + const [error, setError] = useState(""); + const nav = useNavigate(); + + const [show, setShow] = useState(false); + const [submissionName, setSubmissionName] = useState(""); + const [submissionFile, setSubmissionFile] = useState(""); + const handleClose = () => setShow(false); + const handleShow = () => setShow(true); + + const onInputSubmissionName = ({ + target: { value }, + }: { + target: { value: string }; + }) => setSubmissionName(value); + + const onInputSubmissionFile = ({ + target: { value }, + }: { + target: { value: string }; + }) => setSubmissionFile(value); + + async function handleSubmission() { + return fetch( + "http://localhost:8080/" + + user.user.class.id + + "/" + + studentAssignment.assignment.assignment.id, + { + method: "POST", + mode: "cors", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + submissionName: submissionName, + submissionFile: submissionFile, + }), + } + ) + .then((response) => { + if (response.status == 401) throw "Unauthorized"; + return response.json(); + }) + .catch((e) => { + setError( + `Failed uploading! Server responded with: ${String(e).replace( + "TypeError: ", + "" + )}` + ); + }); + } + + async function submit(e: FormEvent) { + e.preventDefault(); + //const response = await handleSubmission(); + // TODO: The API call to submit a file is still unimplemented. Will fix when implemented + setError((err) => (err ? "" : `File type is not supported`)); + //nav("/professor/class/"); + } + + return ( + <> + + + + + Add Submission + + + + + {error && Failed to submit{error}} +
+ + Submission name + + + + Submission Upload + + + + + + +
+ + + + + + ); +} + +export default UploadSubmissionModal; diff --git a/frontend/src/ClassView/ClassView.tsx b/frontend/src/ClassView/ClassView.tsx index 7d8d646..86845ba 100644 --- a/frontend/src/ClassView/ClassView.tsx +++ b/frontend/src/ClassView/ClassView.tsx @@ -54,7 +54,8 @@ function ClassView() { {Assignments.map((x) => mode === "student" ? ( - + + ) : ( ) diff --git a/frontend/src/Context/StudentAssignmentContext.tsx b/frontend/src/Context/StudentAssignmentContext.tsx new file mode 100644 index 0000000..17ad81f --- /dev/null +++ b/frontend/src/Context/StudentAssignmentContext.tsx @@ -0,0 +1,12 @@ +import React from "react"; + +const StudentAssignmentContext = React.createContext({ + assignment: { + mode: "student", + assignment: { + id: "", + }, + }, +}); + +export { StudentAssignmentContext }; diff --git a/frontend/src/Context/UserContext.tsx b/frontend/src/Context/UserContext.tsx index c32a818..1c8377e 100644 --- a/frontend/src/Context/UserContext.tsx +++ b/frontend/src/Context/UserContext.tsx @@ -3,7 +3,9 @@ import React from "react"; const userContext = React.createContext({ user: { mode: "student", - class: {}, + class: { + id: "", + }, }, }); From 95cec0391148ed98db7f7a7eac5235bff0fabf3c Mon Sep 17 00:00:00 2001 From: Cindy Zheng Date: Tue, 22 Feb 2022 13:12:50 -0800 Subject: [PATCH 04/11] Adding context file (basic) for professor --- .../src/AssignmentView/AddAssignmentModal.tsx | 32 +++++++++++-------- .../AssignmentView/UploadSubmissionModal.tsx | 2 +- frontend/src/ClassView/ClassView.tsx | 5 ++- .../Context/ProfessorAssignmentContext.tsx | 9 ++++++ .../src/Context/StudentAssignmentContext.tsx | 5 +-- 5 files changed, 34 insertions(+), 19 deletions(-) create mode 100644 frontend/src/Context/ProfessorAssignmentContext.tsx diff --git a/frontend/src/AssignmentView/AddAssignmentModal.tsx b/frontend/src/AssignmentView/AddAssignmentModal.tsx index 45a765c..3549bb3 100644 --- a/frontend/src/AssignmentView/AddAssignmentModal.tsx +++ b/frontend/src/AssignmentView/AddAssignmentModal.tsx @@ -7,11 +7,11 @@ import Alert from "react-bootstrap/Alert"; import Stack from "react-bootstrap/Stack"; import Modal from "react-bootstrap/Modal"; import { userContext } from "../Context/UserContext"; -//import { StudentAssignmentContext } from "../Context/StudentAssignmentContext"; +import { ProfessorAssignmentContext } from "../Context/ProfessorAssignmentContext"; // This view is a form for professors to add a assignment function AddAssignmentModal() { - //const studentAssignment = useContext(StudentAssignmentContext); + const assignment = useContext(ProfessorAssignmentContext); const user = useContext(userContext); const [error, setError] = useState(""); const nav = useNavigate(); @@ -42,17 +42,23 @@ function AddAssignmentModal() { }) => setDueDate(value); async function handleGradingScript() { - return fetch("http://localhost:8080/" + user.user.class.id + "/", { - method: "POST", - mode: "cors", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - GradingScriptName: gradingScriptName, - GradingScriptFile: gradingScriptFile, - }), - }) + return fetch( + "http://localhost:8080/" + + user.user.class.id + + "/" + + assignment.assignment.id, + { + method: "POST", + mode: "cors", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + GradingScriptName: gradingScriptName, + GradingScriptFile: gradingScriptFile, + }), + } + ) .then((response) => { if (response.status == 401) throw "Unauthorized"; return response.json(); diff --git a/frontend/src/AssignmentView/UploadSubmissionModal.tsx b/frontend/src/AssignmentView/UploadSubmissionModal.tsx index f90570e..962da5d 100644 --- a/frontend/src/AssignmentView/UploadSubmissionModal.tsx +++ b/frontend/src/AssignmentView/UploadSubmissionModal.tsx @@ -40,7 +40,7 @@ function UploadSubmissionModal() { "http://localhost:8080/" + user.user.class.id + "/" + - studentAssignment.assignment.assignment.id, + studentAssignment.assignment.id, { method: "POST", mode: "cors", diff --git a/frontend/src/ClassView/ClassView.tsx b/frontend/src/ClassView/ClassView.tsx index 86845ba..be49387 100644 --- a/frontend/src/ClassView/ClassView.tsx +++ b/frontend/src/ClassView/ClassView.tsx @@ -8,6 +8,7 @@ import Button from "react-bootstrap/Button"; import StudentAssignmentCard from "./StudentAssignmentCard"; import ProfessorAssignmentCard from "./ProfessorAssignmentCard"; import AddAssignmentModal from "../AssignmentView/AddAssignmentModal"; +import { ProfessorAssignmentContext } from "../Context/ProfessorAssignmentContext"; const Assignments = ["Assignment 1", "Assignment 2", "Assignment 3"]; // should be reading assignments from a database @@ -57,7 +58,9 @@ function ClassView() { ) : ( - + + + ) )} {mode === "student" ? null : } diff --git a/frontend/src/Context/ProfessorAssignmentContext.tsx b/frontend/src/Context/ProfessorAssignmentContext.tsx new file mode 100644 index 0000000..57bda17 --- /dev/null +++ b/frontend/src/Context/ProfessorAssignmentContext.tsx @@ -0,0 +1,9 @@ +import React from "react"; + +const ProfessorAssignmentContext = React.createContext({ + assignment: { + id: "", + }, +}); + +export { ProfessorAssignmentContext }; diff --git a/frontend/src/Context/StudentAssignmentContext.tsx b/frontend/src/Context/StudentAssignmentContext.tsx index 17ad81f..1aba6c5 100644 --- a/frontend/src/Context/StudentAssignmentContext.tsx +++ b/frontend/src/Context/StudentAssignmentContext.tsx @@ -2,10 +2,7 @@ import React from "react"; const StudentAssignmentContext = React.createContext({ assignment: { - mode: "student", - assignment: { - id: "", - }, + id: "", }, }); From ee18033c368777732c7bee784a446bb8432bbd33 Mon Sep 17 00:00:00 2001 From: Cindy Zheng Date: Wed, 2 Mar 2022 01:36:11 -0800 Subject: [PATCH 05/11] adding form data sending responses --- .../src/AssignmentView/AddAssignmentModal.tsx | 26 +++++++++---------- .../AssignmentView/UploadSubmissionModal.tsx | 23 ++++++++-------- 2 files changed, 25 insertions(+), 24 deletions(-) diff --git a/frontend/src/AssignmentView/AddAssignmentModal.tsx b/frontend/src/AssignmentView/AddAssignmentModal.tsx index 3549bb3..1c2aada 100644 --- a/frontend/src/AssignmentView/AddAssignmentModal.tsx +++ b/frontend/src/AssignmentView/AddAssignmentModal.tsx @@ -8,13 +8,16 @@ import Stack from "react-bootstrap/Stack"; import Modal from "react-bootstrap/Modal"; import { userContext } from "../Context/UserContext"; import { ProfessorAssignmentContext } from "../Context/ProfessorAssignmentContext"; +import { useCookies } from "react-cookie"; // This view is a form for professors to add a assignment function AddAssignmentModal() { - const assignment = useContext(ProfessorAssignmentContext); const user = useContext(userContext); const [error, setError] = useState(""); + const [cookies, setCookies] = useCookies(["jwt"]); const nav = useNavigate(); + const classId = 1; + const assignmentId = 1; const [show, setShow] = useState(false); const [gradingScriptName, setGradingScriptName] = useState(""); @@ -41,22 +44,17 @@ function AddAssignmentModal() { target: { value: string }; }) => setDueDate(value); - async function handleGradingScript() { + async function handleGradingScript(data: any) { return fetch( - "http://localhost:8080/" + - user.user.class.id + - "/" + - assignment.assignment.id, + `http://localhost:8080/class/${classId}/${assignmentId}/upload`, { method: "POST", mode: "cors", headers: { "Content-Type": "application/json", + Authorization: cookies.jwt, }, - body: JSON.stringify({ - GradingScriptName: gradingScriptName, - GradingScriptFile: gradingScriptFile, - }), + body: data, } ) .then((response) => { @@ -73,11 +71,13 @@ function AddAssignmentModal() { }); } - async function submit(e: FormEvent) { + async function submit(e: any) { e.preventDefault(); - //const response = await handleGradingScript(); + console.log("hey"); + const data = new FormData(e.target); + const response = await handleGradingScript(data); // TODO: The API call to submit a file is still unimplemented. Will fix when implemented - setError((err) => (err ? "" : `File type is not supported`)); + //setError((err) => (err ? "" : `File type is not supported`)); //nav("/professor/class/"); } diff --git a/frontend/src/AssignmentView/UploadSubmissionModal.tsx b/frontend/src/AssignmentView/UploadSubmissionModal.tsx index 962da5d..221b76f 100644 --- a/frontend/src/AssignmentView/UploadSubmissionModal.tsx +++ b/frontend/src/AssignmentView/UploadSubmissionModal.tsx @@ -6,6 +6,8 @@ import Button from "react-bootstrap/Button"; import Alert from "react-bootstrap/Alert"; import Stack from "react-bootstrap/Stack"; import Modal from "react-bootstrap/Modal"; +import { useCookies } from "react-cookie"; + import { userContext } from "../Context/UserContext"; import { StudentAssignmentContext } from "../Context/StudentAssignmentContext"; @@ -13,9 +15,12 @@ import { StudentAssignmentContext } from "../Context/StudentAssignmentContext"; function UploadSubmissionModal() { const studentAssignment = useContext(StudentAssignmentContext); const user = useContext(userContext); + const [cookies, setCookies] = useCookies(["jwt"]); const [error, setError] = useState(""); const nav = useNavigate(); + const classId = 1; + const assignmentId = 1; const [show, setShow] = useState(false); const [submissionName, setSubmissionName] = useState(""); @@ -35,22 +40,17 @@ function UploadSubmissionModal() { target: { value: string }; }) => setSubmissionFile(value); - async function handleSubmission() { + async function handleSubmission(data: any) { return fetch( - "http://localhost:8080/" + - user.user.class.id + - "/" + - studentAssignment.assignment.id, + `http://localhost:8080/class/${classId}/${assignmentId}/upload`, { method: "POST", mode: "cors", headers: { "Content-Type": "application/json", + Authorization: cookies.jwt, }, - body: JSON.stringify({ - submissionName: submissionName, - submissionFile: submissionFile, - }), + body: data, } ) .then((response) => { @@ -67,9 +67,10 @@ function UploadSubmissionModal() { }); } - async function submit(e: FormEvent) { + async function submit(e: any) { e.preventDefault(); - //const response = await handleSubmission(); + const data = new FormData(e.target); + const response = await handleSubmission(data); // TODO: The API call to submit a file is still unimplemented. Will fix when implemented setError((err) => (err ? "" : `File type is not supported`)); //nav("/professor/class/"); From 5bdec5d0f84c91b95d4feef40da719b3baa9e8b0 Mon Sep 17 00:00:00 2001 From: Cindy Zheng Date: Wed, 2 Mar 2022 09:10:29 -0800 Subject: [PATCH 06/11] fix requested changes --- .../src/AssignmentView/AddAssignmentModal.tsx | 43 +++---------------- .../AssignmentView/UploadSubmissionModal.tsx | 32 +++----------- 2 files changed, 11 insertions(+), 64 deletions(-) diff --git a/frontend/src/AssignmentView/AddAssignmentModal.tsx b/frontend/src/AssignmentView/AddAssignmentModal.tsx index 1c2aada..7bfbe41 100644 --- a/frontend/src/AssignmentView/AddAssignmentModal.tsx +++ b/frontend/src/AssignmentView/AddAssignmentModal.tsx @@ -26,32 +26,13 @@ function AddAssignmentModal() { const handleClose = () => setShow(false); const handleShow = () => setShow(true); - const onInputGradingScriptName = ({ - target: { value }, - }: { - target: { value: string }; - }) => setGradingScriptName(value); - - const onInputGradingScriptFile = ({ - target: { value }, - }: { - target: { value: string }; - }) => setGradingScriptFile(value); - - const onInputDueDate = ({ - target: { value }, - }: { - target: { value: string }; - }) => setDueDate(value); - - async function handleGradingScript(data: any) { + function handleGradingScript(data: FormData) { return fetch( `http://localhost:8080/class/${classId}/${assignmentId}/upload`, { method: "POST", mode: "cors", headers: { - "Content-Type": "application/json", Authorization: cookies.jwt, }, body: data, @@ -71,11 +52,11 @@ function AddAssignmentModal() { }); } - async function submit(e: any) { + async function submit(e: FormEvent) { e.preventDefault(); console.log("hey"); - const data = new FormData(e.target); - const response = await handleGradingScript(data); + const data = new FormData(e.currentTarget); + handleGradingScript(data); // TODO: The API call to submit a file is still unimplemented. Will fix when implemented //setError((err) => (err ? "" : `File type is not supported`)); //nav("/professor/class/"); @@ -111,27 +92,15 @@ function AddAssignmentModal() { type="text" name="name" placeholder="Assignment Name" - value={gradingScriptName} - onChange={onInputGradingScriptName} /> Due Date - + Grading Script - + diff --git a/frontend/src/AssignmentView/UploadSubmissionModal.tsx b/frontend/src/AssignmentView/UploadSubmissionModal.tsx index c7075ca..65b21ad 100644 --- a/frontend/src/AssignmentView/UploadSubmissionModal.tsx +++ b/frontend/src/AssignmentView/UploadSubmissionModal.tsx @@ -24,7 +24,6 @@ function UploadSubmissionModal() { const [show, setShow] = useState(false); const handleClose = () => setShow(false); - const handleShow = () => setShow(true); function handleSubmission(data: FormData) { return fetch( @@ -65,7 +64,9 @@ function UploadSubmissionModal() { variant="primary" type="submit" style={{ borderRadius: 20 }} - onClick={handleShow} + onClick={() => { + setShow(true); + }} > Upload Assignment