Skip to content

Commit 5a5729c

Browse files
mdazfar2mdazfar2
authored
Merge pull request #1288 from Ayushmaanagarwal1211/Bugs
Complete Backend Integration with Frontend For Selecting the Topics for questions
2 parents 3a194fc + a8bbe1c commit 5a5729c

File tree

4 files changed

+132
-8
lines changed

4 files changed

+132
-8
lines changed

‎website3.0/components/forumpage/CreateForum.js‎

Lines changed: 80 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
"use client";
2-
import React, { useContext, useState, useEffect } from "react";
2+
import React, { useContext, useState, useEffect, useRef } from "react";
33
import dynamic from "next/dynamic";
44
import { Context } from "@context/store";
55
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -16,6 +16,8 @@ import 'react-quill/dist/quill.snow.css';
1616
import ReactQuill, { Quill } from 'react-quill';
1717
import { useRouter } from "next/navigation";
1818
function CreateForum() {
19+
let [selectedTags,setSelectedTags]=useState([])
20+
1921
const { theme ,finalUser} = useContext(Context);
2022
const [activeSection, setActiveSection] = useState("title");
2123
let router=useRouter()
@@ -28,15 +30,33 @@ function CreateForum() {
2830
toolbar.style.background = 'transparent';
2931
}
3032
}, []);
33+
const Tag = ({ name }) => {
34+
35+
return <div onClick={()=>{
36+
if(selectedTags.includes(name)){let arr=selectedTags;
37+
arr=arr.filter((data)=>data!==name)
38+
setSelectedTags([...arr])
39+
}else{setSelectedTags(prev=>[...prev,name])}}} className={` ${selectedTags.includes(name)?"bg-gray-400":"bg-gray-200"} px-4 py-1 text-gray-700 cursor-pointer hover:bg-[#deecf5] hover:text-[#6089a4] transition-all duration-200`}>
40+
{name}
41+
</div>
42+
};
43+
const Tag1 = ({ name }) => {
44+
45+
return <div className="bg-gray-200 px-4 py-1 text-gray-700 cursor-pointer hover:bg-[#deecf5] hover:text-[#6089a4] transition-all duration-200">
46+
{name}
47+
</div>
48+
};
3149
async function postQuestion(){
50+
3251
let payload={
3352
title:title,
3453
content:content,
3554
authorUsername:finalUser.username,
3655
authorEmail:finalUser.email,
3756
authorId:finalUser._id,
3857
authorName:finalUser.name,
39-
authorImage:finalUser.image1
58+
authorImage:finalUser.image1,
59+
tags:selectedTags
4060
}
4161
await fetch('/api/createquestion',{
4262
method:"POST",
@@ -45,6 +65,23 @@ function CreateForum() {
4565
router.push("/devopsforum")
4666
}
4767
const renderSection = () => {
68+
const tags = [
69+
"Docker",
70+
"Devops",
71+
"Azure",
72+
"Ubuntu",
73+
"NeedHelp",
74+
"Dockerization",
75+
"CI/CD",
76+
"AWS",
77+
"Kubernetes",
78+
]
79+
let tagValue=useRef()
80+
function handleAddTag(){
81+
let a=tagValue.current.value
82+
setSelectedTags((prev)=>[...prev,a])
83+
tagValue.current.value=""
84+
}
4885
switch (activeSection) {
4986
case "title":
5087
return (
@@ -96,7 +133,7 @@ function CreateForum() {
96133
</div>
97134
<div
98135
className="w-20 rounded-xl h-12 flex justify-center items-center text-white bg-[#6089a4]"
99-
onClick={() => setActiveSection("member")}
136+
onClick={() => setActiveSection("tags")}
100137
>
101138
Next
102139
</div>
@@ -143,7 +180,7 @@ function CreateForum() {
143180
<div className="flex justify-between mt-4">
144181
<div
145182
className="w-20 rounded-xl h-12 flex justify-center items-center text-white bg-[#6089a4] cursor-pointer"
146-
onClick={() => setActiveSection("content")}
183+
onClick={() => setActiveSection("tags")}
147184
>
148185
Prev
149186
</div>
@@ -187,7 +224,45 @@ function CreateForum() {
187224
</div>
188225
</div>
189226
);
190-
default:
227+
case "tags":return (
228+
<div className="my-10 w-[80%] m-auto">
229+
<div className="text-xl my-5 px-3 text-center">
230+
Select Your Tags
231+
</div>
232+
<div className="bg-white shadow-md rounded-xl p-4">
233+
<div className="mb-4 ">
234+
<div className="flex justify-center flex-wrap mt-5 gap-4">
235+
{tags.map((tag, index) => (
236+
<Tag key={index} name={tag} />
237+
))}
238+
</div>
239+
{selectedTags.length>0&& <h1 className="text-xl text-center mt-[20px] ">Selected Tags</h1>}
240+
<div className="w-[100%] mt-[25px] mb-[20px] justify-center flex gap-5"><input placeholder="Add Your Tag" className="border-b-gray-500 border-b-[1px]" ref={tagValue}/><button onClick={handleAddTag}>Add Tag</button></div>
241+
<div className="flex flex-wrap mt-5 gap-4 justify-center">
242+
{selectedTags.map((tag, index) => (
243+
<Tag1 key={index} name={tag} />
244+
))}
245+
</div>
246+
</div>
247+
248+
</div>
249+
<div className="flex justify-between mt-4">
250+
<div
251+
className="w-20 rounded-xl h-12 flex justify-center items-center text-white bg-[#6089a4] cursor-pointer"
252+
onClick={() => setActiveSection("content")}
253+
>
254+
Prev
255+
</div>
256+
<div
257+
className="w-20 rounded-xl h-12 flex justify-center items-center text-white bg-[#6089a4] cursor-pointer"
258+
onClick={() => setActiveSection("member")}
259+
>
260+
Next
261+
</div>
262+
</div>
263+
</div>
264+
)
265+
default:
191266
return null;
192267
}
193268
};

‎website3.0/components/forumpage/ForumPost.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -333,6 +333,7 @@ function ForumPost({theme,id,finalUser,setMsg,setIsPopup}) {
333333
dangerouslySetInnerHTML={{ __html: issue?.title }}
334334
/>
335335
</div>
336+
<div className="mt-[30px] flex gap-3">{issue.tags?.map((data)=><span>#{data}</span>)}</div>
336337

337338
<div className={`${theme?"":"text-gray-300"} max-md:pl-[64px] text-base mt-5 text-justify`} dangerouslySetInnerHTML={{__html:issue?.content}}/>
338339

‎website3.0/pages/ForumPage.js‎

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
import { faGithub, faLinkedin } from "@fortawesome/free-brands-svg-icons";
2323
import { useRouter } from "next/navigation";
2424
import styles from '../stylesheets/forumanimation.css'
25+
2526
const Sidebar01Item = ({ title, isActive, onClick, icon, theme }) => {
2627
return (
2728
<div
@@ -38,7 +39,11 @@ const Sidebar01Item = ({ title, isActive, onClick, icon, theme }) => {
3839
};
3940

4041
const Tag = ({ name }) => (
41-
<div className="bg-gray-200 px-4 py-1 text-gray-700 cursor-pointer hover:bg-[#deecf5] hover:text-[#6089a4] transition-all duration-200">
42+
<div onClick={()=>{
43+
if(selectedTags.includes(name)){let arr=selectedTags;
44+
arr=arr.filter((data)=>data!==name)
45+
setSelectedTags([...arr])
46+
}else{setSelectedTags(prev=>[...prev,name])}}} className="bg-gray-200 px-4 py-1 text-gray-700 cursor-pointer hover:bg-[#deecf5] hover:text-[#6089a4] transition-all duration-200">
4247
{name}
4348
</div>
4449
);
@@ -97,6 +102,7 @@ function ForumPage({ theme,finalUser,setIsPopup,setMsg }) {
97102
const [isClosed,setIsClosed]=useState(false)
98103
let [sortedArray,setSortedArray]=useState([])
99104
let [mostHelpful,setMostHelpful]=useState([])
105+
let [selectedTags,setSelectedTags]=useState([])
100106
const handleMouseEnter =async (event, userImg) => {
101107
setCursorPosition({ x: event.clientX, y: event.clientY });
102108
let obj={...userImg}
@@ -345,6 +351,28 @@ const handlePageChange = (page) => {
345351

346352

347353
}
354+
useEffect(()=>{
355+
let arr=[]
356+
if(selectedTags.length==0){
357+
setIssues([...originalIssues])
358+
return
359+
}
360+
console.log(selectedTags)
361+
originalIssues.map((data)=>{
362+
let ans=false
363+
data.tags.forEach((name)=>{
364+
if(selectedTags.includes(name)){
365+
ans=true
366+
}
367+
})
368+
if(ans){
369+
arr.push(data)
370+
}
371+
})
372+
console.log(arr)
373+
setIssues([...arr])
374+
},[selectedTags])
375+
348376

349377

350378
return (
@@ -424,9 +452,19 @@ const handlePageChange = (page) => {
424452
Tags
425453
</div>
426454
<div className="flex flex-wrap mt-5 gap-4">
427-
{tags.map((tag, index) => (
428-
<Tag key={index} name={tag} />
455+
{tags.map((name, index) => (
456+
<div onClick={()=>{
457+
if(selectedTags.includes(name)){let arr=selectedTags;
458+
arr=arr.filter((data)=>data!==name)
459+
setSelectedTags([...arr])
460+
}else{
461+
setSelectedTags(prev=>[...prev,name])}
462+
}
463+
} className={` ${selectedTags.includes(name)?"bg-gray-400":"bg-gray-200"} px-4 py-1 text-gray-700 cursor-pointer hover:bg-[#deecf5] hover:text-[#6089a4] transition-all duration-200`}>
464+
{name}
465+
</div>
429466
))}
467+
430468
</div>
431469
</div>
432470
<div className="mt-10 max-xl:hidden">
@@ -536,6 +574,13 @@ const handlePageChange = (page) => {
536574
>
537575
{issue.title}
538576
</div>
577+
<div className="text-gray-500 flex gap-2 text-sm mt-2">
578+
{
579+
issue.tags.slice(0,tags.length>4?4:tags.length).map((data)=>{
580+
return <span>#{data}</span>
581+
})
582+
}
583+
</div>
539584
<div className="text-gray-500 text-sm mt-2">
540585
{issue.type} • {issue.dateTime}
541586
</div>

‎website3.0/utils/models/question.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,9 @@ type:String
8585
relatedUser:{
8686
type:Array,
8787
default:[]
88+
},
89+
tags:{
90+
type:Array,default:[]
8891
}
8992
});
9093

0 commit comments

Comments
 (0)