upd: setting

Deskripsi: - buat halaman setting - isinya edit profile, ganti tema aplikasi, nonaktifkan notifikasi, sign out No Issues
2026-02-18 15:45:45 +08:00
parent 42cb7c8f8e
commit 64aaafa2be
6 changed files with 294 additions and 104 deletions
--- a/app/(application)/setting/index.tsx
+++ b/app/(application)/setting/index.tsx
@@ -0,0 +1,186 @@
+import ModalConfirmation from "@/components/ModalConfirmation";
+import Text from "@/components/Text";
+import ButtonSetting from "@/components/buttonSetting";
+import DrawerBottom from "@/components/drawerBottom";
+import Styles from "@/constants/Styles";
+import { apiRegisteredToken, apiUnregisteredToken } from "@/lib/api";
+import { checkPermission, getToken, openSettings, requestPermission } from "@/lib/useNotification";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
+import { Feather, Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { useCallback, useEffect, useState } from "react";
+import { AppState, AppStateStatus, Pressable, View } from "react-native";
+import { useSelector } from "react-redux";
+
+export default function ListSetting() {
+   const { theme, setTheme, colors } = useTheme()
+   const { signOut } = useAuthSession()
+   const [isNotificationEnabled, setIsNotificationEnabled] = useState<boolean | null>(null);
+   const entities = useSelector((state: any) => state.entities)
+   const [modalVisible, setModalVisible] = useState(false);
+   const [modalConfig, setModalConfig] = useState({
+      title: '',
+      message: '',
+      confirmText: 'Buka Pengaturan',
+      onConfirm: () => { }
+   });
+
+   const [showLogoutModal, setShowLogoutModal] = useState(false)
+   const [showThemeModal, setShowThemeModal] = useState(false)
+
+   const registerToken = async () => {
+      try {
+         const token = await getToken();
+         if (token) {
+            await apiRegisteredToken({ user: entities.id, token });
+         }
+      } catch (error) {
+         console.warn('Error registering token:', error);
+      }
+   };
+
+   const unregisterToken = async () => {
+      try {
+         const token = await getToken();
+         if (token) {
+            await apiUnregisteredToken({ user: entities.id, token });
+         }
+      } catch (error) {
+         console.warn('Error unregistering token:', error);
+      }
+   };
+
+   const checkNotif = useCallback(async () => {
+      const status = await checkPermission();
+      setIsNotificationEnabled((prev) => {
+         if (prev === false && status === true) {
+            registerToken();
+         } else if (prev === true && status === false) {
+            unregisterToken();
+         }
+         return !!status;
+      });
+   }, [entities.id]);
+
+   useEffect(() => {
+      checkNotif();
+
+      const subscription = AppState.addEventListener('change', (nextAppState: AppStateStatus) => {
+         if (nextAppState === 'active') {
+            checkNotif();
+         }
+      });
+
+      return () => {
+         subscription.remove();
+      };
+   }, [checkNotif]);
+
+   const handleToggleNotif = async () => {
+      if (isNotificationEnabled) {
+         setModalConfig({
+            title: "Matikan Notifikasi?",
+            message: "Anda akan diarahkan ke pengaturan sistem untuk mematikan notifikasi.",
+            confirmText: "Buka Pengaturan",
+            onConfirm: () => {
+               setModalVisible(false);
+               openSettings();
+            }
+         });
+         setModalVisible(true);
+      } else {
+         const granted = await requestPermission();
+         if (granted) {
+            setIsNotificationEnabled(true);
+            registerToken();
+         } else {
+            setModalConfig({
+               title: "Aktifkan Notifikasi?",
+               message: "Izin notifikasi tidak diberikan. Buka pengaturan sistem untuk mengaktifkannya?",
+               confirmText: "Buka Pengaturan",
+               onConfirm: () => {
+                  setModalVisible(false);
+                  openSettings();
+               }
+            });
+            setModalVisible(true);
+         }
+      }
+   };
+
+   const ThemeOption = ({ label, value, icon }: { label: string, value: 'light' | 'dark' | 'system', icon: string }) => (
+      <Pressable
+         style={[Styles.itemSelectModal, { borderColor: colors.icon + '20' }]}
+         onPress={() => {
+            setTheme(value);
+         }}
+      >
+         <View style={Styles.rowItemsCenter}>
+            <Ionicons name={icon as any} size={20} color={colors.text} style={{ marginRight: 10 }} />
+            <Text style={{ color: colors.text }}>{label}</Text>
+         </View>
+         {theme === value && <Ionicons name="checkmark" size={20} color={colors.text} />}
+      </Pressable>
+   );
+
+   return (
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+         <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }, Styles.p0, Styles.round05]}>
+            {
+               entities.idUserRole != "developer" &&
+               <ButtonSetting
+                  title="Edit Profile"
+                  icon={<Feather name="user" size={20} color={colors.text} />}
+                  onPress={() => { router.push('/edit-profile') }}
+               />
+            }
+            <ButtonSetting
+               title="Tema Aplikasi"
+               icon={<Ionicons name="color-palette-outline" size={20} color={colors.text} />}
+               onPress={() => setShowThemeModal(true)}
+               value={theme === 'light' ? 'Terang' : theme === 'dark' ? 'Gelap' : 'Sistem'}
+            />
+            <ButtonSetting
+               title="Notifikasi"
+               icon={<Feather name="bell" size={20} color={colors.text} />}
+               onPress={handleToggleNotif}
+               value={isNotificationEnabled === null ? 'Memuat...' : isNotificationEnabled ? 'Aktif' : 'Nonaktif'}
+            />
+            <ButtonSetting
+               title="Keluar"
+               icon={<Feather name="log-out" size={20} color={colors.text} />}
+               onPress={() => setShowLogoutModal(true)}
+               borderBottom={false}
+            />
+         </View>
+
+         <ModalConfirmation
+            visible={modalVisible}
+            title={modalConfig.title}
+            message={modalConfig.message}
+            confirmText={modalConfig.confirmText}
+            onConfirm={modalConfig.onConfirm}
+            onCancel={() => setModalVisible(false)}
+         />
+
+         <ModalConfirmation
+            visible={showLogoutModal}
+            title="Keluar"
+            message="Apakah anda yakin ingin keluar?"
+            onConfirm={() => {
+               setShowLogoutModal(false)
+               signOut()
+            }}
+            onCancel={() => setShowLogoutModal(false)}
+            confirmText="Keluar"
+            cancelText="Batal"
+         />
+         <DrawerBottom animation="slide" isVisible={showThemeModal} setVisible={setShowThemeModal} title="Tema Aplikasi">
+            <ThemeOption label="Terang" value="light" icon="sunny-outline" />
+            <ThemeOption label="Gelap" value="dark" icon="moon-outline" />
+            <ThemeOption label="Sistem" value="system" icon="phone-portrait-outline" />
+         </DrawerBottom>
+      </View>
+   )
+}