added dashboard, filters in questions

Author: aayush301

README.md

@@ -21,11 +21,18 @@ A place to share and organize knowledge where you can ask or answer questions.
 - Signup
 - Login
 - Logout
-- Users can ask question
+- Forgot and reset password
+- Users can ask questions providing the title and body with formatting as well.
 - Users can edit the questions asked by them.
-- The already asked questions with their answers can be viewed by any type of person (non-logged persons as well).
+- The already asked questions with their answers can be viewed by all people.
+- Users can answer the questions by selecting any from all the questions present.
 - Users can also view questions specifically asked by them.
+- Users can view and edit their profile. This also includes changing their username and password as well.
 - Users can bookmark/unbookmark a question or a specific answer.
+- Users can view the bookmarks on separate page, where they can directly toggle those.
+- Users can like the questions/answers of others. The like count is publicly visible.
+- All the likes of a user can also be accessed separately.
+- Users can view their activities in separate page.
 - Link to question or a specific answer to question can also be copied.
 - Social sharing is also possible.
 - Questions along with the answers can also be downloaded.
@@ -44,6 +51,7 @@ A place to share and organize knowledge where you can ask or answer questions.
 - Prompt login modal when non-logged persons try to perform auth activity
 - Responsive Sidebar with toggle option
 - Slugs used for SEO friendly URLs
+- Search params used for applying filters
 - Toasts for success and error messages
 - Use of 404 page for wrong urls
 - Use of layout component for pages

backend/ApiDocs.md

@@ -14,20 +14,10 @@ GET /api/answers/me
 - Access: Private
 - Description: gets the answers previously answered by current logged-in user
 
-GET /api/answers/byQuestion/:qid
-- Access: Public
-- Description: gets the answers of a question by the question id
-
 GET /api/answers/:ansid
 - Access: Public
 - Description: gets an answer by id
 
-POST /api/answers/:qid
-- body: { text }
-- headers: { Authorization: "jwt-token" }
-- Access: Private
-- Description: posts the answer to the question passed by its id in the name of current logged-in user
-
 PUT /api/answers/:ansid
 - body: { text }
 - headers: { Authorization: "jwt-token" }
@@ -91,6 +81,14 @@ DELETE /api/bookmarks/:bookmarkId
 
 
 
+## Dashboard Routes
+GET /api/dashboard
+- headers: { Authorization: "jwt-token" }
+- Access: Private
+- Description: gets the personalized dashboard data for the user
+
+
+
 ## Like Routes
 GET /api/likes/questions/:qid
 - Access: Public
@@ -173,6 +171,16 @@ PUT /api/questions/:qid
 - Access: Private
 - Description: updates the question by id
 
+GET /api/questions/:qid/answers
+- Access: Public
+- Description: gets the answers of a question by the question id
+
+POST /api/questions/:qid/answers
+- body: { text }
+- headers: { Authorization: "jwt-token" }
+- Access: Private
+- Description: posts the answer to the question passed by its id in the name of current logged-in user
+
 GET /api/questions/byslug/:qslug
 - Access: Public
 - Description: gets the question by its slug

backend/controllers/answerControllers.js

@@ -5,28 +5,6 @@ const activityEnum = require("../utils/activityEnum");
 const { validateObjectId } = require("../utils/validation");
 
 
