From 9d1767eee377ab92f9b4722296f401a74fc46fd3 Mon Sep 17 00:00:00 2001
From: Matt Kirby <MattJKirby@outlook.com>
Date: Sun, 16 Apr 2023 17:57:18 +0100
Subject: [PATCH] Added NavMenu component
---
.../src/components/navigation/NavBar.tsx | 50 +++++++++++++++++--
.../src/components/navigation/NavMenu.tsx | 43 ++++++++++++++++
2 files changed, 90 insertions(+), 3 deletions(-)
create mode 100644 daily-thought-frontend/src/components/navigation/NavMenu.tsx
diff --git a/daily-thought-frontend/src/components/navigation/NavBar.tsx b/daily-thought-frontend/src/components/navigation/NavBar.tsx
index d1f27730..aac83c01 100644
--- a/daily-thought-frontend/src/components/navigation/NavBar.tsx
+++ b/daily-thought-frontend/src/components/navigation/NavBar.tsx
@@ -1,8 +1,10 @@
import { FC, Fragment, PropsWithChildren, useEffect, useState } from 'react'
import { Disclosure, Menu, Transition } from '@headlessui/react'
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
-import { PhotoIcon, UserCircleIcon } from '@heroicons/react/24/solid'
+import { UserCircleIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid'
import { User } from '@/types/user'
+import NavMenu from './NavMenu'
+import BasicField from '../form/BasicField'
const navigation = [
{ name: 'My Feed', href: '/feed', current: true }
@@ -23,7 +25,36 @@ type NavBarProps = {
const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
children,
user
-}) => {
+}) => {
+ const [searchQuery, setSearchQuery] = useState<string>("");
+ const [searchResults, setSearchResults] = useState([]);
+
+ const handleSearch = async (query: string) => {
+ setSearchQuery(query);
+
+ const JSONdata = JSON.stringify({query: query})
+ const endpoint = `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}api/search`
+ const options = {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSONdata,
+ }
+ const response = await fetch(endpoint, options)
+ const result = await response.json()
+
+ if(result.error !== undefined){
+ setError(result.error.error)
+ } else {
+ if(result.token !== undefined && result.username !== undefined){
+ sessionStorage.setItem('username', result.username)
+ sessionStorage.setItem('token', result.token)
+ Router.push("/feed")
+ }
+ }
+ }
+
return (
<>
<div className="min-h-full min-w-full">
@@ -63,9 +94,22 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
{user !== undefined &&
<div className="hidden md:block">
<div className="flex items-center">
+
+ <NavMenu icon={<MagnifyingGlassIcon className="h-6 w-6" aria-hidden="true"/>} width={"w-64"}>
+ <BasicField name="search" placeholder="Search users" onChange={handleSearch}/>
+
+ {!searchQuery &&
+ <div className='flex items-center justify-center'>
+ <p className='text-xs text-gray-500'>
+ Enter a search query to add friends
+ </p>
+ </div>
+ }
+ </NavMenu>
+
<button
type="button"
- className="rounded-full bg-c-pink p-1 text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink"
+ className="ml-3 rounded-full bg-c-pink p-1 text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink"
>
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
diff --git a/daily-thought-frontend/src/components/navigation/NavMenu.tsx b/daily-thought-frontend/src/components/navigation/NavMenu.tsx
new file mode 100644
index 00000000..d8a7b58f
--- /dev/null
+++ b/daily-thought-frontend/src/components/navigation/NavMenu.tsx
@@ -0,0 +1,43 @@
+import { Menu, Transition } from "@headlessui/react";
+import { FC, Fragment, PropsWithChildren } from "react";
+
+type NavMenuProps = {
+ icon: any,
+ width: string
+}
+
+const NavMenu: FC<PropsWithChildren<NavMenuProps>> = ({
+ children,
+ icon,
+ width
+}) => {
+ return (
+ <Menu as="div" className="relative ml-3">
+ <div>
+ <Menu.Button className="ml-3 rounded-full bg-c-pink p-1 text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink">
+ {icon}
+ </Menu.Button>
+ </div>
+ <Transition
+ as={Fragment}
+ enter="transition ease-out duration-100"
+ enterFrom="transform opacity-0 scale-95"
+ enterTo="transform opacity-100 scale-100"
+ leave="transition ease-in duration-75"
+ leaveFrom="transform opacity-100 scale-100"
+ leaveTo="transform opacity-0 scale-95"
+ >
+ <Menu.Items className={`absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${width}`}>
+ {/* <div className='w-full border-b'>
+ <p className='block px-4 py-2 text-xs text-gray-400'>asdf</p>
+ </div> */}
+ <div className="p-2">
+ {children}
+ </div>
+ </Menu.Items>
+ </Transition>
+ </Menu>
+ )
+}
+
+export default NavMenu;
\ No newline at end of file
--
GitLab