Create and Delete

src/App.js

@@ -6,6 +6,7 @@ import Problem from "./components/Problem";
 import ProblemSet from "./components/ProblemSet";
 import Login from "./components/Login";
 import Signup from "./components/Signup";
+import CreateContainerView from "./components/CreateContainerView";
 
 function App() {
   return (
@@ -17,6 +18,7 @@ function App() {
         <Route exact path="/problem/:id" element={<Problem />} />
         <Route exact path="/login" element={<Login />} />
         <Route exact path="/signup" element={<Signup />} />
+        <Route exact path="/create" element={<CreateContainerView />} />
       </Routes>
       <Footer />
     </Router>

src/components/CreateContainerView.jsx

@@ -0,0 +1,85 @@
+import React, { Component } from "react";
+import axios from "axios";
+import CreateView from "./CreateView";
+import { Navigate } from "react-router";
+
+class CreateContainerView extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      title: "",
+      description: "",
+      timelimit: 1,
+      memorylimit: 256,
+      redirectToProblemset: false,
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.validateForm = this.validateForm.bind(this);
+  }
+
+  handleChange(event) {
+    const value = event.target.value;
+    const name = event.target.name;
+
+    this.setState({
+      [name]: value,
+    });
+  }
+
+  validateForm() {
+    const { title, description, timelimit, memorylimit } = this.state;
+
+    return (
+      title.length > 0 &&
+      description.length > 0 &&
+      timelimit > 0 &&
+      memorylimit > 0
+    );
+  }
+
+  handleSubmit(event) {
+    event.preventDefault();
+
+    const { title, description, timelimit, memorylimit } = this.state;
+
+    axios
+      .post("/problem/create", {
+        title: title,
+        description: description,
+        timelimit: timelimit,
+        memorylimit: memorylimit,
+      })
+      .then((res) => {
+        this.setState({
+          redirectToProblemset: true,
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }
+
+  render() {
+    const { title, description, timelimit, memorylimit, redirectToProblemset } =
+      this.state;
+    if (redirectToProblemset) {
+      return <Navigate to="/problemset" />;
+    }
+
+    return (
+      <CreateView
+        title={title}
+        description={description}
+        timelimit={timelimit}
+        memorylimit={memorylimit}
+        validateForm={this.validateForm}
+        onChange={this.handleChange}
+        onSubmit={this.handleSubmit}
+      />
+    );
+  }
+}
+
+export default CreateContainerView;

src/components/CreateView.jsx

@@ -0,0 +1,78 @@
+import React, { Component } from "react";
+import "./styles/CreateForm.css";
+import { Button } from "react-bootstrap";
+
+class CreateView extends Component {
+  render() {
+    const {
+      title,
+      description,
+      timelimit,
+      memorylimit,
+      onChange,
+      onSubmit,
+      validateForm,
+    } = this.props;
+    return (
+      <div className="CreateForm">
+        <center>
+          <h3> Create Problem </h3>
+        </center>
+        <form onSubmit={(e) => onSubmit(e)}>
+          Title:
+          <input
+            type="text"
+            name="title"
+            required
+            onChange={onChange}
+            value={title}
+          ></input>
+          <br />
+          <br />
+          <label>Description: </label>
+          <textarea
+            name="description"
+            required
+            value={description}
+            onChange={onChange}
+          />
+          <br />
+          <br />
+          Time limit (in seconds):
+          <input
+            type="number"
+            name="timelimit"
+            required
+            onChange={onChange}
+            value={timelimit}
+          ></input>
+          <br />
+          <br />
+          Memory limit (in MB):
+          <input
+            type="number"
+            name="memorylimit"
+            required
+            onChange={onChange}
+            value={memorylimit}
+          ></input>
+          <br />
+          <br />
+          <center>
+            <Button
+              className="btn btn-dark"
+              block
+              size="lg"
+              type="submit"
+              disabled={!validateForm()}
+            >
+              Submit Question
+            </Button>
+          </center>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default CreateView;

src/components/ProblemSet.jsx

@@ -1,28 +1,38 @@
 import axios from "axios";
 import React, { useEffect, useState } from "react";
+import { Button } from "react-bootstrap";
 import { Link } from "react-router-dom";
 
 const ProblemSet = () => {
-
-  const [problems, setProblems] = useState([])
-
-  useEffect(() => {
+  const [problems, setProblems] = useState([]);
+
+  const onDelete = (id) => {
+    axios
+      .delete(`problem/delete/${id}`)
+      .then((res) => {
+        axios.get("http://localhost:8080/problem/view").then((res) => {
+          const questions = res.data;
+          setProblems(questions.data);
+        });
+      })
+      .catch((err) => console.log(err));
+  };
 
-    axios.get("http://localhost:8080/problem/view")
-      .then(
-        res =>  {
-          const questions = res.data
-          // console.log(questions)
-          setProblems(questions.data)
-        }
-      )
-  }, [])
+  useEffect(() => {
+    axios.get("http://localhost:8080/problem/view").then((res) => {
+      const questions = res.data;
+      setProblems(questions.data);
+    });
+  }, []);
 
   return (
     <div>
       <center>
         <h1>Problem Set</h1>
       </center>
+      <Link className="btn btn-dark my-2 my-sm-0 text-light" to="/create">
+        Create Problem
+      </Link>
       <table className="table">
         <thead>
           <tr>
@@ -42,6 +52,15 @@ const ProblemSet = () => {
                   </Link>
                 </td>
                 <td>{problem.Description}</td>
+
+                <td>
+                  <Button
+                    variant="outline-danger"
+                    onClick={() => onDelete(problem.ID)}
+                  >
+                    Delete
+                  </Button>
+                </td>
               </tr>
             );
           })}

src/components/styles/CreateForm.css

@@ -0,0 +1,32 @@
+@media all and (min-width: 480px) {
+  .CreateForm button {
+    margin: 0 auto;
+    display: flex;
+  }
+
+  .CreateForm form {
+    margin: 0 auto;
+    max-width: 320px;
+  }
+
+  input {
+    width: 100%;
+    padding: 12px 20px;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    background-color: #f8f8f8;
+    resize: none;
+  }
+
+  .CreateForm textarea {
+    width: 100%;
+    height: 150px;
+    padding: 12px 20px;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    background-color: #f8f8f8;
+    resize: none;
+  }
+}