Fix Bug DB

User Pages
- app/(application)/(user)/home.tsx
- app/(application)/(user)/portofolio/[id]/index.tsx
- app/(application)/(user)/profile/[id]/index.tsx

Home
- screens/Home/bottomFeatureSection.tsx

Components
- components/Notification/NotificationInitializer.tsx
- components/_ShareComponent/SkeletonCustom.tsx

Service
- service/api-device-token.ts

Config & iOS
- app.config.js
- ios/HIPMIBadungConnect.xcodeproj/project.pbxproj
- ios/HIPMIBadungConnect/Info.plist

### No Issue

app/(application)/(user)/home.tsx

@@ -1,21 +1,24 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
 import { BasicWrapper, StackCustom, ViewWrapper } from "@/components";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import { useNotificationStore } from "@/hooks/use-notification-store";
 import Home_BottomFeatureSection from "@/screens/Home/bottomFeatureSection";
 import HeaderBell from "@/screens/Home/HeaderBell";
+import { stylesHome } from "@/screens/Home/homeViewStyle";
 import Home_ImageSection from "@/screens/Home/imageSection";
 import TabSection from "@/screens/Home/tabSection";
 import { tabsHome } from "@/screens/Home/tabsList";
 import Home_FeatureSection from "@/screens/Home/topFeatureSection";
 import { apiUser } from "@/service/api-client/api-user";
 import { apiVersion } from "@/service/api-config";
+import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { Redirect, router, Stack, useFocusEffect } from "expo-router";
 import { useCallback, useState } from "react";
