Fix search and other minor bugs (#119)

- Fix search not working NYALA-349 - Fix Footer links NYALA-364 - Fix user menu z-index NYALA-365
NyalaDev · Jun 16, 2021 · 5d444a3 · 5d444a3
1 parent bea0992
commit 5d444a3
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 38 deletions.
diff --git a/src/common/config.ts b/src/common/config.ts
@@ -4,5 +4,11 @@ export const AppLocales: Array<AppLocale> = ['en', 'ar', 'am', 'sw']
 
 const appConfig = {
   strapiURL: process.env.GATSBY_STRAPI_API_URL || 'http://localhost:1437',
+  dashboardURL:
+    process.env.GATSBY_DASHBOARD_URL || 'https://edu-dashboard.barmaga.io',
+  algolia: {
+    appId: process.env.GATSBY_ALGOLIA_APP_ID || '',
+    searchKey: process.env.GATSBY_ALGOLIA_SEARCH_KEY || '',
+  },
 }
 export { appConfig }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -58,7 +58,7 @@ const Footer: React.FC = () => {
         <div className="brmg-container flex justify-between flex-col md:flex-row w-full">
           <ul className="flex items-center justify-center flex-col md:flex-row ">
             <li className=" p-1">
-              <a href="/courses">{t('courses')}</a>
+              <Link to="/courses">{t('courses')}</Link>
             </li>
             |
             <li className="p-1">

diff --git a/src/components/Header/MobileMenu.tsx b/src/components/Header/MobileMenu.tsx
@@ -118,6 +118,9 @@ const MobileMenu: React.FC = () => {
             </div>
           )}
         </div>
+        <div className="px-4 py-2">
+          <Search />
+        </div>
       </div>
     </nav>
   )

diff --git a/src/components/Header/UserMenu.tsx b/src/components/Header/UserMenu.tsx
@@ -3,6 +3,7 @@ import { navigate } from 'gatsby'
 import { Link, useTranslation } from 'gatsby-plugin-react-i18next'
 import { AuthContext } from '../../contexts/AuthContext'
 import { getProfilePicuteUrlFromUserObject } from '../../common/util'
