From 173b8ce2da00c18958dd3ff166f641256eae2ef4 Mon Sep 17 00:00:00 2001
From: Anirudh <70373803+techwithanirudh@users.noreply.github.com>
Date: Sat, 5 Aug 2023 19:54:56 +0530
Subject: [PATCH] feat: Add SearchBar component to Nav (#760)
* feat: Add SearchBar component to Nav
This commit adds the SearchBar component to the navigation bar in order to enable search functionality. Now users can easily search for specific items within the navigation.
* Refactor Nav and SearchBar components
The commit refactors the Nav component by moving the SearchBar component within the Nav component. This change ensures that the SearchBar is rendered only when the isSearchEnabled condition is true.
In addition, the commit also modifies the styling of the SearchBar component by adding rounded corners and border to enhance the visual appearance.
* Update gitignore
* C
Refactor search bar styles
This commit refactors the styles of the search bar component in the Nav component. The border color and hover background color have been modified to improve the visual appearance.
* Fix margin
* Rename Logout.jsx to Logout.tsx and update import statements accordingly.
Replace the use of Recoil and store with useLocalize hook for localization.
Update the usage of localize function by removing the lang parameter.
---
.gitignore | 1 +
.../components/Nav/{Logout.jsx => Logout.tsx} | 11 ++++-------
client/src/components/Nav/Nav.tsx | 6 ++++--
client/src/components/Nav/NavLinks.jsx | 18 ++----------------
client/src/components/Nav/NewChat.jsx | 2 +-
client/src/components/Nav/SearchBar.jsx | 2 +-
6 files changed, 13 insertions(+), 27 deletions(-)
rename client/src/components/Nav/{Logout.jsx => Logout.tsx} (61%)
diff --git a/.gitignore b/.gitignore
index 711c8b0cc3..cedb6ac0ad 100644
--- a/.gitignore
+++ b/.gitignore
@@ -71,6 +71,7 @@ junit.xml
# meilisearch
meilisearch
+meilisearch.exe
data.ms/*
auth.json
diff --git a/client/src/components/Nav/Logout.jsx b/client/src/components/Nav/Logout.tsx
similarity index 61%
rename from client/src/components/Nav/Logout.jsx
rename to client/src/components/Nav/Logout.tsx
index f0e8e4751d..7d97e5a003 100644
--- a/client/src/components/Nav/Logout.jsx
+++ b/client/src/components/Nav/Logout.tsx
@@ -1,13 +1,11 @@
import { forwardRef } from 'react';
import { LogOutIcon } from '../svg';
import { useAuthContext } from '~/hooks/AuthContext';
-import { useRecoilValue } from 'recoil';
-import store from '~/store';
-import { localize } from '~/localization/Translation';
+import { useLocalize } from '~/hooks';
const Logout = forwardRef(() => {
- const { user, logout } = useAuthContext();
- const lang = useRecoilValue(store.lang);
+ const { logout } = useAuthContext();
+ const localize = useLocalize();
const handleLogout = () => {
logout();
@@ -20,8 +18,7 @@ const Logout = forwardRef(() => {
onClick={handleLogout}
>
- {user?.username || localize(lang, 'com_nav_user')}
- {localize(lang, 'com_nav_log_out')}
+ {localize('com_nav_log_out')}
);
});
diff --git a/client/src/components/Nav/Nav.tsx b/client/src/components/Nav/Nav.tsx
index 97cd37e792..00c7eab91c 100644
--- a/client/src/components/Nav/Nav.tsx
+++ b/client/src/components/Nav/Nav.tsx
@@ -7,6 +7,7 @@ import {
import { useCallback, useEffect, useRef, useState } from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import NewChat from './NewChat';
+import SearchBar from './SearchBar';
import NavLinks from './NavLinks';
import { Panel, Spinner } from '~/components';
import { Conversations, Pages } from '../Conversations';
@@ -166,7 +167,7 @@ export default function Nav({ navVisible, setNavVisible }) {
-
+
diff --git a/client/src/components/Nav/NavLinks.jsx b/client/src/components/Nav/NavLinks.jsx
index 6d5bd81332..bdb15ea9e1 100644
--- a/client/src/components/Nav/NavLinks.jsx
+++ b/client/src/components/Nav/NavLinks.jsx
@@ -2,20 +2,19 @@ import { Download } from 'lucide-react';
import { useRecoilValue } from 'recoil';
import { Fragment, useState } from 'react';
import { Menu, Transition } from '@headlessui/react';
-import SearchBar from './SearchBar';
import ClearConvos from './ClearConvos';
import Settings from './Settings';
import NavLink from './NavLink';
import Logout from './Logout';
import { ExportModel } from './ExportConversation';
-import { LinkIcon, DotsIcon, GearIcon, TrashIcon } from '~/components';
+import { LinkIcon, DotsIcon, GearIcon } from '~/components';
import { localize } from '~/localization/Translation';
import { useAuthContext } from '~/hooks/AuthContext';
import { cn } from '~/utils/';
import store from '~/store';
-export default function NavLinks({ clearSearch, isSearchEnabled }) {
+export default function NavLinks() {
const [showExports, setShowExports] = useState(false);
const [showClearConvos, setShowClearConvos] = useState(false);
const [showSettings, setShowSettings] = useState(false);
@@ -76,11 +75,6 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
leaveTo="transform opacity-0 scale-95"
>
- {isSearchEnabled && (
-
-
-
- )}
-
- }
- text={localize(lang, 'com_nav_clear_conversation')}
- clickHandler={() => setShowClearConvos(true)}
- />
-