fix folder
deskripsi: - fix folder profile ke (user)
This commit is contained in:
107
app/(application)/(user)/profile/[id]/create.tsx
Normal file
107
app/(application)/(user)/profile/[id]/create.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import {
|
||||
AvatarCustom,
|
||||
ButtonCustom,
|
||||
SelectCustom,
|
||||
Spacing,
|
||||
StackCustom,
|
||||
TextInputCustom,
|
||||
ViewWrapper,
|
||||
} from "@/components";
|
||||
import InformationBox from "@/components/Box/InformationBox";
|
||||
import ButtonUpload from "@/components/Button/ButtonUpload";
|
||||
import LandscapeFrameUploaded from "@/components/Image/LandscapeFrameUploaded";
|
||||
import { GStyles } from "@/styles/global-styles";
|
||||
import { useState } from "react";
|
||||
import { View } from "react-native";
|
||||
|
||||
export default function CreateProfile() {
|
||||
const [data, setData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
address: "",
|
||||
gender: "",
|
||||
});
|
||||
|
||||
const handlerSave = () => {
|
||||
console.log("data create profile >>", data);
|
||||
// router.back();
|
||||
};
|
||||
|
||||
const footerComponent = (
|
||||
<View style={GStyles.bottomBar}>
|
||||
<View style={GStyles.bottomBarContainer}>
|
||||
<ButtonCustom
|
||||
onPress={handlerSave}
|
||||
disabled={!data.name || !data.email || !data.address || !data.gender}
|
||||
>
|
||||
Simpan
|
||||
</ButtonCustom>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<ViewWrapper footerComponent={footerComponent}>
|
||||
<StackCustom>
|
||||
<InformationBox text="Upload foto profile anda." />
|
||||
<View style={{ alignItems: "center" }}>
|
||||
<AvatarCustom size="xl" />
|
||||
<Spacing />
|
||||
<ButtonUpload onPress={() => console.log("pressed")} />
|
||||
</View>
|
||||
|
||||
<Spacing />
|
||||
|
||||
<View>
|
||||
<InformationBox text="Upload foto latar belakang anda." />
|
||||
<LandscapeFrameUploaded />
|
||||
<Spacing />
|
||||
<ButtonUpload onPress={() => console.log("pressed")} />
|
||||
</View>
|
||||
|
||||
<Spacing />
|
||||
<TextInputCustom
|
||||
required
|
||||
label="Nama"
|
||||
placeholder="Masukkan nama"
|
||||
value={data.name}
|
||||
onChangeText={(text) => setData({ ...data, name: text })}
|
||||
/>
|
||||
<TextInputCustom
|
||||
keyboardType="email-address"
|
||||
required
|
||||
label="Email"
|
||||
placeholder="Masukkan email"
|
||||
value={data.email}
|
||||
onChangeText={(text) => setData({ ...data, email: text })}
|
||||
/>
|
||||
<TextInputCustom
|
||||
required
|
||||
label="Alamat"
|
||||
placeholder="Masukkan alamat"
|
||||
value={data.address}
|
||||
onChangeText={(text) => setData({ ...data, address: text })}
|
||||
/>
|
||||
<SelectCustom
|
||||
label="Jenis Kelamin"
|
||||
placeholder="Pilih jenis kelamin"
|
||||
data={[
|
||||
{ label: "Laki-laki", value: "laki-laki" },
|
||||
{ label: "Perempuan", value: "perempuan" },
|
||||
]}
|
||||
value={data.gender}
|
||||
required
|
||||
onChange={(value) => setData({ ...(data as any), gender: value })}
|
||||
/>
|
||||
<TextInputCustom
|
||||
required
|
||||
label="Alamat"
|
||||
placeholder="Masukkan alamat"
|
||||
value={data.address}
|
||||
onChangeText={(text) => setData({ ...data, address: text })}
|
||||
/>
|
||||
{/* <Spacing /> */}
|
||||
</StackCustom>
|
||||
</ViewWrapper>
|
||||
);
|
||||
}
|
||||
112
app/(application)/(user)/profile/[id]/edit.tsx
Normal file
112
app/(application)/(user)/profile/[id]/edit.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
import {
|
||||
ButtonCustom,
|
||||
SelectCustom,
|
||||
StackCustom,
|
||||
TextInputCustom,
|
||||
ViewWrapper,
|
||||
} from "@/components";
|
||||
import { router, useLocalSearchParams } from "expo-router";
|
||||
import { useState } from "react";
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
export default function ProfileEdit() {
|
||||
const { id } = useLocalSearchParams();
|
||||
|
||||
const [data, setData] = useState({
|
||||
nama: "Bagas Banuna",
|
||||
email: "bagasbanuna@gmail.com",
|
||||
alamat: "Jember",
|
||||
selectedValue: "",
|
||||
});
|
||||
|
||||
const options = [
|
||||
{ label: "React", value: "react" },
|
||||
{ label: "Vue", value: "vue" },
|
||||
{ label: "Angular", value: "angular" },
|
||||
{ label: "Svelte", value: "svelte" },
|
||||
{ label: "Next.js", value: "nextjs" },
|
||||
{ label: "Nuxt.js", value: "nuxtjs" },
|
||||
{ label: "Remix", value: "remix" },
|
||||
{ label: "Sapper", value: "sapper" },
|
||||
{ label: "SvelteKit", value: "sveltekit" },
|
||||
];
|
||||
|
||||
const handleSave = () => {
|
||||
console.log({
|
||||
nama: data.nama,
|
||||
email: data.email,
|
||||
alamat: data.alamat,
|
||||
selectedValue: data.selectedValue,
|
||||
});
|
||||
router.back();
|
||||
};
|
||||
|
||||
return (
|
||||
<ViewWrapper
|
||||
bottomBarComponent={
|
||||
<ButtonCustom
|
||||
disabled={
|
||||
!data.nama || !data.email || !data.alamat || !data.selectedValue
|
||||
}
|
||||
onPress={handleSave}
|
||||
>
|
||||
Simpan
|
||||
</ButtonCustom>
|
||||
}
|
||||
>
|
||||
<StackCustom gap={"xs"}>
|
||||
<SelectCustom
|
||||
label="Framework"
|
||||
placeholder="Pilih framework favoritmu"
|
||||
data={options}
|
||||
value={data.selectedValue}
|
||||
onChange={(value) => {
|
||||
setData({ ...(data as any), selectedValue: value });
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextInputCustom
|
||||
label="Nama"
|
||||
placeholder="Nama"
|
||||
value={data.nama}
|
||||
onChangeText={(text) => {
|
||||
setData({ ...data, nama: text });
|
||||
}}
|
||||
required
|
||||
/>
|
||||
<TextInputCustom
|
||||
label="Email"
|
||||
placeholder="Email"
|
||||
value={data.email}
|
||||
onChangeText={(text) => {
|
||||
setData({ ...data, email: text });
|
||||
}}
|
||||
required
|
||||
/>
|
||||
<TextInputCustom
|
||||
label="Alamat"
|
||||
placeholder="Alamat"
|
||||
value={data.alamat}
|
||||
onChangeText={(text) => {
|
||||
setData({ ...data, alamat: text });
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</StackCustom>
|
||||
</ViewWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
padding: 20,
|
||||
},
|
||||
result: {
|
||||
marginTop: 20,
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
});
|
||||
136
app/(application)/(user)/profile/[id]/index.tsx
Normal file
136
app/(application)/(user)/profile/[id]/index.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import { IMenuDrawerItem } from "@/components/_Interface/types";
|
||||
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
|
||||
import AlertCustom from "@/components/Alert/AlertCustom";
|
||||
import LeftButtonCustom from "@/components/Button/BackButton";
|
||||
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 ProfilSection from "@/screens/Profile/ProfilSection";
|
||||
import { GStyles } 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, InteractionManager, TouchableOpacity } 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: "" },
|
||||
{
|
||||
icon: "create-outline",
|
||||
label: "Create profile",
|
||||
path: `/(application)/profile/${id}/create`,
|
||||
},
|
||||
];
|
||||
|
||||
// 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(() => {
|
||||
InteractionManager.runAfterInteractions(() => {
|
||||
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: () => <LeftButtonCustom />,
|
||||
headerRight: () => (
|
||||
<TouchableOpacity onPress={openDrawer}>
|
||||
<Ionicons
|
||||
name="ellipsis-vertical"
|
||||
size={20}
|
||||
color={MainColor.yellow}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
),
|
||||
headerStyle: GStyles.headerStyle,
|
||||
headerTitleStyle: GStyles.headerTitleStyle,
|
||||
}}
|
||||
/>
|
||||
<ProfilSection />
|
||||
|
||||
</ViewWrapper>
|
||||
|
||||
{/* Drawer Komponen Eksternal */}
|
||||
<DrawerCustom
|
||||
height={350}
|
||||
isVisible={isDrawerOpen}
|
||||
drawerAnim={drawerAnim}
|
||||
closeDrawer={closeDrawer}
|
||||
>
|
||||
<Profile_MenuDrawerSection
|
||||
drawerItems={drawerItems}
|
||||
setShowLogoutAlert={setShowLogoutAlert}
|
||||
setIsDrawerOpen={setIsDrawerOpen}
|
||||
/>
|
||||
</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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
190
app/(application)/(user)/profile/[id]/take-picture2.txt
Normal file
190
app/(application)/(user)/profile/[id]/take-picture2.txt
Normal file
@@ -0,0 +1,190 @@
|
||||
// COMPONENT : Jika ingin uoload gambar dan video gunakan component ini
|
||||
|
||||
import {
|
||||
ButtonCustom,
|
||||
Spacing,
|
||||
StackCustom,
|
||||
ViewWrapper
|
||||
} from "@/components";
|
||||
import AntDesign from "@expo/vector-icons/AntDesign";
|
||||
import Feather from "@expo/vector-icons/Feather";
|
||||
import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
|
||||
import {
|
||||
CameraMode,
|
||||
CameraType,
|
||||
CameraView,
|
||||
useCameraPermissions,
|
||||
} from "expo-camera";
|
||||
import { Image } from "expo-image";
|
||||
import { router } from "expo-router";
|
||||
import { useRef, useState } from "react";
|
||||
import { Button, Pressable, StyleSheet, Text, View } from "react-native";
|
||||
|
||||
export default function TakePictureProfile2() {
|
||||
const [permission, requestPermission] = useCameraPermissions();
|
||||
const ref = useRef<CameraView>(null);
|
||||
const [uri, setUri] = useState<string | null>(null);
|
||||
const [mode, setMode] = useState<CameraMode>("picture");
|
||||
const [facing, setFacing] = useState<CameraType>("back");
|
||||
const [recording, setRecording] = useState(false);
|
||||
|
||||
if (!permission?.granted) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={{ textAlign: "center" }}>
|
||||
We need your permission to use the camera
|
||||
</Text>
|
||||
<Button onPress={requestPermission} title="Grant permission" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const takePicture = async () => {
|
||||
const photo = await ref.current?.takePictureAsync();
|
||||
setUri(photo?.uri || null);
|
||||
};
|
||||
|
||||
const recordVideo = async () => {
|
||||
if (recording) {
|
||||
setRecording(false);
|
||||
ref.current?.stopRecording();
|
||||
return;
|
||||
}
|
||||
setRecording(true);
|
||||
const video = await ref.current?.recordAsync();
|
||||
console.log({ video });
|
||||
};
|
||||
|
||||
const toggleMode = () => {
|
||||
setMode((prev) => (prev === "picture" ? "video" : "picture"));
|
||||
};
|
||||
|
||||
const toggleFacing = () => {
|
||||
setFacing((prev) => (prev === "back" ? "front" : "back"));
|
||||
};
|
||||
|
||||
const renderPicture = () => {
|
||||
console.log("renderPicture", uri);
|
||||
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={toggleMode}>
|
||||
{mode === "picture" ? (
|
||||
<AntDesign name="picture" size={32} color="white" />
|
||||
) : (
|
||||
<Feather name="video" size={32} color="white" />
|
||||
)}
|
||||
</Pressable>
|
||||
|
||||
<Pressable onPress={mode === "picture" ? takePicture : recordVideo}>
|
||||
{({ pressed }) => (
|
||||
<View
|
||||
style={[
|
||||
styles.shutterBtn,
|
||||
{
|
||||
opacity: pressed ? 0.5 : 1,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
styles.shutterBtnInner,
|
||||
{
|
||||
backgroundColor: mode === "picture" ? "white" : "red",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</Pressable>
|
||||
|
||||
<Pressable onPress={toggleFacing}>
|
||||
<FontAwesome6 name="rotate-left" size={32} color="white" />
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{uri ? (
|
||||
<ViewWrapper>
|
||||
<View style={styles.container}>{renderPicture()}</View>
|
||||
</ViewWrapper>
|
||||
) : (
|
||||
<>
|
||||
<CameraView
|
||||
style={styles.camera}
|
||||
ref={ref}
|
||||
mode={mode}
|
||||
facing={facing}
|
||||
mute={false}
|
||||
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,
|
||||
},
|
||||
});
|
||||
41
app/(application)/(user)/profile/[id]/update-background.tsx
Normal file
41
app/(application)/(user)/profile/[id]/update-background.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { BaseBox, ButtonCustom } from "@/components";
|
||||
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
|
||||
import ButtonUpload from "@/components/Button/ButtonUpload";
|
||||
import DUMMY_IMAGE from "@/constants/dummy-image-value";
|
||||
import { router, useLocalSearchParams } from "expo-router";
|
||||
import { Image } from "react-native";
|
||||
|
||||
export default function UpdateBackgroundProfile() {
|
||||
const { id } = useLocalSearchParams();
|
||||
return (
|
||||
<ViewWrapper
|
||||
bottomBarComponent={
|
||||
<ButtonCustom
|
||||
onPress={() => {
|
||||
console.log("Simpan foto background >>", id);
|
||||
router.back();
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</ButtonCustom>
|
||||
}
|
||||
>
|
||||
<BaseBox
|
||||
style={{ alignItems: "center", justifyContent: "center", height: 250 }}
|
||||
>
|
||||
<Image
|
||||
source={DUMMY_IMAGE.background}
|
||||
resizeMode="cover"
|
||||
style={{ width: "100%", height: "100%", borderRadius: 10 }}
|
||||
/>
|
||||
</BaseBox>
|
||||
|
||||
<ButtonUpload
|
||||
title="Update"
|
||||
onPress={() =>
|
||||
router.navigate(`/(application)/take-picture/${id}`)
|
||||
}
|
||||
/>
|
||||
</ViewWrapper>
|
||||
);
|
||||
}
|
||||
42
app/(application)/(user)/profile/[id]/update-photo.tsx
Normal file
42
app/(application)/(user)/profile/[id]/update-photo.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { BaseBox, ButtonCustom } from "@/components";
|
||||
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
|
||||
import ButtonUpload from "@/components/Button/ButtonUpload";
|
||||
import DUMMY_IMAGE from "@/constants/dummy-image-value";
|
||||
import { router, useLocalSearchParams } from "expo-router";
|
||||
import { Image } from "react-native";
|
||||
|
||||
export default function UpdatePhotoProfile() {
|
||||
const { id } = useLocalSearchParams();
|
||||
return (
|
||||
<ViewWrapper
|
||||
bottomBarComponent={
|
||||
<ButtonCustom
|
||||
onPress={() => {
|
||||
console.log("Simpan foto profile >>", id);
|
||||
router.back();
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</ButtonCustom>
|
||||
}
|
||||
>
|
||||
<BaseBox
|
||||
style={{ alignItems: "center", justifyContent: "center", height: 250 }}
|
||||
>
|
||||
<Image
|
||||
source={DUMMY_IMAGE.avatar}
|
||||
resizeMode="cover"
|
||||
style={{ width: 200, height: 200 }}
|
||||
/>
|
||||
</BaseBox>
|
||||
|
||||
<ButtonUpload
|
||||
title="Update"
|
||||
onPress={() => {
|
||||
console.log("Update photo >>", id);
|
||||
router.navigate(`/(application)/take-picture/${id}`);
|
||||
}}
|
||||
/>
|
||||
</ViewWrapper>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user