Notifications refactor

- Introduces server rendered notification views for easier PWA push
  notifications handling. Without this change, the PWA had to be
  updated for notifications of new notification types to reach the
  end-user. This is no longer the case since rendering is now, by
  default, handled on the server.

- Moved favicon.png from the assets dir to the public dir.

- Set the default cache-control value for static files served to an
  hour (previously, it was a day).

internal/httputil/gzip_handler.go

@@ -76,7 +76,7 @@ func serveGzip(w http.ResponseWriter, r *http.Request, fs http.FileSystem, name
 	}
 
 	if w.Header().Get("Cache-Control") == "" {
-		w.Header().Add("Cache-Control", "public, max-age=86400, immutable")
+		w.Header().Add("Cache-Control", "public, max-age=3600, immutable")
 	}
 	http.ServeContent(w, r, name, info.ModTime(), f)
 }

internal/images/record.go

@@ -275,6 +275,17 @@ func (m *Image) AppendCopy(name string, boxWidth, boxHeight int, fit ImageFit, f
 	return copy
 }
 
+// SelectCopy selects the first copy of this image that matches the name. If no
+// copy is found, it returns nil.
+func (m *Image) SelectCopy(name string) *ImageCopy {
+	for _, copy := range m.Copies {
+		if copy.Name == name {
+			return copy
+		}
+	}
+	return nil
+}
+
 // An ImageCopy is a transformed (size, format, and/or fit changed) copy of an
 // Image.
 type ImageCopy struct {

internal/utils/utils.go

@@ -6,6 +6,7 @@ import (
 	"encoding/base64"
 	"io"
 	"math/rand"
+	"strconv"
 	"strings"
 )
 
@@ -195,3 +196,19 @@ func ExtractStringsFromMap(m map[string]any, trim bool) map[string]string {
 	}
 	return strMap
 }
+
+func StringCount(number int, thingName, thingNameMultiple string, excludeNumber bool) string {
+	var s string
+	if !excludeNumber {
+		s = strconv.Itoa(number) + " "
+	}
+	if thingNameMultiple == "" {
+		thingNameMultiple = thingName + "s"
+	}
+	if number == 1 {
+		s += thingName
+	} else {
+		s += thingNameMultiple
+	}
+	return s
+}

server/user.go

