feature

deksripsi: - merapikan folder profile - Issu: Drawer
2025-07-02 11:43:22 +08:00
parent 258e20751e
commit 8fb37db0db
15 changed files with 160 additions and 58 deletions
--- a/app/(application)/profile/[id]/index.tsx
+++ b/app/(application)/profile/[id]/index.tsx
@@ -0,0 +1,140 @@
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import BackButton from "@/components/_ShareComponent/BackButton";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import AlertCustom from "@/components/Alert/AlertCustom";
+import DrawerCustom from "@/components/Drawer/DrawerCustom";
+import { MainColor } from "@/constants/color-palet";
+import { DRAWER_HEIGHT } from "@/constants/constans-value";
+import Profile_MenuDrawerSection from "@/screens/Profile/menuDrawerSection";
+import { Styles } from "@/styles/global-styles";
+import { Ionicons } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import React, { useRef, useState } from "react";
+import { Animated, Text, TouchableHighlight, TouchableOpacity, View } from "react-native";
+
+export default function Profile() {
+  const { id } = useLocalSearchParams();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [showLogoutAlert, setShowLogoutAlert] = useState(false);
+
+  const drawerItems: IMenuDrawerItem[] = [
+    {
+      icon: "create",
+      label: "Edit profile",
+      path: `/(application)/profile/${id}/edit`,
+    },
+    {
+      icon: "camera",
+      label: "Ubah foto profile",
+      path: `/(application)/profile/${id}/update-photo`,
+    },
+    {
+      icon: "image",
+      label: "Ubah latar belakang",
+      path: `/(application)/profile/${id}/update-background`,
+    },
+    {
+      icon: "add-circle",
+      label: "Tambah portofolio",
+      path: `/(application)/portofolio/${id}/create`,
+    },
+    // {
+    //   icon: "settings",
+    //   label: "Dashboard Admin",
+    //   path: `/(application)/profile/dashboard-admin`,
+    // },
+    { icon: "log-out", label: "Keluar", color: "red", path: "" },
+  ];
+
+  // Animasi menggunakan translateY (lebih kompatibel)
+  const drawerAnim = useRef(new Animated.Value(DRAWER_HEIGHT)).current; // mulai di luar bawah layar
+
+  const openDrawer = () => {
+    setIsDrawerOpen(true);
+    Animated.timing(drawerAnim, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const closeDrawer = () => {
+    Animated.timing(drawerAnim, {
+      toValue: DRAWER_HEIGHT, // sesuaikan dengan tinggi drawer Anda
+      duration: 300,
+      useNativeDriver: true,
+    }).start(() => {
+      setIsDrawerOpen(false); // baru ganti state setelah animasi selesai
+    });
+  };
+
+  const handleLogout = () => {
+    console.log("User logout");
+    router.replace("/");
+    setShowLogoutAlert(false);
+  };
+
+  return (
+    <>
+      <ViewWrapper>
+        {/* Header */}
+        <Stack.Screen
+          options={{
+            title: "Profile",
+            headerLeft: () => <BackButton />,
+            headerRight: () => (
+              <TouchableOpacity onPress={openDrawer}>
+                <Ionicons
+                  name="ellipsis-vertical"
+                  size={20}
+                  color={MainColor.yellow}
+                />
+              </TouchableOpacity>
+            ),
+            headerStyle: Styles.headerStyle,
+            headerTitleStyle: Styles.headerTitleStyle,
+          }}
+        />
+        <Text style={Styles.textLabel}>Profile {id}</Text>
+        <TouchableHighlight
+          onPress={() => router.push(`/(application)/portofolio/${id}`)}
+        >
+          <View
+            style={{
+              backgroundColor: MainColor.white,
+              padding: 10,
+              borderRadius: 10,
+              marginTop: 10,
+            }}
+          >
+            <Text>Portofolio</Text>
+          </View>
+        </TouchableHighlight>
+      </ViewWrapper>
+
+      {/* Drawer Komponen Eksternal */}
+      <DrawerCustom
+        height={350}
+        isVisible={isDrawerOpen}
+        drawerAnim={drawerAnim}
+        closeDrawer={closeDrawer}
+      >
+        <Profile_MenuDrawerSection
+          drawerItems={drawerItems}
+          setShowLogoutAlert={setShowLogoutAlert}
+        />
+      </DrawerCustom>
+
+      {/* Alert Komponen Eksternal */}
+      <AlertCustom
+        isVisible={showLogoutAlert}
+        onLeftPress={() => setShowLogoutAlert(false)}
+        onRightPress={handleLogout}
+        title="Apakah anda yakin ingin keluar?"
+        textLeft="Batal"
+        textRight="Keluar"
+        colorRight={MainColor.red}
+      />
+    </>
+  );
+}