update notifications,

2025-04-24 20:02:56 +08:00
parent b8e8968866
commit 2dcc765072
17 changed files with 348 additions and 57 deletions
--- a/002_source/cms/src/components/dashboard/layout/notifications-popover/index.tsx
+++ b/002_source/cms/src/components/dashboard/layout/notifications-popover/index.tsx
@@ -18,46 +18,14 @@ import { X as XIcon } from '@phosphor-icons/react/dist/ssr/X';
 import { useTranslation } from 'react-i18next';

 import { dayjs } from '@/lib/dayjs';
-
-export type Notification = { id: string; createdAt: Date; read: boolean } & (
-  | { type: 'new_feature'; description: string }
-  | { type: 'new_company'; author: { name: string; avatar?: string }; company: { name: string } }
-  | { type: 'new_job'; author: { name: string; avatar?: string }; job: { title: string } }
-);
-
-const notifications = [
-  {
-    id: 'EV-004',
-    createdAt: dayjs().subtract(7, 'minute').subtract(5, 'hour').subtract(1, 'day').toDate(),
-    read: false,
-    type: 'new_job',
-    author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
-    job: { title: 'Remote React / React Native Developer' },
-  },
-  {
-    id: 'EV-003',
-    createdAt: dayjs().subtract(18, 'minute').subtract(3, 'hour').subtract(5, 'day').toDate(),
-    read: true,
-    type: 'new_job',
-    author: { name: 'Fran Perez', avatar: '/assets/avatar-5.png' },
-    job: { title: 'Senior Golang Backend Engineer' },
-  },
-  {
-    id: 'EV-002',
-    createdAt: dayjs().subtract(4, 'minute').subtract(5, 'hour').subtract(7, 'day').toDate(),
-    read: true,
-    type: 'new_feature',
-    description: 'Logistics management is now available',
-  },
-  {
-    id: 'EV-001',
-    createdAt: dayjs().subtract(7, 'minute').subtract(8, 'hour').subtract(7, 'day').toDate(),
-    read: true,
-    type: 'new_company',
-    author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
-    company: { name: 'Stripe' },
-  },
-] satisfies Notification[];
+// import type { Notification } from './type.d.tsx.del';
+import { SampleNotifications } from './sample-notifications';
+import { useHelloworld } from '@/hooks/use-helloworld';
+import { getAllNotifications } from '@/db/Notifications/GetAll';
+import { ListResult, RecordModel } from 'pocketbase';
+import { defaultNotification } from '@/db/Notifications/constants';
+import { getNotificationsByUserId } from '@/db/Notifications/GetNotificationByUserId';
+import { Notification } from '@/db/Notifications/type';

 export interface NotificationsPopoverProps {
  anchorEl: null | Element;
@@ -75,6 +43,38 @@ export function NotificationsPopover({
  open = false,
 }: NotificationsPopoverProps): React.JSX.Element {
  const { t } = useTranslation();
+  const [notiList, setNotiList] = React.useState<Notification[]>([]);
+
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const { data, handleClose, handleOpen, open: testOpen } = useHelloworld<string>();
+  React.useEffect(() => {
+    setLoading(true);
+    async function LoadAllNotifications() {
+      const notiList: Notification[] = await getNotificationsByUserId('1');
+      setNotiList(notiList);
+    }
+    setLoading(false);
+    void LoadAllNotifications();
+  }, []);
+
+  if (loading) return <>Loading</>;
+  if (error) return <>Error</>;
+  if (notiList.length == 0)
+    return (
+      <Popover
+        anchorEl={anchorEl}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+        onClose={onClose}
+        open={open}
+        slotProps={{ paper: { sx: { width: '380px' } } }}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+      >
+        list is empty
+      </Popover>
+    );
+
  return (
    <Popover
      anchorEl={anchorEl}
@@ -84,24 +84,31 @@ export function NotificationsPopover({
      slotProps={{ paper: { sx: { width: '380px' } } }}
      transformOrigin={{ horizontal: 'right', vertical: 'top' }}
    >
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between', px: 3, py: 2 }}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'center', justifyContent: 'space-between', px: 3, py: 2 }}
+      >
        <Typography variant="h6">{t('Notifications')}</Typography>
        <Tooltip title={t('Mark all as read')}>
-          <IconButton edge="end" onClick={onMarkAllAsRead}>
+          <IconButton
+            edge="end"
+            onClick={onMarkAllAsRead}
+          >
            <EnvelopeSimpleIcon />
          </IconButton>
        </Tooltip>
      </Stack>
-      {notifications.length === 0 ? (
+      {notiList.length === 0 ? (
        <Box sx={{ p: 2 }}>
          <Typography variant="subtitle2">{t('There are no notifications')}</Typography>
        </Box>
      ) : (
        <Box sx={{ maxHeight: '270px', overflowY: 'auto' }}>
          <List disablePadding>
-            {notifications.map((notification, index) => (
+            {notiList.map((notification, index) => (
              <NotificationItem
-                divider={index < notifications.length - 1}
+                divider={index < SampleNotifications.length - 1}
                key={notification.id}
                notification={notification}
                onRemove={() => {
@@ -124,10 +131,17 @@ interface NotificationItemProps {

 function NotificationItem({ divider, notification, onRemove }: NotificationItemProps): React.JSX.Element {
  return (
-    <ListItem divider={divider} sx={{ alignItems: 'flex-start', justifyContent: 'space-between' }}>
+    <ListItem
+      divider={divider}
+      sx={{ alignItems: 'flex-start', justifyContent: 'space-between' }}
+    >
      <NotificationContent notification={notification} />
      <Tooltip title="Remove">
-        <IconButton edge="end" onClick={onRemove} size="small">
+        <IconButton
+          edge="end"
+          onClick={onRemove}
+          size="small"
+        >
          <XIcon />
        </IconButton>
      </Tooltip>
@@ -142,14 +156,21 @@ interface NotificationContentProps {
 function NotificationContent({ notification }: NotificationContentProps): React.JSX.Element {
  if (notification.type === 'new_feature') {
    return (
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'flex-start' }}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'flex-start' }}
+      >
        <Avatar>
          <ChatTextIcon fontSize="var(--Icon-fontSize)" />
        </Avatar>
        <div>
          <Typography variant="subtitle2">New feature!</Typography>
          <Typography variant="body2">{notification.description}</Typography>
-          <Typography color="text.secondary" variant="caption">
+          <Typography
+            color="text.secondary"
+            variant="caption"
+          >
            {dayjs(notification.createdAt).format('MMM D, hh:mm A')}
          </Typography>
        </div>
@@ -159,22 +180,35 @@ function NotificationContent({ notification }: NotificationContentProps): React.

  if (notification.type === 'new_company') {
    return (
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'flex-start' }}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'flex-start' }}
+      >
        <Avatar src={notification.author.avatar}>
          <UserIcon />
        </Avatar>
        <div>
          <Typography variant="body2">
-            <Typography component="span" variant="subtitle2">
+            <Typography
+              component="span"
+              variant="subtitle2"
+            >
              {notification.author.name}
            </Typography>{' '}
            created{' '}
-            <Link underline="always" variant="body2">
+            <Link
+              underline="always"
+              variant="body2"
+            >
              {notification.company.name}
            </Link>{' '}
            company
          </Typography>
-          <Typography color="text.secondary" variant="caption">
+          <Typography
+            color="text.secondary"
+            variant="caption"
+          >
            {dayjs(notification.createdAt).format('MMM D, hh:mm A')}
          </Typography>
        </div>
@@ -184,21 +218,34 @@ function NotificationContent({ notification }: NotificationContentProps): React.

  if (notification.type === 'new_job') {
    return (
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'flex-start' }}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'flex-start' }}
+      >
        <Avatar src={notification.author.avatar}>
          <UserIcon />
        </Avatar>
        <div>
          <Typography variant="body2">
-            <Typography component="span" variant="subtitle2">
+            <Typography
+              component="span"
+              variant="subtitle2"
+            >
              {notification.author.name}
            </Typography>{' '}
            added a new job{' '}
-            <Link underline="always" variant="body2">
+            <Link
+              underline="always"
+              variant="body2"
+            >
              {notification.job.title}
            </Link>
          </Typography>
-          <Typography color="text.secondary" variant="caption">
+          <Typography
+            color="text.secondary"
+            variant="caption"
+          >
            {dayjs(notification.createdAt).format('MMM D, hh:mm A')}
          </Typography>
        </div>
--- a/002_source/cms/src/components/dashboard/layout/notifications-popover/sample-notifications.tsx
+++ b/002_source/cms/src/components/dashboard/layout/notifications-popover/sample-notifications.tsx
@@ -0,0 +1,37 @@
+'use client';
+import { dayjs } from '@/lib/dayjs';
+import type { Notification } from './type.d.tsx.del';
+
+export const SampleNotifications = [
+  {
+    id: 'EV-004',
+    createdAt: dayjs().subtract(7, 'minute').subtract(5, 'hour').subtract(1, 'day').toDate(),
+    read: false,
+    type: 'new_job',
+    author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
+    job: { title: 'Remote React / React Native Developer' },
+  },
+  {
+    id: 'EV-003',
+    createdAt: dayjs().subtract(18, 'minute').subtract(3, 'hour').subtract(5, 'day').toDate(),
+    read: true,
+    type: 'new_job',
+    author: { name: 'Fran Perez', avatar: '/assets/avatar-5.png' },
+    job: { title: 'Senior Golang Backend Engineer' },
+  },
+  {
+    id: 'EV-002',
+    createdAt: dayjs().subtract(4, 'minute').subtract(5, 'hour').subtract(7, 'day').toDate(),
+    read: true,
+    type: 'new_feature',
+    description: 'Logistics management is now available',
+  },
+  {
+    id: 'EV-001',
+    createdAt: dayjs().subtract(7, 'minute').subtract(8, 'hour').subtract(7, 'day').toDate(),
+    read: true,
+    type: 'new_company',
+    author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
+    company: { name: 'Stripe' },
+  },
+] satisfies Notification[];