revert narayan954#838

Palakkgoyal · Jul 20, 2023 · 008b5a8 · 008b5a8
1 parent 3e0c02c
commit 008b5a8
Show file tree

Hide file tree

Showing 4 changed files with 238 additions and 301 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -7,7 +7,6 @@ import { auth, db } from "./lib/firebase";
 
 import ErrorBoundary from "./reusableComponents/ErrorBoundary";
 import { FaArrowCircleUp } from "react-icons/fa";
-import { FaSearch } from "react-icons/fa";
 import { GuestSignUpBtn } from "./components";
 import { RowModeContext } from "./hooks/useRowMode";
 import { makeStyles } from "@mui/styles";
@@ -79,8 +78,6 @@ function App() {
   const [postText, setPostText] = useState("");
   const [rowMode, setRowMode] = useState(false);
   const [showScroll, setShowScroll] = useState(false);
-  const [searchText, setSearchText] = useState("");
-  const [searchedPosts, setSearchedPosts] = useState([]);
   const [anonymous, setAnonymous] = useState(false);
 
   const navigate = useNavigate();
@@ -94,10 +91,6 @@ function App() {
     }
   };
 
-  const handleSearch = (e) => {
-    setSearchText(e.target.value);
-  };
-
   const scrollTop = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
@@ -166,24 +159,6 @@ function App() {
     setLoadMorePosts(false);
   }, [loadMorePosts]);
 
-  useEffect(() => {
-    const fetchSearchResults = async () => {
-      setSearchedPosts(
-        posts.filter(
-          (post) =>
-            post.post?.displayName
-              ?.toLowerCase()
-              .includes(searchText?.toLowerCase()) ||
-            post.post?.username
-              ?.toLowerCase()
-              .includes(searchText?.toLowerCase())
-        )
-      );
-    };
-
-    fetchSearchResults();
-  }, [searchText, posts.length]);
-
   return (
     <RowModeContext.Provider value={rowMode}>
       <ErrorBoundary inApp={true}>
@@ -216,88 +191,48 @@ function App() {
               path="/dummygram/"
               element={
                 user ? (
-                  <div style={{ display: "flex", justifyContent: "center" }}>
+                  <div className="flex">
                     <ErrorBoundary inApp={true}>
                       <SideBar anonymous={anonymous} />
                     </ErrorBoundary>
                     <div
-                      style={{
-                        display: "flex",
-                        justifyContent: "center",
-                        flexDirection: rowMode ? "row" : "column",
-                      }}
+                      className="home-posts-container"
+                      style={
+                        !loadingPosts
+                          ? {}
+                          : {
+                              width: "100%",
+                              minHeight: "100vh",
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center",
+                            }
+                      }
                     >
-                      <div
-                        className="home-posts-container"
-                        style={
-                          !loadingPosts
-                            ? {}
-                            : {
-                                width: "100%",
-                                minHeight: "100vh",
-                                display: "flex",
-                                flexDirection: rowMode ? "row" : "column",
-                                justifyContent: "center",
-                                alignItems: "center",
-                              }
-                        }
-                      >
-                        {loadingPosts ? (
-                          <Loader />
-                        ) : (
-                          <div
-                            style={{ display: "flex", flexDirection: "column" }}
-                            className={`${
-                              rowMode ? "app__posts " : "app_posts_column flex"
-                            }`}
-                          >
-                            <div
-                              className="search-bar"
-                              style={{ minWidth: "300px" }}
-                            >
-                              <input
-                                type="search"
-                                className="search-input"
-                                value={searchText}
-                                placeholder="Search Here..."
-                                onChange={handleSearch}
+                      {loadingPosts ? (
+                        <Loader />
+                      ) : (
+                        <div
+                          className={`${
+                            rowMode ? "app__posts" : "app_posts_column flex"
+                          }`}
+                        >
+                          <ErrorBoundary inApp>
+                            {posts.map(({ id, post }) => (
+                              <Post
+                                rowMode={rowMode}
+                                key={id}
+                                postId={id}
+                                user={user}
+                                post={post}
+                                shareModal={setOpenShareModal}
+                                setLink={setCurrentPostLink}
+                                setPostText={setPostText}
                               />
-                              <label className="search-icon">
-                                <FaSearch />
-                              </label>
-                            </div>
-                            <ErrorBoundary inApp={true}>
-                              <div className={rowMode ? "app__posts" : ""}>
-                                {searchText
-                                  ? searchedPosts.map(({ id, post }) => (
-                                      <Post
-                                        rowMode={rowMode}
-                                        key={id}
-                                        postId={id}
-                                        user={user}
-                                        post={post}
-                                        shareModal={setOpenShareModal}
-                                        setLink={setCurrentPostLink}
-                                        setPostText={setPostText}
-                                      />
-                                    ))
-                                  : posts.map(({ id, post }) => (
-                                      <Post
-                                        rowMode={rowMode}
-                                        key={id}
-                                        postId={id}
-                                        user={user}
-                                        post={post}
-                                        shareModal={setOpenShareModal}
-                                        setLink={setCurrentPostLink}
-                                        setPostText={setPostText}
-                                      />
-                                    ))}
-                              </div>
-                            </ErrorBoundary>
-                          </div>
-                        )}
-                      </div>
+                            ))}
+                          </ErrorBoundary>
+                        </div>
+                      )}
                     </div>
                   </div>
                 ) : (

diff --git a/src/components/SearchBar/index.css b/src/components/SearchBar/index.css
@@ -0,0 +1,39 @@
+/* search file css */
+.search-bar {
+  position: relative;
+  height: 50px;
+  max-width: 380px;
+  background: #fff;
+  margin: 30px auto;
+  border: 1px solid #0cc;
+  border-radius: 25px;
+}
+.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, #0cc, #daf1f7);
+  height: 103%;
+  text-align: center;
+  line-height: 50px;
+  color: #fff;
+  font-size: 20px;
+  border-radius: 0 25px 25px 0;
+  margin-top: -2px;
+}
+
+.text-white {
+  color: var(--color);
+}
diff --git a/src/components/SearchBar/index.jsx b/src/components/SearchBar/index.jsx
@@ -1,3 +1,5 @@
+import "./index.css";
+
 import React, { memo, useEffect, useState } from "react";
 import { auth, db } from "../../lib/firebase";
 
@@ -66,10 +68,7 @@ function SearchBar() {
         currentPostLink={currentPostLink}
         postText={postText}
       />
-      <div
-        className="search-bar"
-        style={{ marginTop: "-150px", minWidth: "380px" }}
-      >
+      <div className="search-bar" style={{ marginTop: "-150px" }}>
         <input
           type="search"
           className="search-input"