[WEB-1764] chore: revamp workspace notifications (#4947)
* chore: Initialised store and updated the components * chore: updated store and types * chore: updated notifications in the side and updated store * chore: handled notification center * chore: updates store request * chore: notifications filter changed * chore: updated filter logic and handled bulk read * chore: handled filter dropdown * chore: handled ui * chore: resolved build error * chore: implemented applied filters * chore: removed old notifications * chore: added redirection from sidebar * chore: updated notification as read when we see the notification preview * chore: updated read and unread validation * chore: handled custom snooze dropdown * chore: resolved git comments * chore: updated structure and typos * chore: import and prop changes * chore: updated avatar props * chore: updated avatar * chore: notification unread count on the app sidebar --------- Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
This commit is contained in:
guru_sainath
GitHub
parent
8d5d0422e9
commit
209dc57307
59 changed files with 2337 additions and 1623 deletions
|
|
@ -33,3 +33,4 @@ export * from "./use-app-theme";
|
|||
export * from "./use-command-palette";
|
||||
export * from "./use-router-params";
|
||||
export * from "./estimates";
|
||||
export * from "./notifications";
|
||||
|
|
|
|||
2
web/core/hooks/store/notifications/index.ts
Normal file
2
web/core/hooks/store/notifications/index.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export * from "./use-workspace-notifications";
|
||||
export * from "./use-notification";
|
||||
13
web/core/hooks/store/notifications/use-notification.ts
Normal file
13
web/core/hooks/store/notifications/use-notification.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { useContext } from "react";
|
||||
// mobx store
|
||||
import { StoreContext } from "@/lib/store-context";
|
||||
// mobx store
|
||||
import { INotification } from "@/store/notifications/notification";
|
||||
|
||||
export const useNotification = (notificationId: string | undefined): INotification => {
|
||||
const context = useContext(StoreContext);
|
||||
if (context === undefined) throw new Error("useNotification must be used within StoreProvider");
|
||||
if (!notificationId) return {} as INotification;
|
||||
|
||||
return context.workspaceNotification.notifications?.[notificationId] ?? {};
|
||||
};
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { useContext } from "react";
|
||||
// context
|
||||
import { StoreContext } from "@/lib/store-context";
|
||||
// mobx store
|
||||
import { IWorkspaceNotificationStore } from "@/store/notifications/workspace-notifications.store";
|
||||
|
||||
export const useWorkspaceNotifications = (): IWorkspaceNotificationStore => {
|
||||
const context = useContext(StoreContext);
|
||||
if (context === undefined) throw new Error("useWorkspaceNotifications must be used within StoreProvider");
|
||||
|
||||
return context.workspaceNotification;
|
||||
};
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
import { useCallback } from "react";
|
||||
import useSWR from "swr";
|
||||
import { IUser, TUserProfile } from "@plane/types";
|
||||
// services
|
||||
import { NotificationService } from "@/services/notification.service";
|
||||
// types
|
||||
|
||||
const userNotificationServices = new NotificationService();
|
||||
|
||||
const useUserIssueNotificationSubscription = (
|
||||
user: IUser | null,
|
||||
profile: TUserProfile | undefined,
|
||||
workspaceSlug?: string | string[] | null,
|
||||
projectId?: string | string[] | null,
|
||||
issueId?: string | string[] | null
|
||||
) => {
|
||||
const { data, error, mutate } = useSWR(
|
||||
workspaceSlug && projectId && issueId ? `SUBSCRIPTION_STATUE_${workspaceSlug}_${projectId}_${issueId}` : null,
|
||||
workspaceSlug && projectId && issueId
|
||||
? () =>
|
||||
userNotificationServices.getIssueNotificationSubscriptionStatus(
|
||||
workspaceSlug.toString(),
|
||||
projectId.toString(),
|
||||
issueId.toString()
|
||||
)
|
||||
: null
|
||||
);
|
||||
|
||||
const handleUnsubscribe = useCallback(() => {
|
||||
if (!workspaceSlug || !projectId || !issueId) return;
|
||||
|
||||
mutate(
|
||||
{
|
||||
subscribed: false,
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
userNotificationServices
|
||||
.unsubscribeFromIssueNotifications(workspaceSlug.toString(), projectId.toString(), issueId.toString())
|
||||
.then(() => {
|
||||
mutate({
|
||||
subscribed: false,
|
||||
});
|
||||
});
|
||||
}, [workspaceSlug, projectId, issueId, mutate]);
|
||||
|
||||
const handleSubscribe = useCallback(() => {
|
||||
if (!workspaceSlug || !projectId || !issueId || !user) return;
|
||||
|
||||
mutate(
|
||||
{
|
||||
subscribed: true,
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
userNotificationServices
|
||||
.subscribeToIssueNotifications(workspaceSlug.toString(), projectId.toString(), issueId.toString())
|
||||
.then(() => {
|
||||
mutate({
|
||||
subscribed: true,
|
||||
});
|
||||
});
|
||||
}, [workspaceSlug, projectId, issueId, mutate, user]);
|
||||
|
||||
return {
|
||||
loading: !data && !error,
|
||||
subscribed: data?.subscribed,
|
||||
handleSubscribe,
|
||||
handleUnsubscribe,
|
||||
} as const;
|
||||
};
|
||||
|
||||
export default useUserIssueNotificationSubscription;
|
||||
|
|
@ -1,317 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
// swr
|
||||
import useSWR from "swr";
|
||||
import useSWRInfinite from "swr/infinite";
|
||||
import type { NotificationType, NotificationCount, IMarkAllAsReadPayload } from "@plane/types";
|
||||
// ui
|
||||
import { TOAST_TYPE, setToast } from "@plane/ui";
|
||||
// constant
|
||||
import { UNREAD_NOTIFICATIONS_COUNT, getPaginatedNotificationKey } from "@/constants/fetch-keys";
|
||||
// services
|
||||
import { NotificationService } from "@/services/notification.service";
|
||||
|
||||
const PER_PAGE = 30;
|
||||
|
||||
const userNotificationServices = new NotificationService();
|
||||
|
||||
const useUserNotification = (): any => {
|
||||
const { workspaceSlug } = useParams();
|
||||
|
||||
const [snoozed, setSnoozed] = useState<boolean>(false);
|
||||
const [archived, setArchived] = useState<boolean>(false);
|
||||
const [readNotification, setReadNotification] = useState<boolean>(false);
|
||||
const [fetchNotifications, setFetchNotifications] = useState<boolean>(false);
|
||||
const [selectedNotificationForSnooze, setSelectedNotificationForSnooze] = useState<string | null>(null);
|
||||
const [selectedTab, setSelectedTab] = useState<NotificationType>("assigned");
|
||||
|
||||
const params = useMemo(
|
||||
() => ({
|
||||
type: snoozed || archived || readNotification ? undefined : selectedTab,
|
||||
snoozed,
|
||||
archived,
|
||||
read: !readNotification ? null : false,
|
||||
per_page: PER_PAGE,
|
||||
}),
|
||||
[archived, readNotification, selectedTab, snoozed]
|
||||
);
|
||||
|
||||
const {
|
||||
data: paginatedData,
|
||||
size,
|
||||
setSize,
|
||||
isLoading,
|
||||
isValidating,
|
||||
mutate: notificationMutate,
|
||||
} = useSWRInfinite(
|
||||
fetchNotifications && workspaceSlug
|
||||
? (index, prevData) => getPaginatedNotificationKey(index, prevData, workspaceSlug.toString(), params)
|
||||
: () => null,
|
||||
async (url: string) => await userNotificationServices.getNotifications(url)
|
||||
);
|
||||
|
||||
const isLoadingMore = isLoading || (size > 0 && paginatedData && typeof paginatedData[size - 1] === "undefined");
|
||||
const isEmpty = paginatedData?.[0]?.results?.length === 0;
|
||||
const notifications = paginatedData ? paginatedData.map((d) => d.results).flat() : undefined;
|
||||
const hasMore = isEmpty || (paginatedData && paginatedData[paginatedData.length - 1].next_page_results);
|
||||
const isRefreshing = isValidating && paginatedData && paginatedData.length === size;
|
||||
|
||||
const { data: notificationCount, mutate: mutateNotificationCount } = useSWR(
|
||||
workspaceSlug ? UNREAD_NOTIFICATIONS_COUNT(workspaceSlug.toString()) : null,
|
||||
() => (workspaceSlug ? userNotificationServices.getUnreadNotificationsCount(workspaceSlug.toString()) : null)
|
||||
);
|
||||
|
||||
const handleReadMutation = (action: "read" | "unread") => {
|
||||
const notificationCountNumber = action === "read" ? -1 : 1;
|
||||
|
||||
mutateNotificationCount((prev: any) => {
|
||||
if (!prev) return prev;
|
||||
|
||||
const notificationType: keyof NotificationCount =
|
||||
selectedTab === "assigned" ? "my_issues" : selectedTab === "created" ? "created_issues" : "watching_issues";
|
||||
|
||||
return {
|
||||
...prev,
|
||||
[notificationType]: prev[notificationType] + notificationCountNumber,
|
||||
};
|
||||
}, false);
|
||||
};
|
||||
|
||||
const mutateNotification = (notificationId: string, value: object) => {
|
||||
notificationMutate((previousNotifications: any) => {
|
||||
if (!previousNotifications) return previousNotifications;
|
||||
|
||||
const notificationIndex = Math.floor(
|
||||
previousNotifications
|
||||
.map((d: any) => d.results)
|
||||
.flat()
|
||||
.findIndex((notification: any) => notification.id === notificationId) / PER_PAGE
|
||||
);
|
||||
|
||||
let notificationIndexInPage = previousNotifications[notificationIndex].results.findIndex(
|
||||
(notification: any) => notification.id === notificationId
|
||||
);
|
||||
|
||||
if (notificationIndexInPage === -1) return previousNotifications;
|
||||
|
||||
notificationIndexInPage = notificationIndexInPage === -1 ? 0 : notificationIndexInPage % PER_PAGE;
|
||||
|
||||
if (notificationIndex === -1) return previousNotifications;
|
||||
|
||||
if (notificationIndexInPage === -1) return previousNotifications;
|
||||
|
||||
const key = Object.keys(value)[0];
|
||||
(previousNotifications[notificationIndex].results[notificationIndexInPage] as any)[key] = (value as any)[key];
|
||||
|
||||
return previousNotifications;
|
||||
}, false);
|
||||
};
|
||||
|
||||
const removeNotification = (notificationId: string) => {
|
||||
notificationMutate((previousNotifications: any) => {
|
||||
if (!previousNotifications) return previousNotifications;
|
||||
|
||||
const notificationIndex = Math.floor(
|
||||
previousNotifications
|
||||
.map((d: any) => d.results)
|
||||
.flat()
|
||||
.findIndex((notification: any) => notification.id === notificationId) / PER_PAGE
|
||||
);
|
||||
|
||||
let notificationIndexInPage = previousNotifications[notificationIndex].results.findIndex(
|
||||
(notification: any) => notification.id === notificationId
|
||||
);
|
||||
|
||||
if (notificationIndexInPage === -1) return previousNotifications;
|
||||
|
||||
notificationIndexInPage = notificationIndexInPage === -1 ? 0 : notificationIndexInPage % PER_PAGE;
|
||||
|
||||
if (notificationIndex === -1) return previousNotifications;
|
||||
|
||||
if (notificationIndexInPage === -1) return previousNotifications;
|
||||
|
||||
previousNotifications[notificationIndex].results.splice(notificationIndexInPage, 1);
|
||||
|
||||
return previousNotifications;
|
||||
}, false);
|
||||
};
|
||||
|
||||
const markNotificationReadStatus = async (notificationId: string) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
const isRead = notifications?.find((notification) => notification.id === notificationId)?.read_at !== null;
|
||||
|
||||
handleReadMutation(isRead ? "unread" : "read");
|
||||
mutateNotification(notificationId, { read_at: isRead ? null : new Date() });
|
||||
|
||||
if (readNotification) removeNotification(notificationId);
|
||||
|
||||
if (isRead) {
|
||||
await userNotificationServices
|
||||
.markUserNotificationAsUnread(workspaceSlug.toString(), notificationId)
|
||||
.catch(() => {
|
||||
throw new Error("Something went wrong");
|
||||
})
|
||||
.finally(() => {
|
||||
mutateNotificationCount();
|
||||
});
|
||||
} else {
|
||||
await userNotificationServices
|
||||
.markUserNotificationAsRead(workspaceSlug.toString(), notificationId)
|
||||
.catch(() => {
|
||||
throw new Error("Something went wrong");
|
||||
})
|
||||
.finally(() => {
|
||||
mutateNotificationCount();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const markNotificationAsRead = async (notificationId: string) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
const isRead = notifications?.find((notification) => notification.id === notificationId)?.read_at !== null;
|
||||
|
||||
if (isRead) return;
|
||||
|
||||
mutateNotification(notificationId, { read_at: new Date() });
|
||||
handleReadMutation("read");
|
||||
|
||||
await userNotificationServices.markUserNotificationAsRead(workspaceSlug.toString(), notificationId).catch(() => {
|
||||
throw new Error("Something went wrong");
|
||||
});
|
||||
|
||||
mutateNotificationCount();
|
||||
};
|
||||
|
||||
const markNotificationArchivedStatus = async (notificationId: string) => {
|
||||
if (!workspaceSlug) return;
|
||||
const isArchived = notifications?.find((notification) => notification.id === notificationId)?.archived_at !== null;
|
||||
|
||||
if (!isArchived) {
|
||||
handleReadMutation("read");
|
||||
removeNotification(notificationId);
|
||||
} else {
|
||||
if (archived) {
|
||||
removeNotification(notificationId);
|
||||
}
|
||||
}
|
||||
|
||||
if (isArchived) {
|
||||
await userNotificationServices
|
||||
.markUserNotificationAsUnarchived(workspaceSlug.toString(), notificationId)
|
||||
.catch(() => {
|
||||
throw new Error("Something went wrong");
|
||||
})
|
||||
.finally(() => {
|
||||
notificationMutate();
|
||||
mutateNotificationCount();
|
||||
});
|
||||
} else {
|
||||
await userNotificationServices
|
||||
.markUserNotificationAsArchived(workspaceSlug.toString(), notificationId)
|
||||
.catch(() => {
|
||||
throw new Error("Something went wrong");
|
||||
})
|
||||
.finally(() => {
|
||||
notificationMutate();
|
||||
mutateNotificationCount();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const markSnoozeNotification = async (notificationId: string, dateTime?: Date) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
const isSnoozed = notifications?.find((notification) => notification.id === notificationId)?.snoozed_till !== null;
|
||||
|
||||
mutateNotification(notificationId, { snoozed_till: isSnoozed ? null : dateTime });
|
||||
|
||||
if (isSnoozed) {
|
||||
await userNotificationServices
|
||||
.patchUserNotification(workspaceSlug.toString(), notificationId, {
|
||||
snoozed_till: null,
|
||||
})
|
||||
.finally(() => {
|
||||
notificationMutate();
|
||||
});
|
||||
} else {
|
||||
await userNotificationServices
|
||||
.patchUserNotification(workspaceSlug.toString(), notificationId, {
|
||||
snoozed_till: dateTime,
|
||||
})
|
||||
.catch(() => {
|
||||
new Error("Something went wrong");
|
||||
})
|
||||
.finally(() => {
|
||||
notificationMutate();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const markAllNotificationsAsRead = async () => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
let markAsReadParams: IMarkAllAsReadPayload;
|
||||
|
||||
if (snoozed) markAsReadParams = { archived: false, snoozed: true };
|
||||
else if (archived) markAsReadParams = { archived: true, snoozed: false };
|
||||
else markAsReadParams = { archived: false, snoozed: false, type: readNotification ? "all" : selectedTab };
|
||||
|
||||
await userNotificationServices
|
||||
.markAllNotificationsAsRead(workspaceSlug.toString(), markAsReadParams)
|
||||
.then(() => {
|
||||
setToast({
|
||||
type: TOAST_TYPE.SUCCESS,
|
||||
title: "Success!",
|
||||
message: "All Notifications marked as read.",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message: "Something went wrong. Please try again.",
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
notificationMutate();
|
||||
mutateNotificationCount();
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
notifications,
|
||||
notificationMutate,
|
||||
markNotificationReadStatus,
|
||||
markNotificationArchivedStatus,
|
||||
markSnoozeNotification,
|
||||
snoozed,
|
||||
setSnoozed,
|
||||
archived,
|
||||
setArchived,
|
||||
readNotification,
|
||||
setReadNotification,
|
||||
selectedNotificationForSnooze,
|
||||
setSelectedNotificationForSnooze,
|
||||
selectedTab,
|
||||
setSelectedTab,
|
||||
totalNotificationCount: notificationCount
|
||||
? notificationCount.created_issues + notificationCount.watching_issues + notificationCount.my_issues
|
||||
: null,
|
||||
notificationCount,
|
||||
mutateNotificationCount,
|
||||
setSize,
|
||||
isLoading,
|
||||
isLoadingMore,
|
||||
hasMore,
|
||||
isRefreshing,
|
||||
setFetchNotifications,
|
||||
markNotificationAsRead,
|
||||
markAllNotificationsAsRead,
|
||||
};
|
||||
};
|
||||
|
||||
export default useUserNotification;
|
||||
Loading…
Add table
Add a link
Reference in a new issue