add docs; update readme

README.md

@@ -115,6 +115,7 @@ We at [etke.cc](https://etke.cc) attempting to develop everything open-source, b
 The following list contains such features - they are only available for [etke.cc](https://etke.cc) customers.
 
 * 📊 [Server Status indicator and page](https://github.com/etkecc/synapse-admin/pull/182)
+* 📬 [Server Notifications indicator and page](https://github.com/etkecc/synapse-admin/pull/240)
 
 ### Development
 

src/components/etke.cc/README.md

@@ -28,3 +28,15 @@ Server Status page. This page contains the following information:
 * Overall server status (up/updating/has issues)
 * Details about the currently running command (if any)
 * Details about the server's components statuses (up/down with error details and suggested actions) by categories
+
+### Server Notifications icon
+
+![Server Notifications icon](../../../screenshots/etke.cc/server-notifications/badge.webp)
+
+In the application bar the new notifications icon is displayed that shows the number of unread (not removed) notifications
+
+### Server Notifications page
+
+![Server Notifications Page](../../../screenshots/etke.cc/server-notifications/page.webp)
+
+When you click on a notification from the [Server Notifications icon](#server-notifications-icon)'s list in the application bar, you will be redirected to the Server Notifications page. This page contains the full text of all the notifications you have about your server.

src/components/etke.cc/ServerNotificationsBadge.tsx

@@ -7,8 +7,7 @@ import { Fragment, useEffect, useState } from "react";
 import { useAppContext } from "../../Context";
 import { ServerNotificationsResponse } from "../../synapse/dataProvider";
 
-// 10 seconds
-const SERVER_NOTIFICATIONS_INTERVAL_TIME = 10000;
+const SERVER_NOTIFICATIONS_INTERVAL_TIME = 300000;
 
 const useServerNotifications = () => {
   const [serverNotifications, setServerNotifications] = useStore<ServerNotificationsResponse>("serverNotifications", { notifications: [], success: false });
@@ -37,9 +36,9 @@ const useServerNotifications = () => {
     if (etkeccAdmin) {
       fetchNotifications();
       setTimeout(() => {
-        // start the interval after 10 seconds to avoid too many requests
+        // start the interval after the SERVER_NOTIFICATIONS_INTERVAL_TIME to avoid too many requests
         serverNotificationsInterval = setInterval(fetchNotifications, SERVER_NOTIFICATIONS_INTERVAL_TIME);
-      }, 10000);
+      }, SERVER_NOTIFICATIONS_INTERVAL_TIME);
     }
 
     return () => {
@@ -131,8 +130,8 @@ export const ServerNotificationsBadge = () => {
                     <Box sx={{ cursor: "pointer", color: theme.palette.primary.main }} onClick={() => handleSeeAllNotifications()}>See all notifications</Box>
                   </ListSubheader>
                 <Divider />
-                {notifications.map((notification) => (
-                  <Fragment key={notification.event_id}>
+                {notifications.map((notification, index) => {
+                  return (<Fragment key={notification.event_id ? notification.event_id : index }>
                     <ListItem
                       onClick={() => handleSeeAllNotifications()}
                       sx={{
@@ -158,7 +157,7 @@ export const ServerNotificationsBadge = () => {
                     </ListItem>
                     <Divider />
                   </Fragment>
-                ))}
+                )})}
                 <ListItem>
                   <Button
                     key="clear-all-notifications"

src/components/etke.cc/ServerNotificationsPage.tsx

@@ -40,8 +40,8 @@ const ServerNotificationsPage = () => {
           <Typography>No new notifications.</Typography>
         </Paper>
       ) : (
-        notifications.map((notification) => (
-          <Paper key={notification.event_id} sx={{ p: 2 }}>
+        notifications.map((notification, index) => (
+          <Paper key={notification.event_id ? notification.event_id : index} sx={{ p: 2 }}>
             <Stack spacing={1}>
               <Typography variant="subtitle1" fontWeight="bold" color="text.secondary">
                 <DisplayTime date={notification.sent_at} />

src/index.tsx

@@ -9,9 +9,9 @@ import { FetchConfig, GetConfig } from "./utils/config";
 await FetchConfig();
 
 createRoot(document.getElementById("root")).render(
-      // <React.StrictMode>
+      <React.StrictMode>
         <AppContext.Provider value={GetConfig()}>
           <App />
         </AppContext.Provider>
-      // </React.StrictMode>
+      </React.StrictMode>
 );

src/synapse/authProvider.ts

@@ -80,11 +80,7 @@ const authProvider: AuthProvider = {
       localStorage.setItem("access_token", accessToken ? accessToken : json.access_token);
       localStorage.setItem("device_id", json.device_id);
       localStorage.setItem("login_type", accessToken ? "accessToken" : "credentials");
-
-      // when doing access token auth, config is not fetched, so we need to do it here
-      if (accessToken) {
-        await FetchConfig();
-      }
+      await FetchConfig();
 
       return Promise.resolve({redirectTo: "/"});
     } catch(err) {

src/synapse/dataProvider.ts

@@ -1054,7 +1054,6 @@ const baseDataProvider: SynapseDataProvider = {
 
       const status = response.status;
       if (status === 204) {
-        const json = await response.json();
         const result = { success: true }
         return result;
       }

src/utils/config.ts

@@ -53,7 +53,6 @@ export const FetchConfig = async () => {
       console.log(`${protocol}://${homeserver}/.well-known/matrix/client not found, skipping`, e);
     }
   }
-
 }
 
 // load config from context