From 4f09065e4c1ab4e18daa015f7eca2a83f7bc38ff Mon Sep 17 00:00:00 2001 From: Kingsley Solomon Date: Mon, 29 Jul 2024 15:57:30 +0100 Subject: [PATCH 1/7] fix: fixed modal size on mobile view --- .../dashboard/(user-dashboard)/settings/layout.tsx | 2 +- .../settings/notification/_components/header.tsx | 4 +++- .../_components/notification-switch-box.tsx | 10 +++++++--- .../(user-dashboard)/settings/notification/page.tsx | 12 ++++++------ .../modals/notification-settings-saved/index.tsx | 6 +++--- 5 files changed, 20 insertions(+), 14 deletions(-) diff --git a/src/app/dashboard/(user-dashboard)/settings/layout.tsx b/src/app/dashboard/(user-dashboard)/settings/layout.tsx index bef3e0f8d..acdd55aab 100644 --- a/src/app/dashboard/(user-dashboard)/settings/layout.tsx +++ b/src/app/dashboard/(user-dashboard)/settings/layout.tsx @@ -9,7 +9,7 @@ const layout: FC = ({ children }) => { return (
-
+
{children}
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..81aee10db 100644 --- a/src/app/dashboard/(user-dashboard)/settings/notification/_components/header.tsx +++ b/src/app/dashboard/(user-dashboard)/settings/notification/_components/header.tsx @@ -4,7 +4,9 @@ interface IProperties { 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..c748515db 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 @@ -8,9 +8,13 @@ interface IProperties { const NotificationSwitchBox = ({ title, description }: IProperties) => { return (
-
-

{title}

-

{description}

+
+

+ {title} +

+

+ {description} +

diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx index e6f20ba1f..62bbf3d83 100644 --- a/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx +++ b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx @@ -113,13 +113,13 @@ const NotificationPage = () => { > Save Changes -
+ ); }; diff --git a/src/components/common/modals/notification-settings-saved/index.tsx b/src/components/common/modals/notification-settings-saved/index.tsx index 843b23578..0f45bc3c8 100644 --- a/src/components/common/modals/notification-settings-saved/index.tsx +++ b/src/components/common/modals/notification-settings-saved/index.tsx @@ -35,17 +35,17 @@ const NotificationSettingSavedModal: React.FC = ({ className={`fixed inset-0 z-50 flex items-center justify-center ${isNotificationPath ? "bg-transparent backdrop-blur-sm" : "bg-black bg-opacity-50"}`} /> event.stopPropagation()} > Notification Updated! - + Notification preferences updated successfully. Remember, you can always adjust these settings later. -
+
Done
From 75bd566c40913b0c9c2a7f80ac7993beaf83d764 Mon Sep 17 00:00:00 2001 From: Kingsley Solomon Date: Tue, 30 Jul 2024 02:45:53 +0100 Subject: [PATCH 2/7] fix: resolved notification page conflict --- .../dashboard/(user-dashboard)/settings/notification/page.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx index 62bbf3d83..fadd054b9 100644 --- a/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx +++ b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx @@ -17,6 +17,9 @@ const NotificationPage = () => { return (
+
+

Notification

+
{/* NOTIFICATION ALERT */}
From 188236bb6028688635fb468d0b1fc875a38e96d1 Mon Sep 17 00:00:00 2001 From: Kingsley Solomon Date: Tue, 30 Jul 2024 11:39:31 +0100 Subject: [PATCH 3/7] feat: added notification global state --- src/actions/axios.ts | 4 +- .../UnreadNotificationCard.tsx | 22 ++- .../_components/layout/navbar/index.tsx | 3 +- .../_components/notification-switch-box.tsx | 19 ++- .../notification/action/notification-store.ts | 28 ++++ .../notification/action/notification.ts | 76 +++++++++ .../settings/notification/page.tsx | 158 ++++++++++-------- .../types/notification-settings.types.ts | 10 ++ 8 files changed, 240 insertions(+), 80 deletions(-) create mode 100644 src/app/dashboard/(user-dashboard)/settings/notification/action/notification-store.ts create mode 100644 src/app/dashboard/(user-dashboard)/settings/notification/action/notification.ts create mode 100644 src/app/dashboard/(user-dashboard)/settings/notification/types/notification-settings.types.ts diff --git a/src/actions/axios.ts b/src/actions/axios.ts index 31daf58b5..dbbeaaf33 100644 --- a/src/actions/axios.ts +++ b/src/actions/axios.ts @@ -1,11 +1,13 @@ import axios, { AxiosInstance } from "axios"; -const Calls = (baseURL?: string): AxiosInstance => { +const Calls = (baseURL?: string, token?: string): AxiosInstance => { return axios.create({ baseURL, headers: { "Content-Type": "application/json; charset=UTF-8", "Access-Control-Allow-Origin": "*", + // accept token if its a protected route/endpoint + Authorization: token ? `Bearer ${token}` : undefined, credentials: "include", }, }); diff --git a/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx b/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx index fd62ebbe3..fa0b8d99f 100644 --- a/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx +++ b/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx @@ -1,6 +1,8 @@ import { BellRing } from "lucide-react"; import { FC } from "react"; +import { NotificationSwitchBox } from "~/app/dashboard/(user-dashboard)/settings/notification/_components/notification-switch-box"; +import { useNotificationStore } from "~/app/dashboard/(user-dashboard)/settings/notification/action/notification-store"; import CustomButton from "~/components/common/common-button/common-button"; import { Card, @@ -10,7 +12,6 @@ import { CardHeader, CardTitle, } from "~/components/ui/card"; -import { Switch } from "~/components/ui/switch"; import { cn } from "~/lib/utils"; interface NotificationPreview { @@ -29,6 +30,14 @@ const UnreadNotificationCard: FC = ({ unreadCount = 0, ...properties }) => { + const { settings, updateSettings } = useNotificationStore(); + + const handleToggleSwitch = (name: keyof typeof settings) => { + updateSettings({ [name]: !settings[name] }); + // eslint-disable-next-line no-console + console.log("Settings saved:", settings); + }; + return ( = ({
-
+ + {/*

Push Notifications

@@ -53,7 +69,7 @@ const UnreadNotificationCard: FC = ({ Send notifications to device.

- + */}
{notificationsPreview.map((preview, index) => ( diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx index 693fca210..847fa1a3d 100644 --- a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx +++ b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx @@ -45,6 +45,7 @@ const navlinks = [ const UserNavbar = () => { const pathname = usePathname(); const currentPath = pathname?.split("/")[2]; + return (
-
+
void; + className?: string; // Add className as an optional property } -const NotificationSwitchBox = ({ title, description }: IProperties) => { +export const NotificationSwitchBox = ({ + title, + description, + name, + isChecked, + onToggle, +}: IProperties) => { return (
@@ -17,10 +30,8 @@ const NotificationSwitchBox = ({ title, description }: IProperties) => {

- + 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..f93588948 --- /dev/null +++ b/src/app/dashboard/(user-dashboard)/settings/notification/action/notification.ts @@ -0,0 +1,76 @@ +/* eslint-disable no-console */ +// action/notification.ts +// "use server"; + +import Calls from "~/actions/axios"; + +const $http = Calls(process.env.NEXT_PUBLIC_API_URL); +console.log(process.env.NEXT_PUBLIC_API_URL); + +const notification_id = undefined; + +export const createNotification = async () => { + const data = { + message: `Welcome to HNGi8`, + }; + try { + const response = await $http.post("/notifications", data); + console.log(response); + } catch (error) { + console.error(error); + } +}; + +export const RetrieveUserNotificationSettings = async () => { + try { + const response = await $http.get("/notification-settings"); + return response; + } catch (error) { + console.error(error); + } +}; + +export const updateUserNotificationSettings = async (settings: object) => { + try { + const response = await $http.patch("/notification-settings", settings); + return response; + } catch (error) { + console.error(error); + } +}; + +export const RetrieveUserNotificationAll = async () => { + try { + const response = await $http.get("/notifications"); + console.log(response); + } catch (error) { + console.error(error); + } +}; + +export const RetrieveUserUnreadNotification = async () => { + try { + const response = await $http.get("/notifications?_read=false"); + console.log(response); + } catch (error) { + console.error(error); + } +}; + +export const markNotificationAsRead = async () => { + try { + const response = await $http.patch(`/notifications/${notification_id}`); + console.log(response); + } catch (error) { + console.error(error); + } +}; + +export const markAllNotificationAsRead = async () => { + try { + const response = await $http.patch("/notifications"); + console.log(response); + } catch (error) { + console.error(error); + } +}; diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx index fadd054b9..44a5baa95 100644 --- a/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx +++ b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ "use client"; import { Check } from "lucide-react"; @@ -6,12 +7,20 @@ 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] }); + console.log("Settings saved:", settings); + }; + + const handleSaveChanges = () => { + console.log("Settings saved:", settings); setOpen(true); }; @@ -28,81 +37,92 @@ 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 */} -
- -
+ + +
@@ -110,18 +130,14 @@ const NotificationPage = () => { variant="primary" icon={} 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; +}; From c51d616852dea453bb266219b2b5377e79f8a138 Mon Sep 17 00:00:00 2001 From: Kingsley Solomon Date: Tue, 30 Jul 2024 14:43:53 +0100 Subject: [PATCH 4/7] feat: notification system implemented - no functionality yet --- package.json | 1 + pnpm-lock.yaml | 33 +++++++++---- src/actions/axios.ts | 16 ------- .../UnreadNotificationCard.tsx | 27 ++++++----- .../(user-dashboard)/settings/layout.tsx | 2 +- .../notification/_components/header.tsx | 9 ++-- .../_components/notification-switch-box.tsx | 8 ++-- .../notification/action/notification.ts | 46 ++++++++----------- .../settings/notification/page.tsx | 12 ++--- src/app/globals.css | 2 +- src/components/ui/separator.tsx | 31 +++++++++++++ 11 files changed, 104 insertions(+), 83 deletions(-) delete mode 100644 src/actions/axios.ts create mode 100644 src/components/ui/separator.tsx diff --git a/package.json b/package.json index 710f70f9f..13cd018d8 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-popover": "^1.1.1", "@radix-ui/react-select": "^2.1.1", + "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.0", "@radix-ui/react-tabs": "^1.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6f0543369..8b10f461a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ importers: '@radix-ui/react-select': specifier: ^2.1.1 version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-separator': + specifier: ^1.1.0 + version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-slot': specifier: ^1.1.0 version: 1.1.0(@types/react@18.3.3)(react@18.3.1) @@ -8294,8 +8297,8 @@ snapshots: '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.5.4) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0) eslint-plugin-react: 7.35.0(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -8326,13 +8329,13 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0): + eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0): dependencies: debug: 4.3.5 enhanced-resolve: 5.17.1 eslint: 8.57.0 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.6 is-core-module: 2.15.0 @@ -8343,18 +8346,28 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint@8.57.0): + dependencies: + debug: 3.2.7 + optionalDependencies: + '@typescript-eslint/parser': 7.17.0(eslint@8.57.0)(typescript@5.5.4) + eslint: 8.57.0 + eslint-import-resolver-node: 0.3.9 + transitivePeerDependencies: + - supports-color + + eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.5.4) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0) transitivePeerDependencies: - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 @@ -8364,7 +8377,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.15.0 is-glob: 4.0.3 @@ -8375,7 +8388,7 @@ snapshots: semver: 6.3.1 tsconfig-paths: 3.15.0 optionalDependencies: - '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.5.4) + '@typescript-eslint/parser': 7.17.0(eslint@8.57.0)(typescript@5.5.4) transitivePeerDependencies: - eslint-import-resolver-typescript - eslint-import-resolver-webpack diff --git a/src/actions/axios.ts b/src/actions/axios.ts deleted file mode 100644 index dbbeaaf33..000000000 --- a/src/actions/axios.ts +++ /dev/null @@ -1,16 +0,0 @@ -import axios, { AxiosInstance } from "axios"; - -const Calls = (baseURL?: string, token?: string): AxiosInstance => { - return axios.create({ - baseURL, - headers: { - "Content-Type": "application/json; charset=UTF-8", - "Access-Control-Allow-Origin": "*", - // accept token if its a protected route/endpoint - Authorization: token ? `Bearer ${token}` : undefined, - credentials: "include", - }, - }); -}; - -export default Calls; diff --git a/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx b/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx index fa0b8d99f..5e5e99092 100644 --- a/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx +++ b/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx @@ -1,8 +1,8 @@ import { BellRing } from "lucide-react"; import { FC } from "react"; -import { NotificationSwitchBox } from "~/app/dashboard/(user-dashboard)/settings/notification/_components/notification-switch-box"; import { useNotificationStore } from "~/app/dashboard/(user-dashboard)/settings/notification/action/notification-store"; +import { notificationSettingsProperties } from "~/app/dashboard/(user-dashboard)/settings/notification/types/notification-settings.types"; import CustomButton from "~/components/common/common-button/common-button"; import { Card, @@ -12,6 +12,7 @@ import { CardHeader, CardTitle, } from "~/components/ui/card"; +import { Switch } from "~/components/ui/switch"; import { cn } from "~/lib/utils"; interface NotificationPreview { @@ -32,7 +33,7 @@ const UnreadNotificationCard: FC = ({ }) => { const { settings, updateSettings } = useNotificationStore(); - const handleToggleSwitch = (name: keyof typeof settings) => { + const handleToggleSwitch = (name: keyof notificationSettingsProperties) => { updateSettings({ [name]: !settings[name] }); // eslint-disable-next-line no-console console.log("Settings saved:", settings); @@ -53,15 +54,8 @@ const UnreadNotificationCard: FC = ({
- - - {/*
+ +

Push Notifications

@@ -69,7 +63,13 @@ const UnreadNotificationCard: FC = ({ Send notifications to device.

- */} + + handleToggleSwitch("mobile_push_notifications") + } + name="mobile_push_notifications" + />
{notificationsPreview.map((preview, index) => ( @@ -102,6 +102,9 @@ const UnreadNotificationCard: FC = ({ variant="primary" isDisabled={unreadCount === 0} className="w-full bg-primary" + onClick={() => { + // MARK ALL NOTIFICATION LOGIC + }} > Mark all as read diff --git a/src/app/dashboard/(user-dashboard)/settings/layout.tsx b/src/app/dashboard/(user-dashboard)/settings/layout.tsx index acdd55aab..4d0896c29 100644 --- a/src/app/dashboard/(user-dashboard)/settings/layout.tsx +++ b/src/app/dashboard/(user-dashboard)/settings/layout.tsx @@ -9,7 +9,7 @@ const layout: FC = ({ children }) => { return (
-
+
{children}
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 81aee10db..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,12 +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 30bea44fc..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,5 +1,3 @@ -/* eslint-disable no-console */ - import { Switch } from "~/components/ui/switch"; import { notificationSettingsProperties } from "../types/notification-settings.types"; @@ -20,9 +18,9 @@ export const NotificationSwitchBox = ({ onToggle, }: IProperties) => { return ( -
-
-

+

+
+

{title}

diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/action/notification.ts b/src/app/dashboard/(user-dashboard)/settings/notification/action/notification.ts index f93588948..a86ecfe0a 100644 --- a/src/app/dashboard/(user-dashboard)/settings/notification/action/notification.ts +++ b/src/app/dashboard/(user-dashboard)/settings/notification/action/notification.ts @@ -1,11 +1,8 @@ -/* eslint-disable no-console */ -// action/notification.ts -// "use server"; +import axios from "axios"; -import Calls from "~/actions/axios"; - -const $http = Calls(process.env.NEXT_PUBLIC_API_URL); -console.log(process.env.NEXT_PUBLIC_API_URL); +/** + * THIS API IMPLEMENTATION ARE NOT WORKING CURRENTLY, THE BACKEND WOULD BE INTEGRTED SHORTLY. ☺️ + */ const notification_id = undefined; @@ -14,63 +11,56 @@ export const createNotification = async () => { message: `Welcome to HNGi8`, }; try { - const response = await $http.post("/notifications", data); - console.log(response); + await axios.post("/notifications", data); } catch (error) { - console.error(error); + return error; } }; export const RetrieveUserNotificationSettings = async () => { try { - const response = await $http.get("/notification-settings"); - return response; + await axios.get("/notification-settings"); } catch (error) { - console.error(error); + return error; } }; export const updateUserNotificationSettings = async (settings: object) => { try { - const response = await $http.patch("/notification-settings", settings); - return response; + await axios.patch("/notification-settings", settings); } catch (error) { - console.error(error); + return error; } }; export const RetrieveUserNotificationAll = async () => { try { - const response = await $http.get("/notifications"); - console.log(response); + await axios.get("/notifications"); } catch (error) { - console.error(error); + return error; } }; export const RetrieveUserUnreadNotification = async () => { try { - const response = await $http.get("/notifications?_read=false"); - console.log(response); + await axios.get("/notifications?_read=false"); } catch (error) { - console.error(error); + return error; } }; export const markNotificationAsRead = async () => { try { - const response = await $http.patch(`/notifications/${notification_id}`); - console.log(response); + await axios.patch(`/notifications/${notification_id}`); } catch (error) { - console.error(error); + return error; } }; export const markAllNotificationAsRead = async () => { try { - const response = await $http.patch("/notifications"); - console.log(response); + await axios.patch("/notifications"); } catch (error) { - console.error(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 44a5baa95..d486c9446 100644 --- a/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx +++ b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx @@ -1,7 +1,6 @@ -/* eslint-disable no-console */ "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"; @@ -16,18 +15,17 @@ const NotificationPage = () => { const handleToggleSwitch = (name: keyof typeof settings) => { updateSettings({ [name]: !settings[name] }); - console.log("Settings saved:", settings); }; const handleSaveChanges = () => { - console.log("Settings saved:", settings); setOpen(true); }; return (

-
-

Notification

+
+ + Notification
{/* NOTIFICATION ALERT */}
@@ -125,7 +123,7 @@ const NotificationPage = () => { />
-
+
} 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/components/ui/separator.tsx b/src/components/ui/separator.tsx new file mode 100644 index 000000000..49d51820e --- /dev/null +++ b/src/components/ui/separator.tsx @@ -0,0 +1,31 @@ +"use client" + +import * as React from "react" +import * as SeparatorPrimitive from "@radix-ui/react-separator" + +import { cn } from "~/lib/utils" + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>( + ( + { className, orientation = "horizontal", decorative = true, ...props }, + ref + ) => ( + + ) +) +Separator.displayName = SeparatorPrimitive.Root.displayName + +export { Separator } From 336e931c2f171f5533b86be12d4320a76d1572c2 Mon Sep 17 00:00:00 2001 From: Kingsley Solomon Date: Tue, 30 Jul 2024 14:51:29 +0100 Subject: [PATCH 5/7] feat: notification system implemented - no functionality yet --- .../unread-notification-card/UnreadNotificationCard.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx b/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx index 5e5e99092..c5b91c926 100644 --- a/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx +++ b/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx @@ -35,8 +35,6 @@ const UnreadNotificationCard: FC = ({ const handleToggleSwitch = (name: keyof notificationSettingsProperties) => { updateSettings({ [name]: !settings[name] }); - // eslint-disable-next-line no-console - console.log("Settings saved:", settings); }; return ( From ab0920dd2b1f95dad00cf4ab324607446f4a3877 Mon Sep 17 00:00:00 2001 From: Kingsley Solomon Date: Tue, 30 Jul 2024 15:01:30 +0100 Subject: [PATCH 6/7] fix: resolved eslint errors --- src/components/ui/separator.tsx | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx index 49d51820e..ef26ace81 100644 --- a/src/components/ui/separator.tsx +++ b/src/components/ui/separator.tsx @@ -1,31 +1,31 @@ -"use client" +"use client"; -import * as React from "react" -import * as SeparatorPrimitive from "@radix-ui/react-separator" +import * as SeparatorPrimitive from "@radix-ui/react-separator"; +import * as React from "react"; -import { cn } from "~/lib/utils" +import { cn } from "~/lib/utils"; const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >( ( - { className, orientation = "horizontal", decorative = true, ...props }, - ref + { className, orientation = "horizontal", decorative = true, ...properties }, + reference, ) => ( - ) -) -Separator.displayName = SeparatorPrimitive.Root.displayName + ), +); +Separator.displayName = SeparatorPrimitive.Root.displayName; -export { Separator } +export { Separator }; From ac6ddade479c446264f00ef8f854b9a92dba286f Mon Sep 17 00:00:00 2001 From: Kingsley Solomon Date: Tue, 30 Jul 2024 15:46:55 +0100 Subject: [PATCH 7/7] fix: fixed build error --- .../unread-notification-card/UnreadNotificationCard.tsx | 2 ++ .../admin/email/edit-in-buit-templates/[templateId]/page.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx b/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx index c5b91c926..f6454f204 100644 --- a/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx +++ b/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx @@ -1,3 +1,5 @@ +"use client"; + import { BellRing } from "lucide-react"; import { FC } from "react"; diff --git a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/[templateId]/page.tsx b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/[templateId]/page.tsx index ec3fe4e30..dbe37e831 100644 --- a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/[templateId]/page.tsx +++ b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/[templateId]/page.tsx @@ -1,3 +1,5 @@ +"use client"; + import { EllipsisVertical, Eye, Redo, Undo } from "lucide-react"; import { Button } from "~/components/common/common-button";