Skip to content

Commit c4d21f8

Browse files
Sawan-KushwahSawan-Kushwah
committed
Added discussion forum
1 parent 5f9a1c2 commit c4d21f8

File tree

5 files changed

+214
-2
lines changed

5 files changed

+214
-2
lines changed

‎client/package-lock.json

-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/src/App.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import "aos/dist/aos.css";
3838
import Collab from "./component/Collab";
3939
import CreateBlog from "./component/CreateBlog";
4040
import UploadProject from "./component/UploadProject";
41+
import DiscussionForum from "./component/DiscussionForum";
4142

4243
const Layout = ({ children, mode, setProgress, toggleMode, showAlert }) => {
4344
return (
@@ -146,6 +147,7 @@ function App() {
146147
<Route exact path='/uploadProject' element={<UploadProject mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
147148
<Route exact path='/createBlogPost' element={<CreateBlog />} />
148149
<Route exact path='/read-more-blog/:id' element={<ReadMoreBlog mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
150+
<Route exact path='/discussionForum' element={<DiscussionForum mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
149151
<Route exact path='/*' element={<NotFound />} />
150152
</Routes>
151153
</Layout>

‎client/src/component/DiscussionForum.jsx

+156
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import { useState, useEffect } from 'react';
2+
3+
const DiscussionForum = (props) => {
4+
const [questions, setQuestions] = useState([]);
5+
6+
// Fetch questions from localStorage
7+
useEffect(() => {
8+
const storedQuestions = localStorage.getItem('questions');
9+
if (storedQuestions) {
10+
setQuestions(JSON.parse(storedQuestions));
11+
}
12+
}, []);
13+
14+
// Save questions to localStorage
15+
const saveQuestions = (updatedQuestions) => {
16+
setQuestions(updatedQuestions);
17+
localStorage.setItem('questions', JSON.stringify(updatedQuestions));
18+
};
19+
20+
// Helper function to save a new question
21+
const addQuestion = (content) => {
22+
const newQuestion = {
23+
id: Date.now().toString(),
24+
content,
25+
answered: false,
26+
answer: '',
27+
};
28+
29+
const updatedQuestions = [...questions, newQuestion];
30+
saveQuestions(updatedQuestions);
31+
};
32+
33+
// Helper function to add an answer to a question
34+
const addAnswer = (questionId, answerContent) => {
35+
const updatedQuestions = questions.map((question) =>
36+
question.id === questionId
37+
? { ...question, answered: true, answer: answerContent }
38+
: question
39+
);
40+
saveQuestions(updatedQuestions);
41+
};
42+
43+
// Function to render the Question Card
44+
const renderQuestionCard = (question) => {
45+
return (
46+
<div
47+
className={`${props.mode === 'dark' ? 'bg-gray-800 text-gray-200' : 'bg-white text-gray-800'
48+
} p-6 rounded-lg shadow-lg mb-6 w-full md:w-[48%] lg:w-[30%] transition-transform transform hover:scale-105`}
49+
key={question.id}
50+
>
51+
<p className="text-xl font-semibold">{question.content}</p>
52+
{question.answered ? (
53+
<div className={`mt-4 ${props.mode === 'dark' ? 'bg-gray-700' : 'bg-white'} p-4 rounded-md shadow-md`}>
54+
<h3 className="text-lg font-semibold">Answer:</h3>
55+
<p>{question.answer}</p>
56+
</div>
57+
) : (
58+
<AnswerForm questionId={question.id} />
59+
)}
60+
</div>
61+
);
62+
};
63+
64+
// Function to render the Answer Form
65+
const AnswerForm = ({ questionId }) => {
66+
const [answer, setAnswer] = useState('');
67+
68+
const handleSubmit = (e) => {
69+
e.preventDefault();
70+
if (answer.trim()) {
71+
addAnswer(questionId, answer);
72+
setAnswer('');
73+
}
74+
};
75+
76+
return (
77+
<form onSubmit={handleSubmit} className={`${props.mode === 'dark' ? 'bg-gray-700' : 'bg-white'} p-4 rounded-md shadow-md mt-4`}>
78+
<textarea
79+
value={answer}
80+
onChange={(e) => setAnswer(e.target.value)}
81+
placeholder="Write your answer..."
82+
className={`w-full p-4 border rounded-md ${props.mode === 'dark' ? 'bg-gray-600 text-gray-200' : 'bg-gray-100 text-gray-800'
83+
} focus:outline-none focus:ring-2 focus:ring-gray-500 transition-all`}
84+
/>
85+
<button
86+
type="submit"
87+
className="mt-4 bg-gray-800 text-white px-6 py-2 rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors"
88+
>
89+
Submit Answer
90+
</button>
91+
</form>
92+
);
93+
};
94+
95+
// Function to render the Question Form
96+
const QuestionForm = () => {
97+
const [newQuestion, setNewQuestion] = useState('');
98+
99+
const handleSubmit = (e) => {
100+
e.preventDefault();
101+
if (newQuestion.trim()) {
102+
addQuestion(newQuestion);
103+
setNewQuestion('');
104+
}
105+
};
106+
107+
return (
108+
<div className={`p-6 rounded-lg shadow-lg mb-8 ${props.mode === 'dark' ? 'bg-gray-800 text-gray-200' : 'bg-white text-gray-800'}`}>
109+
<textarea
110+
value={newQuestion}
111+
onChange={(e) => setNewQuestion(e.target.value)}
112+
placeholder="Ask your question..."
113+
className={`w-full p-4 border rounded-md ${props.mode === 'dark' ? 'bg-gray-600 text-gray-200' : 'bg-gray-100 text-gray-800'
114+
} focus:outline-none focus:ring-2 focus:ring-gray-500 transition-all`}
115+
/>
116+
<button
117+
onClick={handleSubmit}
118+
className="mt-4 bg-gray-800 text-white px-6 py-2 rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors"
119+
>
120+
Ask Question
121+
</button>
122+
</div>
123+
);
124+
};
125+
126+
return (
127+
<div className="container mx-auto px-6 py-8 mt-20">
128+
<h1 className="text-4xl font-bold text-center mb-8">
129+
BITBOX Discussion Forum
130+
</h1>
131+
132+
<QuestionForm />
133+
134+
<div>
135+
<h2 className="text-2xl font-semibold mb-6">Unanswered Questions</h2>
136+
<div className="flex flex-wrap gap-6">
137+
{questions
138+
.filter((question) => !question.answered)
139+
.map((question) => renderQuestionCard(question))}
140+
</div>
141+
</div>
142+
<div class="p-[1px] bg-blue-500 text-white rounded-md shadow">
143+
</div>
144+
<div>
145+
<h2 className="text-2xl font-semibold mb-6 mt-8">Answered Questions</h2>
146+
<div className="flex flex-wrap gap-6">
147+
{questions
148+
.filter((question) => question.answered)
149+
.map((question) => renderQuestionCard(question))}
150+
</div>
151+
</div>
152+
</div>
153+
);
154+
};
155+
156+
export default DiscussionForum;

‎client/src/component/faq.jsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
// component/FAQ.jsx
2+
import { useState } from "react";
3+
import "../css/Faq.css";
4+
5+
const FAQ = () => {
6+
const [activeIndex, setActiveIndex] = useState(null);
7+
8+
const toggleAnswer = (index) => {
9+
setActiveIndex(activeIndex === index ? null : index);
10+
};
11+
12+
return (
13+
<div className="faq-container">
14+
<h1>Frequently Asked Questions</h1>
15+
{faqData.map((item, index) => (
16+
<div key={index} className="faq-item">
17+
<h2 onClick={() => toggleAnswer(index)} className="faq-question">
18+
{item.question}
19+
</h2>
20+
{activeIndex === index && <p className="faq-answer">{item.answer}</p>}
21+
</div>
22+
))}
23+
</div>
24+
);
25+
};
26+
27+
const faqData = [
28+
{
29+
question: "What is BitBox?",
30+
answer:
31+
"BitBox is a user-friendly platform that simplifies version control and collaboration for developers.",
32+
},
33+
{
34+
question: "How does BitBox enhance collaboration?",
35+
answer:
36+
"BitBox offers intuitive tools that enable both solo programmers and large teams to manage projects efficiently.",
37+
},
38+
{
39+
question: "How do I get started with BitBox?",
40+
answer:
41+
"You can sign up for an account on BitBox and start managing your projects right away.",
42+
},
43+
{
44+
question: "Is BitBox compatible with modern development workflows?",
45+
answer:
46+
"Yes, BitBox seamlessly integrates with modern development workflows, providing fast and reliable performance.",
47+
},
48+
{
49+
question: "How can I contact support if I need help?",
50+
answer:
51+
"You can reach out to support through the 'Contact Us' page or by emailing [email protected].",
52+
},
53+
];
54+
55+
export default FAQ;

‎package-lock.json

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)