@ermis-network/ermis-chat-react 1.0.9 → 2.0.1

package/src/components/ChannelInfo/useChannelInfoTabs.tsx

@@ -0,0 +1,427 @@
+import React, { useState, useEffect, useMemo, useCallback, startTransition, useRef } from 'react';
+import { ROLE_WEIGHTS, MESSAGING_TABS, ALL_TABS } from './utils';
+import { useBannedState } from '../../hooks/useBannedState';
+import { useBlockedState } from '../../hooks/useBlockedState';
+import { MediaGridItem, MediaRow } from './MediaGridItem';
+import { LinkListItem } from './LinkListItem';
+import { FileListItem } from './FileListItem';
+import { MemberListItem } from './MemberListItem';
+import { TabEmptyState, TabLoadingState } from './States';
+import { useDownloadHandler } from '../../hooks/useDownloadHandler';
+import type { ChannelInfoTabsProps, MediaTab, AttachmentItem, MediaLightboxItem } from '../../types';
+import { isDirectChannel } from '../../channelTypeUtils';
+import {
+  CHANNEL_ROLES,
+  canRemoveTargetMember,
+  canBanTargetMember,
+  canPromoteTargetMember,
+  canDemoteTargetMember,
+} from '../../channelRoleUtils';
+
+export const useChannelInfoTabs = (props: ChannelInfoTabsProps) => {
+  const {
+    channel,
+    members,
+    AvatarComponent,
+    currentUserId,
+    currentUserRole,
+    onAddMemberClick,
+    onRemoveMember,
+    onBanMember,
+    onUnbanMember,
+    onPromoteMember,
+    onDemoteMember,
+    addMemberButtonLabel = 'Add Member',
+    AddMemberButtonComponent,
+    MemberItemComponent,
+    MediaItemComponent,
+    LinkItemComponent,
+    FileItemComponent,
+    EmptyStateComponent,
+    LoadingComponent,
+    isVisible = true,
+    isPreviewMode = false,
+  } = props;
+
+  const isMessaging = isDirectChannel(channel);
+  const isTopic = Boolean(channel?.data?.parent_cid);
+
+  const { isBanned } = useBannedState(channel, currentUserId);
+  const { isBlocked } = useBlockedState(channel, currentUserId);
+
+  const availableTabs: MediaTab[] = useMemo(() => {
+    let tabs = isMessaging ? MESSAGING_TABS : ALL_TABS;
+    if (isTopic) {
+      tabs = tabs.filter((t) => t !== 'members');
+    }
+    return tabs;
+  }, [isMessaging, isTopic]);
+
+  const [activeTab, setActiveTab] = useState<MediaTab>(availableTabs[0]);
+  const [contentTab, setContentTab] = useState<MediaTab>(availableTabs[0]);
+  const [isPending, setIsPending] = useState(false);
+
+  const [attachmentsFetchedForCid, setAttachmentsFetchedForCid] = useState<string | null>(null);
+  const lastFetchedCidRef = useRef<string | null>(null);
+  const transitionRafRef = useRef<any>(null);
+
+  const handleTabChange = useCallback(
+    (tab: MediaTab) => {
+      if (tab === activeTab) return;
+
+      // 1. Instant UI update for the tab button
+      setActiveTab(tab);
+
+      if (transitionRafRef.current) clearTimeout(transitionRafRef.current);
+
+      // Check if data is already available for this channel
+      const hasData = tab === 'members' || attachmentsFetchedForCid === channel?.cid;
+
+      if (hasData) {
+        // If data exists, switch content immediately without loading state
+        setContentTab(tab);
+        setIsPending(false);
+      } else {
+        // If no data, use isPending to show Skeleton while waiting for API
+        setIsPending(true);
+        transitionRafRef.current = setTimeout(() => {
+          setContentTab(tab);
+          setIsPending(false);
+          setAttachmentsFetchedForCid((prev) => prev || channel?.cid || null);
+        }, 350);
+      }
+    },
+    [activeTab, channel?.cid, attachmentsFetchedForCid],
+  );
+
+  // Reset tab when user switches channels
+  useEffect(() => {
+    if (transitionRafRef.current) clearTimeout(transitionRafRef.current);
+    setActiveTab(availableTabs[0]);
+    setContentTab(availableTabs[0]);
+    setIsPending(false);
+    setAttachmentsFetchedForCid(null);
+    setAllAttachments([]);
+    lastFetchedCidRef.current = null;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [channel?.cid, availableTabs]);
+
+  // Auto-trigger fetch for channels where default tab needs attachment data
+  useEffect(() => {
+    if (!isVisible) return;
+    if (availableTabs[0] === 'members') return;
+    const rafId = requestAnimationFrame(() => {
+      setAttachmentsFetchedForCid(channel?.cid || null);
+    });
+    return () => cancelAnimationFrame(rafId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [channel?.cid, availableTabs, isVisible]);
+
+  // Resolve sub-components with defaults
+  const MemberItem = MemberItemComponent || MemberListItem;
+  const MediaItem = MediaItemComponent || MediaGridItem;
+  const LinkItem = LinkItemComponent || LinkListItem;
+  const FileItem = FileItemComponent || FileListItem;
+  const EmptyState = EmptyStateComponent || TabEmptyState;
+  const Loading = LoadingComponent || TabLoadingState;
+
+  const [allAttachments, setAllAttachments] = useState<AttachmentItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshAttachmentsCount, setRefreshAttachmentsCount] = useState(0);
+
+  const forceRefreshAttachments = useCallback(() => {
+    lastFetchedCidRef.current = null;
+    setRefreshAttachmentsCount((c) => c + 1);
+  }, []);
+
+  const sortedMembers = useMemo(() => {
+    return [...members].sort((a, b) => {
+      const aWeight = ROLE_WEIGHTS[a.channel_role || CHANNEL_ROLES.MEMBER] || 0;
+      const bWeight = ROLE_WEIGHTS[b.channel_role || CHANNEL_ROLES.MEMBER] || 0;
+      return bWeight - aWeight;
+    });
+  }, [members]);
+
+  // Categorize attachments by type
+  const mediaItems = useMemo(
+    () => allAttachments.filter((a) => a.attachment_type === 'image' || a.attachment_type === 'video'),
+    [allAttachments],
+  );
+
+  const linkItems = useMemo(() => allAttachments.filter((a) => a.attachment_type === 'linkPreview'), [allAttachments]);
+
+  const fileItems = useMemo(
+    () => allAttachments.filter((a) => a.attachment_type === 'file' || a.attachment_type === 'voiceRecording'),
+    [allAttachments],
+  );
+
+  useEffect(() => {
+    if (!isVisible) return;
+    if (!attachmentsFetchedForCid || attachmentsFetchedForCid !== channel?.cid) {
+      setLoading(false);
+      return;
+    }
+    if (lastFetchedCidRef.current === channel?.cid) return;
+
+    let active = true;
+
+    if (isBanned || isBlocked || isPreviewMode) {
+      setAllAttachments([]);
+      setLoading(false);
+      return;
+    }
+
+    const fetchMedia = async () => {
+      setLoading(true);
+      try {
+        const response: any = await channel.queryAttachmentMessages();
+        if (active) {
+          const items = response?.attachments || [];
+          startTransition(() => {
+            setAllAttachments(items);
+          });
+          lastFetchedCidRef.current = channel?.cid || null;
+        }
+      } catch (err) {
+        console.error('Failed to query media for channel info', err);
+        if (active) setAllAttachments([]);
+      } finally {
+        if (active) setLoading(false);
+      }
+    };
+
+    fetchMedia();
+    return () => {
+      active = false;
+    };
+  }, [channel, isBanned, isBlocked, isPreviewMode, attachmentsFetchedForCid, isVisible, refreshAttachmentsCount]);
+
+  // Listen to realtime events to automatically refresh attachments
+  useEffect(() => {
+    if (!channel || !isVisible) return;
+
+    const handleEvent = (event: any) => {
+      if (event.message?.attachments && event.message.attachments.length > 0) {
+        forceRefreshAttachments();
+      }
+    };
+
+    channel.on('message.new', handleEvent);
+    channel.on('message.deleted', handleEvent);
+    channel.on('message.updated', handleEvent);
+
+    return () => {
+      channel.off('message.new', handleEvent);
+      channel.off('message.deleted', handleEvent);
+      channel.off('message.updated', handleEvent);
+    };
+  }, [channel, isVisible, forceRefreshAttachments]);
+
+  const { downloadFile } = useDownloadHandler();
+
+  const handleDownloadFile = useCallback(
+    async (url: string, filename?: string) => {
+      await downloadFile(url, filename);
+    },
+    [downloadFile],
+  );
+
+  // Lightbox state for media tab
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+
+  const lightboxItems = useMemo<MediaLightboxItem[]>(() => {
+    return mediaItems
+      .filter((item) => !item.e2ee_manifest && !item.e2ee_manifest_missing)
+      .map((item) => ({
+        type: (item.attachment_type === 'video' ? 'video' : 'image') as 'image' | 'video',
+        src: item.url,
+        alt: item.file_name,
+        posterSrc: item.thumb_url || undefined,
+      }));
+  }, [mediaItems]);
+
+  const handleMediaClick = useCallback(
+    (url: string) => {
+      const idx = mediaItems
+        .filter((item) => !item.e2ee_manifest && !item.e2ee_manifest_missing)
+        .findIndex((item) => item.url === url);
+      if (idx >= 0) {
+        setLightboxIndex(idx);
+        setLightboxOpen(true);
+      }
+    },
+    [mediaItems],
+  );
+
+  const closeLightbox = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
+
+  // Group media into rows of 3 for grid layout inside VList
+  const mediaRows = useMemo(() => {
+    const rows: AttachmentItem[][] = [];
+    for (let i = 0; i < mediaItems.length; i += 3) {
+      rows.push(mediaItems.slice(i, i + 3));
+    }
+    return rows;
+  }, [mediaItems]);
+
+  // Build VList data array based on contentTab (deferred)
+  const vlistData = useMemo(() => {
+    switch (contentTab) {
+      case 'members': {
+        const items: any[] = [];
+        if (onAddMemberClick) {
+          items.push({ type: 'add-member' });
+        }
+        sortedMembers.forEach((member) => {
+          items.push({ type: 'member', data: member });
+        });
+        return items;
+      }
+      case 'media':
+        return mediaRows.map((row) => ({ type: 'media-row', data: row }));
+      case 'links':
+        return linkItems.map((item) => ({ type: 'link', data: item }));
+      case 'files':
+        return fileItems.map((item) => ({ type: 'file', data: item }));
+      default:
+        return [];
+    }
+  }, [contentTab, sortedMembers, mediaRows, mediaItems, linkItems, fileItems, onAddMemberClick]);
+
+  // Render function for VList items
+  const renderVlistItem = useCallback(
+    (item: any, index: number) => {
+      switch (item.type) {
+        case 'add-member':
+          if (AddMemberButtonComponent) {
+            return (
+              <div key="__add-member__" className="ermis-channel-info__add-member-wrap">
+                <AddMemberButtonComponent onClick={onAddMemberClick!} label={addMemberButtonLabel} />
+              </div>
+            );
+          }
+          return (
+            <div key="__add-member__" className="ermis-channel-info__add-member-wrap">
+              <button className="ermis-channel-info__add-member-btn" onClick={onAddMemberClick}>
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                  <circle cx="8.5" cy="7" r="4"></circle>
+                  <line x1="20" y1="8" x2="20" y2="14"></line>
+                  <line x1="23" y1="11" x2="17" y2="11"></line>
+                </svg>
+                {addMemberButtonLabel}
+              </button>
+            </div>
+          );
+        case 'member': {
+          const member = item.data;
+          const role = member.channel_role || CHANNEL_ROLES.MEMBER;
+          const isTargetRemovable = canRemoveTargetMember(currentUserRole, role);
+          const canRemove = Boolean(isTargetRemovable && member.user_id !== currentUserId);
+          const canBan = Boolean(
+            canBanTargetMember(currentUserRole, role) && member.user_id !== currentUserId && !member.banned,
+          );
+          const canUnban = Boolean(
+            canBanTargetMember(currentUserRole, role) && member.user_id !== currentUserId && member.banned,
+          );
+          const canPromote = canPromoteTargetMember(currentUserRole, role) && member.user_id !== currentUserId;
+          const canDemote = canDemoteTargetMember(currentUserRole, role) && member.user_id !== currentUserId;
+
+          return (
+            <MemberItem
+              key={member?.user_id || index}
+              member={member}
+              AvatarComponent={AvatarComponent}
+              onRemove={onRemoveMember}
+              canRemove={canRemove}
+              onBan={onBanMember}
+              canBan={canBan}
+              onUnban={onUnbanMember}
+              canUnban={canUnban}
+              onPromote={onPromoteMember}
+              canPromote={canPromote}
+              onDemote={onDemoteMember}
+              canDemote={canDemote}
+            />
+          );
+        }
+        case 'media-row':
+          return (
+            <MediaRow
+              key={item.data[0]?.id || index}
+              row={item.data}
+              onClick={handleMediaClick}
+              MediaItemComponent={MediaItem}
+            />
+          );
+        case 'link':
+          return <LinkItem key={item.data.id || index} item={item.data} />;
+        case 'file':
+          const fileItem = item.data as AttachmentItem;
+          return (
+            <FileItem
+              key={fileItem.id || index}
+              item={fileItem}
+              onClick={(url: string) => handleDownloadFile(url, fileItem.file_name)}
+            />
+          );
+        default:
+          return null;
+      }
+    },
+    [
+      onAddMemberClick,
+      AddMemberButtonComponent,
+      addMemberButtonLabel,
+      currentUserRole,
+      currentUserId,
+      AvatarComponent,
+      onRemoveMember,
+      onBanMember,
+      onUnbanMember,
+      onPromoteMember,
+      onDemoteMember,
+      handleMediaClick,
+      MediaItem,
+      handleDownloadFile,
+      MemberItem,
+      LinkItem,
+      FileItem,
+    ],
+  );
+
+  const isTabEmpty = vlistData.length === 0 && !(loading && contentTab !== 'members');
+  const emptyLabel = contentTab === 'members' ? 'members' : contentTab;
+
+  return {
+    availableTabs,
+    activeTab,
+    contentTab,
+    handleTabChange,
+    isPending,
+    loading,
+    isTabEmpty,
+    emptyLabel,
+    vlistData,
+    renderVlistItem,
+    lightboxItems,
+    lightboxOpen,
+    lightboxIndex,
+    handleMediaClick,
+    closeLightbox,
+    EmptyState,
+    Loading,
+  };
+};

package/src/components/ChannelInfo/useChannelSettings.ts

@@ -0,0 +1,212 @@
+import { useState, useEffect, useCallback } from 'react';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+
+export interface UseChannelSettingsOptions {
+  channel: Channel | undefined;
+  isOpen?: boolean;
+  onClose?: () => void;
+  currentUserRole?: string;
+}
+
+export const useChannelSettings = ({ channel, isOpen, onClose, currentUserRole }: UseChannelSettingsOptions) => {
+  const [slowMode, setSlowMode] = useState<number>(0);
+  const [topicsEnabled, setTopicsEnabled] = useState<boolean>(false);
+  const [capabilities, setCapabilities] = useState<Record<string, boolean>>({
+    'send-message': true,
+    'send-links': true,
+    'update-own-message': true,
+    'delete-own-message': true,
+    'send-reaction': true,
+    'pin-message': true,
+    'create-poll': true,
+    'vote-poll': true,
+  });
+
+  const [keywords, setKeywords] = useState<string[]>([]);
+  const [newKeyword, setNewKeyword] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const isOwner = currentUserRole === 'owner';
+
+  // Sync state when panel opens or channel updates
+  useEffect(() => {
+    if (!channel) return;
+
+    const syncData = (dataToSync = channel.data) => {
+      setSlowMode((dataToSync?.member_message_cooldown as number) || 0);
+      setKeywords((dataToSync?.filter_words as string[]) || []);
+      setTopicsEnabled(dataToSync?.topics_enabled === true);
+
+      const caps = dataToSync?.member_capabilities as string[] || [];
+      setCapabilities({
+        'send-message': caps.includes('send-message'),
+        'send-links': caps.includes('send-links'),
+        'update-own-message': caps.includes('update-own-message'),
+        'delete-own-message': caps.includes('delete-own-message'),
+        'send-reaction': caps.includes('send-reaction'),
+        'pin-message': caps.includes('pin-message'),
+        'create-poll': caps.includes('create-poll'),
+        'vote-poll': caps.includes('vote-poll'),
+      });
+      setError(null);
+    };
+
+    if (isOpen) {
+      syncData();
+    }
+
+    // Listen to real-time changes
+    const subscription = channel.on('channel.updated', (event: any) => {
+      const latestData = event?.channel || channel.data;
+      // Force mutating local channel.data to ensure future syncData hits cache
+      if (event?.channel && channel.data) {
+        Object.assign(channel.data, event.channel);
+      }
+
+      if (isOpen) {
+        syncData(latestData);
+      }
+    });
+
+    return () => {
+      subscription?.unsubscribe();
+    };
+  }, [isOpen, channel]);
+
+  const toggleCapability = useCallback((key: string) => {
+    setCapabilities(prev => ({ ...prev, [key]: !prev[key] }));
+  }, []);
+
+  // Compute dirty state
+  const isSlowModeChanged = slowMode !== ((channel?.data?.member_message_cooldown as number) || 0);
+  const isTopicsChanged = topicsEnabled !== (channel?.data?.topics_enabled === true);
+
+  const currentKeywordsSorted = [...keywords].sort().join(',');
+  const originalKeywordsSorted = [...((channel?.data?.filter_words as string[]) || [])].sort().join(',');
+  const isKeywordsChanged = currentKeywordsSorted !== originalKeywordsSorted;
+
+  const originalCapabilities = channel?.data?.member_capabilities as string[] || [];
+  const initialCapabilities: Record<string, boolean> = {
+    'send-message': originalCapabilities.includes('send-message'),
+    'send-links': originalCapabilities.includes('send-links'),
+    'update-own-message': originalCapabilities.includes('update-own-message'),
+    'delete-own-message': originalCapabilities.includes('delete-own-message'),
+    'send-reaction': originalCapabilities.includes('send-reaction'),
+    'pin-message': originalCapabilities.includes('pin-message'),
+    'create-poll': originalCapabilities.includes('create-poll'),
+    'vote-poll': originalCapabilities.includes('vote-poll'),
+  };
+  const isCapabilitiesChanged = Object.keys(capabilities).some(k => capabilities[k] !== initialCapabilities[k]);
+
+  const isDirty = isSlowModeChanged || isKeywordsChanged || isCapabilitiesChanged || isTopicsChanged;
+
+  const handleAddNewKeyword = useCallback(() => {
+    if (newKeyword.trim()) {
+      const keyword = newKeyword.trim().toLowerCase();
+      if (!keywords.includes(keyword)) {
+        setKeywords(prev => [...prev, keyword]);
+      }
+      setNewKeyword('');
+    }
+  }, [newKeyword, keywords]);
+
+  const handleRemoveKeyword = useCallback((kw: string) => {
+    setKeywords(prev => prev.filter(k => k !== kw));
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    if (!channel) return;
+    setIsSaving(true);
+    setError(null);
+    try {
+      const dataUpdates: any = {};
+      let capabilitiesArray: string[] | null = null;
+
+      if (isSlowModeChanged) {
+        dataUpdates.member_message_cooldown = slowMode;
+      }
+
+      if (isKeywordsChanged) {
+        dataUpdates.filter_words = keywords;
+      }
+
+      if (isCapabilitiesChanged) {
+        const controlledKeys = Object.keys(capabilities);
+        const originalCaps = (channel.data?.member_capabilities as string[]) || [];
+
+        // Preserve unmanaged original capabilities
+        const unmanagedCaps = originalCaps.filter(c => !controlledKeys.includes(c));
+
+        // Extract managed capabilities that are currently enabled
+        const managedEnabledCaps = controlledKeys.filter(k => capabilities[k as keyof typeof capabilities]);
+
+        // Merge into the final payload array
+        capabilitiesArray = [...unmanagedCaps, ...managedEnabledCaps];
+      }
+
+      if (Object.keys(dataUpdates).length > 0 || capabilitiesArray !== null) {
+        const payload: any = {};
+
+        if (Object.keys(dataUpdates).length > 0) {
+          payload.data = dataUpdates;
+          if (channel.data) Object.assign(channel.data, dataUpdates);
+        }
+
+        if (capabilitiesArray !== null) {
+          payload.capabilities = capabilitiesArray;
+          if (channel.data) {
+            channel.data.member_capabilities = capabilitiesArray;
+          }
+        }
+
+        // Use _update instead of update to safely construct root-level payloads
+        await (channel as any)._update(payload);
+      }
+
+      if (isTopicsChanged) {
+        if (topicsEnabled) {
+          await channel.enableTopics();
+        } else {
+          await channel.disableTopics();
+        }
+      }
+
+      if (onClose) onClose();
+    } catch (err: any) {
+      setError(err?.message || 'Failed to update settings');
+    } finally {
+      setIsSaving(false);
+    }
+  }, [
+    channel,
+    isSlowModeChanged,
+    slowMode,
+    isKeywordsChanged,
+    keywords,
+    isCapabilitiesChanged,
+    capabilities,
+    isTopicsChanged,
+    topicsEnabled,
+    onClose,
+  ]);
+
+  return {
+    slowMode,
+    setSlowMode,
+    topicsEnabled,
+    setTopicsEnabled,
+    capabilities,
+    toggleCapability,
+    keywords,
+    newKeyword,
+    setNewKeyword,
+    handleAddNewKeyword,
+    handleRemoveKeyword,
+    isSaving,
+    error,
+    isDirty,
+    isOwner,
+    handleSave,
+  };
+};