fix search and add css

HackYourFuture · Dec 5, 2019 · 659947d · 659947d
1 parent e8dece4
commit 659947d
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 11 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -492,6 +492,41 @@ button {
   margin-bottom: 0.5rem;
 }
 
+/* Developers */
+.div_search {
+  display: flex;
+  align-items: center;
+  background: #2f3640;
+  border-radius: 40px;
+  height: 40px;
+  margin: 5px;
+  margin-left: -5px;
+  width: 40px;
+  overflow: hidden;
+  transition: width 0.9s;
+}
+
+.search-btn {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: -40px;
+  border-radius: 50%;
+  color: white;
+}
+
+input[class='search-txt'] {
+  border: none;
+  background: none;
+  padding: 6px 0 0 20px;
+  color: white;
+}
+
+.div_search:hover {
+  width: 40%;
+}
 /* Mobile Styles */
 @media (max-width: 700px) {
   .container {

diff --git a/client/src/components/profiles/Profiles.js b/client/src/components/profiles/Profiles.js
@@ -13,9 +13,11 @@ const Profiles = ({ getProfiles, profile: { profiles, loading } }) => {
 
   const [searchField, setSearchField] = useState('');
 
-  const filteredProfiles = profiles.filter(profile =>
-    profile.user.name.toLowerCase().includes(searchField.toLowerCase()),
-  );
+  const filteredProfiles = profiles.filter(profile => {
+    const userName = profile.user.name.toLowerCase().substring(0, 3);
+    const searchText = searchField.toLowerCase().substring(0, 3);
+    return userName.includes(searchText);
+  });
   console.log(filteredProfiles);
 
   const [currentPage, setCurrentPage] = useState(1);
@@ -40,14 +42,18 @@ const Profiles = ({ getProfiles, profile: { profiles, loading } }) => {
           <p className="lead">
             <i className="fab fa-connectdevelop" /> Browse and connect with developers
           </p>
-          <input
-            type="search"
-            placeholder="search for developers"
-            onChange={e => {
-              setSearchField(e.target.value);
-              setCurrentPage(1);
-            }}
-          />
+          <div className="div_search">
+            <input
+              className="search-txt"
+              type="search"
+              placeholder="search for developers"
+              onChange={e => {
+                setSearchField(e.target.value);
+                setCurrentPage(1);
+              }}
+            />
+            <i className="search-btn fas fa-search"></i>
+          </div>
           <Pagination
             profilesPerPage={profilesPerPage}
             totalProfiles={filteredProfiles.length}