DSA Practice Questions
Import React, { useState, useEffect } from "react"; import { FaSearch, FaSort, FaCheckCircle, FaQuestionCircle, FaHistory, FaTimes, FaFilter, } from "react icons/fa"; const HundredEntryLevel = () => { const [searchQuery, setSearchQuery] = useState(""); const [sortBy, setSortBy] = useState("difficulty"); const [showModal, setShowModal] = useState(false); const [selectedQuestion, setSelectedQuestion] = useState(null); const [feedback, setFeedback] = useState(""); const [filterDifficulty, setFilterDifficulty] = useState("all"); const [showFilters, setShowFilters] = useState(false); const dummyQuestions = [ { id: 1, title: "Two Sum Problem", difficulty: "Easy", dateAdded: "2024 01 15", isSolved: false, hasDoubt: false, needsReview: false, description: "Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.", category: "Arrays", }, { id: 2, title: "Binary Search Implementation", difficulty: "Medium", dateAdded: "2024 01 14", isSolved: true, hasDoubt: false, needsReview: true, description: "Implement binary search algorithm to find an element in a sorted array.", category: "Searching", }, { id: 3, title: "Merge Sort Algorithm", difficulty: "Hard", dateAdded: "2024 01 13", isSolved: false, hasDoubt: true, needsReview: false, description: "Implement the merge sort algorithm to sort an array in ascending order.", category: "Sorting", }, ]; const [questions, setQuestions] = useState(dummyQuestions); const handleSearch = (query) => { setSearchQuery(query); filterQuestions(query, filterDifficulty); }; const filterQuestions = (query, difficulty) => { let filteredQuestions = dummyQuestions.filter((q) => q.title.toLowerCase().includes(query.toLowerCase()) ); if (difficulty !== "all") { filteredQuestions = filteredQuestions.filter( (q) => q.difficulty === difficulty ); } setQuestions(filteredQuestions); }; const handleSort = (criteria) => { setSortBy(criteria); const sortedQuestions = [...questions].sort((a, b) => { if (criteria === "difficulty") { const difficultyOrder = { Easy: 1, Medium: 2, Hard: 3 }; return difficultyOrder[a.difficulty] difficultyOrder[b.difficulty]; } return new Date(b.dateAdded) new Date(a.dateAdded); }); setQuestions(sortedQuestions); }; const handleDoubtClick = (question) => { setSelectedQuestion(question); setShowModal(true); }; const handleStatusUpdate = (id, field) => { setQuestions( questions.map((q) => (q.id === id ? { ...q, [field]: !q[field] } : q)) ); }; const handleFilterChange = (difficulty) => { setFilterDifficulty(difficulty); filterQuestions(searchQuery, difficulty); }; return ( <div className="min h screen bg gray 100 p 8 ml 20"> <div className="max w 6xl mx auto"> <div className="flex justify between items center mb 8"> <h1 className="text 3xl font bold text gray 800"> DSA Practice Questions </h1> <div className="flex items center gap 4"> <span className="text gray 600"> {questions.length} Questions Found </span> </div> </div> <div className="mb 6 flex flex col md:flex row gap 4"> <div className="relative flex 1"> <input type="text" placeholder="Search questions..." value={searchQuery} onChange={(e) => handleSearch(e.target.value)} className="w full px 4 py 2 pl 10 pr 4 rounded lg border border gray 300 focus:outline none focus:ring 2 focus:ring blue 500 shadow sm" aria label="Search questions" /> <FaSearch className="absolute left 3 top 3 text gray 400" /> </div> <div className="flex gap 4"> <button onClick={() => setShowFilters(!showFilters)} className="px 4 py 2 rounded lg border border gray 300 hover:bg gray 50 focus:outline none focus:ring 2 focus:ring blue 500 flex items center gap 2" > <FaFilter /> <span>Filters</span> </button> <select value={sortBy} onChange={(e) => handleSort(e.target.value)} className="px 4 py 2 rounded lg border border gray 300 focus:outline none focus:ring 2 focus:ring blue 500 shadow sm" aria label="Sort questions" > <option value="difficulty">Sort by Difficulty</option> <option value="date">Sort by Date</option> </select> </div> </div> {showFilters && ( <div className="mb 6 p 4 bg white rounded lg shadow sm"> <h3 className="text lg font semibold mb 3">Filter by Difficulty</h3> <div className="flex gap 4"> <button onClick={() => handleFilterChange("all")} className={`px 4 py 2 rounded full ${ filterDifficulty === "all" ? "bg blue 100 text blue 800" : "bg gray 100 text gray 800" }`} > All </button> <button onClick={() => handleFilterChange("Easy")} className={`px 4 py 2 rounded full ${ filterDifficulty === "Easy" ? "bg green 100 text green 800" : "bg gray 100 text gray 800" }`} > Easy </button> <button onClick={() => handleFilterChange("Medium")} className={`px 4 py 2 rounded full ${ filterDifficulty === "Medium" ? "bg yellow 100 text yellow 800" : "bg gray 100 text gray 800" }`} > Medium </button> <button onClick={() => handleFilterChange("Hard")} className={`px 4 py 2 rounded full ${ filterDifficulty === "Hard" ? "bg red 100 text red 800" : "bg gray 100 text gray 800" }`} > Hard </button> </div> </div> )} <div className="space y 4"> {questions.map((question) => ( <div key={question.id} className="bg white rounded lg shadow md p 6 transition all hover:shadow lg border border gray 100" > <div className="flex items start justify between"> <div className="flex 1"> <div className="flex items center gap 3"> <h3 className="text xl font semibold text gray 800"> {question.title} </h3> <span className="text sm text gray 500"> {question.category} </span> </div> <p className="text gray 600 mt 2">{question.description}</p> <div className="mt 3 flex items center gap 4"> <span className={`px 3 py 1 rounded full text sm ${ question.difficulty === "Easy" ? "bg green 100 text green 800" : question.difficulty === "Medium" ? "bg yellow 100 text yellow 800" : "bg red 100 text red 800" }`} > {question.difficulty} </span> <span className="text gray 500 text sm"> {question.dateAdded} </span> </div> </div> <div className="flex gap 4"> <div className="relative group"> <button className={`p 2 rounded full transition colors ${ question.isSolved ? "bg green 100 text green 600" : "bg gray 100 text gray 600" } hover:bg opacity 80`} onClick={() => handleStatusUpdate(question.id, "isSolved") } title="Mark as Solved" > <FaCheckCircle className="w 5 h 5" /> </button> <div className="absolute left 1/2 transform translate x 1/2 top 12 hidden group hover:block bg gray 800 text white text xs rounded py 1 px 2 w 28"> Mark as Solved </div> </div> <div className="relative group"> <button className={`p 2 rounded full transition colors ${ question.needsReview ? "bg yellow 100 text yellow 600" : "bg gray 100 text gray 600" } hover:bg opacity 80`} onClick={() => handleStatusUpdate(question.id, "needsReview") } title="Review Later" > <FaHistory className="w 5 h 5" /> </button> <div className="absolute left 1/2 transform translate x 1/2 top 12 hidden group hover:block bg gray 800 text white text xs rounded py 1 px 4 w 28"> Review Later </div> </div> <div className="relative group"> <button className={`p 2 rounded full transition colors ${ question.hasDoubt ? "bg blue 100 text blue 600" : "bg gray 100 text gray 600" } hover:bg opacity 80`} onClick={() => handleDoubtClick(question)} title="Mark as Doubt" > <FaQuestionCircle className="w 5 h 5" /> </button> <div className="absolute left 1/2 transform translate x 1/2 top 12 hidden group hover:block bg gray 800 text white text xs rounded py 1 px 3 w 32"> Save with Doubt </div> </div> </div> </div> </div> ))} </div> {showModal && selectedQuestion && ( <div className="fixed inset 0 bg gray 800 bg opacity 50 flex justify center items center z 50"> <div className="bg white p 6 rounded lg max w lg w full"> <h2 className="text 2xl font semibold mb 4"> Submit a Doubt for {selectedQuestion.title} </h2> <textarea value={feedback} onChange={(e) => setFeedback(e.target.value)} placeholder="Type your doubt here..." rows="4" className="w full px 4 py 2 rounded lg border border gray 300 focus:outline none focus:ring 2 focus:ring blue 500" /> <div className="mt 4 flex justify end gap 3"> <button onClick={() => setShowModal(false)} className="px 4 py 2 bg gray 300 rounded lg" > Close </button> <button onClick={() => { alert("Doubt submitted!"); setShowModal(false); }} className="px 4 py 2 bg blue 600 text white rounded lg" > Submit </button> </div> </div> </div> )} </div> </div> ); }; export default HundredEntryLevel; I want to store the details of this question to the mongodb database that when user select solved or save as doubt or review later it will get updated in the backend and he may also it or reverse this action so update his data accordingly. For this connect it to backend. i have already server.js and import api into this file.
