remove global detailed color and pass the params using route

croma-app · Aug 26, 2024 · 3746139 · 3746139
1 parent 164ea1c
commit 3746139
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 53 deletions.
diff --git a/components/GridActionButton.js b/components/GridActionButton.js
@@ -34,7 +34,7 @@ const GridActionButtonAndroid = ({ navigation, setPickImageLoading }) => {
   const [selectedImage, setSelectedImage] = React.useState(null);
   const [automaticColors, setAutomaticColors] = React.useState([]);
 
-  const { pro, setDetailedColor } = useApplicationStore();
+  const { pro } = useApplicationStore();
 
   const pickImageResult = async () => {
     setPickImageLoading(true);
@@ -46,9 +46,8 @@ const GridActionButtonAndroid = ({ navigation, setPickImageLoading }) => {
   };
 
   const handleColorSelected = (color) => {
-    setDetailedColor(color);
     setIsColorPickerVisible(false);
-    navigation.navigate('Palettes');
+    navigation.navigate('Palettes', { hexColor: color });
   };
 
   const handleImagePicker = async () => {

diff --git a/hooks/useApplicationStore.js b/hooks/useApplicationStore.js
@@ -12,7 +12,6 @@ const useApplicationStore = create((set) => ({
   pro: {
     plan: 'starter'
   },
-  detailedColor: null,
   commonPalettes: [],
 
   loadPalettes: async () => {
@@ -99,10 +98,6 @@ const useApplicationStore = create((set) => ({
     set({ pro: { plan: plan } });
   },
 
-  setDetailedColor: (detailedColor) => {
-    set({ detailedColor });
-  },
-
   setCommonPalettes: (commonPalettes) => {
     set({ commonPalettes });
   }

diff --git a/screens/ColorDetailScreen.js b/screens/ColorDetailScreen.js
@@ -1,33 +1,22 @@
 import React, { useEffect, useLayoutEffect } from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
 import { ColorDetail } from '../components/ColorDetails';
-import CromaButton from '../components/CromaButton';
 import { logEvent } from '../libs/Helpers';
-import { useTranslation } from 'react-i18next';
-import useApplicationStore from '../hooks/useApplicationStore';
 
-export default function ColorDetailScreen({ navigation }) {
-  const { detailedColor, setDetailedColor } = useApplicationStore();
-  const { t } = useTranslation();
+export default function ColorDetailScreen({ navigation, route }) {
+  const hexColor = route.params?.hexColor;
 
   useLayoutEffect(() => {
-    navigation.setOptions({ title: detailedColor });
-  }, [detailedColor]);
+    navigation.setOptions({ title: hexColor });
+  }, [hexColor]);
 
   useEffect(() => {
     logEvent('color_details_screen');
   }, []);
 
   return (
     <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
-      <ColorDetail color={detailedColor}>{detailedColor}</ColorDetail>
-      <CromaButton
-        onPress={() => {
-          setDetailedColor(detailedColor);
-          navigation.navigate('Palettes');
-        }}>
-        {t('See color palettes')}
-      </CromaButton>
+      <ColorDetail color={hexColor}>{hexColor}</ColorDetail>
     </ScrollView>
   );
 }

diff --git a/screens/PaletteEditScreen.js b/screens/PaletteEditScreen.js
@@ -25,14 +25,8 @@ import ColorPickerModal from '../components/ColorPickerModal';
 import useApplicationStore from '../hooks/useApplicationStore';
 
 export default function PaletteScreen({ navigation, route }) {
-  const {
-    pro,
-    allPalettes,
-    updatePalette,
-    deleteColorFromPalette,
-    addNewColorToPalette,
-    setDetailedColor
-  } = useApplicationStore();
+  const { pro, allPalettes, updatePalette, deleteColorFromPalette, addNewColorToPalette } =
+    useApplicationStore();
 
   const paletteId = route.params.paletteId;
 
@@ -64,8 +58,7 @@ export default function PaletteScreen({ navigation, route }) {
         <ScaleDecorator key={`${renderItemParams.item.id}`}>
           <SingleColorCard
             onPress={() => {
-              setDetailedColor(renderItemParams.item.color);
-              navigation.navigate('ColorDetails');
+              navigation.navigate('ColorDetails', { hexColor: renderItemParams.item.color });
             }}
             onPressDrag={renderItemParams.drag}
             color={renderItemParams.item}
@@ -74,7 +67,7 @@ export default function PaletteScreen({ navigation, route }) {
         </ScaleDecorator>
       );
     },
-    [navigation, onColorDelete, setDetailedColor]
+    [navigation, onColorDelete]
   );
 
   const keyExtractor = useCallback((item) => {

diff --git a/screens/PaletteViewScreen.js b/screens/PaletteViewScreen.js
@@ -11,7 +11,7 @@ import Colors from '../constants/Styles';
 import CromaButton from '../components/CromaButton';
 import { useTranslation } from 'react-i18next';
 export default function PaletteViewScreen({ navigation, route }) {
-  const { allPalettes, setDetailedColor, pro } = useApplicationStore();
+  const { allPalettes, pro } = useApplicationStore();
   const { t } = useTranslation();
 
   const [selectedColor, setSelectedColor] = useState(0);
@@ -69,8 +69,7 @@ export default function PaletteViewScreen({ navigation, route }) {
           textStyle={{ color: Colors.primary }}
           style={styles.buttonSecondary}
           onPress={() => {
-            setDetailedColor(color);
-            navigation.navigate('Palettes');
+            navigation.navigate('Palettes', { hexColor: color });
           }}>
           <View style={{ alignItems: 'center' }}>
             <Text style={{ fontSize: 14 }}>{t('Generate Palettes')}</Text>

diff --git a/screens/PalettesScreen.js b/screens/PalettesScreen.js
@@ -5,14 +5,13 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import Color from 'pigment/full';
 import { PalettePreviewCard } from '../components/PalettePreviewCard';
 import { logEvent } from '../libs/Helpers';
-import useApplicationStore from '../hooks/useApplicationStore';
 import { useNavigation } from '@react-navigation/native';
 import Colors from '../constants/Styles';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import { generateUsingColor } from '../network/color_palette';
 
-function PalettesScreen() {
-  const { detailedColor } = useApplicationStore();
+function PalettesScreen({ route }) {
+  const hexColor = route.params.hexColor;
   const navigation = useNavigation();
 
   const parseCamelCase = (text) => {
@@ -25,7 +24,7 @@ function PalettesScreen() {
       .replace(/^./, (str) => str.toUpperCase());
   };
 
-  const fullColor = new Color(detailedColor);
+  const fullColor = new Color(hexColor);
   let items = [];
   for (const i in fullColor) {
     if (/.*scheme$/i.test(i) && typeof fullColor[i] === 'function') {
@@ -56,16 +55,16 @@ function PalettesScreen() {
   );
 }
 
-function PalettesScreenAI() {
-  const { detailedColor } = useApplicationStore();
+function PalettesScreenAI({ route }) {
+  const hexColor = route.params.hexColor;
   const [loading, setLoading] = useState(true);
   const [palettes, setPalettes] = useState([]);
   const navigation = useNavigation();
 
   useEffect(() => {
     const fetchPalettes = async () => {
       try {
-        const response = await generateUsingColor(detailedColor);
+        const response = await generateUsingColor(hexColor);
         const generatedPalettes = response.data.palettes;
         setPalettes(generatedPalettes);
       } catch (error) {
@@ -77,7 +76,7 @@ function PalettesScreenAI() {
 
     fetchPalettes();
     logEvent('palettes_screen_ai');
-  }, [detailedColor]);
+  }, [hexColor]);
 
   return (
     <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
@@ -111,12 +110,11 @@ const styles = StyleSheet.create({
 
 const Tab = createBottomTabNavigator();
 
-export default function PalettesTabNavigator() {
-  const { detailedColor } = useApplicationStore();
-  const navigation = useNavigation();
+export default function PalettesTabNavigator({ navigation, route }) {
+  const hexColor = route.params.hexColor;
   useLayoutEffect(() => {
-    navigation.setOptions({ title: detailedColor });
-  }, [detailedColor, navigation]);
+    navigation.setOptions({ title: hexColor });
+  }, [hexColor, navigation]);
 
   return (
     <Tab.Navigator
@@ -170,8 +168,12 @@ export default function PalettesTabNavigator() {
           fontWeight: '600' // Bold text for the labels
         }
       })}>
-      <Tab.Screen name="Color Theory" component={PalettesScreen} />
-      <Tab.Screen name="AI" component={PalettesScreenAI} />
+      <Tab.Screen
+        name="Color Theory"
+        component={PalettesScreen}
+        initialParams={{ hexColor: hexColor }}
+      />
+      <Tab.Screen name="AI" component={PalettesScreenAI} initialParams={{ hexColor: hexColor }} />
     </Tab.Navigator>
   );
 }