Skip to content

Commit

Permalink
merger
Browse files Browse the repository at this point in the history
  • Loading branch information
@SwayamRana808
SwayamRana808 committed May 16, 2024
2 parents 3990c62 + 2134ca7 commit 0d45f00
Show file tree
Hide file tree
Showing 2 changed files with 213 additions and 38 deletions.
188 changes: 151 additions & 37 deletions frontend/src/pages/Q&A/Q&A.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
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";
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 { ErrorSharp } from "@material-ui/icons";
import { END_POINT } from "../../config/api";
import {
AirplayTwoTone,
ErrorSharp,
SettingsBluetoothSharp,
} from "@material-ui/icons";

function Ques(props) {
let dark = props.theme;
Expand Down Expand Up @@ -53,12 +57,13 @@ 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)
);
const [loading, setLoading] = useState(true);

const [formdata, setFormData] = useState({
title: "",
Expand All @@ -70,7 +75,7 @@ function Ques(props) {
setTimeout(() => {
setOpenToast(false);
}, 500);
}
};
const handleOnChange = (position) => {
const updatedCheckedState = checkedState.map((item, index) =>
index === position ? !item : item
Expand Down Expand Up @@ -105,53 +110,52 @@ 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;
const errors = validate();
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);
}
};
Expand All @@ -161,12 +165,120 @@ 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) => {
setLoading(false);
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) {
setToastMessage("Failed to upvote question");
setOpenToast(true);
setSeverity("error");
throw new Error("Failed to upvote question");
}
// const data = await response.json();
getQues();
setToastMessage("Upvote Successfully");
setOpenToast(true);
setSeverity("success");
};

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) {
setToastMessage("Failed to downvote question");
setOpenToast(true);
setSeverity("error");
throw new Error("Failed to downvote question");
}
// const data = await response.json();
// console.log(data);
getQues();
setToastMessage("Downvote Successfully");
setOpenToast(true);
setSeverity("success");
};

useEffect(() => {
getQues();
}, []);

return (
<div
className="popup-creator"
style={{ background: dark ? "#171717" : "white" }}
>
<SimpleToast open={open} message={toastMessage} severity={severity} handleCloseToast={handleCloseToast}/>
{getQuestions.length <= 0 ? (
<Loader></Loader>
) : (
<div className="question-cards">
{getQuestions.map((item, key) => (
<div className="question-card" key={key}>
<div className="card-up">
<p>{item.title}</p>
<p>{item.description}</p>
{item.tags.map((i, key) => (
<span className="tag-space" key={key}>
#{i}
</span>
))}
</div>
<div className="card-down">
<div>
<p>Created At {new Date(item.createdAt).toLocaleString()}</p>
</div>
<div>
<button className="vote-btn" onClick={() => upvote(item._id)}>
👍{item.upvotes}
</button>
<button
className="vote-btn"
onClick={() => downvote(item._id)}
>
👎 {item.downvote}
</button>
</div>
</div>
</div>
))}
</div>
)}

<SimpleToast
open={open}
message={toastMessage}
severity={severity}
handleCloseToast={handleCloseToast}
/>
{isButtonPressed ? (
<div
className={
Expand Down Expand Up @@ -308,7 +420,9 @@ function Ques(props) {
className={style["submit-btn"]}
style={{ justifyContent: "space-around" }}
>
<div className="data-loader">{isUploadingData?<Loader/>:null}</div>
<div className="data-loader">
{isUploadingData ? <Loader /> : null}
</div>
<Button2
style={{ marginRight: "3%" }}
className={style["submit-btn-text"]}
Expand All @@ -321,32 +435,32 @@ function Ques(props) {
</div>
) : (
<div
className={
dark
className={
dark
? `${style["resource-section"]} ${style["resource-section-dark"]}`
: `${style["resource-section"]} ${style["resource-section-light"]}`
}
}
>
<div
className={
dark
? `${style["resource-form"]} ${style["resource-form-dark"]} ${style["child2"]}`
? `${style["resource-form"]} ${style["resource-form-dark"]} ${style["child2"]}`
: `${style["resource-form"]} ${style["resource-form-light"]} ${style["child2"]}`
}
}
style={{ marginTop: "12%" }}
>
<div
className={
dark
? `${style["resource-card"]} ${style["resource-card-dark"]} `
: `${style["resource-card"]} ${style["resource-card-light"]}`
}
}
>
<h3
className={
dark
? `${style["resource-header-text"]} ${style["resource-header-text-dark"]} `
: `${style["resource-header-text"]} ${style["resource-header-text-light"]}`
? `${style["resource-header-text"]} ${style["resource-header-text-dark"]} `
: `${style["resource-header-text"]} ${style["resource-header-text-light"]}`
}
>
Ask your questions
Expand Down
63 changes: 62 additions & 1 deletion frontend/src/pages/Q&A/Ques.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,79 @@
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%;

margin: 5% 5% 5% 5%;
}
}
@media (max-width: 400px) {
.question-cards {
padding: 40px 10px 40px 10px;
}
.question-card {
width: 100%;
}
}

.data-loader {
width: 100%;
display: flex;
height: 10px;
justify-content: center;
align-items: center;
}
}

0 comments on commit 0d45f00

Please sign in to comment.