wr-419: Display notification about New articles written by followed authors on all pages

backend/src/db/migrations/20230929065718_update_user_achievements_description.ts

@@ -0,0 +1,153 @@
+import { type Knex } from 'knex';
+
+const NOT_STARTED_ARTICLE_ACHIEVEMENT_DESCRIPTION =
+  'Get started on your writing journey! Your first article is just a few keystrokes away. Dive in and share your thoughts with the world.';
+const NOT_STARTED_COMMENT_ACHIEVEMENT_DESCRIPTION =
+  'Ready to join the conversation? Leave your first comment and become a part of the discussion!';
+const UPDATED_ACHIEVEMENTS = [
+  {
+    key: 'write_first_article',
+    description: {
+      notStarted: NOT_STARTED_ARTICLE_ACHIEVEMENT_DESCRIPTION,
+      earlyStage: NOT_STARTED_ARTICLE_ACHIEVEMENT_DESCRIPTION,
+      inProgress: NOT_STARTED_ARTICLE_ACHIEVEMENT_DESCRIPTION,
+      done: 'Congratulations on completing your first article! 🎉 Your journey as a writer has begun. Share your work with pride!',
+    },
+  },
+  {
+    key: 'write_5_articles',
+    description: {
+      notStarted: NOT_STARTED_ARTICLE_ACHIEVEMENT_DESCRIPTION,
+      earlyStage:
+        'You are off to a great start with your first article! Keep those ideas flowing and your pen moving.',
+      inProgress:
+        'You are making progress on your path to writing five articles! Keep those creative juices flowing, and you will reach your next milestone soon.',
+      done: 'Congratulations on writing your fifth article! 🎉 You are building a substantial body of work. Keep the momentum going!',
+    },
+  },
+  {
+    key: 'write_10_articles',
+    description: {
+      notStarted: NOT_STARTED_ARTICLE_ACHIEVEMENT_DESCRIPTION,
+      earlyStage:
+        'You are making progress toward writing ten articles! Stay committed, and you will soon reach this significant milestone.',
+      inProgress:
+        'You are well on your way to completing your tenth article! Keep up the excellent work, and you will achieve this milestone in no time.',
+      done: 'Congratulations on writing your tenth article! 🎉 You have proven your dedication to writing. Keep the creativity flowing!',
+    },
+  },
+  {
+    key: 'write_15_articles',
+    description: {
+      notStarted: NOT_STARTED_ARTICLE_ACHIEVEMENT_DESCRIPTION,
+      earlyStage: 'You are making progress toward writing fifteen articles!',
+      inProgress:
+        'You are well on your way to completing your fifteenth article! Keep up the excellent work!',
+      done: 'Congratulations on writing your fifteenth article! 🎉 Your dedication to writing is truly impressive. Keep those creative ideas flowing!',
+    },
+  },
+  {
+    key: 'write_25_articles',
+    description: {
+      notStarted: NOT_STARTED_ARTICLE_ACHIEVEMENT_DESCRIPTION,
+      earlyStage:
+        'You are making headway toward writing twenty-five articles! Keep those creative juices flowing, and you will soon achieve this significant milestone.',
+      inProgress:
+        'You are well on your way to completing your twenty-fifth article! Your dedication to writing is paying off. Keep up the great work!',
+      done: 'Congratulations on writing your twenty-fifth article! 🎉 Your body of work is substantial, and your commitment to writing is commendable. Keep inspiring others!',
+    },
+  },
+  {
+    key: 'write_50_articles',
+    description: {
+      notStarted: NOT_STARTED_ARTICLE_ACHIEVEMENT_DESCRIPTION,
+      earlyStage:
+        'You are on your way to writing fifty articles! Keep the momentum going!',
+      inProgress:
+        'You are getting closer to writing your fiftieth article! Your dedication to writing is evident. Keep pushing forward!',
+      done: 'Congratulations on writing your fiftieth article! 🎉 You are a prolific writer, and your dedication is an inspiration to others. Keep the words flowing!',
+    },
+  },
+  {
+    key: 'write_first_comment',
+    description: {
+      notStarted: NOT_STARTED_COMMENT_ACHIEVEMENT_DESCRIPTION,
+      earlyStage: NOT_STARTED_COMMENT_ACHIEVEMENT_DESCRIPTION,
+      inProgress: NOT_STARTED_COMMENT_ACHIEVEMENT_DESCRIPTION,
+      done: 'Congratulations on leaving your first comment! 🎉 Your voice matters, and you are making an impact in the community.',
+    },
+  },
+  {
+    key: 'write_5_comments',
+    description: {
+      notStarted: NOT_STARTED_COMMENT_ACHIEVEMENT_DESCRIPTION,
+      earlyStage:
+        'You are off to a great start with your first comment! Keep up the great work!',
+      inProgress:
+        'You are actively engaging with discussions! Your participation is valuable, and you are well on your way to achieving this milestone.',
+      done: 'Congratulations on leaving your fifth comment! 🎉 You are becoming a respected voice in the community. Keep those insights flowing!',
+    },
+  },
+  {
+    key: 'write_10_comments',
+    description: {
+      notStarted: NOT_STARTED_COMMENT_ACHIEVEMENT_DESCRIPTION,
+      earlyStage:
+        'You are making great strides in the world of commenting! Keep engaging with the community!',
+      inProgress:
+        'You are actively engaging with discussions and making an impact! Keep it up, and you will achieve this milestone in no time.',
+      done: 'Congratulations on leaving your tenth comment! 🎉 Your contributions are valued, and you are a key part of the community.',
+    },
+  },
+  {
+    key: 'write_15_comments',
+    description: {
+      notStarted: NOT_STARTED_COMMENT_ACHIEVEMENT_DESCRIPTION,
+      earlyStage:
+        'You are on your way to writing fifteen comments! Keep engaging with the community!',
+      inProgress:
+        'You are actively participating in discussions and making your voice heard!',
+      done: 'Congratulations on leaving your fifteenth comment! 🎉 Your contributions are invaluable, and you are a respected member of the community.',
+    },
+  },
+  {
+    key: 'write_25_comments',
+    description: {
+      notStarted: NOT_STARTED_COMMENT_ACHIEVEMENT_DESCRIPTION,
+      earlyStage:
+        'You are actively engaging with discussions and contributing to the community! Your dedication is taking you closer to this achievement.',
+      inProgress: 'You are well on your way to leaving twenty-five comments!',
+      done: 'Congratulations on leaving your twenty-fifth comment! 🎉 You are a valuable member of the community, and your insights are making a difference.',
+    },
+  },
+  {
+    key: 'write_50_comments',
+    description: {
+      notStarted: NOT_STARTED_COMMENT_ACHIEVEMENT_DESCRIPTION,
+      earlyStage:
+        'You are making substantial contributions to discussions! Keep sharing your insights.',
+      inProgress:
+        'You are actively participating in discussions and leaving your mark! Your dedication to commenting is paying off as you work toward this achievement.',
+      done: 'Congratulations on leaving your fiftieth comment! 🎉 You are a prolific commenter and a cornerstone of the community. Keep the conversations alive!',
+    },
+  },
+];
+
+const TABLE_NAME = 'achievements';
+
+const ColumnName = {
+  KEY: 'key',
+  DESCRIPTION: 'description',
+} as const;
+
+async function up(knex: Knex): Promise<void> {
+  for (const achievement of UPDATED_ACHIEVEMENTS) {
+    await knex(TABLE_NAME)
+      .where(ColumnName.KEY, achievement.key)
+      .update({ [ColumnName.DESCRIPTION]: achievement.description });
+  }
+}
+
+async function down(): Promise<void> {}
+
+export { down, up };

