Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-22 22:49:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

remove useIsFocused hook from all screens

Browse Source
This commit is contained in:
ammarahm-ed
2020-10-03 12:03:15 +05:00
parent 40ca59d18d
commit c9c8b0cf56
10 changed files with 436 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/mobile/src/components/Container/ContainerBottomButton.js
View File

@@ -7,9 +7,9 @@ import {useTracked} from '../../provider';
import {DDS, getElevation} from '../../utils/utils';
import {PressableButton} from '../PressableButton';
export const ContainerBottomButton = ({root}) => {
export const ContainerBottomButton = ({title, onPress, color}) => {
const [state, dispatch] = useTracked();
const {colors,containerBottomButton} = state;
const {colors} = state;
const [buttonHide, setButtonHide] = useState(false);
const insets = useSafeAreaInsets();
@@ -42,7 +42,7 @@ export const ContainerBottomButton = ({root}) => {
};
}, []);
return !containerBottomButton.visible ? null : (
return (
<View
style={{
width: '100%',
@@ -58,21 +58,13 @@ export const ContainerBottomButton = ({root}) => {
],
}}>
<PressableButton
testID={"container_bottom_btn"}
color={
containerBottomButton.color
? containerBottomButton.color
: colors.accent
}
selectedColor={
containerBottomButton.color
? containerBottomButton.color
: colors.accent
}
testID={'container_bottom_btn'}
color={color || colors.accent}
selectedColor={color || colors.accent}
customStyle={{
...getElevation(5),
}}
onPress={containerBottomButton.bottomButtonOnPress}>
onPress={onPress}>
<View
style={{
justifyContent: 'flex-start',
@@ -84,11 +76,7 @@ export const ContainerBottomButton = ({root}) => {
paddingVertical: pv + 5,
}}>
<Icon
name={
containerBottomButton.bottomButtonText === 'Clear all trash'
? 'delete'
: 'plus'
}
name={title === 'Clear all trash' ? 'delete' : 'plus'}
color="white"
size={SIZE.xl}
/>
@@ -100,7 +88,7 @@ export const ContainerBottomButton = ({root}) => {
fontFamily: WEIGHT.regular,
textAlignVertical: 'center',
}}>
{' ' + containerBottomButton.bottomButtonText}
{' ' + title}
</Text>
</View>
</PressableButton>

3
apps/mobile/src/components/SimpleList/index.js
View File

@@ -50,8 +50,9 @@ const SimpleList = ({
};
useEffect(() => {
console.log(focused());
let mainData =
searchResults.type === type && focused && searchResults.results.length > 0
searchResults.type === type && focused() && searchResults.results.length > 0
? searchResults.results
: listData;

27
apps/mobile/src/views/Favorites/index.js
View File

@@ -1,4 +1,3 @@
import { useIsFocused } from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
import {Placeholder} from '../../components/ListPlaceholders';
import SimpleList from '../../components/SimpleList';
@@ -9,10 +8,8 @@ export const Favorites = ({route, navigation}) => {
const [state, dispatch] = useTracked();
const {favorites} = state;
const [refreshing, setRefreshing] = useState(false);
const isFocused = useIsFocused();
useEffect(() => {
if (isFocused) {
const onFocus = useCallback(() => {
dispatch({
type: ACTIONS.HEADER_STATE,
state: {
@@ -22,12 +19,6 @@ export const Favorites = ({route, navigation}) => {
color: null,
},
});
dispatch({
type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
state: {
visible: false,
},
});
dispatch({
type: ACTIONS.HEADER_TEXT_STATE,
@@ -41,11 +32,17 @@ export const Favorites = ({route, navigation}) => {
screen: 'favorites',
});
dispatch({type: ACTIONS.FAVORITES});
}
}, [isFocused]);
}, []);
useEffect(() => {
if (isFocused) {
navigation.addListener('focus', onFocus);
return () => {
navigation.removeListener('focus', onFocus);
};
});
useEffect(() => {
if (navigation.isFocused()) {
dispatch({
type: ACTIONS.SEARCH_STATE,
state: {
@@ -57,7 +54,7 @@ export const Favorites = ({route, navigation}) => {
},
});
}
}, [favorites, isFocused]);
}, [favorites]);
return (
<SimpleList
@@ -67,7 +64,7 @@ export const Favorites = ({route, navigation}) => {
dispatch({type: ACTIONS.FAVORITES});
}}
refreshing={refreshing}
focused={isFocused}
focused={() => navigation.isFocused()}
RenderItem={NoteItemWrapper}
placeholder={<Placeholder type="favorites" />}
placeholderText="Notes you favorite appear here"

41
apps/mobile/src/views/Folders/index.js
View File

@@ -1,4 +1,3 @@
import {useIsFocused} from '@react-navigation/native';
import React, {useEffect} from 'react';
import {AddNotebookEvent} from '../../components/DialogManager/recievers';
import {Placeholder} from '../../components/ListPlaceholders';
@@ -6,13 +5,13 @@ import SimpleList from '../../components/SimpleList';
import {NotebookItemWrapper} from '../../components/SimpleList/NotebookItemWrapper';
import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
export const Folders = ({route, navigation}) => {
const [state, dispatch] = useTracked();
const {notebooks} = state;
let isFocused = useIsFocused();
const params = route.params;
useEffect(() => {
if (isFocused) {
const onFocus = useCallback(() => {
dispatch({
type: ACTIONS.HEADER_STATE,
state: {
@@ -22,15 +21,7 @@ export const Folders = ({route, navigation}) => {
color: null,
},
});
dispatch({
type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
state: {
bottomButtonText: 'Create a new notebook',
bottomButtonOnPress: () => AddNotebookEvent(),
color: null,
visible: true,
},
});
dispatch({
type: ACTIONS.HEADER_VERTICAL_MENU,
state: false,
@@ -47,11 +38,17 @@ export const Folders = ({route, navigation}) => {
type: ACTIONS.CURRENT_SCREEN,
screen: 'notebooks',
});
}
}, [isFocused]);
}, []);
useEffect(() => {
if (isFocused) {
navigation.addListener('focus', onFocus);
return () => {
navigation.removeListener('focus', onFocus);
};
});
useEffect(() => {
if (navigation.isFocused()) {
dispatch({
type: ACTIONS.SEARCH_STATE,
state: {
@@ -63,20 +60,26 @@ export const Folders = ({route, navigation}) => {
},
});
}
}, [notebooks, isFocused]);
}, [notebooks]);
const params = route.params;
const _onPressBottomButton = () => AddNotebookEvent();
return (
<>
<SimpleList
data={notebooks}
type="notebooks"
focused={isFocused}
focused={() => navigation.isFocused()}
RenderItem={NotebookItemWrapper}
placeholder={<Placeholder type="notebooks" />}
pinned={true}
placeholderText="Notebooks you add will appear here"
/>
<ContainerBottomButton
title="Create a new notebook"
onPress={_onPressBottomButton}
/>
</>
);
};

69
apps/mobile/src/views/Home/index.js
View File

@@ -1,5 +1,5 @@
import {useIsFocused} from '@react-navigation/native';
import React, {useEffect} from 'react';
import React, {useCallback, useEffect} from 'react';
import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
import {Placeholder} from '../../components/ListPlaceholders';
import SimpleList from '../../components/SimpleList';
import {NoteItemWrapper} from '../../components/SimpleList/NoteItemWrapper';
@@ -9,13 +9,12 @@ import {eSendEvent} from '../../services/eventManager';
import {eOnLoadNote, eScrollEvent} from '../../services/events';
import {openEditorAnimation} from '../../utils/animations';
import {DDS} from '../../utils/utils';
export const Home = ({route, navigation}) => {
const [state, dispatch] = useTracked();
const {notes} = state;
const isFocused = useIsFocused();
useEffect(() => {
if (isFocused) {
const onFocus = useCallback(() => {
dispatch({
type: ACTIONS.CURRENT_SCREEN,
screen: 'home',
@@ -39,42 +38,30 @@ export const Home = ({route, navigation}) => {
heading: 'Home',
},
});
dispatch({
type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
state: {
bottomButtonText: 'Create a new note',
bottomButtonOnPress: async () => {
if (DDS.isTab) {
eSendEvent(eOnLoadNote, {type: 'new'});
} else {
eSendEvent(eOnLoadNote, {type: 'new'});
openEditorAnimation();
}
},
color: null,
visible: true,
},
});
eSendEvent(eScrollEvent, 0);
dispatch({type: ACTIONS.COLORS});
dispatch({type: ACTIONS.NOTES});
} else {
}, []);
const onBlur = useCallback(() => {
console.log(navigation.isFocused());
dispatch({
type: ACTIONS.HEADER_VERTICAL_MENU,
state: false,
});
}
return () => {
dispatch({
type: ACTIONS.HEADER_VERTICAL_MENU,
state: false,
});
};
}, [isFocused]);
}, []);
useEffect(() => {
if (isFocused) {
navigation.addListener('focus', onFocus);
navigation.addListener('blur', onBlur);
return () => {
navigation.removeListener('focus', onFocus);
navigation.removeListener('blur', onBlur);
};
});
useEffect(() => {
if (navigation.isFocused()) {
dispatch({
type: ACTIONS.SEARCH_STATE,
state: {
@@ -86,7 +73,16 @@ export const Home = ({route, navigation}) => {
},
});
}
}, [notes, isFocused]);
}, [notes]);
const _onPressBottomButton = async () => {
if (DDS.isTab) {
eSendEvent(eOnLoadNote, {type: 'new'});
} else {
eSendEvent(eOnLoadNote, {type: 'new'});
openEditorAnimation();
}
};
return (
<>
@@ -95,11 +91,16 @@ export const Home = ({route, navigation}) => {
type="notes"
isHome={true}
pinned={true}
focused={isFocused}
focused={() => navigation.isFocused()}
RenderItem={NoteItemWrapper}
placeholder={<Placeholder type="notes" />}
placeholderText={`Notes you write appear here`}
/>
<ContainerBottomButton
title="Create a new note"
onPress={_onPressBottomButton}
/>
</>
);
};

50
apps/mobile/src/views/Notebook/index.js
View File

@@ -1,4 +1,3 @@
import {useIsFocused} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
import {AddTopicEvent} from '../../components/DialogManager/recievers';
import {NotebookItem} from '../../components/NotebookItem';
@@ -6,6 +5,7 @@ import SelectionWrapper from '../../components/SelectionWrapper';
import SimpleList from '../../components/SimpleList';
import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
import {
eSendEvent,
eSubscribeEvent,
@@ -13,15 +13,12 @@ import {
} from '../../services/eventManager';
import {eOnNewTopicAdded, eScrollEvent} from '../../services/events';
import NavigationService from '../../services/NavigationService';
import {db, ToastEvent} from '../../utils/utils';
import {db} from '../../utils/utils';
export const Notebook = ({route, navigation}) => {
const [, dispatch] = useTracked();
const [topics, setTopics] = useState([]);
const [refreshing, setRefreshing] = useState(false);
let params = route.params;
let isFocused = useIsFocused();
const onLoad = () => {
let allTopics;
@@ -42,8 +39,7 @@ export const Notebook = ({route, navigation}) => {
};
}, []);
useEffect(() => {
if (isFocused) {
const onFocus = useCallback(() => {
onLoad();
dispatch({
type: ACTIONS.HEADER_STATE,
@@ -72,11 +68,17 @@ export const Notebook = ({route, navigation}) => {
type: ACTIONS.CURRENT_SCREEN,
screen: 'notebook',
});
}
}, [isFocused]);
}, []);
useEffect(() => {
if (isFocused) {
navigation.addListener('focus', onFocus);
return () => {
navigation.removeListener('focus', onFocus);
};
});
useEffect(() => {
if (navigation.isFocused()) {
dispatch({
type: ACTIONS.SEARCH_STATE,
state: {
@@ -87,35 +89,33 @@ export const Notebook = ({route, navigation}) => {
color: null,
},
});
dispatch({
type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
state: {
visible: true,
bottomButtonOnPress: () => {
}
}, [topics]);
const _onPressBottomButton = () => {
let n = route.params.notebook;
AddTopicEvent(n);
},
color: null,
bottomButtonText: 'Add new topic',
},
});
}
}, [topics, isFocused]);
};
return (
<>
<SimpleList
data={topics}
type="topics"
refreshCallback={() => {
onLoad();
}}
focused={isFocused}
focused={() => navigation.isFocused()}
RenderItem={RenderItem}
placeholder={<></>}
placeholderText=""
/>
<ContainerBottomButton
title="Add new topic"
onPress={_onPressBottomButton}
/>
</>
);
};

51
apps/mobile/src/views/Notes/index.js
View File

@@ -1,11 +1,11 @@
import {useIsFocused} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
import React, {useCallback, useEffect, useState} from 'react';
import {COLORS_NOTE} from '../../common/common';
import {Placeholder} from '../../components/ListPlaceholders';
import SimpleList from '../../components/SimpleList';
import {NoteItemWrapper} from '../../components/SimpleList/NoteItemWrapper';
import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
import {
eSendEvent,
eSubscribeEvent,
@@ -25,7 +25,6 @@ export const Notes = ({route, navigation}) => {
const allNotes = state.notes;
const [notes, setNotes] = useState([]);
const [refreshing, setRefreshing] = useState(false);
const isFocused = useIsFocused();
let params = route.params ? route.params : null;
useEffect(() => {
@@ -75,8 +74,7 @@ export const Notes = ({route, navigation}) => {
}
};
useEffect(() => {
if (isFocused) {
const onFocus = useCallback(() => {
dispatch({
type: ACTIONS.HEADER_STATE,
state: {
@@ -84,16 +82,6 @@ export const Notes = ({route, navigation}) => {
menu: params.type === 'color' ? true : false,
canGoBack: params.type === 'color' ? false : true,
color: params.type == 'color' ? COLORS_NOTE[params.title] : null,
},
});
dispatch({
type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
state: {
visible: true,
color: params.type == 'color' ? COLORS_NOTE[params.title] : null,
bottomButtonOnPress: _bottomBottomOnPress,
bottomButtonText: 'Create a new note',
},
});
dispatch({
@@ -114,16 +102,26 @@ export const Notes = ({route, navigation}) => {
type: ACTIONS.CURRENT_SCREEN,
screen: params.type === 'color' ? params.color.title : params.type,
});
} else {
}, []);
const onBlur = useCallback(() => {
setNotes([]);
editing.actionAfterFirstSave = {
type: null,
};
}
}, [isFocused, allNotes, colorNotes]);
}, []);
useEffect(() => {
if (isFocused) {
navigation.addListener('focus', onFocus);
navigation.addListener('blur', onBlur);
return () => {
navigation.removeListener('focus', onFocus);
navigation.removeListener('blur', onBlur);
};
});
useEffect(() => {
if (navigation.isFocused()) {
dispatch({
type: ACTIONS.SEARCH_STATE,
state: {
@@ -137,9 +135,9 @@ export const Notes = ({route, navigation}) => {
},
});
}
}, [notes, isFocused]);
}, [notes]);
const _bottomBottomOnPress = () => {
const _onPressBottomButton = useCallback(() => {
if (params.type === 'tag') {
editing.actionAfterFirstSave = {
type: 'tag',
@@ -162,22 +160,29 @@ export const Notes = ({route, navigation}) => {
eSendEvent(eOnLoadNote, {type: 'new'});
}
openEditorAnimation();
};
}, [params.type]);
return (
<>
<SimpleList
data={notes}
type="notes"
refreshCallback={() => {
init();
}}
focused={isFocused}
focused={() => navigation.isFocused()}
RenderItem={NoteItemWrapper}
placeholder={<Placeholder type="notes" />}
placeholderText={`Add some notes to this" ${
params.type ? params.type : 'topic.'
}`}
/>
<ContainerBottomButton
title="Create a new note"
onPress={_onPressBottomButton}
color={params.type == 'color' ? COLORS_NOTE[params.title] : null}
/>
</>
);
};

23
apps/mobile/src/views/Settings/index.js
View File

@@ -1,4 +1,3 @@
import {useIsFocused} from '@react-navigation/native';
import React, {useEffect} from 'react';
import {
Appearance,
@@ -56,7 +55,6 @@ import {
export const Settings = ({route, navigation}) => {
const [state, dispatch] = useTracked();
const {colors, user, settings} = state;
const isFocused = useIsFocused();
function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
let newColors = setColorScheme(colors, accent);
StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
@@ -69,15 +67,7 @@ export const Settings = ({route, navigation}) => {
changeColorScheme();
}
useEffect(() => {
console.log(user);
if (isFocused) {
dispatch({
type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
state: {
visible: false,
},
});
const onFocus = useCallback(() => {
dispatch({
type: ACTIONS.HEADER_STATE,
state: {
@@ -98,7 +88,6 @@ export const Settings = ({route, navigation}) => {
heading: 'Settings',
},
});
dispatch({
type: ACTIONS.CURRENT_SCREEN,
screen: 'settings',
@@ -110,8 +99,14 @@ export const Settings = ({route, navigation}) => {
noSearch: true,
},
});
}
}, [isFocused]);
}, []);
useEffect(() => {
navigation.addListener('focus', onFocus);
return () => {
navigation.removeListener('focus', onFocus);
};
});
const getTimeLeft = (t1, t2) => {
let d1 = new Date(Date.now());

30
apps/mobile/src/views/Tags/index.js
View File

@@ -1,4 +1,3 @@
import { useIsFocused } from '@react-navigation/native';
import React, {useEffect} from 'react';
import {Text} from 'react-native';
import {SIZE, WEIGHT} from '../../common/common';
@@ -12,10 +11,10 @@ import NavigationService from '../../services/NavigationService';
export const Tags = ({route, navigation}) => {
const [state, dispatch] = useTracked();
const {colors, tags} = state;
const isFocused = useIsFocused();
useEffect(() => {
if (isFocused) {
const onFocus = useCallback(() => {
dispatch({
type: ACTIONS.HEADER_STATE,
state: {
@@ -25,17 +24,10 @@ export const Tags = ({route, navigation}) => {
color: null,
},
});
dispatch({
type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
state: {
visible: false,
},
});
dispatch({
type: ACTIONS.HEADER_VERTICAL_MENU,
state: false,
});
dispatch({
type: ACTIONS.HEADER_TEXT_STATE,
state: {
@@ -48,11 +40,17 @@ export const Tags = ({route, navigation}) => {
type: ACTIONS.CURRENT_SCREEN,
screen: 'tags',
});
}
}, [isFocused]);
}, []);
useEffect(() => {
if (isFocused) {
navigation.addListener('focus', onFocus);
return () => {
navigation.removeListener('focus', onFocus);
};
});
useEffect(() => {
if (navigation.isFocused()) {
dispatch({
type: ACTIONS.SEARCH_STATE,
state: {
@@ -64,13 +62,13 @@ export const Tags = ({route, navigation}) => {
},
});
}
}, [tags, isFocused]);
}, [tags]);
return (
<SimpleList
data={tags}
type="tags"
focused={isFocused}
focused={() => navigation.isFocused()}
RenderItem={RenderItem}
placeholder={<Placeholder type="tags" />}
placeholderText="Tags added to notes appear here"

41
apps/mobile/src/views/Trash/index.js
View File

@@ -1,5 +1,5 @@
import {useIsFocused} from '@react-navigation/native';
import React, {useEffect} from 'react';
import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
import {simpleDialogEvent} from '../../components/DialogManager/recievers';
import {TEMPLATE_EMPTY_TRASH} from '../../components/DialogManager/templates';
import {Placeholder} from '../../components/ListPlaceholders';
@@ -13,10 +13,7 @@ export const Trash = ({route, navigation}) => {
const [state, dispatch] = useTracked();
const {trash} = state;
const isFocused = useIsFocused();
useEffect(() => {
if (isFocused) {
const onFocus = useCallback(() => {
dispatch({
type: ACTIONS.HEADER_STATE,
state: {
@@ -26,15 +23,6 @@ export const Trash = ({route, navigation}) => {
color: null,
},
});
dispatch({
type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
state: {
bottomButtonText: 'Clear all trash',
bottomButtonOnPress: () => simpleDialogEvent(TEMPLATE_EMPTY_TRASH),
color: null,
visible: true,
},
});
dispatch({
type: ACTIONS.HEADER_VERTICAL_MENU,
state: false,
@@ -55,11 +43,17 @@ export const Trash = ({route, navigation}) => {
type: ACTIONS.CURRENT_SCREEN,
screen: 'trash',
});
}
}, [isFocused]);
}, []);
useEffect(() => {
if (isFocused) {
navigation.addListener('focus', onFocus);
return () => {
navigation.removeListener('focus', onFocus);
};
});
useEffect(() => {
if (navigation.isFocused()) {
dispatch({
type: ACTIONS.SEARCH_STATE,
state: {
@@ -71,17 +65,26 @@ export const Trash = ({route, navigation}) => {
},
});
}
}, [trash, isFocused]);
}, [trash]);
const _onPressBottomButton = () => simpleDialogEvent(TEMPLATE_EMPTY_TRASH);
return (
<>
<SimpleList
data={trash}
type="trash"
focused={isFocused}
focused={() => navigation.isFocused()}
RenderItem={RenderItem}
placeholder={<Placeholder type="trash" />}
placeholderText="Deleted notes & notebooks appear here."
/>
<ContainerBottomButton
title="Clear all trash"
onPress={_onPressBottomButton}
/>
</>
);
};