import * as React from "react" ; import { StyleSheet , View , Platform } from "react-native" ; import { FAB } from "react-native-paper" ; import { useNavigation , useFocusEffect } from "@react-navigation/native" ; import { useSelector , useDispatch } from "react-redux" ; import { useSyncGate } from "../SyncGate" ; import { StoreState } from "../store" ; import { SyncManager } from "../sync/SyncManager" ; import { performSync , setSettings } from "../store/actions" ; import { useCredentials } from "../credentials" ; import NoteList from "../components/NoteList" ; import Appbar from "../widgets/Appbar" ; import Menu from "../widgets/Menu" ; import MenuItem from "../widgets/MenuItem" ; import AppbarAction from "../widgets/AppbarAction" ; import { DefaultNavigationProp } from "../RootStackParamList" ; import { useTheme } from "../theme" ; interface PropsType { active : boolean ; } export default function NoteListScreen ( props ) { const viewSettings = useSelector ( ( state ) => state . settings . viewSettings ) ; const { sortBy } = viewSettings ; const navigation = useNavigation < DefaultNavigationProp > ( ) ; const syncGate = useSyncGate ( ) ; const theme = useTheme ( ) ; const { active } = props ; React . useEffect ( ( ) => { if ( ! active ) { return ; } navigation . setOptions ( { header : ( props ) => < Appbar { ... props } menuFallback / > , title : "Notes" , headerRight : ( ) => ( < RightAction />) } ) ; } , [ active , navigation ] ) ; if ( syncGate ) { return syncGate ; } return ( < > < NoteList sortBy = { sortBy } / > < FAB icon = "plus" accessibilityLabel = "New" color = { theme . colors . onAccent } style = { styles . fab } onPress = { ( ) => navigation . navigate ( "NoteCreate" ) } /> < />); } const styles = StyleSheet . create ( { fab : { position : "absolute" , margin : 16 , right : 0 , bottom : 0 } } ) ; interface RightActionPropsType { colUid ? : string ; } function RightAction ( props ) { const etebase = useCredentials ( ) ! ; const [ showMenu , setShowMenu ] = React . useState ( false ) ; const [ showSortMenu , setShowSortMenu_ ] = React . useState ( false ) ; const syncDispatch = useDispatch ( ) ; const isSyncing = useSelector ( ( state ) => state . syncCount ) > 0 ; const viewSettings = useSelector ( ( state ) => state . settings . viewSettings ) ; const navigation = useNavigation < DefaultNavigationProp > ( ) ; const { colUid } = props ; function setShowSortMenu ( value ) { setShowSortMenu_ ( value ) ; setShowMenu ( value ) ; } async function refresh ( ) { const syncManager = SyncManager . getManager ( etebase ! ) ; syncDispatch ( performSync ( syncManager . sync ( ) ) ) ; } useFocusEffect ( React . useCallback ( ( ) => { if ( ! etebase ) { return ( ) => true ; } refresh ( ) ; if ( Platform . OS !== "web" ) { return ( ) => true ; } function autoRefresh ( ) { if ( navigator . onLine && etebase ) { refresh ( ) ; } } const interval = 5 * 60 * 1000 ; const id = setInterval ( autoRefresh , interval ) ; return ( ) => clearInterval ( id ) ; } , [ etebase ] ) ) ; return ( < View style = { { flexDirection : "row" } } > < AppbarAction icon = "sync" accessibilityLabel = "Sync" disabled = { isSyncing } onPress = { ( ) => { setShowMenu ( false ) ; refresh ( ) ; } } /> < Menu visible = { showMenu } onDismiss = { ( ) => setShowMenu ( false ) } anchor = { ( < AppbarAction icon = "dots-vertical" accessibilityLabel = "Menu" onPress = { ( ) => setShowMenu ( true ) } />)}> < Menu visible = { showSortMenu } onDismiss = { ( ) => setShowSortMenu ( false ) } anchor = { ( < Menu . Item icon = "sort" title = "Sort by" disabled = { isSyncing } onPress = { ( ) => { setShowSortMenu ( true ) ; } } />)}> < MenuItem icon = "sort-alphabetical" title = "Name" disabled = { isSyncing } active = { viewSettings . sortBy === "name" } onPress = { ( ) => { setShowSortMenu ( false ) ; syncDispatch ( setSettings ( { viewSettings : { ... viewSettings , sortBy : "name" } } ) ) ; } } /> < MenuItem icon = "sort-numeric" title = "Modification time" disabled = { isSyncing } active = { viewSettings . sortBy === "mtime" } onPress = { ( ) => { setShowSortMenu ( false ) ; syncDispatch ( setSettings ( { viewSettings : { ... viewSettings , sortBy : "mtime" } } ) ) ; } } /> < /Menu> { colUid && ( < MenuItem icon = "notebook" title = "Manage Notebook" disabled = { isSyncing } onPress = { ( ) => { setShowMenu ( false ) ; navigation . navigate ( "CollectionChangelog" , { colUid } ) ; } } />)} < /Menu> < /View>); }