From c8a07069be17ed36235cfe66bede87a670357b56 Mon Sep 17 00:00:00 2001 From: FabrizioCostaMedich Date: Thu, 17 Oct 2024 13:40:32 +0200 Subject: [PATCH 1/7] fix(courses): added the ability to view files grouped by folders --- assets/translations/en.json | 5 +- assets/translations/it.json | 5 +- src/core/contexts/PreferencesContext.ts | 3 + src/core/providers/PreferencesProvider.tsx | 1 + .../components/CourseDirectoryListItem.tsx | 11 ++- .../courses/navigation/CourseNavigator.tsx | 4 +- .../navigation/CourseSharedScreens.tsx | 14 ++- .../courses/navigation/FileNavigator.tsx | 50 +++++++++++ .../courses/screens/CourseDirectoryScreen.tsx | 88 ++++++++++++++++--- .../courses/screens/CourseFilesScreen.tsx | 21 ++--- 10 files changed, 165 insertions(+), 37 deletions(-) create mode 100644 src/features/courses/navigation/FileNavigator.tsx diff --git a/assets/translations/en.json b/assets/translations/en.json index 6849ee51..d33204e2 100644 --- a/assets/translations/en.json +++ b/assets/translations/en.json @@ -291,7 +291,10 @@ "subtitle_plural": "{{count}} files" }, "courseDirectoryScreen": { - "noResult": "No results found" + "noResult": "No results found", + "navigateRecentFiles": "View recent", + "search": "Search", + "clearSearch": "Clear search" }, "courseFileListItem": { "openFileError": "Cannot open the file.", diff --git a/assets/translations/it.json b/assets/translations/it.json index 83180785..31df309c 100644 --- a/assets/translations/it.json +++ b/assets/translations/it.json @@ -291,7 +291,10 @@ "subtitle_plural": "{{count}} file" }, "courseDirectoryScreen": { - "noResult": "Nessun risultato trovato" + "noResult": "Nessun risultato trovato", + "navigateRecentFiles": "Sfoglia file recenti", + "search": "Cerca", + "clearSearch": "Cancella ricerca" }, "courseFileListItem": { "openFileError": "Impossibile aprire il file.", diff --git a/src/core/contexts/PreferencesContext.ts b/src/core/contexts/PreferencesContext.ts index 7921b0f9..5892b982 100644 --- a/src/core/contexts/PreferencesContext.ts +++ b/src/core/contexts/PreferencesContext.ts @@ -19,6 +19,7 @@ export const editablePreferenceKeys = [ 'emailGuideRead', 'placesSearched', 'agendaScreen', + 'filesScreen', 'hideGrades', ] as const; @@ -34,6 +35,7 @@ export const objectPreferenceKeys = [ 'emailGuideRead', 'placesSearched', 'agendaScreen', + 'filesScreen', 'hideGrades', ]; @@ -62,6 +64,7 @@ export interface PreferencesContextBase { layout: 'weekly' | 'daily'; filters: AgendaTypesFilterState; }; + filesScreen: 'recentFiles' | 'folderView'; hideGrades?: boolean; } diff --git a/src/core/providers/PreferencesProvider.tsx b/src/core/providers/PreferencesProvider.tsx index 8cf3a5a4..43e078c4 100644 --- a/src/core/providers/PreferencesProvider.tsx +++ b/src/core/providers/PreferencesProvider.tsx @@ -33,6 +33,7 @@ export const PreferencesProvider = ({ children }: PropsWithChildren) => { lecture: false, }, }, + filesScreen: 'recentFiles', }); const preferencesInitialized = useRef(false); diff --git a/src/features/courses/components/CourseDirectoryListItem.tsx b/src/features/courses/components/CourseDirectoryListItem.tsx index d77115d7..404e6f95 100644 --- a/src/features/courses/components/CourseDirectoryListItem.tsx +++ b/src/features/courses/components/CourseDirectoryListItem.tsx @@ -29,10 +29,13 @@ export const CourseDirectoryListItem = ({ count: item.files.length, })} onPress={() => - navigation.navigate('CourseDirectory', { - courseId, - directoryId: item.id, - directoryName: item.name, + navigation.navigate('TeachingTab', { + screen: 'DirectoryFileScreen', + params: { + courseId, + directoryId: item.id, + directoryName: item.name, + }, }) } {...rest} diff --git a/src/features/courses/navigation/CourseNavigator.tsx b/src/features/courses/navigation/CourseNavigator.tsx index 779a394d..dfa0502b 100644 --- a/src/features/courses/navigation/CourseNavigator.tsx +++ b/src/features/courses/navigation/CourseNavigator.tsx @@ -19,10 +19,10 @@ import { CourseIndicator } from '../components/CourseIndicator'; import { CourseContext } from '../contexts/CourseContext'; import { CourseFilesCacheProvider } from '../providers/CourseFilesCacheProvider'; import { CourseAssignmentsScreen } from '../screens/CourseAssignmentsScreen'; -import { CourseFilesScreen } from '../screens/CourseFilesScreen'; import { CourseInfoScreen } from '../screens/CourseInfoScreen'; import { CourseLecturesScreen } from '../screens/CourseLecturesScreen'; import { CourseNoticesScreen } from '../screens/CourseNoticesScreen'; +import { FileNavigator } from './FileNavigator'; type Props = NativeStackScreenProps; @@ -141,7 +141,7 @@ export const CourseNavigator = ({ route, navigation }: Props) => { /> diff --git a/src/features/courses/navigation/CourseSharedScreens.tsx b/src/features/courses/navigation/CourseSharedScreens.tsx index 2223303d..7b380962 100644 --- a/src/features/courses/navigation/CourseSharedScreens.tsx +++ b/src/features/courses/navigation/CourseSharedScreens.tsx @@ -23,16 +23,14 @@ import { CourseVirtualClassroomScreen } from '../screens/CourseVirtualClassroomS import { NoticeScreen } from '../screens/NoticeScreen'; import { Assignment } from '../types/Assignment'; import { CourseNavigator } from './CourseNavigator'; +import { FileStackParamList } from './FileNavigator'; -export interface CourseSharedScreensParamList extends ParamListBase { +export interface CourseSharedScreensParamList + extends ParamListBase, + FileStackParamList { Course: { id: number; animated?: boolean }; Notice: { noticeId: number; courseId: number }; CoursePreferences: { courseId: number; uniqueShortcode: string }; - CourseDirectory: { - courseId: number; - directoryId?: string; - directoryName?: string; - }; CourseGuide: { courseId: number }; CourseVideolecture: { courseId: number; @@ -109,9 +107,9 @@ export const CourseSharedScreens = ( }} /> `${params.directoryId}`} + getId={({ params }) => `${params?.directoryId}`} options={{ headerBackTitleVisible: false, headerLargeTitle: false, diff --git a/src/features/courses/navigation/FileNavigator.tsx b/src/features/courses/navigation/FileNavigator.tsx new file mode 100644 index 00000000..feeca629 --- /dev/null +++ b/src/features/courses/navigation/FileNavigator.tsx @@ -0,0 +1,50 @@ +import { useTheme } from '@lib/ui/hooks/useTheme'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; + +import { usePreferencesContext } from '../../../core/contexts/PreferencesContext'; +import { useTitlesStyles } from '../../../core/hooks/useTitlesStyles'; +import { useCourseContext } from '../contexts/CourseContext'; +import { CourseDirectoryScreen } from '../screens/CourseDirectoryScreen'; +import { CourseFilesScreen } from '../screens/CourseFilesScreen'; + +export type FileStackParamList = { + FileScreen: { + courseId: number; + }; + DirectoryFileScreen: { + courseId: number; + directoryId?: string; + directoryName?: string; + }; +}; + +const Stack = createNativeStackNavigator(); +export const FileNavigator = () => { + const theme = useTheme(); + const { filesScreen } = usePreferencesContext(); + const courseId = useCourseContext(); + + return ( + + + + + ); +}; diff --git a/src/features/courses/screens/CourseDirectoryScreen.tsx b/src/features/courses/screens/CourseDirectoryScreen.tsx index 4c63f5ac..5ec72bf6 100644 --- a/src/features/courses/screens/CourseDirectoryScreen.tsx +++ b/src/features/courses/screens/CourseDirectoryScreen.tsx @@ -2,9 +2,14 @@ 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 { faSearch } from '@fortawesome/free-solid-svg-icons'; +import { CtaButton } from '@lib/ui/components/CtaButton'; import { IndentedDivider } from '@lib/ui/components/IndentedDivider'; import { RefreshControl } from '@lib/ui/components/RefreshControl'; +import { Row } from '@lib/ui/components/Row'; import { Text } from '@lib/ui/components/Text'; +import { TranslucentTextField } from '@lib/ui/components/TranslucentTextField'; import { useStylesheet } from '@lib/ui/hooks/useStylesheet'; import { Theme } from '@lib/ui/types/Theme'; import { CourseDirectory, CourseFileOverview } from '@polito/api-client'; @@ -12,22 +17,28 @@ import { useFocusEffect } from '@react-navigation/native'; import { NativeStackScreenProps } from '@react-navigation/native-stack'; import { BottomBarSpacer } from '../../../core/components/BottomBarSpacer'; +import { usePreferencesContext } from '../../../core/contexts/PreferencesContext'; import { useSafeAreaSpacing } from '../../../core/hooks/useSafeAreaSpacing'; import { useGetCourseDirectory, useGetCourseFilesRecent, } from '../../../core/queries/courseHooks'; +import { GlobalStyles } from '../../../core/styles/GlobalStyles'; import { CourseFileOverviewWithLocation } from '../../../core/types/files'; -import { TeachingStackParamList } from '../../teaching/components/TeachingNavigator'; import { CourseDirectoryListItem } from '../components/CourseDirectoryListItem'; import { CourseFileListItem } from '../components/CourseFileListItem'; import { CourseRecentFileListItem } from '../components/CourseRecentFileListItem'; import { CourseContext } from '../contexts/CourseContext'; import { CourseFilesCacheContext } from '../contexts/CourseFilesCacheContext'; +import { CourseSharedScreensParamList } from '../navigation/CourseSharedScreens'; +import { FileStackParamList } from '../navigation/FileNavigator'; import { CourseFilesCacheProvider } from '../providers/CourseFilesCacheProvider'; import { isDirectory } from '../utils/fs-entry'; -type Props = NativeStackScreenProps; +type Props = NativeStackScreenProps< + CourseSharedScreensParamList & FileStackParamList, + 'DirectoryFileScreen' +>; const FileCacheChecker = () => { const { refresh } = useContext(CourseFilesCacheContext); @@ -49,20 +60,25 @@ export const CourseDirectoryScreen = ({ route, navigation }: Props) => { const [searchFilter, setSearchFilter] = useState(''); const directoryQuery = useGetCourseDirectory(courseId, directoryId); const { paddingHorizontal } = useSafeAreaSpacing(); + const { updatePreference } = usePreferencesContext(); useEffect(() => { - navigation.setOptions({ - headerTitle: directoryName ?? t('common.file_plural'), - headerSearchBarOptions: { - onChangeText: e => setSearchFilter(e.nativeEvent.text), - }, - }); + if (navigation.getId() !== 'FileTabNavigator') { + navigation.setOptions({ + headerTitle: directoryName ?? t('common.file_plural'), + }); + } }, [directoryName, navigation, t]); return ( + + {searchFilter ? ( { /> )} + {navigation.getId() === 'FileTabNavigator' && ( + { + navigation!.navigate('FileScreen', { courseId }); + updatePreference('filesScreen', 'recentFiles'); + }} + /> + )} ); }; -interface SearchProps { +interface SearchFlatListProps { courseId: number; searchFilter: string; } -const CourseFileSearchFlatList = ({ courseId, searchFilter }: SearchProps) => { +interface SearchBarProps { + searchFilter: string; + setSearchFilter: (search: string) => void; +} + +const CourseSearchBar = ({ searchFilter, setSearchFilter }: SearchBarProps) => { + const { paddingHorizontal } = useSafeAreaSpacing(); + const styles = useStylesheet(createStyles); + const { t } = useTranslation(); + + return ( + + setSearchFilter('')} + onClearLabel={t('contactsScreen.clearSearch')} + /> + + ); +}; + +const CourseFileSearchFlatList = ({ + courseId, + searchFilter, +}: SearchFlatListProps) => { const styles = useStylesheet(createStyles); const { t } = useTranslation(); const [searchResults, setSearchResults] = useState< @@ -156,9 +214,17 @@ const CourseFileSearchFlatList = ({ courseId, searchFilter }: SearchProps) => { ); }; -const createStyles = ({ spacing }: Theme) => +const createStyles = ({ spacing, shapes, colors }: Theme) => StyleSheet.create({ noResultText: { padding: spacing[4], }, + textField: { + borderRadius: shapes.lg, + }, + searchBar: { + paddingBottom: spacing[2], + paddingTop: spacing[2], + backgroundColor: colors.background, + }, }); diff --git a/src/features/courses/screens/CourseFilesScreen.tsx b/src/features/courses/screens/CourseFilesScreen.tsx index aa802151..9a08913f 100644 --- a/src/features/courses/screens/CourseFilesScreen.tsx +++ b/src/features/courses/screens/CourseFilesScreen.tsx @@ -8,32 +8,30 @@ import { EmptyState } from '@lib/ui/components/EmptyState'; import { IndentedDivider } from '@lib/ui/components/IndentedDivider'; import { RefreshControl } from '@lib/ui/components/RefreshControl'; import { CourseDirectory, CourseFileOverview } from '@polito/api-client'; -import { MaterialTopTabScreenProps } from '@react-navigation/material-top-tabs'; import { useFocusEffect } from '@react-navigation/native'; +import { NativeStackScreenProps } from '@react-navigation/native-stack'; import { BottomBarSpacer } from '../../../core/components/BottomBarSpacer'; +import { usePreferencesContext } from '../../../core/contexts/PreferencesContext'; import { useNotifications } from '../../../core/hooks/useNotifications'; import { useOnLeaveScreen } from '../../../core/hooks/useOnLeaveScreen'; import { useSafeAreaSpacing } from '../../../core/hooks/useSafeAreaSpacing'; import { useGetCourseFilesRecent } from '../../../core/queries/courseHooks'; import { CourseRecentFileListItem } from '../components/CourseRecentFileListItem'; -import { useCourseContext } from '../contexts/CourseContext'; import { CourseFilesCacheContext } from '../contexts/CourseFilesCacheContext'; -import { CourseTabsParamList } from '../navigation/CourseNavigator'; +import { FileStackParamList } from '../navigation/FileNavigator'; -type Props = MaterialTopTabScreenProps< - CourseTabsParamList, - 'CourseFilesScreen' ->; +type Props = NativeStackScreenProps; -export const CourseFilesScreen = ({ navigation }: Props) => { +export const CourseFilesScreen = ({ navigation, route }: Props) => { const { t } = useTranslation(); const [scrollEnabled, setScrollEnabled] = useState(true); const { refresh } = useContext(CourseFilesCacheContext); - const courseId = useCourseContext(); + const courseId = route.params.courseId; const recentFilesQuery = useGetCourseFilesRecent(courseId); const { paddingHorizontal } = useSafeAreaSpacing(); const { clearNotificationScope } = useNotifications(); + const { updatePreference } = usePreferencesContext(); useOnLeaveScreen(() => { clearNotificationScope(['teaching', 'courses', courseId, 'files']); @@ -91,7 +89,10 @@ export const CourseFilesScreen = ({ navigation }: Props) => { navigation!.navigate('CourseDirectory', { courseId })} + action={() => { + navigation!.navigate('DirectoryFileScreen', { courseId }); + updatePreference('filesScreen', 'folderView'); + }} /> )} From a9347ac2ff5672456477abbd5a42912935dbf9f6 Mon Sep 17 00:00:00 2001 From: FabrizioCostaMedich Date: Sun, 20 Oct 2024 12:56:37 +0200 Subject: [PATCH 2/7] fix(courses): remove the search bar from the header --- src/features/courses/navigation/CourseSharedScreens.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/features/courses/navigation/CourseSharedScreens.tsx b/src/features/courses/navigation/CourseSharedScreens.tsx index 7b380962..dca76937 100644 --- a/src/features/courses/navigation/CourseSharedScreens.tsx +++ b/src/features/courses/navigation/CourseSharedScreens.tsx @@ -113,9 +113,6 @@ export const CourseSharedScreens = ( options={{ headerBackTitleVisible: false, headerLargeTitle: false, - headerSearchBarOptions: { - hideWhenScrolling: false, - }, }} /> From e1100e3f1a7ab02763371d091691c117a088c2bf Mon Sep 17 00:00:00 2001 From: FabrizioCostaMedich Date: Tue, 22 Oct 2024 10:57:25 +0200 Subject: [PATCH 3/7] fix(courses): made the search bar sticky --- .../courses/screens/CourseDirectoryScreen.tsx | 19 +++++++++++++++---- .../courses/screens/CourseFilesScreen.tsx | 2 +- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/features/courses/screens/CourseDirectoryScreen.tsx b/src/features/courses/screens/CourseDirectoryScreen.tsx index 5ec72bf6..aae3eba9 100644 --- a/src/features/courses/screens/CourseDirectoryScreen.tsx +++ b/src/features/courses/screens/CourseDirectoryScreen.tsx @@ -74,15 +74,12 @@ export const CourseDirectoryScreen = ({ route, navigation }: Props) => { - {searchFilter ? ( ) : ( { ios: IndentedDivider, })} ListFooterComponent={} + ListHeaderComponent={ + + } /> )} @@ -130,6 +133,7 @@ export const CourseDirectoryScreen = ({ route, navigation }: Props) => { interface SearchFlatListProps { courseId: number; searchFilter: string; + setSearchFilter: (search: string) => void; } interface SearchBarProps { @@ -164,6 +168,7 @@ const CourseSearchBar = ({ searchFilter, setSearchFilter }: SearchBarProps) => { const CourseFileSearchFlatList = ({ courseId, searchFilter, + setSearchFilter, }: SearchFlatListProps) => { const styles = useStylesheet(createStyles); const { t } = useTranslation(); @@ -210,6 +215,12 @@ const CourseFileSearchFlatList = ({ {t('courseDirectoryScreen.noResult')} } + ListHeaderComponent={ + + } /> ); }; diff --git a/src/features/courses/screens/CourseFilesScreen.tsx b/src/features/courses/screens/CourseFilesScreen.tsx index 9a08913f..5a00fc48 100644 --- a/src/features/courses/screens/CourseFilesScreen.tsx +++ b/src/features/courses/screens/CourseFilesScreen.tsx @@ -85,7 +85,7 @@ export const CourseFilesScreen = ({ navigation, route }: Props) => { ) : null } /> - {recentFilesQuery.data && recentFilesQuery.data.length > 0 && ( + {recentFilesQuery.data && ( Date: Fri, 25 Oct 2024 23:25:59 +0200 Subject: [PATCH 4/7] fix(courses): fixed search bar and renamed screens in navigators --- src/core/contexts/PreferencesContext.ts | 2 +- src/core/providers/PreferencesProvider.tsx | 2 +- .../components/CourseDirectoryListItem.tsx | 11 +++---- .../navigation/CourseSharedScreens.tsx | 12 ++++---- .../courses/navigation/FileNavigator.tsx | 10 +++---- .../courses/screens/CourseDirectoryScreen.tsx | 30 +++++++------------ .../courses/screens/CourseFilesScreen.tsx | 6 ++-- 7 files changed, 31 insertions(+), 42 deletions(-) diff --git a/src/core/contexts/PreferencesContext.ts b/src/core/contexts/PreferencesContext.ts index 5892b982..c8888e83 100644 --- a/src/core/contexts/PreferencesContext.ts +++ b/src/core/contexts/PreferencesContext.ts @@ -64,7 +64,7 @@ export interface PreferencesContextBase { layout: 'weekly' | 'daily'; filters: AgendaTypesFilterState; }; - filesScreen: 'recentFiles' | 'folderView'; + filesScreen: 'filesView' | 'directoryView'; hideGrades?: boolean; } diff --git a/src/core/providers/PreferencesProvider.tsx b/src/core/providers/PreferencesProvider.tsx index 43e078c4..9a5731ff 100644 --- a/src/core/providers/PreferencesProvider.tsx +++ b/src/core/providers/PreferencesProvider.tsx @@ -33,7 +33,7 @@ export const PreferencesProvider = ({ children }: PropsWithChildren) => { lecture: false, }, }, - filesScreen: 'recentFiles', + filesScreen: 'filesView', }); const preferencesInitialized = useRef(false); diff --git a/src/features/courses/components/CourseDirectoryListItem.tsx b/src/features/courses/components/CourseDirectoryListItem.tsx index 404e6f95..d77115d7 100644 --- a/src/features/courses/components/CourseDirectoryListItem.tsx +++ b/src/features/courses/components/CourseDirectoryListItem.tsx @@ -29,13 +29,10 @@ export const CourseDirectoryListItem = ({ count: item.files.length, })} onPress={() => - navigation.navigate('TeachingTab', { - screen: 'DirectoryFileScreen', - params: { - courseId, - directoryId: item.id, - directoryName: item.name, - }, + navigation.navigate('CourseDirectory', { + courseId, + directoryId: item.id, + directoryName: item.name, }) } {...rest} diff --git a/src/features/courses/navigation/CourseSharedScreens.tsx b/src/features/courses/navigation/CourseSharedScreens.tsx index dca76937..116b9476 100644 --- a/src/features/courses/navigation/CourseSharedScreens.tsx +++ b/src/features/courses/navigation/CourseSharedScreens.tsx @@ -23,15 +23,17 @@ import { CourseVirtualClassroomScreen } from '../screens/CourseVirtualClassroomS import { NoticeScreen } from '../screens/NoticeScreen'; import { Assignment } from '../types/Assignment'; import { CourseNavigator } from './CourseNavigator'; -import { FileStackParamList } from './FileNavigator'; -export interface CourseSharedScreensParamList - extends ParamListBase, - FileStackParamList { +export interface CourseSharedScreensParamList extends ParamListBase { Course: { id: number; animated?: boolean }; Notice: { noticeId: number; courseId: number }; CoursePreferences: { courseId: number; uniqueShortcode: string }; CourseGuide: { courseId: number }; + CourseDirectory: { + courseId: number; + directoryId?: string; + directoryName?: string; + }; CourseVideolecture: { courseId: number; lectureId: number; @@ -107,7 +109,7 @@ export const CourseSharedScreens = ( }} /> `${params?.directoryId}`} options={{ diff --git a/src/features/courses/navigation/FileNavigator.tsx b/src/features/courses/navigation/FileNavigator.tsx index feeca629..e52c9b9d 100644 --- a/src/features/courses/navigation/FileNavigator.tsx +++ b/src/features/courses/navigation/FileNavigator.tsx @@ -8,10 +8,10 @@ import { CourseDirectoryScreen } from '../screens/CourseDirectoryScreen'; import { CourseFilesScreen } from '../screens/CourseFilesScreen'; export type FileStackParamList = { - FileScreen: { + RecentFiles: { courseId: number; }; - DirectoryFileScreen: { + DirectoryFiles: { courseId: number; directoryId?: string; directoryName?: string; @@ -32,16 +32,16 @@ export const FileNavigator = () => { ...useTitlesStyles(theme), }} initialRouteName={ - filesScreen === 'recentFiles' ? 'FileScreen' : 'DirectoryFileScreen' + filesScreen === 'filesView' ? 'RecentFiles' : 'DirectoryFiles' } > diff --git a/src/features/courses/screens/CourseDirectoryScreen.tsx b/src/features/courses/screens/CourseDirectoryScreen.tsx index aae3eba9..705f2763 100644 --- a/src/features/courses/screens/CourseDirectoryScreen.tsx +++ b/src/features/courses/screens/CourseDirectoryScreen.tsx @@ -25,19 +25,19 @@ import { } from '../../../core/queries/courseHooks'; import { GlobalStyles } from '../../../core/styles/GlobalStyles'; import { CourseFileOverviewWithLocation } from '../../../core/types/files'; +import { TeachingStackParamList } from '../../teaching/components/TeachingNavigator'; import { CourseDirectoryListItem } from '../components/CourseDirectoryListItem'; import { CourseFileListItem } from '../components/CourseFileListItem'; import { CourseRecentFileListItem } from '../components/CourseRecentFileListItem'; import { CourseContext } from '../contexts/CourseContext'; import { CourseFilesCacheContext } from '../contexts/CourseFilesCacheContext'; -import { CourseSharedScreensParamList } from '../navigation/CourseSharedScreens'; import { FileStackParamList } from '../navigation/FileNavigator'; import { CourseFilesCacheProvider } from '../providers/CourseFilesCacheProvider'; import { isDirectory } from '../utils/fs-entry'; type Props = NativeStackScreenProps< - CourseSharedScreensParamList & FileStackParamList, - 'DirectoryFileScreen' + TeachingStackParamList & FileStackParamList, + 'CourseDirectory' | 'DirectoryFiles' >; const FileCacheChecker = () => { @@ -75,11 +75,15 @@ export const CourseDirectoryScreen = ({ route, navigation }: Props) => { + + {searchFilter ? ( ) : ( { ios: IndentedDivider, })} ListFooterComponent={} - ListHeaderComponent={ - - } /> )} @@ -121,8 +119,8 @@ export const CourseDirectoryScreen = ({ route, navigation }: Props) => { title={t('courseDirectoryScreen.navigateRecentFiles')} icon={faFile} action={() => { - navigation!.navigate('FileScreen', { courseId }); - updatePreference('filesScreen', 'recentFiles'); + navigation!.navigate('RecentFiles', { courseId }); + updatePreference('filesScreen', 'filesView'); }} /> )} @@ -133,7 +131,6 @@ export const CourseDirectoryScreen = ({ route, navigation }: Props) => { interface SearchFlatListProps { courseId: number; searchFilter: string; - setSearchFilter: (search: string) => void; } interface SearchBarProps { @@ -168,7 +165,6 @@ const CourseSearchBar = ({ searchFilter, setSearchFilter }: SearchBarProps) => { const CourseFileSearchFlatList = ({ courseId, searchFilter, - setSearchFilter, }: SearchFlatListProps) => { const styles = useStylesheet(createStyles); const { t } = useTranslation(); @@ -215,12 +211,6 @@ const CourseFileSearchFlatList = ({ {t('courseDirectoryScreen.noResult')} } - ListHeaderComponent={ - - } /> ); }; diff --git a/src/features/courses/screens/CourseFilesScreen.tsx b/src/features/courses/screens/CourseFilesScreen.tsx index 5a00fc48..fa5eb6b4 100644 --- a/src/features/courses/screens/CourseFilesScreen.tsx +++ b/src/features/courses/screens/CourseFilesScreen.tsx @@ -21,7 +21,7 @@ import { CourseRecentFileListItem } from '../components/CourseRecentFileListItem import { CourseFilesCacheContext } from '../contexts/CourseFilesCacheContext'; import { FileStackParamList } from '../navigation/FileNavigator'; -type Props = NativeStackScreenProps; +type Props = NativeStackScreenProps; export const CourseFilesScreen = ({ navigation, route }: Props) => { const { t } = useTranslation(); @@ -90,8 +90,8 @@ export const CourseFilesScreen = ({ navigation, route }: Props) => { title={t('courseFilesTab.navigateFolders')} icon={faFolderOpen} action={() => { - navigation!.navigate('DirectoryFileScreen', { courseId }); - updatePreference('filesScreen', 'folderView'); + navigation!.navigate('DirectoryFiles', { courseId }); + updatePreference('filesScreen', 'directoryView'); }} /> )} From b0c5822420efad8e6d56e37cb168d34dffab3919 Mon Sep 17 00:00:00 2001 From: FabrizioCostaMedich Date: Tue, 29 Oct 2024 11:58:59 +0100 Subject: [PATCH 5/7] fix(courses): search bar visible only on root-directory --- assets/translations/en.json | 4 ++-- assets/translations/it.json | 4 ++-- src/features/courses/screens/CourseDirectoryScreen.tsx | 10 ++++++---- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/assets/translations/en.json b/assets/translations/en.json index d33204e2..0770f25f 100644 --- a/assets/translations/en.json +++ b/assets/translations/en.json @@ -291,10 +291,10 @@ "subtitle_plural": "{{count}} files" }, "courseDirectoryScreen": { + "clearSearch": "Clear search", "noResult": "No results found", "navigateRecentFiles": "View recent", - "search": "Search", - "clearSearch": "Clear search" + "search": "Search" }, "courseFileListItem": { "openFileError": "Cannot open the file.", diff --git a/assets/translations/it.json b/assets/translations/it.json index 31df309c..fcb49a78 100644 --- a/assets/translations/it.json +++ b/assets/translations/it.json @@ -291,10 +291,10 @@ "subtitle_plural": "{{count}} file" }, "courseDirectoryScreen": { + "clearSearch": "Cancella ricerca", "noResult": "Nessun risultato trovato", "navigateRecentFiles": "Sfoglia file recenti", - "search": "Cerca", - "clearSearch": "Cancella ricerca" + "search": "Cerca" }, "courseFileListItem": { "openFileError": "Impossibile aprire il file.", diff --git a/src/features/courses/screens/CourseDirectoryScreen.tsx b/src/features/courses/screens/CourseDirectoryScreen.tsx index 705f2763..148fcf63 100644 --- a/src/features/courses/screens/CourseDirectoryScreen.tsx +++ b/src/features/courses/screens/CourseDirectoryScreen.tsx @@ -75,10 +75,12 @@ export const CourseDirectoryScreen = ({ route, navigation }: Props) => { - + {navigation.getId() === 'FileTabNavigator' && ( + + )} {searchFilter ? ( Date: Thu, 31 Oct 2024 12:39:50 +0100 Subject: [PATCH 6/7] fix(courses): add empty state --- .../courses/screens/CourseDirectoryScreen.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/features/courses/screens/CourseDirectoryScreen.tsx b/src/features/courses/screens/CourseDirectoryScreen.tsx index 148fcf63..937ba1dc 100644 --- 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={} + ListEmptyComponent={ + !directoryQuery.isLoading ? ( + + ) : null + } /> )} From f242b6441fbff49cc687bb940425f9d0b4271bf3 Mon Sep 17 00:00:00 2001 From: FabrizioCostaMedich Date: Thu, 31 Oct 2024 19:40:41 +0100 Subject: [PATCH 7/7] fix(courses): change the title of the empty state --- assets/translations/en.json | 4 +++- assets/translations/it.json | 4 +++- src/features/courses/screens/CourseDirectoryScreen.tsx | 6 +++++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/assets/translations/en.json b/assets/translations/en.json index 0770f25f..99b41bf4 100644 --- a/assets/translations/en.json +++ b/assets/translations/en.json @@ -292,6 +292,8 @@ }, "courseDirectoryScreen": { "clearSearch": "Clear search", + "emptyRootFolder": "There are no files", + "emptyFolder": "The folder is empty", "noResult": "No results found", "navigateRecentFiles": "View recent", "search": "Search" @@ -302,7 +304,7 @@ }, "courseFilesTab": { "browseFiles": "Browse files", - "empty": "There are no files here", + "empty": "There are no files", "navigateFolders": "Navigate folders", "recentSectionTitle": "Recent files", "title": "Files" diff --git a/assets/translations/it.json b/assets/translations/it.json index fcb49a78..29d4c5dc 100644 --- a/assets/translations/it.json +++ b/assets/translations/it.json @@ -292,6 +292,8 @@ }, "courseDirectoryScreen": { "clearSearch": "Cancella ricerca", + "emptyRootFolder": "Non ci sono file", + "emptyFolder": "La cartella รจ vuota", "noResult": "Nessun risultato trovato", "navigateRecentFiles": "Sfoglia file recenti", "search": "Cerca" @@ -302,7 +304,7 @@ }, "courseFilesTab": { "browseFiles": "Esplora file", - "empty": "Non ci sono file qui", + "empty": "Non ci sono file", "navigateFolders": "Sfoglia le cartelle", "recentSectionTitle": "File recenti", "title": "Materiale" diff --git a/src/features/courses/screens/CourseDirectoryScreen.tsx b/src/features/courses/screens/CourseDirectoryScreen.tsx index 937ba1dc..0f36a155 100644 --- a/src/features/courses/screens/CourseDirectoryScreen.tsx +++ b/src/features/courses/screens/CourseDirectoryScreen.tsx @@ -117,7 +117,11 @@ export const CourseDirectoryScreen = ({ route, navigation }: Props) => { ListEmptyComponent={ !directoryQuery.isLoading ? ( ) : null