From 736692ac7be3ff673c653e3d8200663e751ffd93 Mon Sep 17 00:00:00 2001 From: tejasnasre Date: Wed, 15 May 2024 14:38:29 +0530 Subject: [PATCH 1/3] Integrate GET Questions in Frontend --- frontend/src/pages/Q&A/Q&A.jsx | 168 ++++++++++++++++++++++++------- frontend/src/pages/Q&A/Ques.scss | 63 +++++++++++- 2 files changed, 194 insertions(+), 37 deletions(-) diff --git a/frontend/src/pages/Q&A/Q&A.jsx b/frontend/src/pages/Q&A/Q&A.jsx index 75cb30b2..f58ab0e2 100644 --- a/frontend/src/pages/Q&A/Q&A.jsx +++ b/frontend/src/pages/Q&A/Q&A.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import { Button2, Button1 } from "../../components/util/Button"; import style from "../Resources/components/ResourceSharingForm/resource-sharing-form.module.scss"; import "./Ques.scss"; @@ -6,7 +6,7 @@ import { useState } from "react"; import Joi from "joi-browser"; import Loader from "../../components/util/Loader/index"; import { SimpleToast } from "../../components/util/Toast"; -import {END_POINT} from "../../config/api" +import { END_POINT } from "../../config/api"; import { ErrorSharp } from "@material-ui/icons"; function Ques(props) { @@ -53,8 +53,8 @@ function Ques(props) { const [isUploadingData, setIsUploadingData] = useState(false); const [open, setOpenToast] = useState(false); - const [toastMessage,setToastMessage] = useState(""); - const [severity,setSeverity] = useState('success') + const [toastMessage, setToastMessage] = useState(""); + const [severity, setSeverity] = useState("success"); const [isButtonPressed, setButtonPressed] = useState(false); const [checkedState, setCheckedState] = useState( new Array(Tags.length).fill(false) @@ -70,7 +70,7 @@ function Ques(props) { setTimeout(() => { setOpenToast(false); }, 500); - } + }; const handleOnChange = (position) => { const updatedCheckedState = checkedState.map((item, index) => index === position ? !item : item @@ -105,39 +105,38 @@ function Ques(props) { const data = { ...formdata }; data[input.name] = input.value; setFormData({ ...data, [input.name]: input.value }); - setFormErrors({}) + setFormErrors({}); }; const uploadData = async (formdata) => { try { const url = `${END_POINT}/question`; - const response = await fetch(url,{ - method:"POST", - headers : { - "content-type":"application/json" + const response = await fetch(url, { + method: "POST", + headers: { + "content-type": "application/json", }, - body : JSON.stringify(formdata) + body: JSON.stringify(formdata), }); const data = await response.json(); - setIsUploadingData(false) - setToastMessage("Q&A added successfully!") - setOpenToast(true) - setSeverity("success") + setIsUploadingData(false); + setToastMessage("Q&A added successfully!"); + setOpenToast(true); + setSeverity("success"); setFormData({ title: "", description: "", tags: [], - }) - setFormErrors({}) - setCheckedState(new Array(Tags.length).fill(false)) - } - catch(err) { - setIsUploadingData(false) + }); + setFormErrors({}); + setCheckedState(new Array(Tags.length).fill(false)); + } catch (err) { + setIsUploadingData(false); setToastMessage("Something went wrong!"); - setOpenToast(true) + setOpenToast(true); setSeverity("error"); } - } + }; const handleSubmit = (e) => { e.preventDefault(); let isValid = true; @@ -145,13 +144,13 @@ function Ques(props) { Object.keys(formdata).map((key) => { if (formdata[key] === "" || formdata[key] === null) { errors[key] = `${key} is not allowed to be empty`; - setFormErrors(errors) + setFormErrors(errors); isValid = false; } return 0; }); - if(isValid && formdata.tags.length !== 0) { - setIsUploadingData(true) + if (isValid && formdata.tags.length !== 0) { + setIsUploadingData(true); uploadData(formdata); } }; @@ -161,12 +160,107 @@ function Ques(props) { function DeactiveButton() { setButtonPressed(!isButtonPressed); } + + const [getQuestions, setQuestions] = useState([]); + + function getQues() { + fetch(`${END_POINT}/question/getallquestions`, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }) + .then((res) => res.json()) + .then((data) => { + setQuestions(data); + // console.log(data); + }); + } + + const upvote = async (questionId) => { + const response = await fetch(`${END_POINT}/question/upvote`, { + method: "PATCH", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ questionId }), + }); + + if (!response.ok) { + throw new Error("Failed to upvote question"); + } + // const data = await response.json(); + getQues(); + }; + + const downvote = async (questionId) => { + const response = await fetch(`${END_POINT}/question/downvote`, { + method: "PATCH", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ questionId }), + }); + + if (!response.ok) { + throw new Error("Failed to upvote question"); + } + // const data = await response.json(); + // console.log(data); + getQues(); + }; + + useEffect(() => { + getQues(); + }, []); + return (
- + {getQuestions.length >= 0 ? ( +
+ {getQuestions.map((item, key) => ( +
+
+

{item.title}

+

{item.description}

+ {item.tags.map((i, key) => ( + + #{i} + + ))} +
+
+
+

Created At {new Date(item.createdAt).toLocaleString()}

+
+
+ + +
+
+
+ ))} +
+ ) : ( + + )} + + {isButtonPressed ? (
-
{isUploadingData?:null}
+
+ {isUploadingData ? : null} +
) : (

Ask your questions diff --git a/frontend/src/pages/Q&A/Ques.scss b/frontend/src/pages/Q&A/Ques.scss index 9f558c2e..0b69e693 100644 --- a/frontend/src/pages/Q&A/Ques.scss +++ b/frontend/src/pages/Q&A/Ques.scss @@ -22,6 +22,59 @@ border: 1px solid #69a9dd; } +.question-cards { + width: 100%; + height: auto; + color: white; + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + gap: 40px; + padding: 40px 40px 40px 40px; +} + +.question-card { + width: 350px; + height: auto; + background: #282c35; + border-radius: 10px; + border: 1px solid white; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.card-up { + padding: 10px; +} + +.card-down { + width: 100%; + height: auto; + background-color: #243e74; + color: white; + padding: 10px; + border-top: 1px solid white; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} + +.card-down p { + margin: 0; +} + +.vote-btn { + background-color: #69a9dd; + outline: 1px solid white; + color: white; + border: none; + border-radius: 5px; + padding: 5px; + margin: 5px; + cursor: pointer; +} + @media (max-width: 650px) { .question_form { width: 85%; @@ -29,6 +82,14 @@ margin: 5% 5% 5% 5%; } } +@media (max-width: 400px) { + .question-cards { + padding: 40px 10px 40px 10px; + } + .question-card { + width: 100%; + } +} .data-loader { width: 100%; @@ -36,4 +97,4 @@ height: 10px; justify-content: center; align-items: center; -} \ No newline at end of file +} From df7f810e1745a6753fdc5a6308c4bb2df6b05c11 Mon Sep 17 00:00:00 2001 From: tejasnasre Date: Wed, 15 May 2024 20:05:22 +0530 Subject: [PATCH 2/3] FIX: Integrate-GET-Questions-in-Frontend --- frontend/src/pages/Q&A/Q&A.jsx | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/Q&A/Q&A.jsx b/frontend/src/pages/Q&A/Q&A.jsx index f58ab0e2..d3d386f5 100644 --- a/frontend/src/pages/Q&A/Q&A.jsx +++ b/frontend/src/pages/Q&A/Q&A.jsx @@ -7,7 +7,11 @@ import Joi from "joi-browser"; import Loader from "../../components/util/Loader/index"; import { SimpleToast } from "../../components/util/Toast"; import { END_POINT } from "../../config/api"; -import { ErrorSharp } from "@material-ui/icons"; +import { + AirplayTwoTone, + ErrorSharp, + SettingsBluetoothSharp, +} from "@material-ui/icons"; function Ques(props) { let dark = props.theme; @@ -59,6 +63,7 @@ function Ques(props) { const [checkedState, setCheckedState] = useState( new Array(Tags.length).fill(false) ); + const [loading, setLoading] = useState(true); const [formdata, setFormData] = useState({ title: "", @@ -172,6 +177,7 @@ function Ques(props) { }) .then((res) => res.json()) .then((data) => { + setLoading(false); setQuestions(data); // console.log(data); }); @@ -191,6 +197,9 @@ function Ques(props) { } // const data = await response.json(); getQues(); + setToastMessage("Upvote Successfully"); + setOpenToast(true); + setSeverity("success"); }; const downvote = async (questionId) => { @@ -208,10 +217,16 @@ function Ques(props) { // const data = await response.json(); // console.log(data); getQues(); + setToastMessage("Downvote Successfully"); + setOpenToast(true); + setSeverity("success"); }; useEffect(() => { getQues(); + setToastMessage("Fetching Questions..."); + setOpenToast(true); + setSeverity("success"); }, []); return ( @@ -219,7 +234,9 @@ function Ques(props) { className="popup-creator" style={{ background: dark ? "#171717" : "white" }} > - {getQuestions.length >= 0 ? ( + {getQuestions.length <= 0 ? ( + + ) : (
{getQuestions.map((item, key) => (
@@ -251,8 +268,6 @@ function Ques(props) {
))}
- ) : ( - )} Date: Wed, 15 May 2024 20:35:08 +0530 Subject: [PATCH 3/3] Fix : Error Messages On Upvote Ans Downvote --- frontend/src/pages/Q&A/Q&A.jsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/Q&A/Q&A.jsx b/frontend/src/pages/Q&A/Q&A.jsx index d3d386f5..870a95dd 100644 --- a/frontend/src/pages/Q&A/Q&A.jsx +++ b/frontend/src/pages/Q&A/Q&A.jsx @@ -193,6 +193,9 @@ function Ques(props) { }); if (!response.ok) { + setToastMessage("Failed to upvote question"); + setOpenToast(true); + setSeverity("error"); throw new Error("Failed to upvote question"); } // const data = await response.json(); @@ -212,7 +215,10 @@ function Ques(props) { }); if (!response.ok) { - throw new Error("Failed to upvote question"); + setToastMessage("Failed to downvote question"); + setOpenToast(true); + setSeverity("error"); + throw new Error("Failed to downvote question"); } // const data = await response.json(); // console.log(data); @@ -224,9 +230,6 @@ function Ques(props) { useEffect(() => { getQues(); - setToastMessage("Fetching Questions..."); - setOpenToast(true); - setSeverity("success"); }, []); return (