Save status filter as user feed table preferences

Author: synzen

services/backend-api/client/src/contexts/UserFeedStatusFilterContext.tsx

@@ -1,5 +1,16 @@
-import { PropsWithChildren, createContext, useMemo, useState } from "react";
+import {
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { UserFeedComputedStatus } from "../features/feed/types";
+import { useUpdateUserMe, useUserMe } from "../features/discordUser/hooks";
+
+const PREFERENCE_DEBOUNCE_MS = 500;
 
 interface ContextProps {
   setStatusFilters: (statuses: UserFeedComputedStatus[]) => void;
@@ -12,7 +23,49 @@ export const UserFeedStatusFilterContext = createContext<ContextProps>({
 });
 
 export const UserFeedStatusFilterProvider = ({ children }: PropsWithChildren<{}>) => {
-  const [statusFilters, setStatusFilters] = useState<UserFeedComputedStatus[]>([]);
+  const { data: userMe } = useUserMe();
+  const { mutateAsync: updateUser } = useUpdateUserMe();
+
+  const savedStatusFilters = userMe?.result?.preferences?.feedListStatusFilters?.statuses;
+  const hasInitialized = useRef(false);
+
+  const [statusFilters, setStatusFiltersState] = useState<UserFeedComputedStatus[]>([]);
+
+  // Initialize from saved preference (only on first load)
+  useEffect(() => {
+    if (savedStatusFilters && savedStatusFilters.length > 0 && !hasInitialized.current) {
+      hasInitialized.current = true;
+      setStatusFiltersState(savedStatusFilters as UserFeedComputedStatus[]);
+    }
+  }, [savedStatusFilters]);
+
+  // Save preference when it changes (debounced)
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      const currentFilters = savedStatusFilters || [];
+      const hasChanges =
+        statusFilters.length !== currentFilters.length ||
+        statusFilters.some((status, idx) => status !== currentFilters[idx]);
+
+      if (hasChanges) {
+        updateUser({
+          details: {
+            preferences: {
+              feedListStatusFilters: {
+                statuses: statusFilters,
+              },
+            },
+          },
+        });
+      }
+    }, PREFERENCE_DEBOUNCE_MS);
+
+    return () => clearTimeout(timeoutId);
+  }, [statusFilters, savedStatusFilters, updateUser]);
+
+  const setStatusFilters = useCallback((statuses: UserFeedComputedStatus[]) => {
+    setStatusFiltersState(statuses);
+  }, []);
 
   const value = useMemo(
     () => ({

services/backend-api/client/src/features/discordUser/api/updateUserMe.ts

@@ -24,6 +24,9 @@ export interface UpdateUserMeInput {
       feedListColumnOrder?: {
         columns: string[];
       };
+      feedListStatusFilters?: {
+        statuses: string[];
+      };
     };
   };
 }

services/backend-api/client/src/features/discordUser/types/UserMe.ts

@@ -26,6 +26,9 @@ export const UserMeSchema = object({
     feedListColumnOrder: object({
       columns: array(string().required()).required(),
     }).optional(),
+    feedListStatusFilters: object({
+      statuses: array(string().required()).required(),
+    }).optional(),
   }).default({}),
   subscription: object({
     product: object({

services/backend-api/src/features/users/dto/update-me-input.dto.ts

@@ -96,6 +96,15 @@ class FeedListColumnOrderDto {
   columns: string[];
 }
 
+class FeedListStatusFiltersDto {
+  @IsArray()
+  @IsString({ each: true })
+  @IsIn(["OK", "REQUIRES_ATTENTION", "MANUALLY_DISABLED", "RETRYING"], {
+    each: true,
+  })
+  statuses: string[];
+}
+
 class UpdateMeDtoPreferencesDto {
   @IsBoolean()
   @IsOptional()
@@ -133,6 +142,11 @@ class UpdateMeDtoPreferencesDto {
   @ValidateNested()
   @Type(() => FeedListColumnOrderDto)
   feedListColumnOrder?: FeedListColumnOrderDto;
+
+  @IsOptional()
+  @ValidateNested()
+  @Type(() => FeedListStatusFiltersDto)
+  feedListStatusFilters?: FeedListStatusFiltersDto;
 }
 
 export class UpdateMeDto {

services/backend-api/src/features/users/entities/user.entity.ts

@@ -59,6 +59,19 @@ export const UserFeedListColumnOrderSchema = SchemaFactory.createForClass(
   UserFeedListColumnOrder
 );
 
+@Schema({
+  timestamps: false,
+  _id: false,
+})
+export class UserFeedListStatusFilters {
+  @Prop({ type: [String] })
+  statuses: string[];
+}
+
+export const UserFeedListStatusFiltersSchema = SchemaFactory.createForClass(
+  UserFeedListStatusFilters
+);
+
 @Schema({
   timestamps: false,
   _id: false,
@@ -84,6 +97,9 @@ export class UserPreferences {
 
   @Prop({ type: UserFeedListColumnOrderSchema })
   feedListColumnOrder?: UserFeedListColumnOrder;
+
+  @Prop({ type: UserFeedListStatusFiltersSchema })
+  feedListStatusFilters?: UserFeedListStatusFilters;
 }
 
 export const UserPreferencesSchema =