Announcements: Pinned Feed & Unread Tracking

MemberDescription
├── fetchAnnouncementsForBadgeAndModal()   ← GET /announcements on mount
├── Bell button (non-alumni only)
│   └── badge: unread count from localStorage
├── handleOpenAnnouncementsModal()          ← marks all as read, opens modal
└── MemberAnnouncementsListModal
    ├── AnnouncementListShort               ← sorted list with inline search
    └── ViewAnnouncementModal               ← full-content detail modal

GET /announcements
Authorization: Bearer <access_token>
Content-Type: application/json

interface Announcement {
  id: string;
  title: string;
  description: string;          // HTML string
  created_at?: string;          // ISO timestamp
  updated_at?: string;
  is_pinned?: boolean;          // Pinned items float to top
  target_audience?: "all" | "members" | "pledges";
  date?: string;
  announcement_date?: string | null;
}

const READ_ANNOUNCEMENTS_KEY = "readAnnouncementIds";

// Read IDs from storage (returns [] on parse error)
const getReadAnnouncementIdsFromStorage = (): string[] => {
  const stored = localStorage.getItem(READ_ANNOUNCEMENTS_KEY);
  try { return stored ? JSON.parse(stored) : []; }
  catch (e) { return []; }
};

// Merge new IDs into existing set and persist
const addAnnouncementsToReadStorage = (idsToAdd: string[]) => {
  const currentReadIds = new Set(getReadAnnouncementIdsFromStorage());
  idsToAdd.forEach((id) => currentReadIds.add(id));
  localStorage.setItem(READ_ANNOUNCEMENTS_KEY, JSON.stringify([...currentReadIds]));
};

const calculateUnreadCount = useCallback(() => {
  const readIds = new Set(getReadAnnouncementIdsFromStorage());
  const unreadCount = allFetchedAnnouncementIds.filter(
    (id) => !readIds.has(id)
  ).length;
  setAnnouncementBadgeCount(unreadCount);
}, [allFetchedAnnouncementIds]);

{announcementBadgeCount > 0 && (
  <span>
    {announcementBadgeCount > 9 ? "9+" : announcementBadgeCount}
  </span>
)}

const handleOpenAnnouncementsModal = () => {
  if (allFetchedAnnouncementIds.length > 0) {
    // Mark all currently fetched announcements as read immediately
    addAnnouncementsToReadStorage(allFetchedAnnouncementIds);
  }
  calculateUnreadCount();           // Badge drops to 0
  setIsAnnouncementsListModalOpen(true);
};

interface MemberAnnouncementsListModalProps {
  isOpen: boolean;
  onClose: () => void;
  announcementsData: Announcement[];
}

const newSortedAnnouncements = [...announcementsData].sort((a, b) => {
  if (a.is_pinned && !b.is_pinned) return -1;
  if (!a.is_pinned && b.is_pinned) return 1;

  const dateA = a.created_at ? new Date(a.created_at).getTime() : 0;
  const dateB = b.created_at ? new Date(b.created_at).getTime() : 0;
  return dateB - dateA;  // most recent first
});

const isLoading = isOpen && announcementsData.length === 0 && sortedAnnouncements.length === 0;

interface AnnouncementListShortProps {
  announcements: Announcement[];
  onEdit?: (announcement: Announcement) => void;
  onView?: (announcement: Announcement) => void;
  onDelete?: (announcement: Announcement) => void;
  onCreateNew?: () => void;
}

const filteredAnnouncements = announcements.filter((a) => {
  const searchTerm = searchQuery.toLowerCase();
  const plainDescription = a.description
    ? getPlainText(a.description).toLowerCase()
    : "";
  return (
    a.title.toLowerCase().includes(searchTerm) ||
    plainDescription.includes(searchTerm)
  );
});

// HTML-strip helper:
const getPlainText = (html: string) => {
  const doc = new DOMParser().parseFromString(html, 'text/html');
  return doc.body.textContent || "";
};

// In MemberDescription render:
const isAlumniUser = isAlumni(rank);

{!isAlumniUser && (
  <div>
    <button onClick={handleOpenAnnouncementsModal}>
      <Bell ... />
      {/* badge */}
    </button>
    <button onClick={() => window.open("https://beta-alpha-psi-space.slack.com/", "_blank")}>
      <FaSlack ... />
    </button>
  </div>
)}