refactor: 🦠 update ChangeAvatar

#44
bitsongofficial · Jul 8, 2022 · 5921e25 · 5921e25
1 parent 6eb260d
commit 5921e25
Showing 1 changed file with 77 additions and 119 deletions.
diff --git a/screens/Profile/components/organisms/ChangeAvatar.tsx b/screens/Profile/components/organisms/ChangeAvatar.tsx
@@ -1,145 +1,103 @@
 import {
   Image,
   ImageSourcePropType,
-  StyleProp,
   StyleSheet,
   Text,
   View,
-  ViewStyle,
 } from "react-native";
 import { useStore, useTheme } from "hooks";
 import { COLOR, hexAlpha } from "utils";
 import { Button, Icon2 } from "components/atoms";
 import { observer } from "mobx-react-lite";
 import { Title } from "../atoms";
-import { BottomSheet } from "components/moleculs";
-import { SharedValue } from "react-native-reanimated";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { BottomSheetMethods } from "@gorhom/bottom-sheet/lib/typescript/types";
-import useBottomSheetBackButton from "screens/Profile/hooks/useBottomSheetBackButton";
+import { useCallback, useMemo, useState } from "react";
 import * as ImagePicker from "expo-image-picker";
 import { RectButton } from "react-native-gesture-handler";
 
 type Props = {
-  isOpen?: boolean;
-  animatedPosition?: SharedValue<number>;
-  backgroundStyle: StyleProp<
-    Omit<ViewStyle, "bottom" | "left" | "position" | "right" | "top">
-  >;
+  close(): void;
   onClose?(): void;
 };
 
-export default observer<Props>(
-  ({ backgroundStyle, animatedPosition, isOpen, onClose }) => {
-    const theme = useTheme();
-    const { user } = useStore();
-
-    // -------- Image -----------
-    const [image, setImage] = useState<string | null>(null);
-
-    const photo = useMemo<ImageSourcePropType | undefined | null>(
-      () => ({ uri: image || user?.photo }),
-      [image]
-    );
-
-    // const photo = require("assets/images/mock/avatar_2.png");
-
-    const pickImage = async () => {
-      // No permissions request is necessary for launching the image library
-      let result = await ImagePicker.launchImageLibraryAsync({
-        mediaTypes: ImagePicker.MediaTypeOptions.All,
-        allowsEditing: true,
-        aspect: [4, 3],
-        quality: 1,
-      });
-
-      if (!result.cancelled) {
-        setImage(result.uri);
-      }
-    };
-
-    // ------ BottomSheet -------
-
-    const snapPoints = useMemo(() => [350], []);
-    const bottomSheet = useRef<BottomSheetMethods>(null);
-
-    const close = () => bottomSheet.current?.close();
-    const open = () => bottomSheet.current?.snapToIndex(0);
-
-    useEffect(() => {
-      isOpen ? open() : close();
-    }, [isOpen]);
-
-    // --------- Close -----------
-
-    const handleClose = useCallback(() => {
-      onClose && onClose();
-      // TODO: remove on business flow
-      setImage(null);
-    }, [onClose]);
-
-    const save = useCallback(() => {
-      if (photo) user?.setPhoto(photo.uri);
-      close();
-    }, [user, photo]);
-
-    useBottomSheetBackButton(isOpen, handleClose);
-
-    return (
-      <BottomSheet
-        enablePanDownToClose
-        snapPoints={snapPoints}
-        ref={bottomSheet}
-        backgroundStyle={backgroundStyle}
-        animatedPosition={animatedPosition}
-        onClose={handleClose}
-        index={-1}
-      >
-        <View style={styles.container}>
-          <Title style={styles.title}>Add Photos</Title>
-          <Text style={[styles.subtitle, theme.text.primary]}>optional</Text>
-
-          <RectButton onPress={pickImage}>
-            <View style={styles.avatar}>
-              {photo?.uri ? (
-                <Image
-                  source={photo}
-                  width={107}
-                  height={107}
-                  style={styles.image}
-                />
-              ) : (
-                <View style={styles.iconContainer}>
-                  <Icon2 name="plus" size={33} />
-                </View>
-              )}
-            </View>
-          </RectButton>
-
-          {image ? (
-            <Button
-              text="Proceed"
-              onPress={save}
-              contentContainerStyle={styles.buttonContent}
-              textStyle={styles.buttonText}
+export default observer<Props>(({ close }) => {
+  const theme = useTheme();
+  const { user } = useStore();
+
+  // -------- Image -----------
+  const [image, setImage] = useState<string | null>(null);
+
+  const photo = useMemo<ImageSourcePropType | undefined | null>(
+    () => ({ uri: image || user?.photo }),
+    [image]
+  );
+
+  // const photo = require("assets/images/mock/avatar_2.png");
+
+  const pickImage = async () => {
+    // No permissions request is necessary for launching the image library
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.All,
+      allowsEditing: true,
+      aspect: [4, 3],
+      quality: 1,
+    });
+
+    if (!result.cancelled) {
+      setImage(result.uri);
+    }
+  };
+
+  // --------- Close -----------
+
+  const save = useCallback(() => {
+    if (photo) user?.setPhoto(photo.uri);
+    close();
+  }, [user, photo]);
+
+  return (
+    <View style={styles.container}>
+      <Title style={styles.title}>Add Photos</Title>
+      <Text style={[styles.subtitle, theme.text.primary]}>optional</Text>
+
+      <RectButton onPress={pickImage}>
+        <View style={styles.avatar}>
+          {photo?.uri ? (
+            <Image
+              source={photo}
+              width={107}
+              height={107}
+              style={styles.image}
             />
           ) : (
-            <Button
-              mode="fill"
-              text="Skip"
-              onPress={close}
-              contentContainerStyle={[
-                styles.buttonContent,
-                styles.buttonContent_fill,
-              ]}
-              textStyle={styles.buttonText}
-            />
+            <View style={styles.iconContainer}>
+              <Icon2 name="plus" size={33} />
+            </View>
           )}
         </View>
-      </BottomSheet>
-    );
-  }
-);
+      </RectButton>
+
+      {image ? (
+        <Button
+          text="Proceed"
+          onPress={save}
+          contentContainerStyle={styles.buttonContent}
+          textStyle={styles.buttonText}
+        />
+      ) : (
+        <Button
+          mode="fill"
+          text="Skip"
+          onPress={close}
+          contentContainerStyle={[
+            styles.buttonContent,
+            styles.buttonContent_fill,
+          ]}
+          textStyle={styles.buttonText}
+        />
+      )}
+    </View>
+  );
+});
 
 const styles = StyleSheet.create({
   container: {