Update EditableSubscriptionsCell.tsx

Author: ChinemeremChigbo

src/components/dashboard/user_management/EditableSubscriptionsCell.tsx

@@ -14,7 +14,7 @@ import {
   WrapItem,
 } from '@chakra-ui/react';
 import { MailingList, SubjectAPI } from '@utils/types';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FiChevronDown, FiChevronUp, FiEdit2 } from 'react-icons/fi';
 
 interface SubjectTagProps {
@@ -56,7 +56,9 @@ const EditableSubscriptionsCell: React.FC<EditableSubscriptionsCellProps> = ({
   const [isEditing, setIsEditing] = useState(false);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
-  const [selectedSubjectIds, setSelectedSubjectIds] = useState<number[]>([]);
+  const [selectedSubjectIds, setSelectedSubjectIds] = useState<number[]>(
+    mailingLists.map((list) => list.subjectId)
+  );
   const [localMailingLists, setLocalMailingLists] =
     useState<MailingList[]>(mailingLists);
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -79,18 +81,13 @@ const EditableSubscriptionsCell: React.FC<EditableSubscriptionsCellProps> = ({
 
   // Get sorted subjects for dropdown display
   const sortedSubjects = useMemo(() => {
-    return [...allSubjects].sort((a, b) => {
-      // First sort by archived status (unarchived first)
-      if (a.archived !== b.archived) {
-        return a.archived ? 1 : -1;
-      }
-      // Then sort by ID
-      return a.id - b.id;
-    });
+    return [...allSubjects]
+      .filter((subject) => !subject.archived) // Filter out archived subjects
+      .sort((a, b) => a.id - b.id); // Now we only need to sort by ID since all subjects are unarchived
   }, [allSubjects]);
 
   // Define saveSubscriptions with useCallback so it can be used in dependency arrays
-  const saveSubscriptions = React.useCallback(() => {
+  const saveSubscriptions = useCallback(() => {
     // Don't save if nothing has changed
     const currentIds = new Set(mailingLists.map((list) => list.subjectId));
     const selectedIds = new Set(selectedSubjectIds);
@@ -111,11 +108,17 @@ const EditableSubscriptionsCell: React.FC<EditableSubscriptionsCellProps> = ({
     });
   }, [mailingLists, selectedSubjectIds, onSubscriptionsChange]);
 
-  // Initialize selected subjects from current mailing lists
+  // Update the state when props change
   useEffect(() => {
     if (!isSaving) {
-      setSelectedSubjectIds(mailingLists.map((list) => list.subjectId));
-      setLocalMailingLists(mailingLists);
+      setSelectedSubjectIds(
+        mailingLists
+          .filter((list) => !list.subject.archived)
+          .map((list) => list.subjectId)
+      );
+      setLocalMailingLists(
+        mailingLists.filter((list) => !list.subject.archived)
+      );
     }
   }, [mailingLists, isSaving]);
 
@@ -126,12 +129,12 @@ const EditableSubscriptionsCell: React.FC<EditableSubscriptionsCellProps> = ({
       .map((id) => {
         // Try to find existing mailing list first
         const existingList = mailingLists.find((list) => list.subjectId === id);
-        if (existingList) return existingList;
+        if (existingList && !existingList.subject.archived) return existingList;
 
         // If not, create a new one based on the subject from our full subjects list
         const subject = subjectsById[id];
 
-        if (!subject) return null;
+        if (!subject || subject.archived) return null;
 
         return {
           subjectId: subject.id,
@@ -140,15 +143,10 @@ const EditableSubscriptionsCell: React.FC<EditableSubscriptionsCellProps> = ({
       })
       .filter(Boolean) as MailingList[];
 
-    // Sort the new mailing lists by archived status and ID
-    const sortedMailingLists = [...newMailingListsUnsorted].sort((a, b) => {
-      // First sort by archived status (unarchived first)
-      if (a.subject.archived !== b.subject.archived) {
-        return a.subject.archived ? 1 : -1;
-      }
-      // Then sort by ID
-      return a.subjectId - b.subjectId;
-    });
+    // Sort the new mailing lists by ID
+    const sortedMailingLists = [...newMailingListsUnsorted].sort(
+      (a, b) => a.subjectId - b.subjectId
+    );
 
     setLocalMailingLists(sortedMailingLists);
   }, [selectedSubjectIds, mailingLists, subjectsById]);