QuivrHQ/quivr
1
1
Fork 0
mirror of https://github.com/QuivrHQ/quivr.git synced 2024-11-10 13:35:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): remove notification banner (#2178)

Browse Source 
# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):
This commit is contained in:
Antoine Dewez 2024-02-10 16:16:24 -08:00 committed by GitHub
parent f40361fde6
commit a8cbba7afc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 0 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/App.tsx
View File

@ -8,7 +8,6 @@ import { PropsWithChildren, useEffect } from "react";
import { BrainCreationProvider } from "@/lib/components/AddBrainModal/components/AddBrainSteps/brainCreation-provider";
import { Menu } from "@/lib/components/Menu/Menu";
import { useOutsideClickListener } from "@/lib/components/Menu/hooks/useOutsideClickListener";
import { NotificationBanner } from "@/lib/components/NotificationBanner";
import SearchModal from "@/lib/components/SearchModal/SearchModal";
import {
BrainProvider,
@ -61,7 +60,6 @@ const App = ({ children }: PropsWithChildren): JSX.Element => {
<div className="flex flex-1 flex-col overflow-auto">
<SearchModalProvider>
<SearchModal />
<NotificationBanner />
<div className="relative h-full w-full flex justify-stretch items-stretch overflow-auto">
<Menu />
<div onClick={onClickOutside} className="flex-1 overflow-scroll">

54
frontend/lib/components/NotificationBanner/NotificationBanner.tsx
View File

@ -1,54 +0,0 @@
import { usePathname } from "next/navigation";
import { Fragment } from "react";
import { MdClose } from "react-icons/md";
import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import Button from "@/lib/components/ui/Button";
import { nonProtectedPaths } from "@/lib/config/routesConfig";
import { useNotificationBanner } from "./hooks/useNotificationBanner";
export const NotificationBanner = (): JSX.Element => {
const { notificationBanner, isDismissed, dismissNotification } =
useNotificationBanner();
const pathname = usePathname() ?? "";
if (
isDismissed ||
notificationBanner === undefined ||
nonProtectedPaths.includes(pathname)
) {
return <Fragment />;
}
return (
<div
style={{
position: "relative",
display: "flex",
alignItems: "center",
justifyContent: "center",
...notificationBanner.style,
}}
>
<ReactMarkdown
rehypePlugins={[
//@ts-expect-error bad typing from rehype-raw
rehypeRaw,
]}
>
{notificationBanner.text}
</ReactMarkdown>
{Boolean(notificationBanner.dismissible) && (
<Button
variant="tertiary"
onClick={dismissNotification}
className="right-2 p-0 absolute bg-white hover:bg-gray-300"
>
<MdClose size={20} />
</Button>
)}
</div>
);
};

60
frontend/lib/components/NotificationBanner/hooks/useNotificationBanner.tsx
View File

@ -1,60 +0,0 @@
import { useQuery } from "@tanstack/react-query";
import { useCallback, useEffect, useState } from "react";
import { NOTIFICATION_BANNER_DATA_KEY } from "@/lib/api/cms/config";
import { useCmsApi } from "@/lib/api/cms/useCmsApi";
import {
clearLocalStorageNotificationBanner,
getNotificationFromLocalStorage,
setNotificationAsDismissedInLocalStorage,
} from "../utils";
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export const useNotificationBanner = () => {
const [isDismissed, setIsDismissed] = useState(true);
const { getNotificationBanner } = useCmsApi();
const { data: notificationBanner } = useQuery({
queryKey: [NOTIFICATION_BANNER_DATA_KEY],
queryFn: getNotificationBanner,
});
const dismissNotification = useCallback(() => {
if (notificationBanner?.id === undefined) {
return;
}
setNotificationAsDismissedInLocalStorage(notificationBanner.id);
setIsDismissed(true);
}, [notificationBanner?.id]);
useEffect(() => {
const localStorageNotificationBanner = getNotificationFromLocalStorage();
if (notificationBanner === undefined) {
return;
}
if (localStorageNotificationBanner?.id !== notificationBanner.id) {
clearLocalStorageNotificationBanner();
setIsDismissed(false);
}
}, [dismissNotification, notificationBanner?.id]);
useEffect(() => {
const onUnmount = () => {
if (notificationBanner?.isSticky === undefined) {
return;
}
if (!notificationBanner.isSticky) {
dismissNotification();
}
};
return onUnmount;
}, [dismissNotification, notificationBanner?.isSticky]);
return {
notificationBanner,
dismissNotification,
isDismissed,
};
};

1
frontend/lib/components/NotificationBanner/index.ts
View File

@ -1 +0,0 @@
export * from "./NotificationBanner";

33
frontend/lib/components/NotificationBanner/utils.ts
View File

@ -1,33 +0,0 @@
const notificationsLocalStorageKey = "homepage-notifications";
type LocalStorageNotification = {
isDismissed: boolean;
id: string;
};
export const getNotificationFromLocalStorage = ():
| LocalStorageNotification
| undefined => {
const notifications = localStorage.getItem(notificationsLocalStorageKey);
if (notifications !== null) {
return JSON.parse(notifications) as LocalStorageNotification;
}
return undefined;
};
export const setNotificationAsDismissedInLocalStorage = (id: string): void => {
const notificationPayload: LocalStorageNotification = {
isDismissed: true,
id,
};
localStorage.setItem(
notificationsLocalStorageKey,
JSON.stringify(notificationPayload)
);
};
export const clearLocalStorageNotificationBanner = (): void => {
localStorage.removeItem(notificationsLocalStorageKey);
};