Redesigned and improved the Notifications page

config/default.js

@@ -6,7 +6,7 @@ const DAY_IN_MILLISECONDS = 1000 * 60 * 60 * 24;
 
 export default {
   api: {
-    root: 'https://candy.freefeed.net',
+    root: 'https://freefeed.net',
   },
 
   siteTitle: 'FreeFeed',

src/components/fontawesome-icons.jsx

@@ -6,6 +6,7 @@ import {
   faGlobeAmericas,
   faUserFriends,
   faPaperclip,
+  faClock,
 } from '@fortawesome/free-solid-svg-icons';
 import { faComment, faHeart as faHeartO, faImage } from '@fortawesome/free-regular-svg-icons';
 import { faCommentPlus } from './fontawesome-custom-icons';
@@ -24,6 +25,7 @@ const preloadedIcons = [
   faUserFriends,
   faImage,
   faPaperclip,
+  faClock,
 ];
 
 export const SVGSymbolDeclarations = memo(function SVGSymbolDeclarations() {

src/components/notification-body.jsx

@@ -0,0 +1,52 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector} from 'react-redux';
+
+import { getSinglePostBody, getSingleComment} from '../redux/action-creators';
+
+/**
+ * @param {string} id
+*/
+
+export function getCommentBody(id) {
+  const dispatch = useDispatch();
+  useEffect(() => void dispatch(getSingleComment(id)), [dispatch, id]);
+  return useSelector((state) => {
+    return {
+      cmBody: state.comments[id],
+      ownUsername: state.user.username,
+    };  
+  }); 
+}
+
+export function getPostBody(id) {
+  const dispatch = useDispatch();
+  useEffect(() => void dispatch(getSinglePostBody(id)), [dispatch, id]);
+  return useSelector((state) => {
+    return {
+      psBody: state.posts[id],
+      ownUsername: state.user.username,
+    };  
+  });
+}
+
+export function SingleComment({id = null}) {
+  if (id) {
+    const { cmBody, ownUsername } = getCommentBody(id);
+    var commentBody = {};
+    Object.assign(commentBody, cmBody);
+    return <div class="post-notif"><span dir="auto" class="Linkify" role="region">{commentBody.body?.replace('@' + ownUsername, '')}</span></div>
+  } else {
+    return null
+  } 
+}
+
+export function SinglePost({id = null}) {
+  if (id) {
+    const { psBody, ownUsername } = getPostBody(id);
+    var postBody = {};
+    Object.assign(postBody, psBody);
+    return <div class="post-notif"><span dir="auto" class="Linkify" role="region">{postBody.body?.replace('@' + ownUsername, '')}</span></div>
+  } else {
+    return null
+  }
+}