backend/src/packages/articles/article-socket.service.ts

@@ -64,6 +64,7 @@ class ArticleSocketService {
       this.namespace.to(SocketRoom.ARTICLES_FEED).emit(NEW_ARTICLE, {
         article,
         isByFollowingAuthor: authorFollowersIds.has(socketUserId),
+        socketUserId,
       });
     }
   }

frontend/src/libs/components/app/app.tsx

@@ -11,6 +11,7 @@ import { DataStatus } from '~/libs/enums/enums.js';
 import {
   useAppDispatch,
   useAppSelector,
+  useArticlesFeedRoom,
   useEffect,
   useNavigate,
 } from '~/libs/hooks/hooks.js';
@@ -27,6 +28,7 @@ const App: React.FC = () => {
   }));
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
+  useArticlesFeedRoom();
 
   const hasUser = Boolean(user);
 

frontend/src/libs/hooks/use-articles-feed-room/use-articles-feed-room.hook.ts

@@ -1,5 +1,11 @@
 import { AppRoute } from '~/libs/enums/app-route.enum.js';
-import { useEffect, useLocation } from '~/libs/hooks/hooks.js';
+import { getFullName } from '~/libs/helpers/helpers.js';
+import {
+  useAppDispatch,
+  useAppSelector,
+  useEffect,
+  useLocation,
+} from '~/libs/hooks/hooks.js';
 import { SocketNamespace, SocketRoom } from '~/libs/packages/socket/socket.js';
 import {
   type ArticleReactionsSocketEventPayload,
@@ -9,15 +15,16 @@ import {
   ArticleReactionsSocketEvent,
   ArticleSocketEvent,
 } from '~/packages/articles/articles.js';
+import { actions as appActions } from '~/slices/app/app.js';
 import { actions as articleActions } from '~/slices/articles/articles.js';
 
-import { useAppDispatch } from '../use-app-dispatch/use-app-dispatch.hook.js';
 import { useSocketNamespace } from '../use-socket-namespace/use-socket-namespace.hook.js';
 
 const { NEW_ARTICLE } = ArticleSocketEvent;
 const { NEW_REACTION } = ArticleReactionsSocketEvent;
 
 const useArticlesFeedRoom = (): void => {
+  const { user } = useAppSelector(({ auth }) => auth);
   const dispatch = useAppDispatch();
   const location = useLocation();
 
@@ -40,8 +47,24 @@ const useArticlesFeedRoom = (): void => {
     articlesSocket?.on(
       NEW_ARTICLE,
       (newArticle: ArticleSocketEventPayload[typeof NEW_ARTICLE]) => {
-        if (location.pathname === AppRoute.ARTICLES) {
-          void dispatch(articleActions.addArticle(newArticle));
+        if (user?.id === newArticle.socketUserId) {
+          if (location.pathname === AppRoute.ARTICLES) {
+            void dispatch(articleActions.addArticle(newArticle));
+          }
+
+          if (newArticle.isByFollowingAuthor) {
+            const { author } = newArticle.article;
+
+            void dispatch(
+              appActions.notify({
+                type: 'info',
+                message: `New article from ${getFullName(
+                  author.firstName,
+                  author.lastName,
+                )}`,
+              }),
+            );
+          }
         }
       },
     );
@@ -52,7 +75,13 @@ const useArticlesFeedRoom = (): void => {
         void dispatch(articleActions.addReactionToArticlesFeed(reaction));
       },
     );
-  }, [dispatch, articlesSocketReference, reactionsSocketReference, location]);
+  }, [
+    dispatch,
+    articlesSocketReference,
+    reactionsSocketReference,
+    location,
+    user,
+  ]);
 };
 
 export { useArticlesFeedRoom };

