Add new q submit functionality

Author: Aishwarya Nair

peer-prep/src/App.js

@@ -1,7 +1,7 @@
 import './App.css';
 //import { LoginSignUp } from './Components/LoginSignUp/LoginSignUp';
 import { Navbar } from './Components/Navbar/Navbar';
-import { Questions } from './Components/Questions/Questions';
+import { Questions } from './Components/QuestionList/QuestionList';
 
 function App() {
   return (

peer-prep/src/Components/Questions/QuestionForm.css renamed to peer-prep/src/Components/QuestionList/QuestionForm.css

@@ -74,6 +74,7 @@
     height: 130px;
     color: #fff;
     background: #52CC65;
+    border: none;
     border-radius: 5px;
     font-size: 19px;
     cursor: pointer;

peer-prep/src/Components/QuestionList/QuestionForm.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import './QuestionForm.css'
+
+
+export const QuestionForm = ({qId, addQuestion, setAddQ}) => {
+  const [title, setTitle] = useState("");
+  const [difficulty, setDifficulty] = useState("");
+  const [topic, setTopic] = useState("");
+  const [description, setDescription] = useState("")
+
+  const handleSubmit = (toggleAddQ, addQ) => e => {
+    e.preventDefault();
+    toggleAddQ(false);
+    addQ(title, difficulty, topic, description)
+  }
+  return (
+    <form className = "container" onSubmit={handleSubmit(setAddQ, addQuestion)}>
+      <div className="q-header">
+        <div className="q-id">#{qId}</div>
+        <input type="text" className="q-title q-input" 
+        placeholder='Question Title' onChange = {
+          (e) => setTitle(e.target.value)
+        }/>
+      </div>
+       
+        <div className="q-tags">
+          <input type="text" className="q-tag q-input" 
+          placeholder = 'Difficulty'
+          onChange = {
+            (e) => setDifficulty(e.target.value)
+          }/>
+          <input type="text" className="q-tag q-input" 
+          placeholder = 'Topic'
+          onChange = {
+            (e) => setTopic(e.target.value)
+          }
+          />
+        </div>
+        <textarea type="text" className="q-description q-input" 
+        placeholder = "Question description"
+        onChange = {
+          (e) => setDescription(e.target.value)
+        }/>
+
+        <button type = "submit" className="submit-btn">Submit</button>
+   
+      
+    </form>
+  )
+}

peer-prep/src/Components/Questions/Questions.css renamed to peer-prep/src/Components/QuestionList/QuestionList.css

@@ -1,13 +1,23 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect} from 'react'
 import { QuestionForm } from './QuestionForm'
-import './Questions.css'
+import './QuestionList.css'
 
 export const Questions = () => {
   const [qId, setQId] = useState(0);
   const [isAddQ, setAddQ] = useState(false);
+  const [qs, setQs] = useState([])
+
+  const addQuestion = (qTitle, qDifficulty, qTopic, qDescription) => {
+    setQs([...qs, {id: qId, title: qTitle, difficulty: qDifficulty,
+      topic: qTopic, description: qDescription}]);
+  }
+  
+  useEffect(() => console.log(qs), [qs]);
+
   return (
     <div className="q-wrapper">
-      {isAddQ === false ? <div></div> : <QuestionForm qId = {qId}/>}
+      {isAddQ === false ? <div></div> : <QuestionForm qId = {qId} addQuestion = {addQuestion}
+      setAddQ = {setAddQ}/>}
       <div className="add-q-btn" onClick = {() => {
         setQId(qId + 1);
         setAddQ(true);