@@ -381,7 +381,7 @@ func (s *Server) getNotifications(w *responseWriter, r *request) error {
 	res.NewCount = user.NumNewNotifications
 
 	query := r.urlQueryParams()
-	if res.Items, res.Next, err = core.GetNotifications(r.ctx, s.db, user.ID, 10, query.Get("next")); err != nil {
+	if res.Items, res.Next, err = core.GetNotifications(r.ctx, s.db, user.ID, 10, query.Get("next"), query.Get("render") == "true", core.TextFormat(query.Get("format"))); err != nil {
 		return err
 	}
 
@@ -394,8 +394,10 @@ func (s *Server) getNotification(w *responseWriter, r *request) error {
 		return errNotLoggedIn
 	}
 
+	query := r.urlQueryParams()
+
 	notifID := r.muxVar("notificationID")
-	notif, err := core.GetNotification(r.ctx, s.db, notifID)
+	notif, err := core.GetNotification(r.ctx, s.db, notifID, query.Get("render") == "true", core.TextFormat(query.Get("format")))
 	if err != nil {
 		if err == sql.ErrNoRows {
 			return httperr.NewNotFound("notif_not_found", "Notification not found.")
@@ -407,7 +409,6 @@ func (s *Server) getNotification(w *responseWriter, r *request) error {
 		return httperr.NewForbidden("not_owner", "")
 	}
 
-	query := r.urlQueryParams()
 	if r.req.Method == "PUT" {
 		action := query.Get("action")
 		switch action {
@@ -432,8 +433,10 @@ func (s *Server) deleteNotification(w *responseWriter, r *request) error {
 		return errNotLoggedIn
 	}
 
+	query := r.urlQueryParams()
+
 	notifID := r.muxVar("notificationID")
-	notif, err := core.GetNotification(r.ctx, s.db, notifID)
+	notif, err := core.GetNotification(r.ctx, s.db, notifID, query.Get("render") == "true", core.TextFormat(query.Get("format")))
 	if err != nil {
 		if err == sql.ErrNoRows {
 			return httperr.NewNotFound("notif_not_found", "Notification not found.")

ui/index.html

@@ -75,8 +75,8 @@
                 }
             })();
         </script>
-        <link rel="shortcut icon" href="./src/assets/imgs/favicon.png" />
-        <link rel="mask-icon" href="./src/assets/imgs/favicon.png" color="#6b02f2" />
+        <link rel="shortcut icon" href="/favicon.png" />
+        <link rel="mask-icon" href="/favicon.png" color="#6b02f2" />
         <link rel="apple-touch-icon" href="/logo-manifest-512.png" />
     </head>
     <body>

ui/service-worker.js

@@ -1,5 +1,3 @@
-import { getNotificationDisplayInformation } from './src/components/Navbar/notification';
-
 const SW_BUILD_ID = import.meta.env.VITE_SW_BUILD_ID;
 
 console.log(`Service worker version: ${SW_BUILD_ID}`);
@@ -147,17 +145,20 @@ self.addEventListener('fetch', (e) => {
 });
 
 const getNotificationInfo = (notification, csrfToken) => {
-  const { text: title, to, image } = getNotificationDisplayInformation(notification);
+  let icon = '';
+  if (notification.icons !== null) {
+    icon = notification.icons[0];
+  }
   return {
-    title: title,
+    title: notification.title,
     options: {
-      body: '',
-      icon: image.url,
+      body: notification.body,
+      icon,
       badge: '/discuit-logo-pwa-badge.png',
       tag: notification.id,
       data: {
         notificationId: notification.id,
-        toURL: `${to}?fromNotif=${notification.id}`,
+        toURL: notification.toURL,
         csrfToken,
       },
     },
@@ -190,7 +191,7 @@ self.addEventListener('push', (e) => {
       }
 
       const pushNotif = e.data.json();
-      const res = await fetch(`/api/notifications/${pushNotif.id}`);
+      const res = await fetch(`/api/notifications/${pushNotif.id}?render=true`);
       if (!res.ok) {
         console.log('notification error');
         return;
@@ -243,7 +244,7 @@ const closeSeenNotifications = async () => {
   if (existingNotifs.length === 0) {
     return;
   }
-  const res = await (await fetch('/api/notifications')).json();
+  const res = await (await fetch('/api/notifications?render=true')).json();
   const notifs = res.items || [];
   existingNotifs.forEach((exNotif) => {
     for (let i = 0; i < notifs.length; i++) {

ui/src/components/CommunityProPic.jsx

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import favicon from '../assets/imgs/favicon.png';
+import favicon from '../../public/favicon.png';
 import { selectImageCopyURL } from '../helper';
 import { useImageLoaded } from '../hooks';
 

ui/src/components/Navbar/NotificationItem.jsx

@@ -12,7 +12,6 @@ import { ButtonMore } from '../Button';
 import Dropdown from '../Dropdown';
 import Image from '../Image';
 import TimeAgo from '../TimeAgo';
-import { getNotificationDisplayInformation } from './notification';
 
 const NotificationItem = ({ notification, ...rest }) => {
   const { seen, createdAt, notif } = notification;
@@ -25,7 +24,9 @@ const NotificationItem = ({ notification, ...rest }) => {
   const handleMarkAsSeen = () => dispatch(markNotificationAsSeen(notification, !seen));
   const handleDelete = async () => {
     try {
-      await mfetchjson(`/api/notifications/${notification.id}`, { method: 'DELETE' });
+      await mfetchjson(`/api/notifications/${notification.id}?render=true&format=html`, {
+        method: 'DELETE',
+      });
       dispatch(notificationsDeleted(notification));
     } catch (error) {
       dispatch(snackAlertError(error));
@@ -56,8 +57,12 @@ const NotificationItem = ({ notification, ...rest }) => {
     );
   }
 
-  const { text: __html, to, image } = getNotificationDisplayInformation(notification, true);
-  const html = { __html };
+  let html = { __html: notification.title };
+  let to = notification.toURL;
+  let image = {
+    url: notification.icons[0],
+    backgroundColor: 'transparent',
+  };
 
   return (
     <a

ui/src/components/Navbar/NotificationsView.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { useDispatch, useSelector } from 'react-redux';
 import { APIError, mfetch, mfetchjson } from '../../helper';
@@ -20,24 +20,24 @@ const NotificationsView = () => {
   const { loaded, next, items, count, newCount } = notifications;
 
   const dispatch = useDispatch();
+  const apiEndpoint = '/api/notifications?render=true&format=html';
 
   // type is the type of notifications. Empty string means all notifications.
   const markAsSeen = async (type = '') => {
-    const res = await mfetch(`/api/notifications?action=markAllAsSeen&type=${type}`, {
+    const res = await mfetch(`${apiEndpoint}&action=markAllAsSeen&type=${type}`, {
       method: 'POST',
     });
     if (!res.ok) throw new APIError(res.status, await res.text());
     return res;
   };
 
-  const apiEndpoint = '/api/notifications';
   useEffect(() => {
     if (loaded && newCount === 0) return;
     (async () => {
       try {
         dispatch(notificationsLoaded(await mfetchjson(apiEndpoint)));
 
-        const res = await mfetch(`/api/notifications?action=resetNewCount`, { method: 'POST' });
+        const res = await mfetch(`${apiEndpoint}&action=resetNewCount`, { method: 'POST' });
         if (!res.ok) throw new APIError(res.status, await res.text());
 
         dispatch(notificationsNewCountReset());
@@ -67,7 +67,7 @@ const NotificationsView = () => {
       (async () => {
         try {
           nextItemsLoading.current = true;
-          dispatch(notificationsUpdated(await mfetchjson(`${apiEndpoint}?next=${next}`)));
+          dispatch(notificationsUpdated(await mfetchjson(`${apiEndpoint}&next=${next}`)));
         } catch (error) {
           dispatch(snackAlertError(error));
         } finally {
@@ -93,7 +93,9 @@ const NotificationsView = () => {
   };
   const handleDeleteAll = async () => {
     try {
-      const res = await mfetch(`/api/notifications?action=deleteAll`, { method: 'POST' });
+      const res = await mfetch(`${apiEndpoint}&action=deleteAll`, {
+        method: 'POST',
+      });
       if (!res.ok) throw new APIError(res.status, await res.text());
       dispatch(notificationsAllDeleted());
       dispatch(snackAlert('All notifications are deleted.'));