-import { RefreshControl } from "react-native";
+import { RefreshControl, TouchableOpacity, View } from "react-native";
 
 export default function Application() {
   const { token, user, userData } = useAuth();
@@ -27,24 +30,33 @@ export default function Application() {
     useCallback(() => {
       onLoadData();
       checkVersion();
-      userData(token as string);
+      userData(token as string).catch((error) => {
+        console.log("[ERROR userData]", error?.message);
+        console.log("[ERROR userData Response]", error?.response?.data);
+      });
       syncUnreadCount();
     }, [user?.id, token]),
   );
 
   async function onLoadData() {
-    const response = await apiUser(user?.id as string);
-    console.log(
-      "[Profile ID]>>",
-      JSON.stringify(response?.data?.Profile?.id, null, 2),
-    );
-
-    setData(response.data);
+    try {
+      const response = await apiUser(user?.id as string);
+      setData(response.data);
+    } catch (error: any) {
+      console.log("[ERROR onLoadData]", error?.message);
+      console.log("[ERROR Response]", error?.response?.data);
+      // Set data tetap agar UI tidak stuck di loading
+      setData(null);
+    }
   }
 
   const checkVersion = async () => {
-    const response = await apiVersion();
-    console.log("[Version] >>", JSON.stringify(response.data, null, 2));
+    try {
+      const response = await apiVersion();
+      console.log("[Version] >>", JSON.stringify(response.data, null, 2));
+    } catch (error: any) {
+      console.log("[ERROR checkVersion]", error?.message);
+    }
   };
 
   const onRefresh = useCallback(() => {
@@ -54,11 +66,6 @@ export default function Application() {
     setRefreshing(false);
   }, []);
 
-  // if (user && user?.termsOfServiceAccepted === false) {
-  //   console.log("User is not accept term service");
-  //   return <Redirect href={`/terms-agreement`} />;
-  // }
-
   if (data && data?.active === false) {
     console.log("User is not active");
     return (
@@ -91,17 +98,25 @@ export default function Application() {
       <Stack.Screen
         options={{
           title: `HIPMI`,
-          headerLeft: () => (
-            <Ionicons
-              name="search"
-              size={20}
-              color={MainColor.yellow}
-              onPress={() => {
-                router.push("/user-search");
-              }}
-            />
-          ),
-          headerRight: () => <HeaderBell />,
+          headerLeft: () =>
+            data ? (
+              <Ionicons
+                name="search"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => {
+                  router.push("/user-search");
+                }}
+              />
+            ) : (
+              <CustomSkeleton height={30} width={30} radius={100} />
+            ),
+          headerRight: () =>
+            data ? (
+              <HeaderBell />
+            ) : (
+              <CustomSkeleton height={30} width={30} radius={100} />
+            ),
         }}
       />
       <ViewWrapper
@@ -114,25 +129,51 @@ export default function Application() {
           />
         }
         footerComponent={
-          <TabSection
-
-            tabs={tabsHome({
-              acceptedForumTermsAt: data?.acceptedForumTermsAt,
-              profileId: data?.Profile?.id,
-            })}
-          />
+          data && data ? (
+            <TabSection
+              tabs={tabsHome({
+                acceptedForumTermsAt: data?.acceptedForumTermsAt,
+                profileId: data?.Profile?.id,
+              })}
+            />
+          ) : (
+            <View style={GStyles.tabBar}>
+              <View style={[GStyles.tabContainer, { paddingTop: 10 }]}>
+                {Array.from({ length: 4 }).map((e, index) => (
+                  <CustomSkeleton
+                    key={index}
+                    height={40}
+                    width={40}
+                    radius={100}
+                  />
+                ))}
+              </View>
+            </View>
+          )
         }
       >
         <StackCustom>
-          {/* <ButtonCustom onPress={() => router.push("./test-notifications")}>
-            Test Notif
-          </ButtonCustom> */}
-
           <Home_ImageSection />
 
-          <Home_FeatureSection />
+          {data && data ? (
+            <Home_FeatureSection />
+          ) : (
+            <View style={stylesHome.gridContainer}>
+              {Array.from({ length: 4 }).map((item, index) => (
+                <CustomSkeleton
+                  key={index}
+                  style={stylesHome.gridItem}
+                  radius={50}
+                />
+              ))}
+            </View>
+          )}
 
-          <Home_BottomFeatureSection />
+          {data ? (
+            <Home_BottomFeatureSection />
+          ) : (
+            <CustomSkeleton height={200} />
+          )}
         </StackCustom>
       </ViewWrapper>
     </>

app/(application)/(user)/portofolio/[id]/index.tsx

@@ -10,6 +10,7 @@ import {
 } from "@/components";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -64,6 +65,8 @@ export default function Portofolio() {
     setProfileId(response?.data?.Profile?.id);
   };
 
+
+
   return (
     <>
       {/* Header */}
@@ -87,7 +90,10 @@ export default function Portofolio() {
       />
       <ViewWrapper>
         {!data || !profileId ? (
-          <LoaderCustom />
+            <StackCustom>
+            <CustomSkeleton height={400} />
+            <CustomSkeleton height={300} />
+          </StackCustom>
         ) : (
           <StackCustom>
             <Portofolio_Data

app/(application)/(user)/profile/[id]/index.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { LoaderCustom } from "@/components";
+import { LoaderCustom, StackCustom } from "@/components";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import DrawerCustom from "@/components/Drawer/DrawerCustom";
@@ -43,7 +44,7 @@ export default function Profile() {
       onLoadUserByToken();
       isUserCheck();
       userData(token as string);
-    }, [id, token])
+    }, [id, token]),
   );
 
   const isUserCheck = () => {
@@ -69,7 +70,7 @@ export default function Profile() {
       const lastTwoByDate = response.data
         .sort(
           (a: any, b: any) =>
-            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
         ) // urut desc
         .slice(0, 2);
       setListPortofolio(lastTwoByDate);
@@ -99,7 +100,10 @@ export default function Profile() {
       {/* Main View */}
       <ViewWrapper>
         {!data || !dataToken ? (
-          <LoaderCustom />
+          <StackCustom>
+            <CustomSkeleton height={400} />
+            <CustomSkeleton height={200} />
+          </StackCustom>
         ) : (
           <>
             <ProfileSection data={data as any} />