Refactor notification process

backend/api/src/create-vote-notification.ts

@@ -4,7 +4,25 @@ import {insertNotificationToSupabase} from 'shared/supabase/notifications'
 import {tryCatch} from "common/util/try-catch";
 import {Row} from "common/supabase/utils";
 
-export const createVoteNotificationAll = async () => {
+export const createVoteNotifications = async () => {
+  const createdTime = Date.now();
+  const id = `vote-${createdTime}`
+  const notification: Notification = {
+    id,
+    userId: 'todo',
+    createdTime: createdTime,
+    isSeen: false,
+    sourceType: 'info',
+    sourceUpdateType: 'created',
+    sourceSlug: '/vote',
+    sourceUserAvatarUrl: 'https://firebasestorage.googleapis.com/v0/b/compass-130ba.firebasestorage.app/o/misc%2Fvote-icon-design-free-vector.jpg?alt=media&token=f70b6d14-0511-49b2-830d-e7cabf7bb751',
+    title: 'New Proposals & Votes Page',
+    sourceText: 'Create proposals and vote on other people\'s suggestions!',
+  }
+  return await createNotifications(notification)
+}
+
+export const createNotifications = async (notification: Notification) => {
   const pg = createSupabaseDirectClient()
   const {data: users, error} = await tryCatch(
     pg.many<Row<'users'>>('select * from users')
@@ -22,9 +40,9 @@ export const createVoteNotificationAll = async () => {
 
   for (const user of users) {
     try {
-      await createVoteNotification(user, pg)
+      await createNotification(user, notification, pg)
     } catch (e) {
-      console.error('Failed to create vote notification', e, user)
+      console.error('Failed to create notification', e, user)
     }
   }
 
@@ -33,24 +51,8 @@ export const createVoteNotificationAll = async () => {
   }
 }
 
-export const createVoteNotification = async (user: Row<'users'>, pg: SupabaseDirectClient) => {
-  const id = `vote-${Date.now()}`
-  const notification: Notification = {
-    id,
-    userId: user.id,
-    reason: 'vote',
-    createdTime: Date.now(),
-    isSeen: false,
-    sourceId: '',
-    sourceType: 'vote',
-    sourceUpdateType: 'created',
-    sourceUserName: '',
-    sourceUserUsername: 'vote',
-    sourceSlug: '/vote',
-    sourceUserAvatarUrl: 'https://firebasestorage.googleapis.com/v0/b/compass-130ba.firebasestorage.app/o/misc%2Fvote-icon-design-free-vector.jpg?alt=media&token=f70b6d14-0511-49b2-830d-e7cabf7bb751',
-    title: 'New Proposals & Votes Page',
-    sourceText: 'Create proposals and vote on other people\'s suggestions!',
-  }
+export const createNotification = async (user: Row<'users'>, notification: Notification, pg: SupabaseDirectClient) => {
+  notification.userId = user.id
   console.log('notification', user.username)
   return await insertNotificationToSupabase(notification, pg)
 }

common/src/notifications.ts

@@ -5,18 +5,18 @@ export type Notification = {
   userId: string
   title?: string
   reasonText?: string
-  reason: string
+  reason?: string
   createdTime: number
   viewTime?: number
   isSeen: boolean
 
-  sourceId: string
+  sourceId?: string
   sourceType: string
   sourceUpdateType?: 'created' | 'updated' | 'deleted'
 
-  sourceUserName: string
-  sourceUserUsername: string
-  sourceUserAvatarUrl: string
+  sourceUserName?: string
+  sourceUserUsername?: string
+  sourceUserAvatarUrl?: string
   sourceText: string
   data?: { [key: string]: any }
 

web/components/multi-user-reaction-link.tsx

@@ -20,8 +20,8 @@ export function MultiUserReactionModal(props: {
             className="w-full"
             user={{
               id: notif.userId,
-              name: notif.sourceUserName,
-              username: notif.sourceUserUsername,
+              name: notif.sourceUserName ?? 'Name',
+              username: notif.sourceUserUsername ?? 'Username',
             }}
           />
         ))}

web/components/notification-items.tsx

@@ -39,6 +39,34 @@ export function NotificationItem(props: { notification: Notification }) {
   }
 }
 
+export function BaseNotification(props: {
+  notification: Notification
+  highlighted: boolean
+  setHighlighted: (highlighted: boolean) => void
+}) {
+  const { notification, highlighted, setHighlighted } = props
+  return (
+    <NotificationFrame
+      notification={notification}
+      highlighted={highlighted}
+      setHighlighted={setHighlighted}
+      icon={
+        <AvatarNotificationIcon notification={notification} />
+      }
+      subtitle={
+        <div className="line-clamp-2">
+          <Linkify text={notification.sourceText} />
+        </div>
+      }
+      link={notification.sourceSlug}
+    >
+      <div className="line-clamp-3">
+        <span>{notification.title}</span>
+      </div>
+    </NotificationFrame>
+  )
+}
+
 export function CommentOnProfileNotification(props: {
   notification: Notification
   highlighted: boolean
@@ -76,34 +104,6 @@ export function CommentOnProfileNotification(props: {
   )
 }
 
-export function BaseNotification(props: {
-  notification: Notification
-  highlighted: boolean
-  setHighlighted: (highlighted: boolean) => void
-}) {
-  const { notification, highlighted, setHighlighted } = props
-  return (
-    <NotificationFrame
-      notification={notification}
-      highlighted={highlighted}
-      setHighlighted={setHighlighted}
-      icon={
-        <AvatarNotificationIcon notification={notification} />
-      }
-      subtitle={
-        <div className="line-clamp-2">
-          <Linkify text={notification.sourceText} />
-        </div>
-      }
-      link={notification.sourceSlug}
-    >
-      <div className="line-clamp-3">
-        <span>{notification.title}</span>
-      </div>
-    </NotificationFrame>
-  )
-}
-
 export function NewMatchNotification(props: {
   notification: Notification
   highlighted: boolean
@@ -281,9 +281,8 @@ export function AvatarNotificationIcon(props: {
   symbol?: string | ReactNode
 }) {
   const { notification, symbol } = props
-  const { sourceUserName, sourceUserAvatarUrl, sourceUserUsername } =
-    notification
-  const href = `/${sourceUserUsername}`
+  const { sourceUserName, sourceUserAvatarUrl, sourceUserUsername, sourceSlug } = notification
+  const href = !!sourceUserUsername ? `/${sourceUserUsername}` : sourceSlug ?? '/'
   return (
     <div className="relative">
       <Link

web/hooks/use-notifications.ts

@@ -48,7 +48,7 @@ function groupGeneralNotifications(
   if (!sortedNotifications) return []
 
   const groupedNotificationsByDayAndContract = groupBy(
-    sortedNotifications.filter((n) => !except.includes(n.reason)),
+    sortedNotifications.filter((n) => !except.includes(n.reason ?? '')),
     (n) =>
       new Date(n.createdTime).toDateString() +
       (n.sourceType === 'betting_streak_bonus' || n.reason === 'quest_payout'