-exports.getAnswersByQuestion = async (req, res) => {
- try {
- const questionId = req.params.qid;
-
- if (!validateObjectId(questionId)) {
- return res.status(400).json({ msg: "Question id not valid" });
- }
-
- const question = await Question.findById(questionId);
- if (!question) {
- return res.status(400).json({ msg: "No question found.." });
- }
-
- const answers = await Answer.find({ question: questionId }).populate("answerer", "-password");
- res.status(200).json({ answers, msg: "Answers found successfully" });
- }
- catch (err) {
- console.error(err);
- return res.status(500).json({ msg: "Internal Server Error" });
- }
-}
-
 
 exports.getAnswerById = async (req, res) => {
  try {
@@ -49,41 +27,6 @@ exports.getAnswerById = async (req, res) => {
 }
 
 
-exports.postAnswer = async (req, res) => {
- try {
- const questionId = req.params.qid;
- const { text } = req.body;
- const userId = req.user.id;
- if (!text) {
- return res.status(400).json({ msg: "Answer can't be empty" });
- }
-
- if (!validateObjectId(questionId)) {
- return res.status(400).json({ msg: "invalid Question id" });
- }
-
- const question = await Question.findById(questionId);
- if (!question) {
- return res.status(400).json({ msg: "No question found.." });
- }
-
- if (question.questioner == req.user.id) {
- return res.status(400).json({ msg: "You can't post answer to your own question!!" });
- }
-
- const answer = await Answer.create({ question: questionId, answerer: userId, text });
- await Activity.create({ user: req.user.id, activityType: activityEnum.CREATED_ANSWER, answer: answer._id });
-
- res.status(200).json({ answer, msg: "Answer posted successfully" });
-
- }
- catch (err) {
- console.error(err);
- return res.status(500).json({ msg: "Internal Server Error" });
- }
-}
-
-
 
 exports.updateAnswerById = async (req, res) => {
  try {

backend/controllers/questionControllers.js

@@ -9,13 +9,11 @@ const { validateObjectId } = require("../utils/validation");
 exports.getQuestions = async (req, res) => {
  try {
 
- const page = parseInt(req.query.page, 10) || 1;
- const pageSize = parseInt(req.query.pageSize, 10) || 10;
+ let { answerFilter } = req.query;
+
 
  let questions = await Question
  .find()
- .skip((page - 1) * pageSize)
- .limit(pageSize)
  .sort("-createdAt")
  .populate("questioner", "name")
  .lean();
@@ -28,6 +26,17 @@ exports.getQuestions = async (req, res) => {
  }
 
  questions = await Promise.all(questions.map(question => addExtraInfo(question)));
+
+ if (answerFilter == "noAnswer") {
+ questions = questions.filter(question => question.ansCount == 0);
+ }
+ else if (answerFilter == "hasAnswer") {
+ questions = questions.filter(question => question.ansCount > 0);
+ }
+ else if (answerFilter == "hasAcceptedAnswer") {
+ questions = questions.filter(question => question.acceptedAnsCount > 0);
+ }
+
  res.status(200).json({ questions, msg: "Questions found successfully" });
  }
  catch (err) {
@@ -179,3 +188,61 @@ exports.getQuestionsOfCurrentUser = async (req, res) => {
  }
 }
 
+
+exports.getAnswersByQuestion = async (req, res) => {
+ try {
+ const questionId = req.params.qid;
+
+ if (!validateObjectId(questionId)) {
+ return res.status(400).json({ msg: "Question id not valid" });
+ }
+
+ const question = await Question.findById(questionId);
+ if (!question) {
+ return res.status(400).json({ msg: "No question found.." });
+ }
+
+ const answers = await Answer.find({ question: questionId }).populate("answerer", "-password");
+ res.status(200).json({ answers, msg: "Answers found successfully" });
+ }
+ catch (err) {
+ console.error(err);
+ return res.status(500).json({ msg: "Internal Server Error" });
+ }
+}
+
+
+exports.postAnswer = async (req, res) => {
+ try {
+ const questionId = req.params.qid;
+ const { text } = req.body;
+ const userId = req.user.id;
+ if (!text) {
+ return res.status(400).json({ msg: "Answer can't be empty" });
+ }
+
+ if (!validateObjectId(questionId)) {
+ return res.status(400).json({ msg: "invalid Question id" });
+ }
+
+ const question = await Question.findById(questionId);
+ if (!question) {
+ return res.status(400).json({ msg: "No question found.." });
+ }
+
+ if (question.questioner == req.user.id) {
+ return res.status(400).json({ msg: "You can't post answer to your own question!!" });
+ }
+
+ const answer = await Answer.create({ question: questionId, answerer: userId, text });
+ await Activity.create({ user: req.user.id, activityType: activityEnum.CREATED_ANSWER, answer: answer._id });
+
+ res.status(200).json({ answer, msg: "Answer posted successfully" });
+
+ }
+ catch (err) {
+ console.error(err);
+ return res.status(500).json({ msg: "Internal Server Error" });
+ }
+}
+

backend/routes/answerRoutes.js

@@ -1,14 +1,12 @@
 const express = require("express");
-const { getAnswersByQuestion, postAnswer, updateAnswerById, getAnswersOfCurrentUser, getAnswerById, acceptAnswer } = require("../controllers/answerControllers");
+const { updateAnswerById, getAnswersOfCurrentUser, getAnswerById, acceptAnswer } = require("../controllers/answerControllers");
 const router = express.Router();
 const { verifyAccessToken } = require("../middlewares");
 
 
 // Routes beginning with /api/answers
 router.get("/me", verifyAccessToken, getAnswersOfCurrentUser);
-router.get("/byQuestion/:qid", getAnswersByQuestion);
 router.get("/:ansid", getAnswerById);
-router.post("/:qid", verifyAccessToken, postAnswer);
 router.put("/:ansid", verifyAccessToken, updateAnswerById);
 router.put("/:ansid/accept", verifyAccessToken, acceptAnswer);
 

backend/routes/questionRoutes.js

@@ -1,6 +1,6 @@
 const express = require("express");
 const router = express.Router();
-const { getQuestions, getQuestionById, postQuestion, updateQuestionById, getQuestionBySlug, getQuestionsOfCurrentUser } = require("../controllers/questionControllers");
+const { getQuestions, getQuestionById, postQuestion, updateQuestionById, getQuestionBySlug, getQuestionsOfCurrentUser, getAnswersByQuestion, postAnswer } = require("../controllers/questionControllers");
 const { verifyAccessToken } = require("../middlewares");
 
 
@@ -11,6 +11,8 @@ router.get("/me", verifyAccessToken, getQuestionsOfCurrentUser);
 
 router.get("/:qid", getQuestionById);
 router.put("/:qid", verifyAccessToken, updateQuestionById);
+router.get("/:qid/answers", getAnswersByQuestion);
+router.post("/:qid/answers", verifyAccessToken, postAnswer);
 
 router.get("/byslug/:qslug", getQuestionBySlug);
 

frontend/src/components/QuestionFilters.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { useState } from 'react'
+import RadioBtn from './utils/RadioBtn';
+
+const QuestionFilters = ({ searchParams, setSearchParams }) => {
+
+ const currSearchParams = Object.fromEntries([...searchParams]);
+ const { answerFilter } = currSearchParams;
+
+ const [formData, setFormData] = useState({
+ answerFilter: answerFilter || "", // value belongs to [noAnswer, hasAnswer, hasAcceptedAnswer]
+ });
+
+ const handleAnswerFilterChange = (name, value, checked) => {
+ if (!checked)
+ setFormData({ ...formData, answerFilter: "" });
+ else
+ setFormData({ ...formData, answerFilter: value });
+ }
+
+ const handleSubmit = async e => {
+ e.preventDefault();
+ if (formData.answerFilter) {
+ setSearchParams({ ...currSearchParams, answerFilter: formData.answerFilter });
+ }
+ else {
+ searchParams.delete("answerFilter");
+ setSearchParams(searchParams);
+ }
+ }
+
+ return (
+ <>
+ <div className='sm:mx-8 p-4 bg-sky-50 dark:bg-gray-800 border-2 border-sky-200 dark:border-none rounded-md'>
+ <h4 className='text-lg'>Filters</h4>
+
+ <form>
+ <div>
+ <RadioBtn label="No answer" id="no-answer" name="answerFilter" value='noAnswer' checked={formData.answerFilter === "noAnswer"} onChange={handleAnswerFilterChange} />
+ <RadioBtn label="Has answer" id="has-answer" name="answerFilter" value="hasAnswer" checked={formData.answerFilter === "hasAnswer"} onChange={handleAnswerFilterChange} />
+ <RadioBtn label="Has accepted answer" id="has-accepted-answer" name="answerFilter" value="hasAcceptedAnswer" checked={formData.answerFilter === "hasAcceptedAnswer"} onChange={handleAnswerFilterChange} />
+ </div>
+ <button className='px-3 py-1.5 font-semibold dark:text-black bg-sky-400 hover:bg-sky-500 transition rounded-[3px]' onClick={handleSubmit}>Apply</button>
+ </form>
+
+ </div>
+ </>
+ )
+}
+
+export default QuestionFilters

frontend/src/components/forms/PostAnswerForm.jsx

@@ -31,7 +31,7 @@ const PostAnswerForm = ({ questionId, onSuccessPost }) => {
  return;
  }
 
- const config = { url: `/answers/${questionId}`, method: "post", data: formData, headers: { Authorization: authState.token } };
+ const config = { url: `/questions/${questionId}/answers`, method: "post", data: formData, headers: { Authorization: authState.token } };
  fetchData(config).then(() => {
  onSuccessPost();
  });

frontend/src/components/utils/Checkbox.jsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react'
+
+const Checkbox = ({ label, id, name, value, checked = false, indeterminate = false, onChange }) => {
+ let [isChecked, setIsChecked] = useState(checked);
+ const [isIndeterminate, setIsIndeterminate] = useState(indeterminate);
+ const handleCheckboxClick = () => {
+ setIsIndeterminate(false);
+ setIsChecked(!isChecked);
+ }
+
+ useEffect(() => setIsChecked(checked), [checked]);
+ useEffect(() => setIsIndeterminate(indeterminate), [indeterminate]);
+ useEffect(() => {
+ if (isIndeterminate) return;
+ onChange(name, value, isChecked)
+ }, [isChecked, isIndeterminate, name, value, onChange]);
+
+
+ return (
+ <>
+ <label htmlFor={id} className='inline-flex items-center cursor-pointer group'>
+ <span className='relative w-10 h-10 p-2 rounded-full transition group-hover:bg-gray-100 dark:group-hover:bg-gray-900'>
+ <input type="checkbox" id={id} name={name} value={value} className='absolute peer w-full h-full top-0 left-0 opacity-0 cursor-pointer' onChange={handleCheckboxClick} />
+ {isIndeterminate ? (
+ <svg className='w-6 h-6 absolute z-10 fill-teal-600' focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"></path></svg>
+ ) : isChecked ? (
+ <svg className='w-6 h-6 absolute z-10 fill-teal-600' focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg>
+ ) : (
+ <svg className="w-6 h-6 absolute z-10 fill-gray-700" focusable="false" aria-hidden="true" viewBox="0 0 24 24"> <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg>
+ )}
+ <span className='absolute top-0 left-0 w-full h-full rounded-full transition duration-500 scale-0 peer-active:scale-100 peer-active:bg-gray-200 peer-focus:scale-100 peer-focus:bg-gray-200 dark:peer-focus:bg-gray-900'></span>
+ </span>
+
+ <span>{label}</span>
+ </label>
+ </>
+ )
+}
+
+export default Checkbox