Add notif for New Vote Page

Author: MartinBraquet

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

@@ -0,0 +1,63 @@
+import {getPrivateUser} from 'shared/utils'
+import {createSupabaseDirectClient, SupabaseDirectClient} from 'shared/supabase/init'
+import {Notification} from 'common/notifications'
+import {insertNotificationToSupabase} from 'shared/supabase/notifications'
+import {getProfile} from 'shared/profiles/supabase'
+import {tryCatch} from "common/util/try-catch";
+import {Row} from "common/supabase/utils";
+
+export const createVoteNotificationAll = async () => {
+  const pg = createSupabaseDirectClient()
+  const {data: users, error} = await tryCatch(
+    pg.many<Row<'users'>>('select * from users')
+  )
+
+  if (error) {
+    console.error('Error fetching users', error)
+    return
+  }
+
+  if (!users) {
+    console.error('No users found')
+    return
+  }
+
+  for (const user of users) {
+    try {
+      await createVoteNotification(user, pg)
+    } catch (e) {
+      console.error('Failed to create vote notification', e, user)
+    }
+  }
+
+  return {
+    success: true,
+  }
+}
+
+export const createVoteNotification = async (user: Row<'users'>, pg: SupabaseDirectClient) => {
+  const targetPrivateUser = await getPrivateUser(user.id)
+  const profile = await getProfile(user.id)
+
+  if (!targetPrivateUser || !profile) return
+
+  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!',
+  }
+  console.log('notification', user.username)
+  return await insertNotificationToSupabase(notification, pg)
+}

common/src/notifications.ts

@@ -3,6 +3,7 @@ import { Row, SupabaseClient } from 'common/supabase/utils'
 export type Notification = {
   id: string
   userId: string
+  title?: string
   reasonText?: string
   reason: string
   createdTime: number

web/components/notification-items.tsx

@@ -35,7 +35,7 @@ export function NotificationItem(props: { notification: Notification }) {
   } else if (reason === 'new_profile_ship') {
     return <ProfileShipNotification {...params} />
   } else {
-    return <>unknown notification: {sourceType}</>
+    return <BaseNotification {...params}/>
   }
 }
 
@@ -76,6 +76,34 @@ 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
@@ -250,7 +278,7 @@ export function NotificationUserLink(props: {
 
 export function AvatarNotificationIcon(props: {
   notification: Notification
-  symbol: string | ReactNode
+  symbol?: string | ReactNode
 }) {
   const { notification, symbol } = props
   const { sourceUserName, sourceUserAvatarUrl, sourceUserUsername } =

web/hooks/use-notifications.ts

@@ -20,7 +20,7 @@ export function useGroupedUnseenNotifications(
 
 export function useGroupedNotifications(user: User, selectTypes?: string[]) {
   const notifications = useNotifications(user.id)?.filter((n) =>
-    selectTypes?.includes(n.sourceType)
+    selectTypes ? selectTypes.includes(n.sourceType) : true
   )
   const sortedNotifications = notifications
     ? sortBy(notifications, (n) => -n.createdTime)

web/pages/notifications.tsx

@@ -1,4 +1,4 @@
-import {type Notification, NOTIFICATION_TYPES_TO_SELECT, NOTIFICATIONS_PER_PAGE,} from 'common/notifications'
+import {type Notification, NOTIFICATIONS_PER_PAGE,} from 'common/notifications'
 import {PrivateUser, type User} from 'common/src/user'
 import {
   notification_destination_types,
@@ -25,7 +25,7 @@ import {useRedirectIfSignedOut} from "web/hooks/use-redirect-if-signed-out";
 export default function NotificationsPage() {
   useRedirectIfSignedOut()
   return (
-    <PageBase trackPageView={'notifications page'}>
+    <PageBase trackPageView={'notifications page'} className={'mx-4'}>
       <NoSEO/>
       <Title>Updates</Title>
       <UncontrolledTabs
@@ -49,8 +49,10 @@ function LoadedNotificationsContent(props: { user: User }) {
   const {user} = props
   const privateUser = usePrivateUser()
 
-  const {groupedNotifications, mostRecentNotification} =
-    useGroupedNotifications(user, NOTIFICATION_TYPES_TO_SELECT)
+  const {groupedNotifications, mostRecentNotification} = useGroupedNotifications(
+    user,
+    // NOTIFICATION_TYPES_TO_SELECT
+  )
 
   const [page, setPage] = useState(0)