Merge pull request #65 from wizelineacademy/H005-SearchSugHistory

H005 search sug history
wizelineacademy · Jun 5, 2024 · 5e37757 · 5e37757
2 parents eda255e + ee81db1
commit 5e37757
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 127 deletions.
diff --git a/knowx/.eslintrc.json b/knowx/.eslintrc.json
@@ -2,13 +2,14 @@
   "extends": [
     "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",
-    // "plugin:@typescript-eslint/strict",
     "plugin:jsx-a11y/recommended",
     "prettier"
   ],
   "plugins": ["@typescript-eslint", "jsx-a11y", "prettier"],
   "rules": {
     "@next/next/no-css-tags": 1,
-    "prettier/prettier": ["error"]
+    "prettier/prettier": ["error"],
+    "react/no-unescaped-entities": "off",
+    "@next/next/no-page-custom-font": "off"
   }
 }
diff --git a/knowx/package-lock.json b/knowx/package-lock.json
diff --git a/knowx/src/app/components/Dashboard/InputBar.tsx b/knowx/src/app/components/Dashboard/InputBar.tsx
@@ -1,21 +1,76 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+
 "use client"
+import React, { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
 import Image from "next/image"
 import { navigate } from "@/app/actions/redirect"
 import { initialSearchAction, clearSearches } from "@/app/actions/search"
-import { useState } from "react"
-import { Button } from "@nextui-org/react"
-const InputBar = () => {
-  let query: string = ""
+import { SimpleHistoryType } from "@/app/interfaces"
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  Button,
+} from "@nextui-org/react"
 
+const InputBar = ({ history }: { history: SimpleHistoryType[] | [] }) => {
+  const [query, setQuery] = useState("")
+  const [suggestions, setSuggestions] = useState<SimpleHistoryType[]>(history)
   const [isLoading, setIsLoading] = useState(false)
 
+  useEffect(() => {
+    if (query && history && history.length > 0) {
+      const queryWords = query.toLowerCase().split(" ")
+      const filteredSuggestions = history.filter((search) =>
+        queryWords.some((word) => search.search?.toLowerCase().includes(word)),
+      )
+      setSuggestions(filteredSuggestions)
+    } else {
+      setSuggestions([])
+    }
+  }, [query, history])
+
+  const router = useRouter()
+
+  const content = (suggestion: any) => (
+    <PopoverContent className="w-[240px]">
+      <div className="w-full px-1 py-2">
+        <div className="mt-2 flex w-full flex-col gap-2">
+          <Button
+            type="button"
+            onClick={() => router.push(`/history/${suggestion.id}`)}
+            aria-hidden="true"
+          >
+            Historial
+          </Button>
+          <Button
+            onClick={() => {
+              setQuery(suggestion.search || "")
+              setSuggestions([])
+              setIsLoading(true)
+              clearSearches()
+              initialSearchAction(suggestion.search)
+              navigate(suggestion.search)
+            }}
+            aria-hidden="true"
+          >
+            Nueva busqueda
+          </Button>
+        </div>
+      </div>
+    </PopoverContent>
+  )
+
   return (
     <div className="relative w-5/6">
       <input
-        name=""
+        name="search"
         placeholder="Search for a topic..."
         className="left-20 right-20 h-20 w-full rounded-lg bg-black px-8 text-lg text-white dark:bg-backgroundLight dark:text-black"
-        onChange={(e) => (query = e.target.value)}
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
         onKeyDown={(e) => {
           if (e.key === "Enter") {
             setIsLoading(true)
@@ -36,6 +91,7 @@ const InputBar = () => {
           initialSearchAction(query)
           navigate(query)
         }}
+        aria-hidden="true"
       >
         {!isLoading && (
           <Image
@@ -48,6 +104,30 @@ const InputBar = () => {
           />
         )}
       </Button>
+
+      {history && history.length > 0 && suggestions.length > 0 && (
+        <ul className="absolute mt-2 w-full rounded-lg bg-white text-white shadow-lg dark:bg-backgroundLight dark:text-black">
+          {suggestions.map((suggestion, index) => (
+            <Popover
+              key={index}
+              showArrow
+              offset={10}
+              placement="bottom"
+              backdrop={"blur"}
+            >
+              <PopoverTrigger>
+                <li className="flex cursor-pointer items-center justify-between p-2 hover:bg-gray-200 dark:hover:bg-gray-200">
+                  <span>{suggestion.search}</span>
+                  <span className="text-gray-400">
+                    {suggestion.timestamp?.toLocaleString()}
+                  </span>
+                </li>
+              </PopoverTrigger>
+              {content(suggestion)}
+            </Popover>
+          ))}
+        </ul>
+      )}
     </div>
   )
 }

diff --git a/knowx/src/app/dashboard/page.tsx b/knowx/src/app/dashboard/page.tsx
@@ -5,16 +5,28 @@ import { redirect } from "next/navigation"
 import Header from "../components/Header"
 import InfoComponent from "../components/informational/InfoComponent"
 
+import { getServerSession } from "next-auth"
+import { getUserId } from "../../../db/insertActions"
+import { SimpleHistoryType } from "../interfaces"
+import { getSimpleUserHistory } from "../../../db/getActions"
+
 export default async function Home() {
   if (!(await checkSession())) {
     redirect("/auth")
   }
 
+  const session = await getServerSession()
+  const userId = await getUserId({ newEmail: session?.user?.email || "" })
+  const history: SimpleHistoryType[] =
+    (await getSimpleUserHistory({
+      userId: userId,
+    })) || []
+
   return (
     <main className="bg-backgroundLight dark:bg-backgroundDark">
       <Header isDashboard={true}>
         <div className="relative flex h-[70%] w-5/6 max-w-6xl items-center justify-center">
-          <InputBar />
+          <InputBar history={history} />
         </div>
       </Header>
       <InfoComponent title="Topic Search" icon={1}>

diff --git a/knowx/tsconfig.json b/knowx/tsconfig.json
@@ -1,10 +1,6 @@
 {
   "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -22,11 +18,10 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     },
-    "target": "ES2017"
+    "target": "ES2017",
+    "noImplicitAny": false
   },
   "include": [
     "next-env.d.ts",
@@ -35,8 +30,5 @@
     ".next/types/**/*.ts",
     "types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules",
-    "sst.config.ts"
-  ]
+  "exclude": ["node_modules", "sst.config.ts"]
 }