frontend/src/libs/hooks/use-socket-namespace/use-socket-namespace.hook.ts

@@ -10,7 +10,7 @@ import { useAppSelector, useEffect, useReference } from '../hooks.js';
 const useSocketNamespace = (
   namespace: ValueOf<typeof SocketNamespace>,
   roomId: string,
-  dependecies?: DependencyList,
+  dependencies?: DependencyList,
 ): MutableRefObject<Socket | null> => {
   const userId = useAppSelector((state) => state.auth.user?.id);
   const socketInstanceReference = useReference<Socket | null>(null);
@@ -35,7 +35,7 @@ const useSocketNamespace = (
     namespace,
     socketInstanceReference,
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    ...(dependecies ?? []),
+    ...(dependencies ?? []),
   ]);
 
   return socketInstanceReference;

frontend/src/pages/articles/articles-page.tsx

@@ -1,35 +1,30 @@
 import { Layout, Link, RouterOutlet } from '~/libs/components/components.js';
 import { AppRoute } from '~/libs/enums/enums.js';
-import { useArticlesFeedRoom } from '~/libs/hooks/hooks.js';
 
 import styles from './styles.module.scss';
 
-const ArticlesPage: React.FC = () => {
-  useArticlesFeedRoom();
-
-  return (
-    <Layout>
-      <div className={styles.wrapper}>
-        <div className={styles.tabsWrapper}>
-          <Link
-            to={AppRoute.ARTICLES}
-            className={styles.tab}
-            activeClassName={styles.activeTab}
-          >
-            Feed
-          </Link>
-          <Link
-            to={AppRoute.ARTICLES_MY_ARTICLES}
-            className={styles.tab}
-            activeClassName={styles.activeTab}
-          >
-            My articles
-          </Link>
-        </div>
-        <RouterOutlet />
+const ArticlesPage: React.FC = () => (
+  <Layout>
+    <div className={styles.wrapper}>
+      <div className={styles.tabsWrapper}>
+        <Link
+          to={AppRoute.ARTICLES}
+          className={styles.tab}
+          activeClassName={styles.activeTab}
+        >
+          Feed
+        </Link>
+        <Link
+          to={AppRoute.ARTICLES_MY_ARTICLES}
+          className={styles.tab}
+          activeClassName={styles.activeTab}
+        >
+          My articles
+        </Link>
       </div>
-    </Layout>
-  );
-};
+      <RouterOutlet />
+    </div>
+  </Layout>
+);
 
 export { ArticlesPage };

frontend/src/slices/articles/actions.ts

@@ -66,31 +66,17 @@ const addArticle = createAsyncThunk<
   | null,
   ArticleSocketEventPayload[typeof ArticleSocketEvent.NEW_ARTICLE],
   AsyncThunkConfig
->(`${sliceName}/add-article`, (socketPayload, { getState, dispatch }) => {
+>(`${sliceName}/add-article`, (socketPayload, { getState }) => {
   const {
     auth: { user },
   } = getState();
 
-  const { article, isByFollowingAuthor } = socketPayload;
+  const { article } = socketPayload;
 
   if (user?.id === article.userId) {
     return null;
   }
 
-  if (isByFollowingAuthor) {
-    const { author } = article;
-
-    void dispatch(
-      appActions.notify({
-        type: 'info',
-        message: `New article from ${getFullName(
-          author.firstName,
-          author.lastName,
-        )}`,
-      }),
-    );
-  }
-
   return article;
 });
 

shared/src/packages/articles/libs/types/article-socket-event-payload.type.ts

@@ -5,6 +5,7 @@ type ArticleSocketEventPayload = {
   [ArticleSocketEvent.NEW_ARTICLE]: {
     isByFollowingAuthor: boolean;
     article: ArticleWithCountsResponseDto;
+    socketUserId: number;
   };
 };