+import { appConfig } from '../../common/config'
 
 const UserMenu: React.FC = () => {
   const { currentUser, isTeacher, logout } = useContext(AuthContext)
@@ -16,9 +17,7 @@ const UserMenu: React.FC = () => {
     navigate('/')
   }
   const profilePictureUrl = getProfilePicuteUrlFromUserObject(currentUser)
-  const dashboardUrl =
-    process.env.GATSBY_DASHBOARD_URL || 'https://edu-dashboard.barmaga.io'
-  // FIXME: Change Dropdown on desktop to open right
+
   return (
     <div className="ml-3 relative">
       <div className="mr-4">
@@ -41,7 +40,7 @@ const UserMenu: React.FC = () => {
       <div
         className={`${
           open ? '' : 'hidden'
-        } origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg`}
+        } origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg z-50`}
       >
         <div
           className="py-1 rounded-md bg-white shadow-xs"
@@ -51,7 +50,7 @@ const UserMenu: React.FC = () => {
         >
           {isTeacher && (
             <a
-              href={dashboardUrl}
+              href={appConfig.dashboardURL}
               className="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
               role="menuitem"
             >

diff --git a/src/components/LandingPage/HeroSection.tsx b/src/components/LandingPage/HeroSection.tsx
@@ -54,6 +54,7 @@ const HeroSection: React.FC = () => {
           <video
             className="w-auto h-96 rounded-xl"
             src="https://cdn.nyaladev.com/barmaga.io/barmaga-landing.mp4"
+            poster="https://cdn.nyaladev.com/barmaga.io/why_barmaga.png"
             controls
           >
             <source

diff --git a/src/components/Search/SearchField.tsx b/src/components/Search/SearchField.tsx
@@ -13,8 +13,15 @@ const SearchBox: React.FC<SearchBoxProps> = ({ onSearch }) => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setText(e.target.value)
   }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter') {
+      onSearch(text)
+    }
+  }
+
   return (
-    <form onSubmit={() => onSearch(text)}>
+    <>
       <input
         value={text}
         type="search"
@@ -23,6 +30,7 @@ const SearchBox: React.FC<SearchBoxProps> = ({ onSearch }) => {
         className={`w-full bg-gray-100 text-sm text-gray-800 transition border focus:outline-none focus:border-gray-700 rounded py-1 px-2 ${
           isRtl ? 'pl-10' : 'pr-10'
         } appearance-none leading-normal`}
+        onKeyDown={handleKeyDown}
       />
       <div
         className="absolute search-icon"
@@ -36,7 +44,7 @@ const SearchBox: React.FC<SearchBoxProps> = ({ onSearch }) => {
           <path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z" />
         </svg>
       </div>
-    </form>
+    </>
   )
 }
 export default SearchBox
diff --git a/src/components/Search/SearchResult.tsx b/src/components/Search/SearchResult.tsx
@@ -2,11 +2,13 @@ import React from 'react'
 import { Link } from 'gatsby-plugin-react-i18next'
 import Spinner from '../General/Spinner'
 import { getYoutubeThumbnail } from '../../common/util'
+import HtmlViewer from '../Courses/HtmlViewer'
 
 export type AlgoliaSearchResult = {
   id: number
   title: string
   slug: string
+  description: string
   lectures: {
     url: string
   }[]
@@ -19,38 +21,41 @@ type SearchResultProps = {
 const SearchResult: React.FC<SearchResultProps> = ({ searching, result }) => {
   if (!searching && !result?.length) return null
   return (
-    <div
-      className="absolute left-0 bg-white  py-2 w-64 mt-2 shadow-md z-10"
-      dir="ltr"
-    >
-      {searching && <Spinner />}
-      <ul className="w-full max-w-md">
-        {result.map(course => {
-          const {
-            lectures: [firstLecture],
-          } = course
-          const { url: imageUrl } = firstLecture
-          return (
-            <li
-              key={course.id}
-              className="p-4 mb-3 flex justify-between items-center bg-white border-b-2"
-            >
-              <Link to={`/courses/${course.slug}`}>
-                <div className="flex items-center">
-                  <img
-                    className="w-10 h-10"
-                    src={getYoutubeThumbnail(imageUrl)}
-                    alt={course.title}
-                  />
-                  <p className="ml-2 text-gray-700 font-semibold tracking-wide">
+    <div className="absolute z-10 -ml-4 mt-3 transform px-2 w-full md:w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2">
+      <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
+        <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
+          {searching && <Spinner />}
+          {result.map(course => {
+            const {
+              lectures: [firstLecture],
+            } = course
+            const { url: imageUrl } = firstLecture
+
+            return (
+              <Link
+                to={`/courses/${course.slug}`}
+                className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50"
+              >
+                <img
+                  className="w-10 h-10"
+                  src={getYoutubeThumbnail(imageUrl)}
+                  alt={course.title}
+                />
+                <div className="ml-4">
+                  <p className="text-base font-medium text-gray-900">
                     {course.title}
                   </p>
+
+                  <HtmlViewer
+                    className="mt-1 text-sm text-gray-500"
+                    data={course.description}
+                  />
                 </div>
               </Link>
-            </li>
-          )
-        })}
-      </ul>
+            )
+          })}
+        </div>
+      </div>
     </div>
   )
 }

diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
@@ -3,12 +3,14 @@ import algoliasearch from 'algoliasearch/lite'
 import SearchBox from './SearchField'
 import SearchResult, { AlgoliaSearchResult } from './SearchResult'
 import useClickOutside from '../../hooks/useClickOutside'
+import { appConfig } from '../../common/config'
 
 const searchClient = algoliasearch(
-  process.env.GATSBY_ALGOLIA_APP_ID!,
-  process.env.GATSBY_ALGOLIA_SEARCH_KEY!
+  appConfig.algolia.appId,
+  appConfig.algolia.searchKey
 )
 const indexName = process.env.GATSBY_ALGOLIA_INDEX_NAME || 'dev_course'
+
 const Search: React.FC = () => {
   const rootRef = createRef<HTMLDivElement>()
   const [searching, setSearching] = useState(false)