feat: Inbox list filter (#8880)

* feat: Inbox list filter

* fix: routes after delete/unread

* fix: Specs

* feat: Handle sort in frontend

* chore: Minor fixes

* chore: Minor fix

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/store/modules/notifications/actions.js

@@ -9,7 +9,7 @@ export const actions = {
         data: {
           data: { payload, meta },
         },
-      } = await NotificationsAPI.get(page);
+      } = await NotificationsAPI.get({ page });
       commit(types.CLEAR_NOTIFICATIONS);
       commit(types.SET_NOTIFICATIONS, payload);
       commit(types.SET_NOTIFICATIONS_META, meta);
@@ -18,14 +18,19 @@ export const actions = {
       commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false });
     }
   },
-  index: async ({ commit }, { page = 1 } = {}) => {
+  index: async ({ commit }, { page = 1, status, type, sortOrder } = {}) => {
     commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: true });
     try {
       const {
         data: {
           data: { payload, meta },
         },
-      } = await NotificationsAPI.get(page);
+      } = await NotificationsAPI.get({
+        page,
+        status,
+        type,
+        sortOrder,
+      });
       commit(types.SET_NOTIFICATIONS, payload);
       commit(types.SET_NOTIFICATIONS_META, meta);
       commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false });

app/javascript/dashboard/store/modules/notifications/getters.js

@@ -1,7 +1,19 @@
+import { applyInboxPageFilters, sortComparator } from './helpers';
+
 export const getters = {
   getNotifications($state) {
     return Object.values($state.records).sort((n1, n2) => n2.id - n1.id);
   },
+  getFilteredNotifications: $state => filters => {
+    const sortOrder = filters.sortOrder === 'desc' ? 'newest' : 'oldest';
+    const filteredNotifications = Object.values($state.records).filter(
+      notification => applyInboxPageFilters(notification, filters)
+    );
+    const sortedNotifications = filteredNotifications.sort((a, b) =>
+      sortComparator(a, b, sortOrder)
+    );
+    return sortedNotifications;
+  },
   getUIFlags($state) {
     return $state.uiFlags;
   },

app/javascript/dashboard/store/modules/notifications/helpers.js

@@ -0,0 +1,45 @@
+export const filterByStatus = (snoozedUntil, filterStatus) =>
+  filterStatus === 'snoozed' ? !!snoozedUntil : !snoozedUntil;
+
+export const filterByType = (readAt, filterType) =>
+  filterType === 'read' ? !!readAt : !readAt;
+
+export const filterByTypeAndStatus = (
+  readAt,
+  snoozedUntil,
+  filterType,
+  filterStatus
+) => {
+  const shouldFilterByStatus = filterByStatus(snoozedUntil, filterStatus);
+  const shouldFilterByType = filterByType(readAt, filterType);
+  return shouldFilterByStatus && shouldFilterByType;
+};
+
+export const applyInboxPageFilters = (notification, filters) => {
+  const { status, type } = filters;
+  const { read_at: readAt, snoozed_until: snoozedUntil } = notification;
+
+  if (status && type)
+    return filterByTypeAndStatus(readAt, snoozedUntil, type, status);
+  if (status && !type) return filterByStatus(snoozedUntil, status);
+  if (!status && type) return filterByType(readAt, type);
+  return true;
+};
+
+const INBOX_SORT_OPTIONS = {
+  newest: 'desc',
+  oldest: 'asc',
+};
+
+const sortConfig = {
+  newest: (a, b) => b.created_at - a.created_at,
+  oldest: (a, b) => a.created_at - b.created_at,
+};
+
+export const sortComparator = (a, b, sortOrder) => {
+  const sortDirection = INBOX_SORT_OPTIONS[sortOrder];
+  if (sortOrder === 'newest' || sortOrder === 'oldest') {
+    return sortConfig[sortOrder](a, b, sortDirection);
+  }
+  return 0;
+};