Adds themes. Fix error message. Add more styling

cmgustavo · Aug 27, 2024 · 14c3705 · 14c3705
1 parent b8729cd
commit 14c3705
Show file tree

Hide file tree

Showing 25 changed files with 301 additions and 208 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,15 +1,13 @@
 import React, {useCallback, useEffect, useState} from 'react';
 import {useColorScheme, ColorSchemeName, Appearance} from 'react-native';
 
-import {
-  NavigationContainer,
-  DefaultTheme,
-  DarkTheme,
-} from '@react-navigation/native';
+import {NavigationContainer} from '@react-navigation/native';
 
 import {useAppDispatch} from './store';
-import {initialize} from './store/app';
+import {initializeApp} from './store/app';
 import MainNavigation from './components/main-navigation';
+import LightTheme from './themes/light';
+import DarkTheme from './themes/dark';
 
 const App = () => {
   const dispatch = useAppDispatch();
@@ -27,11 +25,11 @@ const App = () => {
   }, [themeChangeListener]);
 
   useEffect(() => {
-    dispatch(initialize());
+    dispatch(initializeApp());
   }, []);
 
   return (
-    <NavigationContainer theme={theme === 'dark' ? DarkTheme : DefaultTheme}>
+    <NavigationContainer theme={theme === 'dark' ? DarkTheme : LightTheme}>
       <MainNavigation />
     </NavigationContainer>
   );

diff --git a/src/components/error.tsx b/src/components/error.tsx
@@ -1,33 +1,26 @@
 import React from 'react';
+import {useTheme} from '@react-navigation/native';
 import {StyleSheet, Text, View} from 'react-native';
 
 interface Props {
   errorText1: string;
   errorText2: string;
 }
 
-class Error extends React.PureComponent<Props> {
-  render() {
-    const {errorText1, errorText2} = this.props;
-    return (
-      <View style={styles.container}>
-        <Text style={styles.text}>{errorText1}</Text>
-        <Text style={styles.text}>{errorText2}</Text>
-      </View>
-    );
-  }
-}
+import {TextStyles, ContainerStyles} from '../styles';
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  text: {
-    fontWeight: 'bold',
-    color: 'red',
-  },
-});
+const ErrorMessage = ({errorText1, errorText2}: Props) => {
+  const {colors} = useTheme();
+  return (
+    <View style={ContainerStyles.welcomeContainer}>
+      <Text style={[TextStyles.errorTitle, {color: colors.notification}]}>
+        {errorText1}
+      </Text>
+      <Text style={[TextStyles.error, {color: colors.notification}]}>
+        {errorText2}
+      </Text>
+    </View>
+  );
+};
 
-export default Error;
+export default ErrorMessage;
diff --git a/src/components/list.tsx b/src/components/list.tsx
@@ -3,7 +3,7 @@ import moment from 'moment';
 import {TouchableOpacity, Text, FlatList, View} from 'react-native';
 import {useTheme} from '@react-navigation/native';
 
