From 03bf9b015f6e4add0927087566e0aebc0937d70b Mon Sep 17 00:00:00 2001
From: Andrew Parker <andrew.parker@beslogic.com>
Date: Wed, 23 Oct 2024 22:17:55 -0400
Subject: [PATCH] adding animation on box!

---
 apps/releaf/mobile/src/app/box/Box.tsx        | 214 ------------------
 .../mobile/src/app/box/components/Box.tsx     | 114 ++++++++++
 .../mobile/src/app/box/screens/Boxes.tsx      | 117 ++++++++++
 .../mobile/src/app/navigation/Navigation.tsx  |   4 +-
 4 files changed, 233 insertions(+), 216 deletions(-)
 delete mode 100644 apps/releaf/mobile/src/app/box/Box.tsx
 create mode 100644 apps/releaf/mobile/src/app/box/components/Box.tsx
 create mode 100644 apps/releaf/mobile/src/app/box/screens/Boxes.tsx

diff --git a/apps/releaf/mobile/src/app/box/Box.tsx b/apps/releaf/mobile/src/app/box/Box.tsx
deleted file mode 100644
index 09603a4..0000000
--- a/apps/releaf/mobile/src/app/box/Box.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import {
-  View,
-  Text,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { useCallback, useEffect, useState } from 'react';
-import { Loading } from '../shared/Loading';
-import { BoxDetailsScreen } from './screens/BoxDetails';
-import { BoxService } from '../infrastructure/services/box.service';
-import { SetupBox } from './screens/SetupBox';
-import { BoxItem } from '../infrastructure/entities/box';
-import { styled } from 'nativewind';
-import LinearGradient from 'react-native-linear-gradient';
-import { Edit } from '../../assets/images/edit';
-import { Logo } from '../../assets/images/logo'
-import { selectTreeDefinitions } from '../store/slices/treeDefinitionSlice';
-import { useSelector } from 'react-redux';
-
-const MAX_NAME_LENGTH = 7;
-const styles = StyleSheet.create({
-  font: {
-    fontFamily: 'Lato-Regular',
-  },
-  fontBold: {
-    fontFamily: 'Lato-Bold',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: '700',
-    color: '#2C4E3C',
-  },
-  bottomSection: {
-    backgroundColor: '#FFFFFF',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    borderRadius: 50,
-    padding: 10,
-    marginTop: 20,
-  },
-  linearGradient: {
-    flex: 1,
-    borderRadius: 5,
-    marginBottom: 50,
-    // elevation: 0.1,
-    // transform: [{ rotateX: '7deg' }],
-    shadowColor: '#000000',
-    elevation: 6,
-  },
-  borderBottom: {
-    borderRadius: 50,
-  },
-});
-
-const SView = styled(View);
-const SText = styled(Text);
-const STouchableOpacity = styled(TouchableOpacity);
-const SLinearGradient = styled(LinearGradient);
-
-export const Box = () => {
-  return (
-    <SettingsStack.Navigator>
-      <SettingsStack.Screen
-        name="Box"
-        component={BoxScreen}
-        options={{ headerShown: false }}
-      />
-      <SettingsStack.Screen
-        name="BoxDetails"
-        component={BoxDetailsScreen}
-        options={{ headerShown: false }}
-      />
-      <SettingsStack.Screen
-        name="PopupBoxInfo"
-        component={BoxDetailsScreen}
-        options={{ headerShown: false }}
-      />
-      <SettingsStack.Screen
-        name="SetupBox"
-        component={SetupBox}
-        options={{ headerShown: false }}
-      />
-    </SettingsStack.Navigator>
-  );
-};
-
-const SettingsStack = createNativeStackNavigator();
-
-function BoxScreen({ navigation }) {
-  const boxService = new BoxService();
-
-  const treeDefinitions = useSelector(selectTreeDefinitions);
-  const [isLoading, setIsLoading] = useState(true);
-  const [boxes, setBoxes] = useState<BoxItem[]>([]);
-
-  useEffect(() => {
-    if (treeDefinitions.length === 0) return;
-    if (boxes.length === 0) return;
-    boxes.forEach((box) => box.setTreeName(treeDefinitions));
-  }, [treeDefinitions, boxes])
-
-  const fetchBoxes = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      const allBoxes = await boxService.getAll();
-      setBoxes(allBoxes.map((box) => new BoxItem(box)));
-    } catch (error) {
-      console.error(error);
-    }
-    setIsLoading(false);
-  }, []);
-
-  useEffect((): void => {
-    void fetchBoxes();
-  }, [fetchBoxes]);
-
-  if (isLoading) {
-    return <Loading></Loading>;
-  }
-
-  return (
-    <SafeAreaView>
-      <ScrollView>
-        <View style={{ backgroundColor: '#ffffff' }}>
-          <View
-            style={{
-              margin: 10,
-            }}
-          >
-            <TouchableOpacity onPress={() => navigation.navigate('SetupBox')}>
-              <Text style={[styles.title]}>
-                Mes Boîtes ({boxes?.length ?? 0})
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-
-        <SView className="justify-center items-center p-3">
-          {boxes.map((box, boxIndex) => (
-            <SLinearGradient
-              key={`${boxIndex}`}
-              colors={['#8E7556', '#8E7556']}
-              className="rounded-3xl w-vw9/10 h-vw9.21/10 elevation-md mb-10"
-            >
-              <SLinearGradient
-                colors={['#FABB72', '#D49953']}
-                className="rounded-2xl h-vw9/10"
-              >
-                <SView className="flex-wrap rounded-3xl h-full gap-1 justify-center ml-vw5/100 mr-vw7/100">
-                  <SView className="flex-wrap justify-end flex-0.5 h-vw5/100 flex-row">
-                    <SText className="ml-1 uppercase flex-4 text-base font-lato-bold">
-                      {box.treeName}
-                    </SText>
-                    <SText className="text-end font-lato-bold">
-                      <SText className='text-base'>{box.dateSinceGermination} </SText>
-                      <SText className='text-sm'>jours</SText>
-                    </SText>
-                  </SView>
-                  {box.seeds
-                    .reduce((acc, curr, i) => {
-                      if (i % 5 == 0) acc.push([]);
-                      acc[acc.length - 1].push(curr);
-                      return acc;
-                    }, [])
-                    .map((seeds, rowIndex) => (
-                      <SView key={`${boxIndex}-${rowIndex}`} className="flex-wrap h-full gap-1 flex-1 flex-row">
-                        {seeds.map((seed, i) => (
-                          <SLinearGradient
-                            colors={['#987851', '#f1d4b1']}
-                            key={`${boxIndex}-${rowIndex}-${i}`}
-                            className="h-full flex-1 justify-center items-center rounded-md"
-                          >
-                            <SView className="absolute z-20 top-2 left-0 right-0 bottom-0 bg-releaf-brown-900 rounded-md ml-vw0.5/100 mb-vw0.5/100 mt-vw0.5/100 mr-vw0.5/100"></SView>
-                            <SView className="absolute z-10 top-0 left-0 right-0 bottom-0 bg-releaf-brown-800 rounded-md ml-vw0.5/100 mb-vw0.5/100 mt-vw0.5/100 mr-vw0.5/100"></SView>
-                            <SView className="h-full z-40 flex-1 bg-transparent justify-end  items-center rounded-md ml-vw0.5/100 mb-vw0.5/100 mt-vw0.5/100 mr-vw0.5/100">
-                              <SText className="min-w-full text-center z-30 color-releaf-brown-100">
-                                {(seed.name as string).substring(
-                                  0,
-                                  MAX_NAME_LENGTH
-                                )}
-                                {seed.name.length > MAX_NAME_LENGTH ? '.' : ''}
-                              </SText>
-                            </SView>
-                          </SLinearGradient>
-                        ))}
-                      </SView>
-                    ))}
-                  <SView className="flex-wrap flex-row h-vw7/100 pt-1 pl-1">
-                    <SText className="flex-1 text-base font-latoRegular">
-                      <Logo></Logo>
-                    </SText>
-                    <STouchableOpacity
-                      className='flex-4 flex-row gap-1'
-                      onPress={() =>
-                        navigation.navigate('BoxDetails', { id: '11111' })
-                      }
-                    >
-                      <SText className="text-center flex-1 text-base font-caveat-bold bg-releaf-brown-500 rounded-l-md">{box.seedsAverageInchHeight} cm</SText>
-                      <SText className="text-center flex-2 text-base font-caveat-bold bg-releaf-brown-500">{box.germinationDay}</SText>
-                      <SText className="text-center flex-1 text-base bg-white rounded-r-md elevation-md"><Edit size={20}></Edit></SText>
-                    </STouchableOpacity>
-                  </SView>
-                </SView>
-              </SLinearGradient>
-            </SLinearGradient>
-          ))}
-        </SView>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
diff --git a/apps/releaf/mobile/src/app/box/components/Box.tsx b/apps/releaf/mobile/src/app/box/components/Box.tsx
new file mode 100644
index 0000000..aecd44c
--- /dev/null
+++ b/apps/releaf/mobile/src/app/box/components/Box.tsx
@@ -0,0 +1,114 @@
+import { styled } from "nativewind";
+import { TouchableOpacity, View, Text, GestureResponderEvent, Dimensions } from "react-native";
+import LinearGradient from "react-native-linear-gradient";
+import { BoxItem } from "../../infrastructure/entities/box";
+import { Edit } from '../../../assets/images/edit';
+import { Logo } from '../../../assets/images/logo'
+import { useState } from "react";
+
+const windowWidth = Dimensions.get('window').width;
+
+const SView = styled(View);
+const SText = styled(Text);
+const STouchableOpacity = styled(TouchableOpacity);
+const SLinearGradient = styled(LinearGradient);
+
+const MAX_NAME_LENGTH = 7;
+
+export function Box({ box }: { box: BoxItem }) {
+  const [boxHoldPosition, setBoxHoldPosition] = useState<number>(0);
+  const [boxPosition, setBoxPosition] = useState<number>(0);
+
+  const ontouchstart = (ev: GestureResponderEvent) => {
+    setBoxHoldPosition(ev.nativeEvent.locationX)
+  }
+
+  const ontouchmove = (ev: GestureResponderEvent) => {
+    const diff = ev.nativeEvent.pageX - boxHoldPosition
+    const pagePercent = (diff / windowWidth) * 100
+    if (pagePercent < -60 || pagePercent > 0) return
+    if (Math.abs(diff - boxPosition) < 0.5) return
+    setBoxPosition(diff)
+  }
+
+  const ontouchend = (ev: GestureResponderEvent) => {
+    const pagePercent = (boxPosition / windowWidth) * 100
+    const diff = ev.nativeEvent.pageX - boxHoldPosition
+    setBoxPosition(diff)
+    if (pagePercent < -20) {
+      setBoxPosition((-60 / 100) * windowWidth)
+    } else {
+      setBoxPosition(0)
+    }
+  }
+
+  return (
+    <SLinearGradient
+      onTouchStart={ontouchstart}
+      onTouchMove={ontouchmove}
+      onTouchEnd={ontouchend}
+      colors={['#8E7556', '#8E7556']}
+      className="rounded-3xl w-vw9/10 h-vw9.21/10 elevation-md mb-10"
+      style={{ transform: [{ translateX: boxPosition }] }}
+    >
+      <SView className="top-0 left-0 right-0 bottom-0 absolute h-full z-40 bg-transparent"></SView>
+      <SLinearGradient
+        colors={['#FABB72', '#D49953']}
+        className="rounded-2xl h-vw9/10"
+      >
+        <SView className="flex-wrap rounded-3xl h-full gap-1 justify-center ml-vw5/100 mr-vw7/100">
+          <SView className="flex-wrap justify-end flex-0.5 h-vw5/100 flex-row">
+            <SText className="ml-1 uppercase flex-4 text-base font-lato-bold">
+              {box.treeName}
+            </SText>
+            <SText className="text-end font-lato-bold">
+              <SText className='text-base'>{box.dateSinceGermination} </SText>
+              <SText className='text-sm'>jours</SText>
+            </SText>
+          </SView>
+          {box.seeds
+            .reduce((acc, curr, i) => {
+              if (i % 5 == 0) acc.push([]);
+              acc[acc.length - 1].push(curr);
+              return acc;
+            }, [])
+            .map((seeds, rowIndex) => (
+              <SView key={`${rowIndex}`} className="flex-wrap h-full gap-1 flex-1 flex-row">
+                {seeds.map((seed, i) => (
+                  <SLinearGradient
+                    colors={['#987851', '#f1d4b1']}
+                    key={`${rowIndex}-${i}`}
+                    className="h-full flex-1 justify-center items-center rounded-md"
+                  >
+                    <SView className="absolute z-20 top-2 left-0 right-0 bottom-0 bg-releaf-brown-900 rounded-md ml-vw0.5/100 mb-vw0.5/100 mt-vw0.5/100 mr-vw0.5/100"></SView>
+                    <SView className="absolute z-10 top-0 left-0 right-0 bottom-0 bg-releaf-brown-800 rounded-md ml-vw0.5/100 mb-vw0.5/100 mt-vw0.5/100 mr-vw0.5/100"></SView>
+                    <SView className="h-full z-40 flex-1 bg-transparent justify-end  items-center rounded-md ml-vw0.5/100 mb-vw0.5/100 mt-vw0.5/100 mr-vw0.5/100">
+                      <SText className="min-w-full text-center z-30 color-releaf-brown-100">
+                        {(seed.name as string).substring(
+                          0,
+                          MAX_NAME_LENGTH
+                        )}
+                        {seed.name.length > MAX_NAME_LENGTH ? '.' : ''}
+                      </SText>
+                    </SView>
+                  </SLinearGradient>
+                ))}
+              </SView>
+            ))}
+          <SView className="flex-wrap flex-row h-vw7/100 pt-1 pl-1  z-60">
+            <SText className="flex-1 text-base font-latoRegular">
+              <Logo></Logo>
+            </SText>
+            <STouchableOpacity
+              className='flex-4 flex-row gap-1'
+            >
+              <SText className="text-center flex-1 text-base font-caveat-bold bg-releaf-brown-500 rounded-l-md">{box.seedsAverageInchHeight} cm</SText>
+              <SText className="text-center flex-2 text-base font-caveat-bold bg-releaf-brown-500">{box.germinationDay}</SText>
+              <SText className="text-center flex-1 text-base bg-white rounded-r-md elevation-md"><Edit size={20}></Edit></SText>
+            </STouchableOpacity>
+          </SView>
+        </SView>
+      </SLinearGradient>
+    </SLinearGradient>
+  );
+}
\ No newline at end of file
diff --git a/apps/releaf/mobile/src/app/box/screens/Boxes.tsx b/apps/releaf/mobile/src/app/box/screens/Boxes.tsx
new file mode 100644
index 0000000..db3d3ec
--- /dev/null
+++ b/apps/releaf/mobile/src/app/box/screens/Boxes.tsx
@@ -0,0 +1,117 @@
+import {
+  View,
+  Text,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { useCallback, useEffect, useState } from 'react';
+import { Loading } from '../../shared/Loading';
+import { BoxDetailsScreen } from './BoxDetails';
+import { BoxService } from '../../infrastructure/services/box.service';
+import { SetupBox } from './SetupBox';
+import { BoxItem } from '../../infrastructure/entities/box';
+import { styled } from 'nativewind';
+import { selectTreeDefinitions } from '../../store/slices/treeDefinitionSlice';
+import { useSelector } from 'react-redux';
+import { Box } from '../components/Box';
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#2C4E3C',
+  }
+});
+
+const SView = styled(View);
+
+export const Boxes = () => {
+  return (
+    <SettingsStack.Navigator>
+      <SettingsStack.Screen
+        name="Box"
+        component={BoxScreen}
+        options={{ headerShown: false }}
+      />
+      <SettingsStack.Screen
+        name="BoxDetails"
+        component={BoxDetailsScreen}
+        options={{ headerShown: false }}
+      />
+      <SettingsStack.Screen
+        name="PopupBoxInfo"
+        component={BoxDetailsScreen}
+        options={{ headerShown: false }}
+      />
+      <SettingsStack.Screen
+        name="SetupBox"
+        component={SetupBox}
+        options={{ headerShown: false }}
+      />
+    </SettingsStack.Navigator>
+  );
+};
+
+const SettingsStack = createNativeStackNavigator();
+
+function BoxScreen({ navigation }) {
+  const boxService = new BoxService();
+
+  const treeDefinitions = useSelector(selectTreeDefinitions);
+  const [isLoading, setIsLoading] = useState(true);
+  const [boxes, setBoxes] = useState<BoxItem[]>([]);
+
+  useEffect(() => {
+    if (treeDefinitions.length === 0) return;
+    if (boxes.length === 0) return;
+    boxes.forEach((box) => box.setTreeName(treeDefinitions));
+  }, [treeDefinitions, boxes])
+
+  const fetchBoxes = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const allBoxes = await boxService.getAll();
+      setBoxes(allBoxes.map((box) => new BoxItem(box)));
+    } catch (error) {
+      console.error(error);
+    }
+    setIsLoading(false);
+  }, []);
+
+  useEffect((): void => {
+    void fetchBoxes();
+  }, [fetchBoxes]);
+
+  if (isLoading) {
+    return <Loading></Loading>;
+  }
+
+  return (
+    <SafeAreaView>
+      <ScrollView>
+        <View style={{ backgroundColor: '#ffffff' }}>
+          <View
+            style={{
+              margin: 10,
+            }}
+          >
+            <TouchableOpacity onPress={() => navigation.navigate('SetupBox')}>
+              <Text style={[styles.title]}>
+                Mes Boîtes ({boxes?.length ?? 0})
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        <SView className="justify-center items-center p-3">
+          {boxes.map((box, boxIndex) => (
+            <Box key={boxIndex} box={box}></Box>
+          ))}
+        </SView>
+      </ScrollView>
+    </SafeAreaView >
+  );
+}
diff --git a/apps/releaf/mobile/src/app/navigation/Navigation.tsx b/apps/releaf/mobile/src/app/navigation/Navigation.tsx
index 10fc752..68089a7 100644
--- a/apps/releaf/mobile/src/app/navigation/Navigation.tsx
+++ b/apps/releaf/mobile/src/app/navigation/Navigation.tsx
@@ -7,7 +7,7 @@ import { Order } from '../order/Order';
 import { Knowledge } from '../knowledge/Knowledge';
 import { Profile } from '../profile/Profile';
 import { Notifications } from '../notifications/Notifications';
-import { Box } from '../box/Box';
+import { Boxes } from '../box/screens/Boxes';
 import { useDispatch } from 'react-redux';
 import { load } from '../store/slices/treeDefinitionSlice';
 
@@ -63,7 +63,7 @@ export const Navigation = () => {
         />
         <Tab.Screen
           name={homeName}
-          component={Box}
+          component={Boxes}
           options={{ headerShown: false, tabBarLabel: '' }}
         />
         <Tab.Screen