Skip to content

Commit

Permalink
moved search to navbar and displayed in a modal (#1022)
Browse files Browse the repository at this point in the history 
Co-authored-by: Narayan soni <narayansoni854@gmail.com>
  • Loading branch information
@anamika7153 @narayan954
anamika7153 and narayan954 authored Jul 28, 2023
1 parent 9b9faef commit 6fef9ed
Show file tree
Hide file tree
Showing 7 changed files with 310 additions and 128 deletions.
9 changes: 0 additions & 9 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { makeStyles } from "@mui/styles";
// ------------------------------------ Pages ----------------------------------------------------
const About = React.lazy(() => import("./pages/FooterPages/About"));
const Guidelines = React.lazy(() => import("./pages/FooterPages/Guidelines"));
const SearchBar = React.lazy(() => import("./components/SearchBar"));
const Feedback = React.lazy(() => import("./pages/FooterPages/Feedback"));
const LoginScreen = React.lazy(() => import("./pages/Login"));
const PostView = React.lazy(() => import("./pages/PostView"));
Expand Down Expand Up @@ -367,14 +366,6 @@ function App() {
</ErrorBoundary>
}
/>
<Route
path="/dummygram/search"
element={
<ErrorBoundary inApp={true}>
<SearchBar />
</ErrorBoundary>
}
/>
</Routes>
{/* below scroll button must be checked for implementation */}
<FaArrowCircleUp
Expand Down
122 changes: 122 additions & 0 deletions src/components/Navbar/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,10 @@
.navSpace {
margin-left: auto;
display: flex;
align-items: center;
}


.container {
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -66,3 +68,123 @@
#chat-icon {
display: inline-block;
}

/* search file css */

.search-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-top: 120px;
/* margin-left: 17vw; */
}

