feat: implement orama search functionality for active members and sta…

…ff pages

.husky/_/.gitignore

@@ -0,0 +1 @@
+*

package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@next/font": "^13.1.1",
+    "@orama/orama": "^2.0.0-beta.10",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
     "autoprefixer": "^10.4.13",

src/components/ActiveMembers.js

@@ -1,24 +1,38 @@
-import React, { useState } from "react"
+import React, { useContext, useState } from "react"
+
+import { OramaContext } from "context/OramaProvider"
 import GetActivemembers from "components/GetActivemembers"
 import Users from "components/Users"
 
 // import contributors data
 import activeMembers from "data/activemembers"
 import Title from "components/Title"
-import { FilterUsers } from "utils/filterUsers"
 
 const ActiveMembers = () => {
+  const { searchDatabase } = useContext(OramaContext)
+
   // state for currentUsers
   const [currentUsers, setCurrentUsers] = useState(activeMembers)
 
-  // filter handler
-  const searchHandler = (event) => {
+  // Search handler
+  const searchHandler = async(event) => {
     event.preventDefault()
-    const filterdUsers = FilterUsers(
-      activeMembers,
-      event.target.value,
-    )
-    setCurrentUsers(filterdUsers)
+
+    const value = event.target.value
+
+    try {
+      const results = await searchDatabase(
+        value
+          ? {
+              term: value,
+            }
+          : null,
+      )
+
+      setCurrentUsers(results)
+    } catch (error) {
+      setCurrentUsers([])
+    }
   }
 
   const [tab] = useState("Active Members")
@@ -50,17 +64,21 @@ const ActiveMembers = () => {
             </svg>
           </div>
         </div>
-      {currentUsers.length
-        ? <div className="m-2 flex flex-wrap items-center justify-center overflow-y-auto pb-4">
-          {tab === "Active Members"
-            ? (
+        {currentUsers.length
+          ? (
+          <div className="m-2 flex flex-wrap items-center justify-center overflow-y-auto pb-4">
+            {tab === "Active Members"
+              ? (
               <GetActivemembers users={currentUsers} />
-              )
-            : (
+                )
+              : (
               <Users users={currentUsers} />
-              )}
-        </div>
-        : <p className="mt-3">User does not exist!</p>}
+                )}
+          </div>
+            )
+          : (
+          <p className="mt-3">User does not exist!</p>
+            )}
       </section>
     </div>
   )

src/components/Staff.js

@@ -1,23 +1,41 @@
-import React, { useState } from "react"
+import React, { useContext, useState } from "react"
+import { OramaContext } from "context/OramaProvider"
+
 import GetStaff from "components/GetStaff"
 import Users from "components/Users"
 
 // import staff data
 import staff from "data/staff"
 import Title from "components/Title"
-import { FilterUsersByNameAndDesc } from "utils/filterUsers"
 
 const Staff = () => {
+  const { searchDatabase } = useContext(OramaContext)
+
   const [tab] = useState("Staff")
   // state for currentUsers
   const [currentUsers, setCurrentUsers] = useState(staff)
 
-  // filter handler
-  const searchHandler = (event) => {
+  // Search handler
+  const searchHandler = async(event) => {
     event.preventDefault()
-    const filterdUsers = FilterUsersByNameAndDesc(staff, event.target.value)
-    setCurrentUsers(filterdUsers)
+
+    const value = event.target.value
+
+    try {
+      const results = await searchDatabase(
+        value
+          ? {
+              term: value,
+            }
+          : null,
+      )
+
+      setCurrentUsers(results)
+    } catch (error) {
+      setCurrentUsers([])
+    }
   }
+
   return (
     <div className="flex items-center justify-center">
       <div className="mt-[3em] flex max-w-bodyContainer items-start justify-start">

src/context/OramaProvider.js

@@ -0,0 +1,51 @@
+import React, { createContext, useCallback, useEffect, useMemo, useState } from "react"
+import { create, insertMultiple, search } from "@orama/orama"
+
+export const OramaContext = createContext(null)
+
+export const OramaProvider = ({ children, schema, initialData }) => {
+  const [db, setDb] = useState(null)
+
+  useEffect(() => {
+    const init = async () => {
+      const database = await create({
+        schema,
+      });
+
+      setDb(database);
+
+      await insertMultiple(database, initialData);
+    };
+
+    init()
+  }, [schema, initialData])
+
+  const searchDatabase = useCallback(
+    async(term) => {
+      if (!db) return null
+
+      if (term) {
+        const searchResult = await search(db, term)
+
+        const documents = searchResult.hits.map(
+          (result) => result.document,
+        )
+
+        return documents
+      } else {
+        const allDocuments = Object.values(db?.data?.docs?.docs)
+
+        return allDocuments
+      }
+    },
+    [db],
+  )
+
+  const value = useMemo(() => ({ searchDatabase }), [searchDatabase])
+
+  return (
+    <OramaContext.Provider value={value}>
+        {children}
+    </OramaContext.Provider>
+  )
+}

src/context/schemas/activemembersSchema.js

@@ -0,0 +1,17 @@
+const activemembersSchema = {
+  name: "string",
+  avatar: {
+    blurDataURL: "string",
+    blurHeight: "number",
+    blurWidth: "number",
+    height: "number",
+    src: "string",
+    width: "number",
+  },
+  github: "string",
+  twitter: "string",
+  blogUrl: "string",
+  linkedin: "string",
+}
+
+export default activemembersSchema

src/context/schemas/staffmembersSchema.js

@@ -0,0 +1,18 @@
+const staffmembersSchema = {
+  name: "string",
+  avatar: {
+    blurDataURL: "string",
+    blurHeight: "number",
+    blurWidth: "number",
+    height: "number",
+    src: "string",
+    width: "number",
+  },
+  github: "string",
+  description: "string",
+  twitter: "string",
+  blogUrl: "string",
+  linkedin: "string",
+}
+
+export default staffmembersSchema

src/data/activemembers.js

@@ -154,7 +154,7 @@ const base = [
     name: "Posandu Mapa",
     avatar: PosanduAvatar,
     github: "Posandu",
-    twitter: null,
+    twitter: "",
     blogUrl: "https://www.tronic247.com",
     contributions: 3,
   },
@@ -198,7 +198,7 @@ const base = [
     twitter: "devvsakib",
     blogUrl: "https://devvsakib.me",
     linkedin: "devvsakib",
-    contributions: null,
+    contributions: 0,
   },
   {
     name: "Ctofanin",
@@ -207,7 +207,7 @@ const base = [
     twitter: "ctoffaninDev",
     blogUrl: "",
     linkedin: "",
-    contributions: null,
+    contributions: 0,
   },
   {
     name: "Haider Ali Punjabi",
@@ -225,7 +225,7 @@ const base = [
     twitter: "krshkun",
     blogUrl: "https://links.krsh.eu.org",
     linkedin: "krshkun",
-    contributions: null,
+    contributions: 0,
   },
 ].sort((a, b) => (a.name > b.name ? 1 : -1))
 

src/pages/_app.js

@@ -45,13 +45,10 @@ export default function App({ Component, pageProps }) {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
 
-      <AnimatePresence
-        mode="wait"
-        onExitComplete={() => window.scrollTo(0, 0)}
-      >
-        <Component {...pageProps} />
+      <AnimatePresence mode="wait" onExitComplete={() => window.scrollTo(0, 0)}>
+          <Component {...pageProps} />
       </AnimatePresence>
-      <GoToTop/>
+      <GoToTop />
     </div>
   )
 }

src/pages/active-members.js

@@ -1,10 +1,15 @@
 import Layout from "components/Layout"
 import ActiveMembers from "components/ActiveMembers"
+import { OramaProvider } from "context/OramaProvider"
+import activeMembers from "data/activemembers"
+import activemembersSchema from "context/schemas/activemembersSchema"
 
 export default function Home() {
   return (
-    <Layout className="flex flex-col justify-start mt-[7rem]">
-      <ActiveMembers />
-    </Layout>
+    <OramaProvider schema={activemembersSchema} initialData={activeMembers}>
+      <Layout className="flex flex-col justify-start mt-[7rem]">
+        <ActiveMembers />
+      </Layout>
+    </OramaProvider>
   )
 }

src/pages/staff.js

@@ -1,10 +1,15 @@
 import Layout from "components/Layout"
 import Staff from "components/Staff"
+import { OramaProvider } from "context/OramaProvider"
+import staffmembersSchema from "context/schemas/staffmembersSchema"
+import staff from "data/staff"
 
 export default function Home() {
   return (
-    <Layout className="flex flex-col justify-start mt-[7rem]">
-      <Staff />
-    </Layout>
+    <OramaProvider schema={staffmembersSchema} initialData={staff}>
+      <Layout className="flex flex-col justify-start mt-[7rem]">
+        <Staff />
+      </Layout>
+    </OramaProvider>
   )
 }