app based notification system

Peppermint-Lab · Mar 21, 2024 · 7e883f0 · 7e883f0
1 parent e82faa0
commit 7e883f0
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 72 deletions.
diff --git a/apps/client/layouts/newLayout.tsx b/apps/client/layouts/newLayout.tsx
@@ -3,9 +3,15 @@ import {
  Dialog,
  Disclosure,
  Menu,
+ Popover,
  Transition,
 } from "@headlessui/react";
-import { DocumentPlusIcon, PlusIcon } from "@heroicons/react/20/solid";
+import {
+ ArchiveBoxIcon,
+ DocumentPlusIcon,
+ InboxStackIcon,
+ PlusIcon,
+} from "@heroicons/react/20/solid";
 import {
  Bars3Icon,
  Cog6ToothIcon,
@@ -312,7 +318,7 @@ function CommandModal() {
 export default function NewLayout({ children }: any) {
  const location = useRouter();
 
- const { loading, user } = useUser();
+ const { loading, user, fetchUserProfile } = useUser();
  const locale = user ? user.language : "en";
 
  const [queues, setQueues] = useState([]);
@@ -432,6 +438,7 @@ export default function NewLayout({ children }: any) {
  Authorization: `Bearer ${getCookie("session")}`,
  },
  }).then((res) => res.json());
+ await fetchUserProfile();
  }
 
  // useEffect(() => {
@@ -442,41 +449,6 @@ export default function NewLayout({ children }: any) {
  // getQueues();
  // }, [user])
 
- // const handleKeyPress = useCallback((event: any, location: any) => {
- // console.log(location);
- // if (
- // document.activeElement!.tagName !== "INPUT" &&
- // document.activeElement!.tagName !== "TEXTAREA" &&
- // !document.activeElement!.className.includes("ProseMirror")
- // ) {
- // switch (event.key) {
- // case "c":
- // location.push("/new");
- // break;
- // case "h":
- // location.push("/");
- // break;
- // case "n":
- // location.push("/notebook");
- // break;
- // case "t":
- // location.push("/tickets");
- // break;
- // case "a":
- // location.push("/admin");
- // break;
- // case "o":
- // location.push("/tickets/open");
- // break;
- // case "f":
- // location.push("/tickets/closed");
- // break;
- // default:
- // break;
- // }
- // }
- // }, []);
-
  function handleKeyPress(event: any) {
  const pathname = location.pathname;
  console.log(pathname);
@@ -1007,39 +979,24 @@ export default function NewLayout({ children }: any) {
  <CommandModal />
  </div>
 
- {/* <div
- className="relative mt-2 hidden sm:flex items-center w-full min-w-[320px] max-w-[360px] hover:cursor-pointer"
- onClick={() => {
- spotlight.open();
- }}
- >
- <input
- type="text"
- name="search"
- id="search"
- readOnly
- placeholder="Spotlight Search"
- onClick={() => {
- spotlight.open();
- }}
- className="block w-full hover:cursor-pointer rounded-md border-0 py-1.5 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
- />
- <div className="absolute inset-y-0 right-0 flex py-2.5 pr-1">
- <kbd className="inline-flex items-center rounded border border-gray-200 px-1.5 font-sans text-xs text-gray-400">
- /
- </kbd>
- </div>
- </div> */}
  <div className="flex w-full justify-end items-center gap-x-2 lg:gap-x-2 ">
- {/* <Popover className="relative">
- <Popover.Button className="relative rounded-full p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
- <BellAlertIcon
- className="h-6 w-6 text-white"
- aria-hidden="true"
- />
+ <Popover className="relative">
+ <Popover.Button className="relative border rounded-md p-2 shadow-md text-gray-400 hover:text-gray-500 focus:outline-none">
+ <InboxStackIcon className="h-4 w-4 text-black" />
+ {user.notifcations.filter(
+ (notification) => !notification.read
+ ).length > 0 && (
+ <svg
+ className="h-2.5 w-2.5 absolute bottom-6 left-6 animate-pulse fill-green-500"
+ viewBox="0 0 6 6"
+ aria-hidden="true"
+ >
+ <circle cx={3} cy={3} r={3} />
+ </svg>
+ )}
  </Popover.Button>
 
- <Popover.Panel className="absolute z-10 sm:min-w-[400px] right-1 overflow-hidden rounded-lg bg-white shadow">
+ <Popover.Panel className="absolute z-10 mt-1 sm:min-w-[400px] right-1 overflow-hidden rounded-lg bg-white shadow">
  <div className="px-6 p-6">
  <div className="border-b border-gray-200">
  <nav
@@ -1112,8 +1069,8 @@ export default function NewLayout({ children }: any) {
  </div>
  </div>
  </Popover.Panel>
- </Popover> */}
- {/* Profile dropdown */}
+ </Popover>
+
  <Link
  href="https://github.com/Peppermint-Lab/peppermint/discussions"
  target="_blank"
@@ -1123,6 +1080,8 @@ export default function NewLayout({ children }: any) {
  Send Feedback
  </Button>
  </Link>
+
+ {/* Profile dropdown */}
  <Menu as="div" className="relative">
  <Menu.Button className="z-50 flex items-center p-1.5">
  <span className="sr-only">Open user menu</span>

diff --git a/apps/client/store/session.js b/apps/client/store/session.js
@@ -45,15 +45,15 @@ export const SessionProvider = ({ children }) => {
 
  useEffect(() => {
  fetchUserProfile();
- }, []);
+ }, [router]);
 
  return process.env.NEXT_PUBLIC_ENVIRONMENT === "production" &&
  process.env.NEXT_PUBLIC_TELEMETRY === "1" ? (
- <UserContext.Provider value={{ user, setUser, loading }}>
+ <UserContext.Provider value={{ user, setUser, loading, fetchUserProfile }}>
  <PostHogProvider client={posthog}>{children}</PostHogProvider>
  </UserContext.Provider>
  ) : (
- <UserContext.Provider value={{ user, setUser, loading }}>
+ <UserContext.Provider value={{ user, setUser, loading, fetchUserProfile }}>
  {children}
  </UserContext.Provider>
  );