.search-input {
position: absolute;
height: 100%;
width: 100%;
border-radius: 25px;
background: #fff;
border: none;
font-size: 16px;
padding-left: 20px;
margin-top: -2px;
}
.search-icon {
position: absolute;
right: 0px;
top: 0;
width: 54px;
background: linear-gradient(40deg, #5f85db, #daf1f7);
/* height: 103%; */
height: 43px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 20px;
border-radius: 0 25px 25px 0;
margin: 1px ;
}

.search-icon:hover {
cursor: pointer;
background: linear-gradient(40deg, #daf1f7, #5f85db);
}

.text-white {
color: var(--color);
}

.searched-user-container {
width: 95%;
/* height: 60vh; */
height: 85%;
/* max-height: 90%; */
margin: 20px auto;
border-radius: 5%;
overflow-y: scroll;
display: flex;
padding: 0;
box-shadow: var(--post-box-shadow);
}

.searched-user-sub-container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
width: 100%;
}

.searched-user-li {
display: flex;
gap: 10px;
width: 95%;
padding: 10px;
align-items: center;
cursor: pointer;
border-radius: 22px;
}

.searched-user-avatar {
width: 40px;
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid grey;
}

.searched-user-name {
font-size: 16px;
cursor: default;
color: var(--text-secondary);
cursor: pointer;
}

.searched-user-username {
font-size: 13px;
cursor: default;
color: var(--text-secondary);
cursor: pointer;
}


.search-bar {
position: relative;
height: 45px;
margin: 20px auto;
background: #fff;
border: 1px solid #5f85db;
border-radius: 25px;
display: flex;
justify-content: center;
align-items: center;
}
.search-closeicon {
position: absolute;
cursor: pointer;
top: 10px;
right: 10px;
color: var(--text-grey);
}
.searchbar {color: var(--text-secondary);}
175 changes: 174 additions & 1 deletion src/components/Navbar/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,75 @@
import "./index.css";

import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";

import { AiOutlineInsertRowAbove } from "react-icons/ai";
import ChatIcon from "@mui/icons-material/Chat";
import { Darkmode } from "../../reusableComponents";
import { Logo } from "../../reusableComponents";
import { auth } from "../../lib/firebase";
import { useNavigate } from "react-router-dom";
import SearchIcon from "@mui/icons-material/Search";
import CloseIcon from "@mui/icons-material/Close";
import { FaSearch } from "react-icons/fa";
import blankImg from "../../assets/blank-profile.webp";
import { db } from "../../lib/firebase";
import Modal from "@mui/material/Modal";
import { Box } from "@mui/material";
const PAGESIZE = 7;

function Navbar({ onClick, user, setUser }) {
const navigate = useNavigate();
const [open, setOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
const [searchResults, setSearchResults] = useState([]);
const [debouncedQuery, setDebouncedQuery] = useState("");

const handlequery = () => {
setSearchQuery("");
};
const handleSearchModal = () => {
setOpen(!open);
};

useEffect(() => {
const timerId = setTimeout(() => {
setDebouncedQuery(searchQuery);
}, 2000);

return () => {
clearTimeout(timerId);
};
}, [searchQuery]);

useEffect(() => {
// Call fetchUsers function whenever debouncedQuery changes after the 2-second delay
fetchUsers();
}, [debouncedQuery]);

const handleSearch = (e) => {
setSearchQuery(e.target.value);
};

const fetchUsers = async () => {
const value = searchQuery;
if (value.length > 0) {
const usersCollection = await db
.collection("users")
.orderBy("name", "asc")
.startAt(value.toUpperCase())
.endAt(value.toLowerCase())
.limit(PAGESIZE)
.get();

const fetchedUsers = usersCollection.docs.map((doc) => ({
id: doc.id,
user: doc.data(),
}));
setSearchResults(fetchedUsers);
} else {
setSearchResults([]);
}
};

useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((authUser) => {
Expand All @@ -32,6 +91,9 @@ function Navbar({ onClick, user, setUser }) {
<div className="app__header">
<Logo />
<div className="navSpace">
<div className="searchbar" onClick={handleSearchModal}>
<SearchIcon sx={{ fontSize: 30 }} className="icon" />
</div>
<div className="container">
<div className="rowConvert" onClick={onClick}>
<AiOutlineInsertRowAbove style={{ margin: "auto" }} size={30} />
Expand All @@ -45,6 +107,117 @@ function Navbar({ onClick, user, setUser }) {
</div>
</div>
<Darkmode themeClass="themeButton" />
<Modal
open={open}
onClose={handleSearchModal}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box
sx={{
position: "relative",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
height: "80vh",
boxShadow: 24,
backdropFilter: "blur(7px)",
border: "1px solid #fff",
zIndex: "1000",
textAlign: "center",
borderRadius: "5%",
position: "relative",
}}
className="search-modal"
>
<div className="search-closeicon" onClick={handleSearchModal}>
<CloseIcon sx={{ fontSize: 40 }} />
</div>
<div
style={{
position: "absolute",
top: "50px",
width: "100%",
height: "90%",
}}
>
<div className="search-bar">
<input
type="search"
className="search-input"
value={searchQuery}
placeholder="Search users..."
onChange={handleSearch}
/>
<label className="search-icon">
<FaSearch />
</label>
{!searchQuery ? (
""
) : (
<span
style={{
position: "absolute",
right: "57px",
display: "flex",
color: "rgba(0, 0, 0, 0.8)",
cursor: "pointer",
}}
onClick={handlequery}
>
<CloseIcon sx={{ fontSize: "30" }} />
</span>
)}
</div>
{searchResults.length > 0 ? (
<section className="searched-user-container">
<ul className="searched-user-sub-container">
{searchResults.map(({ id, user }) => {
return (
<li
key={id}
className="searched-user-li"
onClick={() =>
navigate(`/dummygram/user/${user.username}`)
}
>
<img
src={user?.photoURL ? user.photoURL : blankImg}
alt={user.name}
className="searched-user-avatar"
/>
<span
style={{
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
}}
>
<h5 className="searched-user-name">
{user.name}
</h5>
<p className="searched-user-username">
@{user.username}
</p>
</span>
</li>
);
})}
</ul>
</section>
) : (
<Box>
<div
style={{ marginTop: "5px", marginBottom: "1.5rem" }}
align="center"
>
<div className="text-white">Nothing to search</div>
</div>
</Box>
)}
</div>
</Box>
</Modal>
</div>
</div>
)
Expand Down
Loading

0 comments on commit 6fef9ed

Please sign in to comment.