-import styles from '../styles';
+import {ContainerStyles, TextStyles} from '../styles';
 
 interface Props {
   navigation: any;
@@ -17,7 +17,10 @@ const List = ({notes, navigation}: Props) => {
     const [_, itemData] = item;
     return (
       <TouchableOpacity
-        style={[styles.noteContainer, {backgroundColor: colors.card}]}
+        style={[
+          ContainerStyles.noteContainer,
+          {backgroundColor: colors.card, borderColor: colors.border},
+        ]}
         onPress={() => {
           navigation.push('ViewNote', {
             id: itemData.id,
@@ -26,13 +29,13 @@ const List = ({notes, navigation}: Props) => {
           });
         }}>
         <View>
-          <Text style={[styles.noteTitle, {color: colors.text}]}>
+          <Text style={[TextStyles.noteTitle, {color: colors.primary}]}>
             {moment(itemData.date).format('dddd, MMMM Do YYYY')}
           </Text>
-          <Text style={[styles.noteContent, {color: colors.text}]}>
+          <Text style={[TextStyles.noteContent, {color: colors.text}]}>
             {itemData.text}
           </Text>
-          <Text style={[styles.noteDate, {color: colors.text}]}>
+          <Text style={[TextStyles.noteDate, {color: colors.text}]}>
             {moment(itemData.date).fromNow()}
           </Text>
         </View>
@@ -47,7 +50,10 @@ const List = ({notes, navigation}: Props) => {
 
   return (
     <FlatList
-      style={[styles.notesContainer, {backgroundColor: colors.background}]}
+      style={[
+        ContainerStyles.notesContainer,
+        {backgroundColor: colors.background},
+      ]}
       renderItem={_renderItem}
       data={Object.entries(notes).reverse()}
       keyExtractor={_keyExtractor}

diff --git a/src/components/platform.tsx b/src/components/platform.tsx
@@ -2,11 +2,12 @@ import React from 'react';
 import {Text} from 'react-native';
 import {useTheme} from '@react-navigation/native';
 
+import {TextStyles} from '../styles';
 import getPlatform from '../services/platform';
 
 const CurrentPlatform = () => {
   const {colors} = useTheme();
-  return <Text style={{color: colors.text}}>You're using {getPlatform()}</Text>;
+  return <Text style={TextStyles.text}>You're using {getPlatform()}</Text>;
 };
 
 export default CurrentPlatform;
diff --git a/src/components/welcome.tsx b/src/components/welcome.tsx
@@ -3,7 +3,12 @@ import {View, Text, TouchableOpacity, useColorScheme} from 'react-native';
 import {useTheme} from '@react-navigation/native';
 
 import CurrentPlatform from './platform';
-import styles from '../styles';
+import {
+  ContainerStyles,
+  TextStyles,
+  ButtonStyles,
+  GlobalStyles,
+} from '../styles';
 
 interface Props {
   navigation: any;
@@ -13,25 +18,25 @@ const Welcome = ({navigation}: Props) => {
   const {colors} = useTheme();
   const scheme = useColorScheme();
   return (
-    <View style={styles.welcomeContainer}>
-      <Text style={[styles.title, {color: colors.text}]}>
-        Welcome to <Text style={styles.highlight}>Work Notes</Text>
+    <View style={ContainerStyles.welcomeContainer}>
+      <Text style={[TextStyles.title, {color: colors.text}]}>
+        Welcome to <Text style={TextStyles.highlight}>Work Notes</Text>
       </Text>
-      <Text style={[styles.subtitle, {color: colors.text}]}>
+      <Text style={[TextStyles.subtitle, {color: colors.text}]}>
         Get start writing your first note for today.
       </Text>
       <TouchableOpacity
-        style={[styles.button, {backgroundColor: colors.primary}]}
+        style={[ButtonStyles.button, {backgroundColor: colors.primary}]}
         onPress={() => navigation.navigate('AddNote')}>
         <Text
           style={[
-            styles.text,
+            TextStyles.text,
             {color: scheme === 'dark' ? colors.text : colors.card},
           ]}>
           Add Note
         </Text>
       </TouchableOpacity>
-      <View style={styles.bottom}>
+      <View style={GlobalStyles.bottom}>
         <CurrentPlatform />
       </View>
     </View>

diff --git a/src/screens/add.tsx b/src/screens/add.tsx
@@ -11,7 +11,7 @@ import {useTheme} from '@react-navigation/native';
 
 import {useAppDispatch} from '../store';
 import {createNote} from '../store/notes';
-import styles from '../styles';
+import {ContainerStyles, TextStyles, FormStyles, ButtonStyles} from '../styles';
 
 const getUniqueId = () => {
   return Math.random().toString(36).substr(2, 9);
@@ -35,13 +35,17 @@ const AddNote = ({navigation}) => {
   };
 
   return (
-    <View style={[styles.formContainer, {backgroundColor: colors.background}]}>
-      <Text style={[styles.subtitle, {color: colors.text}]}>
+    <View
+      style={[
+        ContainerStyles.formContainer,
+        {backgroundColor: colors.background},
+      ]}>
+      <Text style={[TextStyles.subtitle, {color: colors.text}]}>
         {moment(today).format('dddd, MMMM Do YYYY')}
       </Text>
       <TextInput
         style={[
-          styles.textArea,
+          FormStyles.textArea,
           {color: colors.text, backgroundColor: colors.card},
         ]}
         value={textAreaValue}
@@ -50,7 +54,7 @@ const AddNote = ({navigation}) => {
       />
       <TouchableOpacity
         style={[
-          styles.button,
+          ButtonStyles.button,
           {
             backgroundColor:
               textAreaValue.length === 0 ? colors.border : colors.primary,
@@ -64,7 +68,7 @@ const AddNote = ({navigation}) => {
         }}>
         <Text
           style={[
-            styles.text,
+            TextStyles.text,
             {color: scheme === 'dark' ? colors.text : colors.card},
           ]}>
           Save

diff --git a/src/screens/home.tsx b/src/screens/home.tsx
@@ -8,18 +8,19 @@ import {
 import {useTheme} from '@react-navigation/native';
 
 import {useAppDispatch, useAppSelector, RootState} from '../store';
-import {initialize} from '../store/notes';
+import {initializeNotes} from '../store/notes';
 import {NoteObj} from '../store/notes/notes.models';
-import {NotesStatus} from '../store/notes/notes.types';
 
+import ErrorMessage from '../components/error';
 import Welcome from '../components/welcome';
 import List from '../components/list';
-import styles from '../styles';
+import {ContainerStyles} from '../styles';
 
 const Home = ({navigation}) => {
   const dispatch = useAppDispatch();
   const {colors} = useTheme();
-  const _notes = useAppSelector(({NOTES}: RootState) => NOTES.notes);
+  const notes = useAppSelector(({NOTES}: RootState) => NOTES.notes);
+  const status = useAppSelector(({NOTES}: RootState) => NOTES.status);
 
   useLayoutEffect(() => {
     navigation.setOptions({
@@ -32,16 +33,31 @@ const Home = ({navigation}) => {
   }, [navigation, colors]);
 
   useEffect(() => {
-    dispatch(initialize());
+    dispatch(initializeNotes());
   }, []);
 
   return (
     <SafeAreaView
-      style={[styles.globalContainer, {backgroundColor: colors.background}]}>
-      {Object.entries(_notes).length === 0 ? (
+      style={[
+        ContainerStyles.globalContainer,
+        {backgroundColor: colors.background},
+      ]}>
+      {!status ? (
+        <ActivityIndicator
+          size="large"
+          style={ContainerStyles.welcomeContainer}
+        />
+      ) : null}
+      {status === 'failed' ? (
+        <ErrorMessage
+          errorText1={'Error'}
+          errorText2={'Could not load the page'}
+        />
+      ) : null}
+      {Object.entries(notes).length == 0 ? (
         <Welcome navigation={navigation} />
       ) : (
-        <List notes={_notes} navigation={navigation} />
+        <List notes={notes} navigation={navigation} />
       )}
     </SafeAreaView>
   );

diff --git a/src/screens/view.tsx b/src/screens/view.tsx
@@ -1,11 +1,16 @@
-import React, {useLayoutEffect} from 'react';
+import React from 'react';
 import moment from 'moment';
-import {View, Text, TouchableOpacity} from 'react-native';
+import {View, Text, TouchableOpacity, Button} from 'react-native';
 import {useTheme} from '@react-navigation/native';
 import {useAppDispatch} from '../store';
 import {deleteNote} from '../store/notes';
 
-import styles from '../styles';
+import {
+  ContainerStyles,
+  TextStyles,
+  GlobalStyles,
+  ButtonStyles,
+} from '../styles';
 
 const ViewNote = ({route, navigation}) => {
   const dispatch = useAppDispatch();
@@ -15,21 +20,31 @@ const ViewNote = ({route, navigation}) => {
     dispatch(deleteNote(id));
     navigation.goBack();
   };
-  useLayoutEffect(() => {
-    navigation.setOptions({
-      headerRight: () => (
-        <TouchableOpacity onPress={() => _delete()}>
-          <Text style={{color: colors.notification}}>Delete</Text>
-        </TouchableOpacity>
-      ),
-    });
-  }, [navigation, colors]);
   return (
-    <View style={[styles.noteContainer, {backgroundColor: colors.background}]}>
-      <Text style={[styles.title, {color: colors.text}]}>
-        {moment(date).format('dddd, MMMM Do YYYY')}
-      </Text>
-      <Text style={[styles.noteMainContent, {color: colors.text}]}>{text}</Text>
+    <View
+      style={[
+        ContainerStyles.globalContainer,
+        {backgroundColor: colors.background},
+      ]}>
+      <View
+        style={[
+          ContainerStyles.noteContainer,
+          {backgroundColor: colors.background},
+        ]}>
+        <Text
+          style={[
+            TextStyles.title,
+            {color: colors.primary, borderColor: colors.border},
+          ]}>
+          {moment(date).format('dddd, MMMM Do YYYY')}
+        </Text>
+        <Text style={[ContainerStyles.noteMainContent, {color: colors.text}]}>
+          {text}
+        </Text>
+      </View>
+      <View style={[GlobalStyles.bottom, {backgroundColor: colors.background}]}>
+        <Button color={colors.notification} title="Delete" onPress={_delete} />
+      </View>
     </View>
   );
 };

diff --git a/src/store/app/app.actions.ts b/src/store/app/app.actions.ts
@@ -1,4 +1,4 @@
-import {AppActionType, AppActionTypes} from './app.types';
+import {AppActionType, AppActionTypes, AppTheme} from './app.types';
 
 export const appSuccess = (): AppActionType => ({
   type: AppActionTypes.APP_SUCCESS,
@@ -7,3 +7,8 @@ export const appSuccess = (): AppActionType => ({
 export const appFailed = (): AppActionType => ({
   type: AppActionTypes.APP_FAILED,
 });
+
+export const appTheme = (theme: AppTheme): AppActionType => ({
+  type: AppActionTypes.APP_THEME,
+  payload: theme,
+});
diff --git a/src/store/app/app.effects.ts b/src/store/app/app.effects.ts
@@ -1,7 +1,7 @@
 import {Effect} from '../index';
-import {appSuccess, appFailed} from './index';
+import {appSuccess, appFailed, appTheme} from './index';
 
-export const initialize =
+export const initializeApp =
   (): Effect<Promise<any>> => async (dispatch, getState) => {
     const {APP} = getState();
     try {