All files / src/components/pages/schedule/schedule-list index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';

import { type RefObject } from 'react';

import {
  ScheduleListContent,
  ScheduleListEmpty,
  ScheduleListInfiniteScroll,
} from '@/components/pages/schedule';
import { ErrorMessage } from '@/components/shared';
import { GroupListItemResponse } from '@/types/service/group';

import { type TabType } from './constants';

type Props = {
  group: GroupListItemResponse[];
  tabType: TabType;
  emptyStateType: TabType;
  emptyStatePath: string;
  showActions: boolean;
  error?: Error | null;
  hasNextPage?: boolean;
  isLoading?: boolean;
  isFetchingNextPage?: boolean;
  sentinelRef?: RefObject<HTMLDivElement | null>;
  completedMessage?: string;
  refetch?: () => Promise<unknown>;
};

export const ScheduleList = ({
  group,
  tabType,
  emptyStateType,
  emptyStatePath,
  showActions,
  error,
  hasNextPage,
  isLoading,
  isFetchingNextPage,
  sentinelRef,
  completedMessage,
  refetch,
}: Props) => {
  const isEmpty = group.length === 0;
  const hasError = !!error;
  const hasItems = group.length > 0;
  const hasNoItems = isEmpty && !error && !isLoading;
  const showErrorOnly = hasError && isEmpty;
  const showErrorWithData = hasError && !isEmpty;
  const showEmptyState = hasNoItems;

  const handleRetry = () => {
    if (refetch) {
      refetch();
    } else {
      window.location.reload();
    }
  };

  return (
    <>
      {showEmptyState && (
        <ScheduleListEmpty emptyStatePath={emptyStatePath} emptyStateType={emptyStateType} />
      )}

      {hasItems && (
        <section className='flex w-full flex-col gap-4 px-4 py-4'>
          {showErrorOnly && (
            <div className='py-4'>
              <ErrorMessage className='py-12' message={error.message} onRetry={handleRetry} />
            </div>
          )}

          <ScheduleListContent group={group} showActions={showActions} tabType={tabType} />

          {showErrorWithData && (
            <div className='py-4'>
              <ErrorMessage className='py-8' message={error.message} onRetry={handleRetry} />
            </div>
          )}

          <ScheduleListInfiniteScroll
            completedMessage={completedMessage || ''}
            hasError={hasError}
            hasNextPage={hasNextPage || false}
            isFetchingNextPage={isFetchingNextPage || false}
            sentinelRef={sentinelRef}
          />
        </section>
      )}
    </>
  );
};