feat: init

apps/web/ce/components/workspace-notifications/index.ts

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

apps/web/ce/components/workspace-notifications/list-root.tsx

@@ -0,0 +1,8 @@
+import { NotificationCardListRoot } from "./notification-card/root";
+
+export type TNotificationListRoot = {
+  workspaceSlug: string;
+  workspaceId: string;
+};
+
+export const NotificationListRoot = (props: TNotificationListRoot) => <NotificationCardListRoot {...props} />;

apps/web/ce/components/workspace-notifications/notification-card/root.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import type { FC } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// components
+import { NotificationItem } from "@/components/workspace-notifications/sidebar/notification-card/item";
+// hooks
+import { useWorkspaceNotifications } from "@/hooks/store/notifications";
+
+type TNotificationCardListRoot = {
+  workspaceSlug: string;
+  workspaceId: string;
+};
+
+export const NotificationCardListRoot: FC<TNotificationCardListRoot> = observer((props) => {
+  const { workspaceSlug, workspaceId } = props;
+  // hooks
+  const { loader, paginationInfo, getNotifications, notificationIdsByWorkspaceId } = useWorkspaceNotifications();
+  const notificationIds = notificationIdsByWorkspaceId(workspaceId);
+  const { t } = useTranslation();
+
+  const getNextNotifications = async () => {
+    try {
+      await getNotifications(workspaceSlug, ENotificationLoader.PAGINATION_LOADER, ENotificationQueryParamType.NEXT);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  if (!workspaceSlug || !workspaceId || !notificationIds) return <></>;
+  return (
+    <div>
+      {notificationIds.map((notificationId: string) => (
+        <NotificationItem key={notificationId} workspaceSlug={workspaceSlug} notificationId={notificationId} />
+      ))}
+
+      {/* fetch next page notifications */}
+      {paginationInfo && paginationInfo?.next_page_results && (
+        <>
+          {loader === ENotificationLoader.PAGINATION_LOADER ? (
+            <div className="py-4 flex justify-center items-center text-sm font-medium">
+              <div className="text-custom-primary-90">{t("loading")}...</div>
+            </div>
+          ) : (
+            <div className="py-4 flex justify-center items-center text-sm font-medium" onClick={getNextNotifications}>
+              <div className="text-custom-primary-90 hover:text-custom-primary-100 transition-all cursor-pointer">
+                {t("load_more")}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+});