-
diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/_components/header.tsx b/src/app/dashboard/(user-dashboard)/settings/notification/_components/header.tsx
index b66562fe0..986f39353 100644
--- a/src/app/dashboard/(user-dashboard)/settings/notification/_components/header.tsx
+++ b/src/app/dashboard/(user-dashboard)/settings/notification/_components/header.tsx
@@ -1,10 +1,15 @@
+import { Separator } from "~/components/ui/separator";
+
interface IProperties {
notificationTitle: string;
}
const NotificationHeader = ({ notificationTitle }: IProperties) => {
return (
-
{notificationTitle}
+
+ {notificationTitle}
+
+
);
};
diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/_components/notification-switch-box.tsx b/src/app/dashboard/(user-dashboard)/settings/notification/_components/notification-switch-box.tsx
index 9ef72b82d..2e5c5de9d 100644
--- a/src/app/dashboard/(user-dashboard)/settings/notification/_components/notification-switch-box.tsx
+++ b/src/app/dashboard/(user-dashboard)/settings/notification/_components/notification-switch-box.tsx
@@ -1,22 +1,35 @@
import { Switch } from "~/components/ui/switch";
+import { notificationSettingsProperties } from "../types/notification-settings.types";
interface IProperties {
title: string;
description: string;
+ name: keyof notificationSettingsProperties;
+ isChecked: boolean;
+ onToggle: (name: keyof notificationSettingsProperties) => void;
+ className?: string; // Add className as an optional property
}
-const NotificationSwitchBox = ({ title, description }: IProperties) => {
+export const NotificationSwitchBox = ({
+ title,
+ description,
+ name,
+ isChecked,
+ onToggle,
+}: IProperties) => {
return (
-
-
-
{title}
-
{description}
+
+
+
+ {title}
+
+
+ {description}
+
-
+ onToggle(name)} />
);
};
-
-export default NotificationSwitchBox;
diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/action/notification-store.ts b/src/app/dashboard/(user-dashboard)/settings/notification/action/notification-store.ts
new file mode 100644
index 000000000..2f6a8d1f4
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/notification/action/notification-store.ts
@@ -0,0 +1,28 @@
+import create from "zustand";
+
+import { notificationSettingsProperties } from "../types/notification-settings.types";
+
+// Define the Zustand store
+interface NotificationStore {
+ settings: notificationSettingsProperties;
+ updateSettings: (
+ newSettings: Partial
,
+ ) => void;
+}
+
+export const useNotificationStore = create((set) => ({
+ settings: {
+ mobile_push_notifications: false,
+ email_notification_activity_in_workspace: false,
+ email_notification_always_send_email_notifications: false,
+ email_notification_email_digest: false,
+ email_notification_announcement_and_update_emails: false,
+ slack_notifications_activity_on_your_workspace: false,
+ slack_notifications_always_send_email_notifications: false,
+ slack_notifications_announcement_and_update_emails: false,
+ },
+ updateSettings: (newSettings: Partial) =>
+ set((state) => ({
+ settings: { ...state.settings, ...newSettings },
+ })),
+}));
diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/action/notification.ts b/src/app/dashboard/(user-dashboard)/settings/notification/action/notification.ts
new file mode 100644
index 000000000..a86ecfe0a
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/notification/action/notification.ts
@@ -0,0 +1,66 @@
+import axios from "axios";
+
+/**
+ * THIS API IMPLEMENTATION ARE NOT WORKING CURRENTLY, THE BACKEND WOULD BE INTEGRTED SHORTLY. ☺️
+ */
+
+const notification_id = undefined;
+
+export const createNotification = async () => {
+ const data = {
+ message: `Welcome to HNGi8`,
+ };
+ try {
+ await axios.post("/notifications", data);
+ } catch (error) {
+ return error;
+ }
+};
+
+export const RetrieveUserNotificationSettings = async () => {
+ try {
+ await axios.get("/notification-settings");
+ } catch (error) {
+ return error;
+ }
+};
+
+export const updateUserNotificationSettings = async (settings: object) => {
+ try {
+ await axios.patch("/notification-settings", settings);
+ } catch (error) {
+ return error;
+ }
+};
+
+export const RetrieveUserNotificationAll = async () => {
+ try {
+ await axios.get("/notifications");
+ } catch (error) {
+ return error;
+ }
+};
+
+export const RetrieveUserUnreadNotification = async () => {
+ try {
+ await axios.get("/notifications?_read=false");
+ } catch (error) {
+ return error;
+ }
+};
+
+export const markNotificationAsRead = async () => {
+ try {
+ await axios.patch(`/notifications/${notification_id}`);
+ } catch (error) {
+ return error;
+ }
+};
+
+export const markAllNotificationAsRead = async () => {
+ try {
+ await axios.patch("/notifications");
+ } catch (error) {
+ return error;
+ }
+};
diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx
index e6f20ba1f..d486c9446 100644
--- a/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx
+++ b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx
@@ -1,22 +1,32 @@
"use client";
-import { Check } from "lucide-react";
+import { Check, ChevronLeft } from "lucide-react";
import { useState } from "react";
import CustomButton from "~/components/common/common-button/common-button";
import NotificationSettingSavedModal from "~/components/common/modals/notification-settings-saved";
import NotificationHeader from "./_components/header";
-import NotificationSwitchBox from "./_components/notification-switch-box";
+import { NotificationSwitchBox } from "./_components/notification-switch-box";
+import { useNotificationStore } from "./action/notification-store";
const NotificationPage = () => {
+ const { settings, updateSettings } = useNotificationStore();
const [isOpen, setOpen] = useState(false);
- const handleOpenModal = () => {
+ const handleToggleSwitch = (name: keyof typeof settings) => {
+ updateSettings({ [name]: !settings[name] });
+ };
+
+ const handleSaveChanges = () => {
setOpen(true);
};
return (
+
+
+ Notification
+
{/* NOTIFICATION ALERT */}
@@ -25,101 +35,108 @@ const NotificationPage = () => {
description={
"Receive push notifications on mentions and comments via your mobile app"
}
+ name="mobile_push_notifications"
+ isChecked={settings.mobile_push_notifications}
+ onToggle={handleToggleSwitch}
/>
{/* EMAIL NOTIFICATION */}
- {/* option 1 */}
-
-
-
- {/* option 2 */}
-
-
-
- {/* option 3 */}
-
-
-
- {/* option 4 */}
-
-
-
+
+
+
+
{/* SLACK NOTIFICATIONS */}
- {/* option 1 */}
-
-
-
- {/* option 2 */}
-
-
-
- {/* option 3 */}
-
-
-
+
+
+
-
+
}
isLeftIconVisible={true}
- isLoading={false}
- isDisabled={false}
- onClick={handleOpenModal}
+ onClick={handleSaveChanges}
>
Save Changes
-
+ setOpen(false)}
+ />
);
};
diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/types/notification-settings.types.ts b/src/app/dashboard/(user-dashboard)/settings/notification/types/notification-settings.types.ts
new file mode 100644
index 000000000..505ca8814
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/notification/types/notification-settings.types.ts
@@ -0,0 +1,10 @@
+export type notificationSettingsProperties = {
+ mobile_push_notifications: boolean;
+ email_notification_activity_in_workspace: boolean;
+ email_notification_always_send_email_notifications: boolean;
+ email_notification_email_digest: boolean;
+ email_notification_announcement_and_update_emails: boolean;
+ slack_notifications_activity_on_your_workspace: boolean;
+ slack_notifications_always_send_email_notifications: boolean;
+ slack_notifications_announcement_and_update_emails: boolean;
+};
diff --git a/src/app/globals.css b/src/app/globals.css
index 450351d4c..a5043fd7e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -166,7 +166,7 @@
/* Custom Scrollbar Styling */
/* For Webkit Browsers */
::-webkit-scrollbar {
- width: 14px; /* Width of the scrollbar */
+ width: 12px; /* Width of the scrollbar */
}
::selection {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3c252bb27..94cfbdaa2 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,10 +3,9 @@ import { Inter } from "next/font/google";
import "./globals.css";
-import { SessionProvider } from "next-auth/react";
-
import Providers from "~/components/providers";
import { Toaster } from "~/components/ui/toaster";
+import AuthProvider from "~/contexts/authContext";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
@@ -22,9 +21,9 @@ export default function RootLayout({
return (
-
+
-
{children}
+
{children}
diff --git a/src/components/adminDashboard/CardComponent.tsx b/src/components/adminDashboard/CardComponent.tsx
deleted file mode 100644
index df4594d85..000000000
--- a/src/components/adminDashboard/CardComponent.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import Image from "next/image";
-import { FC } from "react";
-
-interface CardProperties {
- title: string;
- value: string | number;
- description: string;
- icon: string;
-}
-
-const CardComponent: FC
= ({
- title,
- value,
- description,
- icon,
-}) => {
- return (
- <>
-
-
-
- {title}
-
-
-
-
-
-
-
- {value}
-
-
- {description}
-
-
-