merged subject dropdown and add subject and made suggestion list with add subjects when not present

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

client/package.json

@@ -25,7 +25,7 @@
     "react-hook-form": "^7.49.3",
     "react-icons": "^5.0.1",
     "react-loader-spinner": "^6.1.6",
-    "react-pdf": "^8.0.2",
+    "react-pdf": "^9.0.0",
     "react-rating-stars-component": "^2.2.0",
     "react-redux": "^9.1.2",
     "react-router": "^6.21.0",

client/src/Context/UserContext.jsx

@@ -12,10 +12,6 @@ export const UserContextProvider = ({ children }) => {
 
   const token = localStorage.getItem("token");
 
-  if (!token) {
-    navigate("/login");
-  }
-
   const config = {
     headers: {
       Authorization: `Bearer ${token}`,
@@ -34,6 +30,7 @@ export const UserContextProvider = ({ children }) => {
         setUser(res.data);
       }
     } catch (error) {
+      console.log("hello");
       console.log(error);
     } finally {
       setLoading(false);

client/src/MasterPage.jsx

@@ -1,16 +1,22 @@
-import React from 'react'
-import { Outlet } from 'react-router'
-import Navbar from './components/Navbar/Navbar'
-import Footer from './components/Footer'
+import React, { useContext } from "react";
+import { Outlet, useNavigate } from "react-router";
+import Navbar from "./components/Navbar/Navbar";
+import Footer from "./components/Footer";
+import { UserContext } from "./Context/UserContext";
 
 const MasterPage = () => {
+  const { user } = useContext(UserContext);
+  const navigate = useNavigate();
+
+  if (!user) navigate("/login");
+
   return (
     <>
-    <Navbar/>
-    <Outlet/>
-    <Footer/>
+      <Navbar />
+      <Outlet />
+      <Footer />
     </>
-  )
-}
+  );
+};
 
-export default MasterPage
+export default MasterPage;

client/src/components/Footer/index.jsx

@@ -4,8 +4,7 @@ import lang from "../../utils/langaugeConstant";
 import { useSelector } from "react-redux";
 
 const Footer = () => {
-
-  const langKey=useSelector((store)=>store.config.lang)
+  const langKey = useSelector((store) => store.config.lang);
 
   return (
     <footer className="bg-white dark:bg-gray-900">
@@ -20,15 +19,13 @@ const Footer = () => {
           </Link>
           <ul className="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
             <li>
-
               <Link to="/about" className="hover:underline me-4 md:me-6">
                 About
               </Link>
 
               <a href="/about" className="hover:underline me-4 md:me-6">
                 {lang[langKey].About}
               </a>
-
             </li>
             <li>
               <Link
@@ -47,8 +44,7 @@ const Footer = () => {
               <Link to="/contact" className="hover:underline">
                 Contact
               </Link>
-                {lang[langKey].PrivacyPolicy}
-              </a>
+              <a>{lang[langKey].PrivacyPolicy}</a>
             </li>
             <li>
               <a href="/licensing" className="hover:underline me-4 md:me-6">

client/src/components/Login/Login.jsx

@@ -7,6 +7,7 @@ import { UserContext } from "../../Context/UserContext";
 import TextLogo from "../../assets/blackLogo.png";
 import { toast, Bounce, ToastContainer } from "react-toastify";
 import { Loader } from "../Loader/Loader";
+import { Link } from "react-router-dom";
 
 const Login = () => {
   const {
@@ -209,12 +210,13 @@ const Login = () => {
 
           <p className="mt-10 text-center text-sm text-gray-500">
             Don't have an account?{" "}
-            <a
-              href="/signup"
+            <Link
+              onClick={console.log}
+              to="/signup"
               className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
             >
               Sign Up
-            </a>
+            </Link>
           </p>
         </div>
       </div>

client/src/components/UploadPage/UploadPage.jsx

@@ -1,4 +1,5 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, { useContext, useState, useEffect, useRef } from "react";
+import styles from "./UploadPage.module.css";
 import { Loader } from "../Loader/Loader";
 import { useNavigate } from "react-router";
 import { useParams } from "react-router-dom";
@@ -26,7 +27,7 @@ const UploadPage = () => {
   const [loading, setLoading] = useState(true);
   const [subjects, setSubjects] = useState([]);
   const [fileUploadProgress, setFileUploadProgress] = useState(0);
-  const langKey=useSelector((store)=>store.config.lang)
+  const langKey = useSelector((store) => store.config.lang);
 
   const {
     register,
@@ -39,10 +40,18 @@ const UploadPage = () => {
   const [fileUrl, setFileUrl] = useState("");
   const [thumbnailURL, setThumbnailURL] = useState("");
   const [addSubject_, setAddSubject_] = useState("");
+  const [isSubjectInputActive, setIsSubjectInputActive] = useState("");
+  const [areSuggestionsLoading, setAreSuggestionsLoading] = useState(false);
 
   // Storing the request id from the route path(may or may not be present)
   const { requestId } = useParams();
 
+  const hideSuggestionsList = () => {
+    setTimeout(() => {
+      setIsSubjectInputActive(false);
+    }, 1000);
+  };
+
   const addSubject = () => {
     if (addSubject_ === "") {
       return;
@@ -260,6 +269,60 @@ const UploadPage = () => {
     return <Loader />;
   }
 
+  const refreshSuggestionsList = (subjectName) => {
+    setAreSuggestionsLoading(true);
+    // Fetch subjects matching with the subject name from the server
+    const token = localStorage.getItem("token");
+    const config = {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+      withCredentials: true,
+    };
+    axios
+      .get(`${import.meta.env.VITE_BASE_URL}/subject/match`, {
+        params: { subjectName },
+        ...config,
+      })
+      .then((res) => {
+        setSubjects(res.data);
+        setAreSuggestionsLoading(false);
+      })
+      .catch((error) => {
+        console.error("Error fetching subjects:", error);
+        setAreSuggestionsLoading(false);
+      });
+  };
+
+  const handleSubjectValueChange = (subjectName) => {
+    setAddSubject_(subjectName);
+    refreshSuggestionsList(subjectName);
+  };
+
+  const handleSuggestionClick = (e, subject) => {
+    e.preventDefault();
+    setAddSubject_(subject);
+    console.log(subject);
+  };
+
+  const hasSubject = (subjectName) => {
+    return subjects.find((s) => s.subjectName === subjectName) ? true : false;
+  };
+
+  const markSearchedPart = (subjectName) => {
+    const regex = new RegExp(addSubject_.toLowerCase() || "#");
+    const found = regex.test(subjectName.toLowerCase());
+    const [first, last] = subjectName.toLowerCase().split(regex);
+    console.table({ first, last });
+    return (
+      <>
+        {first}
+        {found && <mark> {addSubject_} </mark>}
+        {last}
+      </>
+    );
+  };
+
   return (
     <>
       <div>
@@ -334,7 +397,7 @@ const UploadPage = () => {
                 )}
               </div>
 
-              <div className="mb-5">
+              {/* <div className="mb-5">
                 <label
                   htmlFor="subject"
                   className="mb-3 block text-base font-small text-[#07074D]"
@@ -366,9 +429,9 @@ const UploadPage = () => {
                     }}
                   ></p>
                 )}
-              </div>
+              </div> */}
 
-              <div className="mb-5 mt-10">
+              {/* <div className="mb-5 mt-10">
                 <label
                   htmlFor="subject"
                   className="mb-1 block text-base text-[14px] text-red-500"
@@ -392,6 +455,58 @@ const UploadPage = () => {
                     {lang[langKey].AddSubject}
                   </div>
                 </div>
+              </div> */}
+              <div className="mb-5 mt-10">
+                <label
+                  htmlFor="subject"
+                  className="mb-3 block text-base font-small text-[#07074D]"
+                >
+                  {lang[langKey].Subject}
+                </label>
+                <div
+                  className={
+                    styles.subjectInput +
+                    "flex flex-col md:flex-row justify-center gap-5 relative"
+                  }
+                >
+                  <input
+                    type="text"
+                    name="subject"
+                    id="subject"
+                    value={addSubject_}
+                    onChange={(e) => handleSubjectValueChange(e.target.value)}
+                    onFocus={() => setIsSubjectInputActive(true)}
+                    onBlur={() => hideSuggestionsList()}
+                    placeholder={lang[langKey].AddSubject}
+                    className={
+                      " rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-small text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md w-full"
+                    }
+                  ></input>
+                  {addSubject_ !== "" && !hasSubject(addSubject_) && (
+                    <div
+                      className="hover:shadow-form rounded-md cursor-pointer bg-[#6A64F1] py-1 px-4 text-center text-base font-semibold text-white outline-none absolute right-2 top-1/2 transform -translate-y-1/2"
+                      onClick={addSubject}
+                    >
+                      {lang[langKey].AddSubject}
+                    </div>
+                  )}
+                  {subjects.length > 0 &&
+                    isSubjectInputActive &&
+                    !areSuggestionsLoading && (
+                      <ul className={styles.subjects}>
+                        {subjects.map((subject) => (
+                          <li
+                            key={subject.id}
+                            onClick={(e) =>
+                              handleSuggestionClick(e, subject.subjectName)
+                            }
+                          >
+                            {markSearchedPart(subject.subjectName)}
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                </div>
               </div>
 
               <div className="mb-5">
@@ -486,7 +601,8 @@ const UploadPage = () => {
                   ""
                 ) : (
                   <p className="text-sm text-red-500 mt-1">
-                    {lang[langKey].selectfile} <br /> {lang[langKey].Allowedformat} - .pdf
+                    {lang[langKey].selectfile} <br />{" "}
+                    {lang[langKey].Allowedformat} - .pdf
                   </p>
                 )}
 

client/src/components/UploadPage/UploadPage.module.css

@@ -0,0 +1,38 @@
+.subjects {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  max-height: 150px;
+  overflow-y: auto;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  background-color: #fff;
+
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+/* Style for each suggestion item */
+.subjects li {
+  padding: 10px;
+  cursor: pointer;
+}
+
+/* Highlight for the matched part of the suggestion */
+.match {
+  background-color: yellow;
+}
+
+/* Example additional styles */
+.input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+button:hover {
+  background-color: #5a54c4;
+}