Merge pull request #17 from SundeepChand/feat/search

Implement Search

Author: kaybhutani

src/assets/scss/components/index.scss

@@ -18,3 +18,4 @@
 @import 'editableLabel';
 @import 'footer';
 @import 'alerts';
+@import 'search';

src/assets/scss/components/search.scss

@@ -0,0 +1,72 @@
+.search-input {
+  border: 0;
+  border-bottom: 2px solid $dark-color;
+  border-radius: 0;
+  justify-content: space-between;
+  outline: none;
+  padding: 0px 10px;
+  padding-left: 0px;
+  position: relative;
+  width: 290px;
+
+  .dropdown-container {
+    .btn {
+      height: 30px;
+    }
+
+    .eos-icons {
+      padding: 0px;
+    }
+  }
+
+  .filter-title {
+    display: none;
+  }
+
+  input {
+    border: 0px;
+    outline: none;
+    padding: 0px;
+    width: 147px;
+  }
+}
+
+.user-suggest-dropdown {
+  background-color: $eos-white;
+  border-radius: 10px 0px 10px 10px;
+  height: auto;
+  max-height: 160px;
+  overflow-y: scroll;
+  position: absolute;
+  top: 110%;
+  width: 197px;
+  z-index: 4;
+
+  .avatar {
+    height: 2em;
+    width: 2em;
+  }
+
+  .dropdown-list {
+    width: 100%;
+  }
+
+  .user-row {
+    border-bottom: 1px solid $border-gray;
+    padding: 8px;
+    width: 92%;
+
+    &:hover {
+      background-color: $gray-bg;
+      cursor: pointer;
+    }
+  }
+}
+
+.close-btn-div {
+  width: 15px;
+}
+
+.close-btn {
+  cursor: pointer;
+}

src/assets/scss/pages/home.scss

@@ -12,14 +12,22 @@ $subheader-font-size: 18px;
   }
 }
 
-.options-bar {
+.search-bar {
   align-items: center;
   background-color: $eos-white;
   border-radius: 10px;
+  justify-content: space-between;
   margin: 16px 0px 16px 0px;
   padding: 8px 20px;
 }
 
+.options-bar {
+  align-items: center;
+  background-color: $eos-white;
+  border-radius: 10px;
+  padding: 8px 20px;
+}
+
 .link-default {
   padding-left: 0.5em;
 }

src/components/UsersSuggestionDropdown.js

@@ -0,0 +1,119 @@
+import React, { useEffect, useRef, useState } from 'react'
+import axios from 'axios'
+import { trackPromise, usePromiseTracker } from 'react-promise-tracker'
+import { apiURL } from '../config.json'
+import LoadingIndicator from '../modules/LoadingIndicator'
+
+const UsersSuggestionDropdown = ({
+  isOpen,
+  userTerm,
+  setUserTerm,
+  setUserQuery,
+  setUsersSuggestionOpen
+}) => {
+  const [usersToSuggest, setUsersToSuggest] = useState([])
+
+  const { promiseInProgress } = usePromiseTracker({
+    area: 'user-suggest-dropdown'
+  })
+
+  const dropDown = useRef(null)
+
+  const cancelToken = useRef()
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropDown.current && !dropDown.current.contains(event.target)) {
+        setUsersSuggestionOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [setUsersSuggestionOpen])
+
+  useEffect(() => {
+    if (userTerm.length <= 0) {
+      setUsersSuggestionOpen(false)
+      return
+    }
+
+    if (typeof cancelToken.current !== typeof undefined) {
+      cancelToken.current.cancel()
+    }
+
+    cancelToken.current = axios.CancelToken.source()
+
+    const fetchUsers = async () => {
+      const response = await axios.post(
+        `${apiURL}/graphql`,
+        {
+          query: `query {
+            users (where: {
+              username_contains: "${userTerm}"
+            }) {
+              id
+              username
+              profilePicture {
+                url
+              }
+            }
+          }`
+        },
+        { cancelToken: cancelToken.current.token }
+      )
+      setUsersToSuggest(response.data.data?.users ?? [])
+    }
+    if (userTerm.length > 0) {
+      trackPromise(fetchUsers(), 'user-suggest-dropdown')
+    } else {
+      setUsersToSuggest([])
+    }
+  }, [userTerm, setUsersSuggestionOpen])
+
+  if (!isOpen) {
+    return null
+  }
+  return (
+    <div
+      ref={dropDown}
+      className='flex flex-center dropdown user-suggest-dropdown'
+    >
+      {promiseInProgress ? (
+        <LoadingIndicator />
+      ) : usersToSuggest.length > 0 ? (
+        <ul className='dropdown-list'>
+          {usersToSuggest.map((user) => (
+            <li
+              key={user.id}
+              onClick={() => {
+                setUserTerm(user.username)
+                setUserQuery(user.username)
+                setUsersSuggestionOpen(false)
+              }}
+              className='user-data'
+            >
+              <div className='user-row flex flex-space-between flex-align-center'>
+                <img
+                  className='avatar'
+                  src={
+                    user?.profilePicture?.url ??
+                    `https://avatars.dicebear.com/api/jdenticon/${user.username}.svg`
+                  }
+                  alt='Default User Avatar'
+                ></img>
+                <span>{user.username}</span>
+              </div>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p>No users found</p>
+      )}
+    </div>
+  )
+}
+
+export default UsersSuggestionDropdown