feature

deskripsi:
- folder take-picture

app/(application)/profile/[id]/take-picture.tsx

@@ -1,168 +0,0 @@
-import {
-    ButtonCustom,
-    Spacing,
-    StackCustom,
-    ViewWrapper
-} from "@/components";
-import AntDesign from "@expo/vector-icons/AntDesign";
-import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
-import { CameraType, CameraView, useCameraPermissions } from "expo-camera";
-import { Image } from "expo-image";
-import * as ImagePicker from "expo-image-picker";
-import { router } from "expo-router";
-import { useRef, useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-
-export default function TakePictureProfile() {
-  const [permission, requestPermission] = useCameraPermissions();
-  const ref = useRef<CameraView>(null);
-  const [uri, setUri] = useState<string | null>(null);
-  const [facing, setFacing] = useState<CameraType>("back");
-
-  if (!permission?.granted) {
-    return (
-      <View style={styles.container}>
-        <Text style={{ textAlign: "center" }}>
-          We need your permission to use the camera
-        </Text>
-        <Pressable onPress={requestPermission}>
-          <Text style={{ color: "blue", marginTop: 10 }}>Grant permission</Text>
-        </Pressable>
-      </View>
-    );
-  }
-
-  const takePicture = async () => {
-    const photo = await ref.current?.takePictureAsync();
-    setUri(photo?.uri || null);
-  };
-
-  const pickImage = async () => {
-    const result = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ImagePicker.MediaTypeOptions.Images,
-      allowsEditing: true,
-      aspect: [1, 1],
-      quality: 1,
-    });
-
-    if (!result.canceled) {
-      setUri(result.assets[0].uri);
-    }
-  };
-
-  const toggleFacing = () => {
-    setFacing((prev) => (prev === "back" ? "front" : "back"));
-  };
-
-  const renderPicture = () => {
-    return (
-      <View>
-        <Image
-          source={uri ? uri : null}
-          contentFit="contain"
-          style={{ width: 340, aspectRatio: 1 }}
-        />
-        <Spacing />
-
-        <StackCustom>
-          <ButtonCustom onPress={() => setUri(null)} title="Foto ulang" />
-          <ButtonCustom
-            onPress={() => {
-              console.log("Update foto");
-              router.back();
-            }}
-            title="Update Foto"
-          />
-        </StackCustom>
-      </View>
-    );
-  };
-
-  const renderCameraUI = () => {
-    return (
-      <View style={styles.cameraOverlay}>
-        <View style={styles.shutterContainer}>
-          <Pressable onPress={toggleFacing}>
-            <FontAwesome6 name="rotate-left" size={32} color="white" />
-          </Pressable>
-
-          <Pressable onPress={takePicture}>
-            {({ pressed }) => (
-              <View
-                style={[
-                  styles.shutterBtn,
-                  {
-                    opacity: pressed ? 0.5 : 1,
-                  },
-                ]}
-              >
-                <View style={styles.shutterBtnInner} />
-              </View>
-            )}
-          </Pressable>
-
-          <Pressable onPress={pickImage}>
-            <AntDesign name="folderopen" size={32} color="white" />
-          </Pressable>
-        </View>
-      </View>
-    );
-  };
-
-  return (
-    <>
-      {uri ? (
-        <ViewWrapper>
-          <View style={styles.container}>{renderPicture()}</View>
-        </ViewWrapper>
-      ) : (
-        <>
-          <CameraView
-            style={styles.camera}
-            ref={ref}
-            facing={facing}
-            responsiveOrientationWhenOrientationLocked
-          />
-          {renderCameraUI()}
-        </>
-      )}
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  camera: {
-    flex: 1,
-    width: "100%",
-  },
-  cameraOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: "flex-end",
-    padding: 44,
-  },
-  shutterContainer: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  shutterBtn: {
-    backgroundColor: "transparent",
-    borderWidth: 5,
-    borderColor: "white",
-    width: 85,
-    height: 85,
-    borderRadius: 45,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  shutterBtnInner: {
-    width: 70,
-    height: 70,
-    borderRadius: 50,
-    backgroundColor: "white",
-  },
-});

app/(application)/profile/[id]/update-background.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { BaseBox, ButtonCustom } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import ButtonUpload from "@/components/Button/ButtonUpload";
@@ -13,7 +12,7 @@ export default function UpdateBackgroundProfile() {
       bottomBarComponent={
         <ButtonCustom
           onPress={() => {
-            console.log("Simpan foto");
+            console.log("Simpan foto background >>", id);
             router.back();
           }}
         >
@@ -32,8 +31,9 @@ export default function UpdateBackgroundProfile() {
       </BaseBox>
 
       <ButtonUpload
+        title="Update"
         onPress={() =>
-          router.navigate("/(application)/profile/[id]/take-picture")
+          router.navigate(`/(application)/take-picture/${id}`)
         }
       />
     </ViewWrapper>

app/(application)/profile/[id]/update-photo.tsx

@@ -12,7 +12,7 @@ export default function UpdatePhotoProfile() {
       bottomBarComponent={
         <ButtonCustom
           onPress={() => {
-            console.log("Simpan foto");
+            console.log("Simpan foto profile >>", id);
             router.back();
           }}
         >
@@ -31,9 +31,10 @@ export default function UpdatePhotoProfile() {
       </BaseBox>
 
       <ButtonUpload
+        title="Update"
         onPress={() => {
-          console.log("ID >>", id);
-          router.navigate("/(application)/profile/[id]/take-picture");
+          console.log("Update photo >>", id);
+          router.navigate(`/(application)/take-picture/${id}`);
         }}
       />
     </ViewWrapper>

app/(application)/profile/_layout.tsx

@@ -24,14 +24,6 @@ export default function ProfileLayout() {
           name="[id]/update-background"
           options={{ title: "Update Latar Belakang" }}
         />
-        <Stack.Screen
-          name="[id]/take-picture"
-          options={{ title: "Ambil Foto" }}
-        />
-        <Stack.Screen
-          name="[id]/take-picture2"
-          options={{ title: "Ambil Foto 2" }}
-        />
       </Stack>
     </>
   );