fix reordering in edit palette screen

croma-app · Aug 18, 2024 · 2f5767b · 2f5767b
1 parent 8385b10
commit 2f5767b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/components/PaletteCard.js b/components/PaletteCard.js
@@ -190,7 +190,7 @@ export const PaletteCard = (props) => {
                 />
                 <MenuItemWrapper
                   onPress={() => {
-                    navigation.navigate('Palette', { paletteId });
+                    navigation.navigate('PaletteEdit', { paletteId });
                   }}
                   icon="edit"
                   label="Edit"

diff --git a/screens/PaletteEditScreen.js b/screens/PaletteEditScreen.js
@@ -40,7 +40,10 @@ export default function PaletteScreen({ navigation, route }) {
 
   const { height } = Dimensions.get('window');
   const palette = allPalettes.find((palette) => palette.id === paletteId);
-  const colors = palette?.colors;
+  const [colors, setColors] = useState(palette?.colors);
+  useEffect(() => {
+    setColors(allPalettes.find((palette) => palette.id === paletteId)?.colors);
+  }, [allPalettes, paletteId]);
   const onColorDelete = React.useCallback(
     (hex) => {
       deleteColorFromPalette(palette.id, palette.colors.find((c) => c.color === hex).id || null);
@@ -80,7 +83,7 @@ export default function PaletteScreen({ navigation, route }) {
 
   const colorsToShow = React.useMemo(
     () => colors?.slice(0, pro.plan != 'free' ? colors.length : 4),
-    [colors, pro.plan != 'starter']
+    [colors, pro.plan]
   );
 
   const handleColorSelected = (color) => {
@@ -97,6 +100,9 @@ export default function PaletteScreen({ navigation, route }) {
           keyExtractor={keyExtractor}
           style={styles.listview}
           onDragEnd={({ data: reorderedColors }) => {
+            // Colors is update in local state first and then updated on the server and in global state.
+            // The whole state logic is little messed up now and need refactoring but for now this approach works.
+            setColors(reorderedColors);
             updatePalette(palette.id, { ...palette, colors: reorderedColors });
           }}
           ListFooterComponent={ListFooterComponent}