UI fix and redux state maintain for the data

harshbhatt-23 · Jul 28, 2023 · 46d78fa · 46d78fa
1 parent 4e4bdc2
commit 46d78fa
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 72 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "@reduxjs/toolkit": "^1.9.5",
     "expo": "~48.0.15",
     "expo-notifications": "~0.18.1",
-    "expo-sensors": "^12.3.0",
+    "expo-sensors": "~12.1.1",
     "expo-speech": "^11.1.1",
     "expo-status-bar": "~1.4.4",
     "firebase": "^9.22.2",

diff --git a/src/components/ThemeDialogBox/ThemeDialog.js b/src/components/ThemeDialogBox/ThemeDialog.js
@@ -1,9 +1,9 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { View, StyleSheet, Modal } from "react-native";
 import { Button, RadioButton, Text, useTheme } from "react-native-paper";
 import { connect } from "react-redux";
 import { useColorScheme } from "react-native";
-import { setTheme } from "../redux/actions";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 const ThemeDialog = ({ visible, onDismiss, setTheme, language }) => {
   const displayName = {
@@ -31,10 +31,15 @@ const ThemeDialog = ({ visible, onDismiss, setTheme, language }) => {
   );
   const [prevChecked, setPrevChecked] = useState(checked);
 
-  const handleDoneButton = () => {
+  const handleDoneButton = async () => {
     setPrevChecked(checked);
     setTheme(checked);
     onDismiss();
+    try {
+      await AsyncStorage.setItem("selectedTheme", JSON.stringify(checked));
+    } catch (error) {
+      // Error saving data to AsyncStorage
+    }
   };
 
   const handleCancelButton = () => {
@@ -48,6 +53,23 @@ const ThemeDialog = ({ visible, onDismiss, setTheme, language }) => {
 
   const theme = useTheme();
 
+  //Async theme store check..
+  useEffect(() => {
+    const loadThemeFromStorage = async () => {
+      try {
+        const storedTheme = await AsyncStorage.getItem("selectedTheme");
+        if (storedTheme !== null) {
+          setChecked(JSON.parse(storedTheme));
+          setPrevChecked(JSON.parse(storedTheme));
+        }
+      } catch (error) {
+        // Error retrieving data from AsyncStorage
+      }
+    };
+
+    loadThemeFromStorage();
+  }, []);
+
   return (
     <Modal
       visible={visible}
@@ -129,13 +151,11 @@ const styles = StyleSheet.create({
     marginLeft: 10,
     marginRight: 10,
     flexDirection: "row",
-    justifyContent: "flex-end", // Align buttons to the end
+    justifyContent: "flex-end",
   },
   radioContainer: {
     flexDirection: "row",
     alignItems: "center",
-    //marginLeft: 10,
-    //marginRight: 10,
   },
   radioButtonIcon: {
     marginRight: 8,
@@ -145,7 +165,6 @@ const styles = StyleSheet.create({
   },
   radioButtonLabelContainer: {
     flex: 1,
-    //marginLeft: 8, // Adjust the margin as needed
   },
   radioButtonLabel: {
     fontSize: 16,

diff --git a/src/components/homescreen/Home.js b/src/components/homescreen/Home.js
@@ -89,7 +89,6 @@ const Home = ({ navigation, language }) => {
     setIsHandlingShake(true);
 
     // Shake event handler
-    console.log("Shake Shake Shake");
     // Vibrate the device for 500 milliseconds
     Vibration.vibrate(500);
 

diff --git a/src/components/main/MainComponent.js b/src/components/main/MainComponent.js
@@ -6,7 +6,7 @@ import {
   MD3LightTheme as DefaultTheme,
   MD3DarkTheme as DarkTheme,
 } from "react-native-paper";
-import HomeScreen from "../homescreen/Home";
+import Home from "../homescreen/Home";
 import RecipesScreen from "../recipes/Recipes";
 import SettingsScreen from "../settings/Settings";
 import FavouriteScreen from "../favourite/Favourite";
@@ -15,21 +15,17 @@ import { Provider, connect } from "react-redux";
 import store from "../redux/store";
 import { setLanguage, setAppColor, setTheme } from "../redux/actions";
 import { createStackNavigator } from "@react-navigation/stack";
-// import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import {
   NavigationContainer,
   useNavigation,
   useIsFocused,
   CommonActions,
 } from "@react-navigation/native";
-//import Icon from "react-native-vector-icons/FontAwesome";
-
 import { createMaterialBottomTabNavigator } from "react-native-paper/react-navigation";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useColorScheme } from "react-native";
 import { getLightAppColorScheme } from "../../components/data/RecipeDataAPI";
-import TestHome from "../homescreen/TestHome";
-import Home from "../homescreen/Home";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 const Stack = createStackNavigator();
 const Tab = createMaterialBottomTabNavigator();
@@ -40,6 +36,11 @@ const MainComponent = ({
   appColor,
   setAppColor,
   theme,
+  setTheme,
+  measurement, // Make sure to include all the required props here
+  setMeasurement,
+  veg,
+  setVeg,
 }) => {
   const [index, setIndex] = React.useState(0);
   const [routes, setRoutes] = React.useState([
@@ -102,7 +103,6 @@ const MainComponent = ({
     const isRecipesScreenFocused = useIsFocused();
 
     useEffect(() => {
-      // Reset the navigation stack when the component unmounts and the RecipesScreen is not focused
       if (!isRecipesScreenFocused) {
         const resetAction = CommonActions.reset({
           index: 0,
@@ -171,7 +171,6 @@ const MainComponent = ({
   //color from settings screen - App color
   const baseColor = appColor;
   const lightColorScheme = getLightAppColorScheme(baseColor);
-  //console.log(lightColorScheme);
 
   const lightTheme = {
     ...DefaultTheme,
@@ -190,6 +189,25 @@ const MainComponent = ({
 
   const themeDisplay = colorScheme === theme ? lightTheme : darkTheme;
 
+  //async code for local storage..
+  useEffect(() => {
+    const loadThemeFromStorage = async () => {
+      try {
+        const storedTheme = await AsyncStorage.getItem("selectedTheme");
+        if (storedTheme !== null) {
+          setTheme(JSON.parse(storedTheme));
+        } else {
+          setTheme("light");
+          await AsyncStorage.setItem("selectedTheme", "light");
+        }
+      } catch (error) {
+        // Error retrieving data from AsyncStorage
+      }
+    };
+
+    loadThemeFromStorage();
+  }, []);
+
   return (
     <PaperProvider theme={themeDisplay}>
       <NavigationContainer independent={true}>
@@ -280,4 +298,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;
diff --git a/src/components/recipes/Recipes.js b/src/components/recipes/Recipes.js
@@ -26,7 +26,6 @@ const RecipesScreen = ({ language, navigation, veg }) => {
   const theme = useTheme();
 
   const handleRecipePress = (item) => {
-    // console.log("item object", item);
     navigation.navigate("RecipeDetails", { item, sourceScreen: "Recipes" });
   };
 
@@ -90,31 +89,11 @@ const RecipesScreen = ({ language, navigation, veg }) => {
     setSortOption(sort);
   };
 
-  const handleCancelButton = () => {
-    setSortDialogVisible(false);
-  };
-
   //Search box value
   const onChangeSearch = (text) => {
     setSearchQuery(text);
   };
 
-  //Testing
-  const [bottomNavigationHeight, setBottomNavigationHeight] = useState(0);
-
-  useEffect(() => {
-    const onLayout = (event) => {
-      const { height } = event.nativeEvent.layout;
-      setBottomNavigationHeight(height);
-    };
-
-    return () => {
-      // Clean up the listener when the component is unmounted
-      Dimensions.removeEventListener("change", onLayout);
-    };
-  }, []);
-  //Testing above
-
   //statusbar Testing
   const getStatusBarHeight = () => {
     return Platform.OS === "android" ? StatusBar.currentHeight : 0;
@@ -255,7 +234,7 @@ const RecipesScreen = ({ language, navigation, veg }) => {
         <View style={{ flex: 1 }}>
           <FlatList
             contentContainerStyle={{
-              paddingBottom: bottomNavigationHeight + 8,
+              paddingBottom: 25,
             }}
             vertical
             showsVerticalScrollIndicator={false}

diff --git a/src/components/settings/Settings.js b/src/components/settings/Settings.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
 import {
   setLanguage,
@@ -19,7 +19,6 @@ import style from "./styles";
 import LocalNotification from "../LocalNotification/LocalNotification";
 import ThemeDialog from "../ThemeDialogBox/ThemeDialog";
 import AppColorDialog from "../AppColorDialogBox/AppColorDialog";
-import { useColorScheme } from "react-native";
 
 const SettingsScreen = ({
   language,
@@ -45,8 +44,8 @@ const SettingsScreen = ({
       diet: "Dietery Restrictions:",
       veg: "Vegetarian only",
       themeTitle: "Customize your theme",
-      changeTheme: "Change theme",
-      changeAppColor: "Change app color",
+      changeTheme: "Theme",
+      changeAppColor: "App Color",
     },
     fr: {
       changeLanguage: "Changer de langue:",
@@ -59,8 +58,8 @@ const SettingsScreen = ({
       diet: "Restrictions alimentaires:",
       veg: "Végétarien seulement",
       themeTitle: "Personnalisez votre thème",
-      changeTheme: "Change le thème",
-      changeAppColor: "Changer la couleur de l'application",
+      changeTheme: "Thème",
+      changeAppColor: "Couleur de l'Application",
     },
   };
 
@@ -130,10 +129,6 @@ const SettingsScreen = ({
 
   return (
     <SafeAreaView style={{ flex: 1 }}>
-      {/* <StatusBar
-        barStyle={!isDarkTheme ? "dark-content" : "light-content"} // Set the status bar text color to light
-        backgroundColor={statusBarBackgroundColor}
-      /> */}
       <View style={[style.container]}>
         <Text style={style.title}>
           {settingsLabel[language].changeLanguage}
@@ -175,14 +170,15 @@ const SettingsScreen = ({
 
         <Text style={style.title}>{settingsLabel[language].themeTitle}</Text>
         <View style={style.themeButtons}>
-          <Button
-            mode="contained-tonal"
-            icon="theme-light-dark"
-            onPress={showDialog}
-          >
-            {settingsLabel[language].changeTheme}
-          </Button>
-
+          <View style={{ flex: 1 }}>
+            <Button
+              mode="contained-tonal"
+              icon="theme-light-dark"
+              onPress={showDialog}
+            >
+              {settingsLabel[language].changeTheme}
+            </Button>
+          </View>
           <ThemeDialog
             visible={themeDialogVisible}
             onDismiss={hideThemeDialog}
@@ -191,14 +187,15 @@ const SettingsScreen = ({
           />
           <Divider />
 
-          <Button
-            mode="outlined"
-            icon="format-color-fill"
-            onPress={showAppColorDialog}
-          >
-            {settingsLabel[language].changeAppColor}
-          </Button>
-
+          <View style={{ flex: 1 }}>
+            <Button
+              mode="outlined"
+              icon="format-color-fill"
+              onPress={showAppColorDialog}
+            >
+              {settingsLabel[language].changeAppColor}
+            </Button>
+          </View>
           <AppColorDialog
             visible={appColorDialogVisible}
             onDismiss={hideAppColorDialog}
@@ -227,4 +224,4 @@ const mapDispatchToProps = {
   setTheme,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(SettingsScreen);
+export default connect(mapStateToProps, mapDispatchToProps)(SettingsScreen);
diff --git a/src/components/settings/styles.js b/src/components/settings/styles.js
@@ -61,6 +61,7 @@ const styles = StyleSheet.create({
     },
     marginBottom: 8,
   },
+
 });
 
-export default styles;
+export default styles;