fix(courses): add empty state

polito · Oct 31, 2024 · ea78ef4 · ea78ef4
1 parent b0c5822
commit ea78ef4
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/src/features/courses/screens/CourseDirectoryScreen.tsx b/src/features/courses/screens/CourseDirectoryScreen.tsx
@@ -2,9 +2,10 @@ import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FlatList, Platform, StyleSheet } from 'react-native';
 
-import { faFile } from '@fortawesome/free-regular-svg-icons';
+import { faFile, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import { CtaButton } from '@lib/ui/components/CtaButton';
+import { EmptyState } from '@lib/ui/components/EmptyState';
 import { IndentedDivider } from '@lib/ui/components/IndentedDivider';
 import { RefreshControl } from '@lib/ui/components/RefreshControl';
 import { Row } from '@lib/ui/components/Row';
@@ -113,6 +114,14 @@ export const CourseDirectoryScreen = ({ route, navigation }: Props) => {
               ios: IndentedDivider,
             })}
             ListFooterComponent={<BottomBarSpacer />}
+            ListEmptyComponent={
+              !directoryQuery.isLoading ? (
+                <EmptyState
+                  message={t('courseFilesTab.empty')}
+                  icon={faFolderOpen}
+                />
+              ) : null
+            }
           />
         )}
       </CourseFilesCacheProvider>