[Enhancement] Setup Home page functional & Interactive (#1114)

* created: search projects route

* drafted: no data msg

* created projects count routes

* feat: load more projects

* feat: search functionality

* created: search/user route

* feat: user search functionality

* fixes code formatting

Author: Avdhesh-Varshney

backend/Controllers/auth.controller.js

@@ -1,5 +1,5 @@
 import bcrypt from "bcrypt";
-import {readFileSync} from "fs";
+import { readFileSync } from "fs";
 
 import admin from "firebase-admin";
 import { getAuth } from "firebase-admin/auth";
@@ -106,4 +106,21 @@ export const googleAuth = async (req, res) => {
     } catch (err) {
         return res.status(500).json({ "error": err.message });
     }
+}
+
+// Search for users
+
+export const searchUsers = async (req, res) => {
+
+    let { query } = req.body;
+
+    User.find({ "personal_info.username": new RegExp(query, 'i') })
+        .limit(50)
+        .select("personal_info.fullname personal_info.username personal_info.profile_img -_id")
+        .then(users => {
+            return res.status(200).json({ users });
+        })
+        .catch(err => {
+            return res.status(500).json({ error: err.message });
+        })
 }

backend/Controllers/project.controller.js

@@ -70,12 +70,14 @@ export const createProject = async (req, res) => {
 
 export const getProjects = async (req, res) => {
 
+    let { page } = req.body;
     let maxLimit = 5;
 
     Project.find({ draft: false })
         .populate("author", "personal_info.profile_img personal_info.username personal_info.fullname -_id")
         .sort({ "publishedAt": -1 })
         .select("project_id title des banner tags activity publishedAt -_id")
+        .skip((page - 1) * maxLimit)
         .limit(maxLimit)
         .then(projects => {
             return res.status(200).json({ projects });
@@ -98,4 +100,64 @@ export const trendingProjects = async (req, res) => {
         .catch(err => {
             return res.status(500).json({ error: err.message });
         })
+}
+
+export const searchProjects = async (req, res) => {
+
+    let { tag, query, page } = req.body;
+
+    let findQuery;
+
+    if (tag) {
+        findQuery = { tags: tag, draft: false };
+    } else if (query) {
+        findQuery = { draft: false, title: new RegExp(query, 'i') };
+    }
+
+    let maxLimit = 5;
+
+    Project.find(findQuery)
+        .populate("author", "personal_info.profile_img personal_info.username personal_info.fullname -_id")
+        .sort({ "publishedAt": -1 })
+        .select("project_id title des banner tags activity publishedAt -_id")
+        .skip((page - 1) * maxLimit)
+        .limit(maxLimit)
+        .then(projects => {
+            return res.status(200).json({ projects });
+        })
+        .catch(err => {
+            return res.status(500).json({ error: err.message });
+        })
+}
+
+export const allLatestProjectsCount = async (req, res) => {
+
+    Project.countDocuments({ draft: false })
+        .then(count => {
+            return res.status(200).json({ totalDocs: count });
+        })
+        .catch(err => {
+            return res.status(500).json({ error: err.message });
+        })
+}
+
+export const searchProjectsCount = async (req, res) => {
+
+    let { tag, query } = req.body;
+
+    let findQuery;
+
+    if (tag) {
+        findQuery = { tags: tag, draft: false };
+    } else if (query) {
+        findQuery = { draft: false, title: new RegExp(query, 'i') };
+    }
+
+    Project.countDocuments(findQuery)
+        .then(count => {
+            return res.status(200).json({ totalDocs: count });
+        })
+        .catch(err => {
+            return res.status(500).json({ error: err.message });
+        })
 }

backend/Routes/api/auth.routes.js

@@ -1,10 +1,11 @@
 import express from "express";
-import { signup, login, googleAuth } from "../../Controllers/auth.controller.js";
+import { signup, login, googleAuth, searchUsers } from "../../Controllers/auth.controller.js";
 
 const authRoutes = express.Router();
 
 authRoutes.post("/signup", signup);
 authRoutes.post("/login", login);
 authRoutes.post("/google-auth", googleAuth);
+authRoutes.post("/search", searchUsers);
 
 export default authRoutes;

backend/Routes/api/project.routes.js

@@ -1,11 +1,14 @@
 import express from "express";
-import { createProject, getProjects, trendingProjects } from "../../Controllers/project.controller.js";
+import { allLatestProjectsCount, createProject, getProjects, searchProjects, searchProjectsCount, trendingProjects } from "../../Controllers/project.controller.js";
 import { authenticateUser } from "../../Middlewares/auth.middleware.js";
 
 const projectRoutes = express.Router();
 
 projectRoutes.post("/create", authenticateUser, createProject);
-projectRoutes.get("/get", getProjects);
+projectRoutes.post("/get", getProjects);
 projectRoutes.get("/trending", trendingProjects);
+projectRoutes.post("/search", searchProjects);
+projectRoutes.post("/all-latest-count", allLatestProjectsCount);
+projectRoutes.post("/search-count", searchProjectsCount);
 
 export default projectRoutes;

frontend/src/App.jsx

@@ -5,6 +5,7 @@ import { createContext, useEffect, useState } from "react";
 import { lookInSession } from "./common/session";
 import Editor from "./pages/Editor";
 import Home from "./pages/Home";
+import SearchPage from "./pages/Search";
 
 export const UserContext = createContext({});
 
@@ -25,6 +26,7 @@ function App() {
           <Route index element={<Home />} />
           <Route path="login" element={<UserAuthForm type="login" />} />
           <Route path="signup" element={<UserAuthForm type="signup" />} />
+          <Route path="search/:query" element={<SearchPage />} />
         </Route>
       </Routes>
     </UserContext.Provider>

frontend/src/common/filter-pagination-data.jsx

@@ -0,0 +1,20 @@
+import axios from "axios";
+
+export const filterPaginationData = async ({ create_new_arr = false, state, data, page, countRoute, data_to_send = {} }) => {
+
+    let obj;
+
+    if (state !== null && !create_new_arr) {
+        obj = { ...state, results: [...state.results, ...data], page: page }
+    } else {
+        await axios.post(import.meta.env.VITE_SERVER_DOMAIN + countRoute, data_to_send)
+            .then(({ data: { totalDocs } }) => {
+                obj = { results: data, page: 1, totalDocs }
+            })
+            .catch(err => {
+                console.log(err);
+            })
+    }
+
+    return obj;
+}

frontend/src/components/LoadMoreData.jsx

@@ -0,0 +1,15 @@
+const LoadMoreDataBtn = ({ state, fetchDataFun }) => {
+
+    if (state && state.totalDocs > state.results.length) {
+        return (
+            <button
+                onClick={() => fetchDataFun({ page: state.page + 1 })}
+                className="text-gray-800 p-2 px-3 hover:bg-gray-50 rounded-md flex items-center gap-2"
+            >
+                Load More
+            </button>
+        )
+    }
+}
+
+export default LoadMoreDataBtn;

frontend/src/components/Navbar.jsx

@@ -1,5 +1,5 @@
 import { useContext, useState } from "react";
-import { Link, Outlet } from "react-router-dom";
+import { Link, Outlet, useNavigate } from "react-router-dom";
 import { UserContext } from "../App";
 import UserNavigationPanel from "./UserNavigationPanel";
 
@@ -8,12 +8,22 @@ const Navbar = () => {
     const [searchBoxVisibility, setSearchBoxVisibility] = useState(false);
     const [userNavPanel, setUserNavPanel] = useState(false);
 
+    let navigate = useNavigate();
+
     const { userAuth, userAuth: { access_token, profile_img } } = useContext(UserContext);
 
     const handleUserNavPanel = () => {
         setUserNavPanel(currentVal => !currentVal);
     }
 
+    const handleSearch = (e) => {
+        let query = e.target.value;
+
+        if (e.keyCode === 13 && query.length) {
+            navigate(`/search/${query}`);
+        }
+    }
+
     const handleBlur = () => {
         setTimeout(() => {
             setUserNavPanel(false);
@@ -32,6 +42,7 @@ const Navbar = () => {
                         type="text"
                         placeholder="Search"
                         className="w-full md:w-auto bg-gray-100 p-4 pl-6 pr-[12%] md:pr-6 rounded-full placeholder:text-dark-grey md:pl-12"
+                        onKeyDown={handleSearch}
                     />
                     <i className="fi fi-rr-search absolute right-[10%] md:pointer-events-none md:left-5 top-1/2 -translate-y-1/2 text-xl text-dark-grey"></i>
                 </div>

frontend/src/components/NoData.jsx

@@ -0,0 +1,9 @@
+const NoDataMessage = ({ message }) => {
+    return (
+        <div className="text-center w-full p-4 rounded-full bg-gray-50 mt-4">
+            <p>{message}</p>
+        </div>
+    )
+}
+
+export default NoDataMessage;

frontend/src/components/UserCard.jsx

@@ -0,0 +1,19 @@
+import { Link } from "react-router-dom";
+
+const UserCard = ({ user }) => {
+
+    let { personal_info: { fullname, username, profile_img } } = user;
+
+    return (
+        <Link to={`/user/${username}`} className="flex gap-5 items-center mb-5">
+            <img src={profile_img} alt="" className="w-14 h-14 rounded-full" />
+
+            <div>
+                <h1 className="font-medium text-xl line-clamp-2">{fullname}</h1>
+                <p className="text-gray-600">@{username}</p>
+            </div>
+        </Link>
+    );
+}
+
+export default UserCard;