@redacto.io/consent-sdk-react 9.3.0 → 9.4.0-beta.0

package/src/RedactoPrivacyCenter/components/ActivitiesList.tsx

@@ -1,22 +1,20 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AdvancedTable, AdvancedTablePagination } from '../table';
-import { pcStyles } from '../styles/pcStyles';
-import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { History } from 'lucide-react';
 import { fetchActivities } from '../lib/api';
 import { useOrganization } from '../context/OrganizationContext';
 import { useAuth } from '../context/AuthContext';
 import { useBaseUrl } from '../context/BaseUrlContext';
 import type { Activity } from '../lib/types';
-import { useActivitiesColumns } from './activitiesColumns';
 import { useCurrentLanguage } from '../lib/useCurrentLanguage';
 import { toast } from '../utils/toast';
+import { getVar } from '../lib/utils';
+import { ACTIVITY_PAGE_SIZE } from '../lib/constants';
+import { PCText, PCLoader, PCEmpty } from '../ui';
+import ActivityTimeline from './ActivityTimeline';
+import { ACTIVITY_FETCH_ERROR_MESSAGE } from './constant';
 
-export default function ActivitiesList({
-  variant,
-}: {
-  variant?: 'modern' | 'minimal';
-}) {
+export default function ActivitiesList() {
   const { t } = useTranslation();
   const { organization } = useOrganization();
   const { accessToken, refreshToken, onError, updateTokens } = useAuth();
@@ -35,235 +33,217 @@ export default function ActivitiesList({
   // Track language changes for localized API calls
   const { langParam } = useCurrentLanguage();
 
-  const [activityData, setActivityData] = useState<Activity[]>([]);
+  const [activities, setActivities] = useState<Activity[]>([]);
   const [totalCount, setTotalCount] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-  // Preserve previous data during loading to prevent pagination from disappearing
-  const [previousData, setPreviousData] = useState<Activity[]>([]);
-  const [previousTotalCount, setPreviousTotalCount] = useState(0);
-
-  const columns = useActivitiesColumns();
+  const [isLoadingInitial, setIsLoadingInitial] = useState(true);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+
+  const hasMore = activities.length < totalCount;
+
+  // Refs let the IntersectionObserver callback read fresh values without
+  // re-subscribing on every state change, and guard against double-fetch.
+  const isFetchingRef = useRef(false);
+  // Bumped on every reset; an in-flight loadMore from a prior org/workspace/
+  // language context checks it before appending so stale pages can't leak in.
+  const requestVersionRef = useRef(0);
+  const hasMoreRef = useRef(hasMore);
+  hasMoreRef.current = hasMore;
+  const countRef = useRef(0);
+  countRef.current = activities.length;
+  const sentinelRef = useRef<HTMLDivElement>(null);
+
+  const fetchPage = useCallback(
+    async (offset: number) => {
+      if (!organizationId || !workspaceId) return null;
+      return fetchActivities(
+        organizationId,
+        workspaceId,
+        offset,
+        ACTIVITY_PAGE_SIZE,
+        authContext,
+        consentClient,
+        langParam
+      );
+    },
+    [organizationId, workspaceId, authContext, consentClient, langParam]
+  );
 
-  const handleGetActivities = useCallback(
-    async (page: number = currentPage, size: number = pageSize) => {
-      setIsLoading(true);
+  // Initial load (and reset) whenever org / workspace / language changes.
+  useEffect(() => {
+    let cancelled = false;
+    const requestVersion = ++requestVersionRef.current;
+    isFetchingRef.current = false;
+    setIsLoadingInitial(true);
+    setActivities([]);
+    setTotalCount(0);
+
+    (async () => {
       try {
-        if (organizationId && workspaceId) {
-          const offset = (page - 1) * size;
-          const response = await fetchActivities(
-            organizationId,
-            workspaceId,
-            offset,
-            size,
-            authContext,
-            consentClient,
-            langParam
-          );
-          if (!response) {
-            throw new Error('Failed to fetch activity data');
-          }
-          setActivityData(response.data ?? []);
-          setTotalCount(response.pagination?.total_count ?? 0);
-          if (page !== currentPage) setCurrentPage(page);
-          if (size !== pageSize) setPageSize(size);
+        const response = await fetchPage(0);
+        if (cancelled || requestVersion !== requestVersionRef.current) {
+          return;
         }
+        if (organizationId && workspaceId && !response) {
+          throw new Error(ACTIVITY_FETCH_ERROR_MESSAGE);
+        }
+        setActivities(response?.data ?? []);
+        setTotalCount(response?.pagination?.total_count ?? 0);
       } catch (error) {
+        if (cancelled || requestVersion !== requestVersionRef.current) {
+          return;
+        }
         console.error(error);
-        setActivityData([]);
+        setActivities([]);
         setTotalCount(0);
-        setPreviousData([]);
-        setPreviousTotalCount(0);
         toast.error(t('failedToFetchActivityData'));
       } finally {
-        setIsLoading(false);
+        if (!cancelled && requestVersion === requestVersionRef.current) {
+          setIsLoadingInitial(false);
+        }
       }
-    },
-    [organizationId, workspaceId, currentPage, pageSize, authContext, consentClient, langParam]
-  );
+    })();
 
-  // Preserve previous data when starting to load new page
-  useEffect(() => {
-    if (activityData.length > 0) {
-      setPreviousData(activityData);
-      setPreviousTotalCount(totalCount);
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchPage, organizationId, workspaceId, t]);
+
+  const loadMore = useCallback(async () => {
+    if (isFetchingRef.current || !hasMoreRef.current) {
+      return;
     }
-  }, [activityData, totalCount]);
+    const requestVersion = requestVersionRef.current;
+    isFetchingRef.current = true;
+    setIsLoadingMore(true);
+    try {
+      const response = await fetchPage(countRef.current);
+      if (requestVersion !== requestVersionRef.current) {
+        return;
+      }
+      if (!response) {
+        throw new Error(ACTIVITY_FETCH_ERROR_MESSAGE);
+      }
+      setActivities((prev) => [...prev, ...(response.data ?? [])]);
+      setTotalCount((prev) => response.pagination?.total_count ?? prev);
+    } catch (error) {
+      if (requestVersion !== requestVersionRef.current) {
+        return;
+      }
+      console.error(error);
+      toast.error(t('failedToFetchActivityData'));
+    } finally {
+      if (requestVersion === requestVersionRef.current) {
+        isFetchingRef.current = false;
+        setIsLoadingMore(false);
+      }
+    }
+  }, [fetchPage, t]);
 
+  // Auto-load as the sentinel nears the viewport. Re-subscribing when the
+  // loaded count changes lets a short list keep filling (the observer fires its
+  // initial callback on observe) until the viewport is full or all are loaded.
   useEffect(() => {
-    void handleGetActivities();
-  }, [organizationId, workspaceId, handleGetActivities]);
-
-  // Use previous data during loading to maintain pagination visibility
-  const displayData = isLoading && activityData.length === 0 ? previousData : activityData;
-  const displayTotalCount = isLoading && totalCount === 0 ? previousTotalCount : totalCount;
+    const node = sentinelRef.current;
+    if (!node || isLoadingInitial) {
+      return;
+    }
 
-  const table = useReactTable<Activity>({
-    data: displayData,
-    columns: columns,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
-    pageCount: Math.ceil(displayTotalCount / pageSize) || 0,
-    state: {
-      pagination: {
-        pageIndex: currentPage - 1,
-        pageSize: pageSize,
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          void loadMore();
+        }
       },
-    },
-    onPaginationChange: (updater) => {
-      const next =
-        typeof updater === 'function'
-          ? updater({ pageIndex: currentPage - 1, pageSize })
-          : updater;
-      const nextPage = (next as any).pageIndex + 1;
-      const nextSize = (next as any).pageSize;
-      if (nextPage === currentPage && nextSize === pageSize) return;
-      setCurrentPage(nextPage);
-      setPageSize(nextSize);
-      void handleGetActivities(nextPage, nextSize);
-    },
-  });
-
-  return (
-    <div style={{ width: '100%' }}>
-      {isLoading ? (
-        <ActivitiesTableSkeleton
-          labels={[t('activity'), t('activityType'), t('activityDescription'), t('timestamp')]}
-        />
-      ) : (
-        <AdvancedTable table={table} variant={variant} isLoading={false} />
-      )}
+      { root: null, rootMargin: '600px 0px' }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [loadMore, isLoadingInitial, activities.length]);
+
+  let content;
+  if (isLoadingInitial) {
+    content = <ActivityTimelineSkeleton />;
+  } else if (activities.length === 0) {
+    content = (
+      <PCEmpty
+        icon={<History size={28} aria-hidden />}
+        title={t('noActivitiesYet')}
+        description={t('noActivitiesDescription')}
+      />
+    );
+  } else {
+    content = (
+      <>
+        <ActivityTimeline activities={activities} />
+
+        {/* Fixed-height footer: the sentinel stays mounted and the spinner
+            occupies reserved space, so loading never shifts the layout. */}
+        {hasMore ? (
+          <div style={{
+            position: 'relative',
+            minHeight: '2.75rem',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
+            <div
+              ref={sentinelRef}
+              aria-hidden
+              style={{ position: 'absolute', bottom: 0, left: 0, height: 1, width: 1 }}
+            />
+            {isLoadingMore && <PCLoader size="sm" />}
+          </div>
+        ) : (
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: '2.75rem',
+          }}>
+            <PCText as="span" size="xs" color="tertiary">
+              {t('allCaughtUp')}
+            </PCText>
+          </div>
+        )}
+      </>
+    );
+  }
 
-      {/* Always show pagination, even during loading */}
-      <div style={{
-        ...pcStyles.flex,
-        ...pcStyles.flexCol,
-        ...pcStyles.itemsCenter,
-        ...pcStyles.justifyBetween,
-        ...pcStyles.gapSm,
-        marginTop: '0.25rem',
-      }} className="pc-flex-responsive">
-        <AdvancedTablePagination table={table} />
-      </div>
-    </div>
-  );
+  return <div style={{ width: '100%' }}>{content}</div>;
 }
 
-// Skeleton loader for Activities table
-function ActivitiesTableSkeleton({ labels }: { labels: string[] }) {
-  const getVar = (varName: string): string => `var(${varName})`;
+// Skeleton loader mirroring the timeline layout (time bar + small disc + content bars).
+function ActivityTimelineSkeleton() {
+  const pulse = (extra: CSSProperties): CSSProperties => ({
+    animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+    backgroundColor: getVar('--pc-bg-tertiary'),
+    borderRadius: getVar('--pc-border-radius-md'),
+    ...extra,
+  });
 
   return (
-    <div style={{
-      borderRadius: getVar('--pc-border-radius-md'),
-      border: `1px solid ${getVar('--pc-border-color')}`,
-      backgroundColor: getVar('--pc-bg-primary'),
-    }}>
-      {/* Table Header */}
-      <div style={{
-        borderBottom: `1px solid ${getVar('--pc-border-color')}`,
-        backgroundColor: getVar('--pc-bg-secondary'),
-      }}>
-        <div style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(4, 1fr)',
-          gap: getVar('--pc-spacing-sm'),
-          paddingLeft: getVar('--pc-spacing-md'),
-          paddingRight: getVar('--pc-spacing-md'),
-          paddingTop: '0.625rem',
-          paddingBottom: '0.625rem',
-        }}>
-          {labels.map((_, i) => (
-            <div
-              key={i}
-              style={{
-                height: '1rem',
-                width: '6rem',
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-                borderRadius: getVar('--pc-border-radius-md'),
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }}
-            />
-          ))}
-        </div>
-      </div>
-
-      {/* Table Rows */}
-      {Array.from({ length: 4 }).map((_, index) => (
+    <div style={{ width: '100%' }}>
+      <div style={{ ...pulse({ height: '0.75rem', width: '7rem' }), marginBottom: getVar('--pc-spacing-md') }} />
+      {Array.from({ length: 6 }).map((_, index) => (
         <div
           key={index}
           style={{
-            borderBottom: `1px solid ${getVar('--pc-border-color')}`,
-            backgroundColor: getVar('--pc-bg-primary'),
+            display: 'grid',
+            gridTemplateColumns: '64px 34px 1fr',
+            columnGap: '12px',
+            marginBottom: getVar('--pc-spacing-sm'),
           }}
         >
-          <div style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(4, 1fr)',
-            gap: getVar('--pc-spacing-sm'),
-            paddingLeft: getVar('--pc-spacing-md'),
-            paddingRight: getVar('--pc-spacing-md'),
-            paddingTop: '0.625rem',
-            paddingBottom: '0.625rem',
-          }}>
-            {/* Activity Title */}
-            <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, ...pcStyles.gapXs }}>
-              <div style={{
-                height: '1rem',
-                width: '8rem',
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-                borderRadius: getVar('--pc-border-radius-md'),
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }} />
-            </div>
-
-            {/* Activity Type */}
-            <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter }}>
-              <div style={{
-                height: '1.5rem',
-                width: '5rem',
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-                borderRadius: '9999px',
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }} />
-            </div>
-
-            {/* Description */}
-            <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, ...pcStyles.gapXs }}>
-              <div style={{
-                height: '0.75rem',
-                width: '10rem',
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-                borderRadius: getVar('--pc-border-radius-md'),
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }} />
-              <div style={{
-                height: '0.75rem',
-                width: '8rem',
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-                borderRadius: getVar('--pc-border-radius-md'),
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }} />
-            </div>
-
-            {/* Timestamp */}
-            <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, ...pcStyles.gapXs }}>
-              <div style={{
-                height: '1rem',
-                width: '6rem',
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-                borderRadius: getVar('--pc-border-radius-md'),
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }} />
-              <div style={{
-                height: '0.75rem',
-                width: '5rem',
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-                borderRadius: getVar('--pc-border-radius-md'),
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }} />
-            </div>
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '0.25rem', paddingTop: '0.5rem' }}>
+            <div style={pulse({ height: '0.75rem', width: '3rem' })} />
+            <div style={pulse({ height: '0.625rem', width: '2.25rem' })} />
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'center', paddingTop: '0.5rem' }}>
+            <div style={pulse({ width: 30, height: 30, borderRadius: '9999px' })} />
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4375rem', padding: '0.5rem 0.625rem' }}>
+            <div style={pulse({ height: '0.875rem', width: '40%' })} />
+            <div style={pulse({ height: '0.75rem', width: '72%' })} />
           </div>
         </div>
       ))}