From 4a4ad5ef3453c9fe8f1a7d42258aa494d85824fb Mon Sep 17 00:00:00 2001 From: ragsav Date: Sun, 9 Oct 2022 20:30:34 +0530 Subject: [PATCH] added basic animation --- constants.js | 1 + js/components/LabelItem.js | 89 +++++++++++--- js/components/PinnedNoteItem.js | 18 +-- js/components/Router.js | 12 +- js/components/TaskItem.js | 186 ++++++++++++++++-------------- js/redux/actions/settings.js | 18 +++ js/redux/reducers/settings.js | 10 ++ js/screens/CalendarScreen.js | 111 ++++++++---------- js/screens/CreateNewNoteScreen.js | 17 ++- js/screens/Home.js | 33 ++++-- js/screens/NoteScreen.js | 22 ++-- js/screens/PinScreen.js | 3 + js/screens/Settings.js | 34 ++++++ 13 files changed, 360 insertions(+), 194 deletions(-) diff --git a/constants.js b/constants.js index c0d7269..23761a2 100644 --- a/constants.js +++ b/constants.js @@ -97,5 +97,6 @@ export const CONSTANTS = Object.freeze({ DAILY_REMINDER_TIMESTAMP: 'DAILY_REMINDER_TIMESTAMP', TASK_SORT_ORDER: 'TASK_SORT_ORDER', TASK_SORT_PROPERTY: 'TASK_SORT_PROPERTY', + DEFAULT_HOME_SCREEN: 'DEFAULT_HOME_SCREEN', }, }); diff --git a/js/components/LabelItem.js b/js/components/LabelItem.js index ccad9c0..3961ede 100644 --- a/js/components/LabelItem.js +++ b/js/components/LabelItem.js @@ -13,6 +13,7 @@ import React, {useState} from 'react'; import {View} from 'react-native'; import Collapsible from 'react-native-collapsible'; import { + Button, Divider, IconButton, Menu, @@ -26,6 +27,14 @@ import {database} from '../db/db'; import Label from '../db/models/Label'; import {DeleteConfirmationDialog} from './DeleteConfirmationDialog'; import EnhancedNoteItem from './NoteItem'; +import Animated, { + FadeIn, + FadeOut, + Layout, + SlideInLeft, + SlideInUp, + Transition, +} from 'react-native-reanimated'; /** * @@ -57,6 +66,27 @@ const LabelItem = ({label, notes, handleDeleteLabel, handleUnGroupLabel}) => { // callbacks // render functions + const _renderAddNoteView = () => { + return ( + + + {/* */} + + Add note to this label + + + + ); + }; // handle functions const _handleOpenDeleteLabelDialog = () => { @@ -88,6 +118,14 @@ const LabelItem = ({label, notes, handleDeleteLabel, handleUnGroupLabel}) => { // navigation?.navigate(CONSTANTS.ROUTES.ADD_LABEL); }; + const _navigateToAddNoteScreen = () => { + setIsMenuOpen(false); + navigation?.navigate(CONSTANTS.ROUTES.ADD_NOTE, { + p_labelID: label.id, + }); + // navigation?.navigate(CONSTANTS.ROUTES.ADD_LABEL); + }; + // navigation functions // misc functions @@ -119,7 +157,8 @@ const LabelItem = ({label, notes, handleDeleteLabel, handleUnGroupLabel}) => { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', - paddingHorizontal: 12, + paddingLeft: 16, + paddingRight: 4, }}> { justifyContent: 'flex-start', alignItems: 'center', }}> - { - - } - - {label?.title} - + {collapsed && ( + + + + )} + + {/* */} + + + {label?.title} + + + { onPress={_handleUnGroupLabel} /> - {/* {_renderMenu()} */} + - - + 0 ? 20 : 0}}> + {notes.length === 0 && _renderAddNoteView()} {notes.map((note, index) => { return ; })} diff --git a/js/components/PinnedNoteItem.js b/js/components/PinnedNoteItem.js index d12e063..83c4f92 100644 --- a/js/components/PinnedNoteItem.js +++ b/js/components/PinnedNoteItem.js @@ -85,15 +85,15 @@ const PinnedNoteItem = ({note, tasks, handleDeleteNote, dispatch}) => { paddingHorizontal: 8, paddingVertical: 6, }}> - - - {note?.title} - - + {/* */} + + {note?.title} + + {/* */} {tasks && Array.isArray(tasks) && diff --git a/js/components/Router.js b/js/components/Router.js index ca0cc04..02124f1 100644 --- a/js/components/Router.js +++ b/js/components/Router.js @@ -33,6 +33,8 @@ import DeletedTasksScreen from '../screens/DeletedTasksScreen'; import BackupConfigScreen from '../screens/BackupConfigScreen'; import PinScreen from '../screens/PinScreen'; import {createSharedElementStackNavigator} from 'react-navigation-shared-element'; +import {Storage} from '../utils/asyncStorage'; +import {setDefaultHomeScreen} from '../redux/actions'; // const Stack = createStackNavigator(); const Stack = createSharedElementStackNavigator(); const opacityTransition = { @@ -54,7 +56,7 @@ const opacityTransition = { }, // updates the opacity depending on the transition progress value of the current screen }), }; -const Router = ({theme}) => { +const Router = ({theme, defaultHomeScreen, dispatch}) => { // ref // variables @@ -84,7 +86,12 @@ const Router = ({theme}) => { backgroundColor={theme?.colors.surface} // translucent /> - RNBootSplash.hide()}> + + { + RNBootSplash.hide(); + }}> @@ -201,6 +208,7 @@ const Router = ({theme}) => { const mapStateToProps = state => { return { theme: state.settings.theme, + defaultHomeScreen: state.settings.defaultHomeScreen, }; }; export default connect(mapStateToProps)(Router); diff --git a/js/components/TaskItem.js b/js/components/TaskItem.js index 8fd1ec3..32bab85 100644 --- a/js/components/TaskItem.js +++ b/js/components/TaskItem.js @@ -10,6 +10,11 @@ import { TouchableRipple, useTheme, } from 'react-native-paper'; +import Animated, { + Layout, + SlideInLeft, + SlideInRight, +} from 'react-native-reanimated'; import {connect} from 'react-redux'; import {CONSTANTS} from '../../constants'; import {database} from '../db/db'; @@ -27,7 +32,15 @@ import {Logger} from '../utils/logger'; * @param {Task} param0.task * @returns */ -const TaskItem = ({task, onLongPress, noteColor, isActive, dispatch, note}) => { +const TaskItem = ({ + task, + index, + onLongPress, + noteColor, + isActive, + dispatch, + note, +}) => { // ref // variables @@ -171,108 +184,113 @@ const TaskItem = ({task, onLongPress, noteColor, isActive, dispatch, note}) => { // return return ( - { - Logger.pageLogger('TaskItem.js:onLongPress'); - onLongPress?.(); - }}> - + { + Logger.pageLogger('TaskItem.js:onLongPress'); + onLongPress?.(); }}> - - + + + {task.title} + + + {task.isArchived ? ( + + ) : task.isMarkedDeleted ? ( + + ) : ( + + )} + + + {!task.description || + String(task.description).trim() === '' ? null : ( + - {task.title} - - - {task.isArchived ? ( - - ) : task.isMarkedDeleted ? ( - - ) : ( - + {task.description} + )} + {note && _renderNoteDetails(task.isArchived || task.isMarkedDeleted)} + {_renderArchiveTime()} + {_renderDeletionTime()} + {_renderDoneTime(!task.isArchived && !task.isMarkedDeleted)} + {_renderDueDate(!task.isArchived && !task.isMarkedDeleted)} - - {!task.description || String(task.description).trim() === '' ? null : ( - - {task.description} - - )} - {note && _renderNoteDetails(task.isArchived || task.isMarkedDeleted)} - {_renderArchiveTime()} - {_renderDeletionTime()} - {_renderDoneTime(!task.isArchived && !task.isMarkedDeleted)} - {_renderDueDate(!task.isArchived && !task.isMarkedDeleted)} - - + + ); }; diff --git a/js/redux/actions/settings.js b/js/redux/actions/settings.js index de0bc34..c2ece59 100644 --- a/js/redux/actions/settings.js +++ b/js/redux/actions/settings.js @@ -7,6 +7,8 @@ export const CHANGE_QUICK_LIST_SETTINGS = 'CHANGE_QUICK_LIST_SETTINGS'; export const CHANGE_DAILY_REMINDER_SETTINGS = 'CHANGE_DAILY_REMINDER_SETTINGS'; export const CHANGE_RENDER_URL_IN_TASK_SETTINGS = 'CHANGE_RENDER_URL_IN_TASK_SETTINGS'; +export const CHANGE_DEFAULT_HOME_SCREEN_SETTINGS = + 'CHANGE_DEFAULT_HOME_SCREEN_SETTINGS'; export const setThemeState = ({theme}) => { return { @@ -15,6 +17,13 @@ export const setThemeState = ({theme}) => { }; }; +export const setDefaultHomeScreenState = ({defaultHomeScreen}) => { + return { + type: CHANGE_DEFAULT_HOME_SCREEN_SETTINGS, + defaultHomeScreen, + }; +}; + export const setQuickListSettingsState = ({quickListSettings}) => { return { type: CHANGE_QUICK_LIST_SETTINGS, @@ -46,6 +55,15 @@ export const setTheme = } dispatch(setThemeState({theme})); }; +export const setDefaultHomeScreen = + ({defaultHomeScreen}) => + async dispatch => { + Storage.storeData( + CONSTANTS.LOCAL_STORAGE_KEYS.DEFAULT_HOME_SCREEN, + defaultHomeScreen, + ); + dispatch(setDefaultHomeScreenState({defaultHomeScreen})); + }; export const setQuickListSettings = ({quickListSettings}) => async dispatch => { diff --git a/js/redux/reducers/settings.js b/js/redux/reducers/settings.js index 09d14a5..7a229a1 100644 --- a/js/redux/reducers/settings.js +++ b/js/redux/reducers/settings.js @@ -1,6 +1,8 @@ +import {CONSTANTS} from '../../../constants'; import {_customLightTheme} from '../../../themes'; import { CHANGE_DAILY_REMINDER_SETTINGS, + CHANGE_DEFAULT_HOME_SCREEN_SETTINGS, CHANGE_QUICK_LIST_SETTINGS, CHANGE_RENDER_URL_IN_TASK_SETTINGS, CHANGE_THEME, @@ -18,6 +20,7 @@ export default ( }, renderURLInTask: true, dailyReminderTimestamp: 0, + defaultHomeScreen: CONSTANTS.ROUTES.HOME, }, action, ) => { @@ -27,6 +30,13 @@ export default ( ...state, theme: action.theme, }; + case CHANGE_DEFAULT_HOME_SCREEN_SETTINGS: + return { + ...state, + defaultHomeScreen: action.defaultHomeScreen + ? action.defaultHomeScreen + : CONSTANTS.ROUTES.HOME, + }; case CHANGE_QUICK_LIST_SETTINGS: return { ...state, diff --git a/js/screens/CalendarScreen.js b/js/screens/CalendarScreen.js index ac6072f..3bb144b 100644 --- a/js/screens/CalendarScreen.js +++ b/js/screens/CalendarScreen.js @@ -1,6 +1,6 @@ import {Q} from '@nozbe/watermelondb'; import React, {useState} from 'react'; -import {Animated, SafeAreaView, StyleSheet, View} from 'react-native'; +import {SafeAreaView, StyleSheet, View} from 'react-native'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; @@ -17,9 +17,24 @@ import {database} from '../db/db'; import Task from '../db/models/Task'; import {datesArray} from '../utils/dateTime'; import {Logger} from '../utils/logger'; -import {PanGestureHandler, Swipeable} from 'react-native-gesture-handler'; +import { + Gesture, + GestureDetector, + PanGestureHandler, +} from 'react-native-gesture-handler'; import {useRef} from 'react'; import {setEndDate, setStartDate} from '../redux/actions'; +import Animated, { + FadeIn, + Layout, + runOnJS, + SlideInLeft, + SlideInUp, + useAnimatedGestureHandler, + useAnimatedStyle, + useSharedValue, + withSpring, +} from 'react-native-reanimated'; const CalenderCellItem = ({date, tasks, handleOpenCalenderItem}) => { // ref @@ -117,10 +132,14 @@ const CalendarScreen = ({tasks, sDate, eDate, dispatch}) => { // variables const theme = useTheme(); - const translateX = new Animated.Value(0); + const opacity = useSharedValue(0); + const rStyle = useAnimatedStyle(() => { + return { + opacity: opacity.value, + }; + }, []); // states - const [initialSwipeXCoordinates, setInitialSwipeXCoordinates] = useState(); const [selectedDateInfo, setSelectedDateInfo] = useState(false); // effects @@ -167,7 +186,7 @@ const CalendarScreen = ({tasks, sDate, eDate, dispatch}) => { _e.setSeconds(0); _e.setMilliseconds(0); - Logger.pageLogger('CalendarScreen.js:useMemo:_s,_e', {_s, _e}); + // Logger.pageLogger('CalendarScreen.js:useMemo:_s,_e', {_s, _e}); const _dArray = datesArray(_s, _e); _dArray.forEach(_d => { @@ -185,7 +204,7 @@ const CalendarScreen = ({tasks, sDate, eDate, dispatch}) => { const items = Object.keys(_p).map(_d => { return {date: _d, tasks: _p[_d]}; }); - Logger.pageLogger('CalendarScreen.js:useMemo:items', {items}); + // Logger.pageLogger('CalendarScreen.js:useMemo:items', {items}); return items; }, [tasks, sDate]); @@ -225,6 +244,7 @@ const CalendarScreen = ({tasks, sDate, eDate, dispatch}) => { }; const _handleDecrementMonth = () => { + opacity.value = 0; const sDateLocal = new Date(sDate); const finalStartDate = new Date( sDateLocal.getFullYear(), @@ -247,29 +267,7 @@ const CalendarScreen = ({tasks, sDate, eDate, dispatch}) => { eDate: finalEndDate, }), ); - }; - - const _handleOnPanGestureEvent = Animated.event( - [ - { - nativeEvent: { - translationX: translateX, - }, - }, - ], - {useNativeDriver: true}, - ); - - const _handleOnPanStart = e => { - setInitialSwipeXCoordinates(e.nativeEvent.absoluteX); - }; - - const _handleOnPanEnd = e => { - if (initialSwipeXCoordinates < e.nativeEvent.absoluteX - 150) { - _handleDecrementMonth(); - } else { - _handleIncrementMonth(); - } + opacity.value = 1; }; // navigation functions @@ -310,40 +308,27 @@ const CalendarScreen = ({tasks, sDate, eDate, dispatch}) => { ); })} - - - ( - - )} - maxItemsPerRow={7} - /> - - + + + ( + + )} + maxItemsPerRow={7} + /> + { // ref const titleRef = useRef(); @@ -34,6 +35,7 @@ const CreateNewNoteScreen = ({ // variables const theme = useTheme(); + // const {p_id, p_title, p_colorString, p_labelID} = route?.params; // states const [noteState, setNoteState] = useState({ title: '', @@ -51,6 +53,19 @@ const CreateNewNoteScreen = ({ return _onDestroy; }, []), ); + useFocusEffect( + useCallback(() => { + if (route && route.params && route.params.p_labelID) { + getLabelByID(route.params.p_labelID) + .then(label => { + setNoteState({ + label: label, + }); + }) + .catch(error => {}); + } + }, [route]), + ); useEffect(() => { if (createNoteSuccess) { _navigateBack(); diff --git a/js/screens/Home.js b/js/screens/Home.js index fefdcf9..97060ba 100644 --- a/js/screens/Home.js +++ b/js/screens/Home.js @@ -31,8 +31,10 @@ import { deleteLabel, resetDeleteLabelState, resetEditLabelState, + setDefaultHomeScreen, unGroupLabel, } from '../redux/actions'; +import {Storage} from '../utils/asyncStorage'; const BOTTOM_APPBAR_HEIGHT = 64; // const EnhancedLabelItem = enhanceLabelItem(LabelItem); /** @@ -101,6 +103,9 @@ const Home = ({navigation, dispatch, labels, notes, quickListSettings}) => { index: 0, routes: [{name: CONSTANTS.ROUTES.PINNED_NOTES}], }); + dispatch( + setDefaultHomeScreen({defaultHomeScreen: CONSTANTS.ROUTES.PINNED_NOTES}), + ); }; const _navigateToSearchScreen = () => { navigation?.navigate(CONSTANTS.ROUTES.SEARCH); @@ -110,7 +115,16 @@ const Home = ({navigation, dispatch, labels, notes, quickListSettings}) => { }; // misc functions - const _init = () => {}; + const _init = () => { + Storage.getData(CONSTANTS.LOCAL_STORAGE_KEYS.DEFAULT_HOME_SCREEN) + .then(defaultHomeScreen => { + dispatch(setDefaultHomeScreen({defaultHomeScreen})); + if (defaultHomeScreen != CONSTANTS.ROUTES.HOME) { + _navigateToPinScreen(); + } + }) + .finally(() => {}); + }; const _onDestroy = () => { dispatch(resetDeleteLabelState()); dispatch(resetEditLabelState()); @@ -150,7 +164,7 @@ const Home = ({navigation, dispatch, labels, notes, quickListSettings}) => { onPress={_navigateToDayScreen} /> )} - {quickListSettings?.myDay && } + {/* {quickListSettings?.myDay && } */} {quickListSettings?.all && ( { onPress={_navigateToAllTaskScreen} /> )} - {quickListSettings?.all && } + {/* {quickListSettings?.all && } */} {quickListSettings?.completed && ( { onPress={_navigateToCompletedScreen} /> )} - {quickListSettings?.completed && } + {/* {quickListSettings?.completed && } */} {quickListSettings?.bookmarks && ( { onPress={_navigateToBookmarkScreen} /> )} - {quickListSettings?.bookmarks && } + {/* {quickListSettings?.bookmarks && } */} {quickListSettings?.myCalendar && ( { /> )} - {labels && labels.length > 0 && ( + {/* {labels && labels.length > 0 && ( { }}> Labels - )} + )} */} + {labels.map((label, index) => { return ( { /> ); })} - {notes && notes.length > 0 && ( + {/* {notes && notes.length > 0 && ( { }}> Unlabeled notes - )} + )} */} {notes.map((note, index) => { return ; })} diff --git a/js/screens/NoteScreen.js b/js/screens/NoteScreen.js index ca62f7e..096626d 100644 --- a/js/screens/NoteScreen.js +++ b/js/screens/NoteScreen.js @@ -28,6 +28,7 @@ import { } from '../redux/actions'; import {Logger} from '../utils/logger'; import {SharedElement} from 'react-navigation-shared-element'; +import Animated, {SlideInRight} from 'react-native-reanimated'; /** * @@ -178,16 +179,16 @@ const NoteScreen = ({ - - {note ? `${note.title}` : '#Note'} - - + // + + {note ? `${note.title}` : '#Note'} + + // } /> @@ -245,6 +246,7 @@ const NoteScreen = ({ )} /> + { diff --git a/js/screens/Settings.js b/js/screens/Settings.js index a94a126..bd928d2 100644 --- a/js/screens/Settings.js +++ b/js/screens/Settings.js @@ -18,6 +18,7 @@ import {_customDarkTheme, _customLightTheme} from '../../themes'; import { setDailyReminderSetting, + setDefaultHomeScreen, setQuickListSettings, setRenderURLInTaskSettings, setTheme, @@ -33,6 +34,7 @@ const Settings = ({ dispatch, quickListSettings, dailyReminderTimestamp, + defaultHomeScreen, }) => { // ref @@ -64,6 +66,22 @@ const Settings = ({ dispatch(setTheme({theme: _customDarkTheme})); } }; + const _handleToggleDefaultHomeScreen = () => { + if ( + defaultHomeScreen && + defaultHomeScreen === CONSTANTS.ROUTES.PINNED_NOTES + ) { + dispatch( + setDefaultHomeScreen({defaultHomeScreen: CONSTANTS.ROUTES.HOME}), + ); + } else { + dispatch( + setDefaultHomeScreen({ + defaultHomeScreen: CONSTANTS.ROUTES.PINNED_NOTES, + }), + ); + } + }; const _handleToggleMyDayList = () => { dispatch( setQuickListSettings({ @@ -244,6 +262,7 @@ const Settings = ({ )} /> + + ( + + )} + right={props => ( + + )} + /> + Quick lists @@ -413,6 +446,7 @@ const mapStateToProps = state => { quickListSettings: state.settings.quickListSettings, renderURLInTask: state.settings.renderURLInTask, dailyReminderTimestamp: state.settings.dailyReminderTimestamp, + defaultHomeScreen: state.settings.defaultHomeScreen, }; };