diff --git a/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx b/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx index 543cc423..1dff6d64 100644 --- a/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx +++ b/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx @@ -63,9 +63,10 @@ export function Carousel(props) { const style = { height: "13em", backgroundSize: "cover", + backgroundPosition: "center", backgroundBlendMode: "screen", - clipPath: "polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%)", - backgroundImage: `linear-gradient(45deg,rgba(255, 0, 90, 1) 0%,rgba(10, 24, 61, 1) 90%),url(${item.link})`, + backgroundImage: `linear-gradient(45deg,rgba(255, 0, 90, 1) 0%, + rgba(10, 24, 61, 1) 90%), url(${item.imageUrl[0]})`, }; return style; }); @@ -74,11 +75,11 @@ export function Carousel(props) { const style = { height: "13em", backgroundSize: "cover", + backgroundPosition: "center", backgroundBlendMode: "screen", - clipPath: "polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%)", backgroundImage: `linear-gradient(45deg, #4e4376 0%, - #2b5876 90%),url(${item.link})`, + #2b5876 90%),url(${item.imageUrl[0]})`, }; return style; }); @@ -149,13 +150,13 @@ export function Carousel(props) { handleOpen(item.content, item.title, item.imageUrl[0], item?.link) } > -
- +

{item.title}

+ dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(truncatedContent(item.content, 170)),}} />
))} diff --git a/frontend/src/pages/Broadcast/Component/Carousel/carousel.module.scss b/frontend/src/pages/Broadcast/Component/Carousel/carousel.module.scss index 150d9b18..279c9e7c 100644 --- a/frontend/src/pages/Broadcast/Component/Carousel/carousel.module.scss +++ b/frontend/src/pages/Broadcast/Component/Carousel/carousel.module.scss @@ -29,7 +29,7 @@ .slide-card { position: relative; - min-height: 31em; + height: 31em; min-width: 20em; border-radius: 15px; margin: 30px; @@ -65,7 +65,6 @@ .card-text { line-height: 1.4; padding: 1em; - padding-top: 2em; text-align: justify; text-justify: distribute-all-lines; font-size: 14px; diff --git a/frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx b/frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx new file mode 100644 index 00000000..a0f7bfc4 --- /dev/null +++ b/frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx @@ -0,0 +1,92 @@ +import React, { useState } from "react"; +import { Modal, Backdrop, Fade } from '@material-ui/core'; +import { SimpleToast } from '../../../components/util/Toast' +import {postAnswer} from '../../../service/Faq' +import style from './AnswerModel.scss' + +export function AnswerModel(props) { + const [answer, setAnswer] = useState("") + const [toast, setToast] = useState({ + toastStatus: false, + toastType: "", + toastMessage: "", + }); + const Tags = [ + { value: "ml" }, + { value: "open-source" }, + { value: "deap-learning" }, + { value: "cp" }, + { value: "block-chain" }, + { value: "mern" }, + { value: "android" }, + { value: "mean" }, + { value: "javascript" }, + { value: "java" }, + { value: "c++" }, + { value: "python" }, + ]; + function handleSubmit(e) { + e.preventDefault() + if(answer!=""){ + let data={question_id:props.data._id,answer,created_on:new Date(),created_by:"Anonymous"} + postAnswer(data,setToast) + setAnswer("") + props.handleClose(false) + }else{ + setToast({toastStatus:true,toastMessage:"Please enter your answer",toastType:"error"}) + } + } + return ( +
+ {toast.toastStatus && ( + {setToast({toastMessage:"",toastStatus:false,toastType:""})}} + severity={toast.toastType} + /> + )} + + +
+
+ { + setAnswer("") + props.handleClose(false) + }}> + + +
+

{props.data?.title}

+

{props.data?.description}

+
+ { + props && props.data?.tags?.map((tag, index) => { + if (tag) + return ( +

#{Tags[index].value}

+ ) + }) + } +
+
+ { setAnswer(e.target.value) }} value={answer} type="text" placeholder="Post your answer" /> + +
+
+ + +
+ ) +} diff --git a/frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss b/frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss new file mode 100644 index 00000000..a087fd0f --- /dev/null +++ b/frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss @@ -0,0 +1,84 @@ +:root{ + font-family: "Futura LT Book"; +} +.modal-container { + width: 70%; + height: auto; + background-color: white; + outline: none !important; + padding: 20px 20px; + border-radius: 12px; + h2{ + margin: 0; + } +} + +.modal { + display: flex; + position: fixed; + align-items: center; + justify-content: center; + align-items: center; + overflow-y: scroll; + outline: none !important; +} +.close-icon-container{ + display: flex; + justify-content: end; +} +.close-icon{ + font-size: 24px; + padding-right: 20px; + cursor: pointer; + color:#243e74; +} +.ques-title{ + color:#243e74; +} +.ques-description{ + font-size: 16px; + margin: 10px auto; +} +.tag-container{ + width: 100%; + display: flex; + gap: 8px; + flex-wrap: wrap; +} +.answer-form{ + width: 100%; + margin: 14px auto; + display: flex; + justify-content: space-between; + gap: 8px; +} +.answer-field{ + width: 85%; + padding: 10px 20px; + outline: none; + border: 1px solid #ccc; + border-radius: 8px; +} +.post-answer-btn{ + width: 15%; + padding: 10px 20px; + background-color: #243e74; + border: none; + color: #fff; + border-radius: 8px; + outline: none; +} +@media screen and (max-width:768px) { + .modal-container{ + width: 90%; + } + .close-icon{ + padding-right: 5px; + } + .answer-field{ + width: 70%; + } + .post-answer-btn{ + width: 25%; + } +} \ No newline at end of file diff --git a/frontend/src/pages/Q&A/AnswerModel/index.js b/frontend/src/pages/Q&A/AnswerModel/index.js new file mode 100644 index 00000000..6d8342de --- /dev/null +++ b/frontend/src/pages/Q&A/AnswerModel/index.js @@ -0,0 +1 @@ +export * from './AnswerModel' \ No newline at end of file diff --git a/frontend/src/pages/Q&A/Q&A.jsx b/frontend/src/pages/Q&A/Q&A.jsx index 0423c21d..26698e49 100644 --- a/frontend/src/pages/Q&A/Q&A.jsx +++ b/frontend/src/pages/Q&A/Q&A.jsx @@ -12,6 +12,7 @@ import { downvote, } from "../../service/Faq"; import { showToast, hideToast } from "../../service/toastService"; +import { AnswerModel } from './AnswerModel/index' function Ques(props) { let dark = props.theme; @@ -36,6 +37,8 @@ function Ques(props) { const [checkedState, setCheckedState] = useState( new Array(Tags.length).fill(false) ); + const [open, setOpen] = useState(false) + const [currentQuestion, setCurrentQuestion] = useState({}) const [toast, setToast] = useState({ toastStatus: false, toastType: "", @@ -59,8 +62,17 @@ function Ques(props) { ); setCheckedState(updatedCheckedState); - formdata.tags.length = 0; - formdata.tags.push(checkedState); + + const selectedTags = updatedCheckedState + .map((currentState, index) => { + if (currentState === true) { + return Tags[index].value; + } + return null; + }) + .filter((item) => item !== null); + + setFormData({ ...formdata, tags: selectedTags }); }; const schema = { @@ -122,14 +134,15 @@ function Ques(props) { } }; + const filterApprovedQuestions = (questions) => { + return questions.filter((question) => question.isApproved == true) + } + const [getQuestions, setQuestions] = useState([]); const fetchQuestions = () => { getAllQuestion(setToast).then((data) => { - setLoading(false); - data = data.map((item) => { - return { ...item, tags: item.tags[0] }; - }); - setQuestions(data); + setLoading(true); + setQuestions(filterApprovedQuestions(data)); }); }; @@ -144,6 +157,7 @@ function Ques(props) { }; useEffect(() => { + setLoading(false) fetchQuestions(); }, []); @@ -152,33 +166,32 @@ function Ques(props) { className="popup-creator" style={{ background: dark ? "#171717" : "white" }} > - {getQuestions.length <= 0 ? ( - - ) : ( -
- {getQuestions?.map((item, key) => { - let tags = [...Object.values(item.tags)]; - return ( + + { + !loading ? + : + getQuestions.length == 0 ? +
+

No Questions Found !

+
+ : +
+ {getQuestions?.map((item, key) => (

{item.title}

{item.description}

- {tags.map((i, index) => { - if (i == true) - return ( - - {i === true ? `#${Tags[index].value}` : ""} - - ); - })} + {item.tags.map((tag, index) => ( + + #{tag} + + ))}
-

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

+

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

+
- ); - })} + ) + )};
- )} - + } {toast.toastStatus && ( { throw new Error("Failed to downvote question"); } }; + +export const postAnswer = async (data, setToast) => { + try { + showToast(setToast,"Posting...","info") + const url = `${END_POINT}/answers/`; + const response = await fetch(url, { + method: "POST", + headers: { + "content-type": "application/json", + }, + body: JSON.stringify(data), + }); + const res = await response.json(); + if(response.status==200) + showToast(setToast, "Thanks for answering, it has been sent to admins for review and will appear here on approval","success"); + else + showToast(setToast, "Failed to Post Answer", "error"); + return res; + } catch (error) { + showToast(setToast, "Failed to Post Answer", "error"); + throw new Error("Failed to post answer"); + } +}