akanjs 0.0.1 → 2.0.0-beta.0

package/webkit/bootCsr.tsx

@@ -0,0 +1,275 @@
+"use client";
+import {
+  csrContext,
+  DEFAULT_BOTTOM_INSET,
+  DEFAULT_TOP_INSET,
+  Device,
+  defaultPageState,
+  initAuth,
+  type PageConfig,
+  type PageState,
+  type PathRoute,
+  type Route,
+  type RouteGuide,
+  type RouteModule,
+  type RouteRender,
+  storage,
+} from "akanjs/client";
+import {
+  assertUniqueRoutePatterns,
+  Logger,
+  parseAkanI18nEnv,
+  parseBasePaths,
+  parseRouteModuleKey,
+  routeSegmentToTreePath,
+} from "akanjs/common";
+import { memo, type ReactNode, useRef } from "react"; 
+import * as ReactDOM from "react-dom/client";
+import { useCsrValues } from "./useCsrValues";
+import { useFetch } from "./useFetch";
+
+type RouteModuleWithConfig = RouteModule & { pageConfig?: PageConfig };
+
+declare global {
+  interface Window {
+    __AKAN_MOBILE_TARGET__?: { name: string; basePath?: string };
+  }
+}
+
+interface RootRenderLayerProps {
+  renders: RouteRender[];
+  index: number;
+  params: Record<string, string>;
+  searchParams: Record<string, string | string[]>;
+}
+const RootRenderLayer = memo(({ renders, index, params, searchParams }: RootRenderLayerProps) => {
+  const isLast = index >= renders.length - 1;
+  const children = isLast ? null : (
+    <RootRenderLayer renders={renders} index={index + 1} params={params} searchParams={searchParams} />
+  );
+  const routeRender = renders[index];
+  const resultRef = useRef<ReactNode | Promise<ReactNode> | null>(null);
+  if (resultRef.current === null) {
+    resultRef.current = routeRender?.render({ children, params, searchParams } as never) ?? null;
+  }
+  const { fulfilled, value: Layout } = useFetch(resultRef.current);
+  if (!fulfilled || !Layout) return <>{composeLoadingFallback(renders.slice(index), params)}</>;
+  return Layout;
+});
+
+function composeLoadingFallback(renders: RouteRender[], params: Record<string, string>): ReactNode {
+  let element: ReactNode = null;
+  for (let i = renders.length - 1; i >= 0; i--) {
+    const Loading = renders[i]?.Loading;
+    if (!Loading) continue;
+    element = Loading({ params, children: element } as never) as ReactNode;
+  }
+  return element;
+}
+
+export const bootCsr = async (context: Record<string, () => Promise<RouteModule>>) => {
+  const i18n = parseAkanI18nEnv();
+  window.document.body.style.overflow = "hidden";
+  const mobileBasePath = window.__AKAN_MOBILE_TARGET__?.basePath?.replace(/^\/+|\/+$/g, "");
+  const pathname = mobileBasePath && window.location.pathname === "/" ? `/${mobileBasePath}` : window.location.pathname;
+  if (pathname === "/404") return;
+
+  const [device, jwt] = await Promise.all([Device.load({ supportLanguages: i18n.locales }), storage.getItem("jwt")]);
+  if (!window.__AKAN_MOBILE_TARGET__ && !pathname.startsWith(`/${device.lang}`))
+    window.location.replace(`/${device.lang}${pathname}${window.location.search}${window.location.hash}`);
+
+  if (jwt) initAuth({ jwt });
+  Logger.verbose(`Set default language: ${device.lang}`);
+
+  const basePaths = process.env.AKAN_PUBLIC_BASE_PATHS ? parseBasePaths(process.env.AKAN_PUBLIC_BASE_PATHS) : null;
+  const currentBasePath = basePaths ? pathname.split("/")[2] : undefined;
+  if (currentBasePath && basePaths && !basePaths.includes(currentBasePath))
+    throw new Error(`Invalid path: ${pathname}`);
+  const baseLayoutPaths = ["/", "/:lang", ...(currentBasePath ? [`/:lang/${currentBasePath}`] : [])];
+  const otherBasePaths = basePaths?.filter((path) => path !== currentBasePath) ?? [];
+
+  const pages: { [key: string]: RouteModule } = {};
+  await Promise.all(
+    Object.entries(context).map(async ([key, value]) => {
+      const parsed = parseRouteModuleKey(key);
+      if (basePaths) {
+        const pageBasePath = parsed.sourceRouteSegments.find((segment) => !/^\(.+\)$/.test(segment));
+        if (pageBasePath && otherBasePaths.includes(pageBasePath)) return; 
+      }
+      const pageContent = await value();
+      validateRouteModuleExports(key, pageContent);
+      if (pageContent.default) pages[key] = pageContent;
+    }),
+  );
+  const getPageState = (csrConfig?: PageConfig) => {
+    const {
+      transition,
+      safeArea,
+      topInset,
+      bottomInset,
+      gesture,
+      cache,
+      topSafeAreaColor,
+      bottomSafeAreaColor,
+    }: PageConfig = csrConfig ?? {};
+    const pageState: PageState = {
+      transition: transition ?? "none",
+      topSafeArea:
+        safeArea === false || safeArea === "bottom" || device.info.platform === "android" ? 0 : device.topSafeArea,
+      bottomSafeArea:
+        safeArea === false || safeArea === "top" || device.info.platform === "android" ? 0 : device.bottomSafeArea,
+      topInset: topInset === true ? DEFAULT_TOP_INSET : topInset === false ? 0 : (topInset ?? 0),
+      bottomInset: bottomInset === true ? DEFAULT_BOTTOM_INSET : bottomInset === false ? 0 : (bottomInset ?? 0),
+      gesture: gesture ?? true,
+      cache: cache ?? false,
+      topSafeAreaColor: topSafeAreaColor,
+      bottomSafeAreaColor: bottomSafeAreaColor,
+    };
+    return pageState;
+  };
+
+  const routeMap = new Map<string, Route>();
+  routeMap.set("/", { path: "/", children: new Map() });
+  const pagePatterns: { key: string; pattern: string }[] = [];
+  for (const filePath of Object.keys(pages)) {
+    const parsed = parseRouteModuleKey(filePath);
+    if (parsed.kind === "page") pagePatterns.push({ key: filePath, pattern: parsed.pattern });
+    const pathSegments = ["/", ...parsed.routeSegments.map(routeSegmentToTreePath)];
+
+    const targetRouteMap = pathSegments.slice(0, -1).reduce((rMap: Map<string, Route>, path: string) => {
+      if (!rMap.has(path)) rMap.set(path, { path, children: new Map() });
+      const children = rMap.get(path)?.children;
+      if (!children) throw new Error("No children");
+      return children;
+    }, routeMap);
+    if (!targetRouteMap) continue;
+
+    const targetPath = pathSegments[pathSegments.length - 1];
+    if (!targetPath) continue;
+    const page = pages[filePath];
+    if (!page) continue;
+    const routeRender: RouteRender = { render: page.default as never, Loading: page.Loading as never };
+    targetRouteMap.set(targetPath, {
+
+      ...(targetRouteMap.get(targetPath) ?? { path: targetPath, children: new Map<string, Route>() }),
+      ...(parsed.kind === "layout"
+        ? { renderLayout: routeRender }
+        : {
+            renderPage: routeRender,
+            pageIncludesOwnLayout: parsed.leaf === "_index",
+            isSpecialRoute: parsed.isSpecialRoute,
+            pageState: getPageState((page as RouteModuleWithConfig).pageConfig),
+            csrConfig: (page as RouteModuleWithConfig).pageConfig,
+          }),
+    } as Route);
+  }
+  assertUniqueRoutePatterns(pagePatterns);
+  const getPathRoutes = (
+    route: Route,
+    parentRootLayouts: RouteRender[] = [],
+    parentLayouts: RouteRender[] = [],
+    parentPaths: string[] = [],
+  ): PathRoute[] => {
+    const parentPath = parentPaths.filter((path) => path !== "/").join("");
+    const isRouteGroup = /^\/\(.*\)$/.test(route.path);
+    const currentPathSegment = isRouteGroup ? "" : route.path;
+    const path = parentPath + currentPathSegment;
+    const isRoot = !isRouteGroup && baseLayoutPaths.includes(path);
+    const pathSegments = [...parentPaths, ...(currentPathSegment ? [currentPathSegment] : [])];
+    const currentRootLayout = isRoot && route.renderLayout ? route.renderLayout : null;
+    const currentLayout = !isRoot && route.renderLayout ? route.renderLayout : null;
+    const renderRootLayouts = [...parentRootLayouts, ...(currentRootLayout ? [currentRootLayout] : [])];
+    const renderLayouts = [...parentLayouts, ...(currentLayout ? [currentLayout] : [])];
+    const pageRenderRootLayouts =
+      route.pageIncludesOwnLayout === false && currentRootLayout ? parentRootLayouts : renderRootLayouts;
+    const pageRenderLayouts = route.pageIncludesOwnLayout === false && currentLayout ? parentLayouts : renderLayouts;
+    return [
+      ...(route.renderPage
+        ? [
+            {
+              path,
+              pathSegments,
+              renderPage: route.renderPage,
+              renderRootLayouts: pageRenderRootLayouts,
+              renderLayouts: pageRenderLayouts,
+              isSpecialRoute: route.isSpecialRoute,
+              pageState: route.pageState ?? defaultPageState,
+            },
+          ]
+        : []),
+      ...(route.children.size
+        ? [...route.children.values()].flatMap((child) =>
+            getPathRoutes(child, renderRootLayouts, renderLayouts, pathSegments),
+          )
+        : []),
+    ];
+  };
+  const rootRoute = routeMap.get("/");
+  if (!rootRoute) throw new Error("No root route");
+  const pathRoutes = getPathRoutes(rootRoute);
+  const routeGuide: RouteGuide = { pathSegment: "/", children: {} };
+  pathRoutes.forEach((pathRoute) => {
+    const pathSegments = pathRoute.pathSegments.slice(1);
+    pathSegments.reduce((routeGuide: RouteGuide, pathSegment: string, index: number) => {
+      const child = routeGuide.children[pathSegment] as RouteGuide | undefined;
+      const next: RouteGuide = {
+        ...(child ?? {}),
+        pathSegment,
+        ...(index === pathSegments.length - 1 ? { pathRoute } : {}),
+        children: (child?.children as { [key: string]: RouteGuide } | undefined) ?? {},
+      } as RouteGuide;
+      routeGuide.children[pathSegment] = next;
+      return next;
+    }, routeGuide);
+  });
+  const RouterProvider = () => {
+    const csrValues = useCsrValues(routeGuide, pathRoutes);
+    const { location } = csrValues;
+    return (
+      <csrContext.Provider value={csrValues}>
+        {location.pathRoute.renderRootLayouts.length > 0 ? (
+          <RootRenderLayer
+            renders={location.pathRoute.renderRootLayouts}
+            index={0}
+            params={location.params}
+            searchParams={location.searchParams}
+          />
+        ) : null}
+      </csrContext.Provider>
+    );
+  };
+
+  const el = document.getElementById("root");
+  if (!el) throw new Error("No root element");
+  const root = ReactDOM.createRoot(el);
+  root.render(<RouterProvider />);
+};
+
+function validateRouteModuleExports(key: string, mod: RouteModule) {
+  const parsed = parseRouteModuleKey(key);
+  const allowed =
+    parsed.kind === "page"
+      ? new Set(["default", "pageConfig", "head", "generateHead", "Loading"])
+      : parsed.isInternalRootLayout
+        ? new Set([
+            "default",
+            "head",
+            "generateHead",
+            "fonts",
+            "manifest",
+            "theme",
+            "reconnect",
+            "layoutStyle",
+            "gaTrackingId",
+            "Loading",
+          ])
+        : new Set(["default", "head", "generateHead", "Loading"]);
+  for (const exportName of Object.keys(mod)) {
+    if (!allowed.has(exportName)) {
+      throw new Error(`[route-convention] unsupported export "${exportName}" in ${key}`);
+    }
+  }
+  if ("head" in mod && "generateHead" in mod) {
+    throw new Error(`[route-convention] head and generateHead cannot both be exported in ${key}`);
+  }
+}

package/webkit/createRobotPage.ts

@@ -0,0 +1,15 @@
+export const createRobotPage = (
+  clientHttpUri: string,
+  config?: { rules: { userAgent: string; allow: string; disallow: string }; sitemap: string },
+): { rules: { userAgent: string; allow: string; disallow: string }; sitemap: string } => {
+  return {
+    ...(config ?? {}),
+    rules: {
+      userAgent: "*",
+      allow: "/",
+      disallow: "/admin/",
+      ...(config?.rules ?? {}),
+    },
+    sitemap: `${clientHttpUri}/sitemap.xml`,
+  };
+};

package/webkit/createSitemapPage.ts

@@ -0,0 +1,4 @@
+const lastModified = new Date();
+export const createSitemapPage = (clientHttpUri: string, paths: string[]): { url: string; lastModified: Date }[] => {
+  return paths.map((path) => ({ url: `${clientHttpUri}${path}`, lastModified }));
+};

package/webkit/index.ts

@@ -0,0 +1,19 @@
+export { bootCsr } from "./bootCsr";
+export { createRobotPage } from "./createRobotPage";
+export { createSitemapPage } from "./createSitemapPage";
+export { lazy } from "./lazy";
+export type * from "./types";
+export { useCamera } from "./useCamera";
+export { useCodepush } from "./useCodepush";
+export { useContact } from "./useContact";
+
+export { useCsrValues } from "./useCsrValues";
+export { useDebounce } from "./useDebounce";
+export { useFetch, useFetchFn } from "./useFetch";
+export { useGeoLocation } from "./useGeoLocation";
+export { useInterval } from "./useInterval";
+export { usePushNoti } from "./usePushNoti";
+
+export { useHistory } from "./useHistory";
+export { useLocation } from "./useLocation";
+export { useThrottle } from "./useThrottle";

package/webkit/lazy.tsx

@@ -0,0 +1,37 @@
+import type { ComponentType, ReactNode } from "react";
+
+import * as React from "react";
+import { forwardRef, lazy as reactLazy } from "react";
+
+const isServer = typeof window === "undefined";
+
+type LazyOption = { ssr?: boolean; loading?: () => ReactNode };
+type LazyProps = Record<string, unknown>;
+type LoadedOf<Loaded> = Loaded extends { default: infer T } ? T : Loaded;
+
+/** React lazy wrapper with Akan's `ssr: false` server stub and client mount gate. */
+export const lazy = <Loaded,>(loader: () => Promise<Loaded>, option?: LazyOption): LoadedOf<Loaded> => {
+  const ssrFalse = option?.ssr === false;
+  const renderFallback = (): ReactNode => (option?.loading ? option.loading() : null);
+  if (isServer && ssrFalse) {
+    const Stub = forwardRef<unknown, LazyProps>(() => <>{renderFallback()}</>);
+    Stub.displayName = "LazySsrFalseStub";
+    return Stub as unknown as LoadedOf<Loaded>;
+  }
+  const LazyInner = reactLazy(loader as () => Promise<{ default: ComponentType<LazyProps> }>);
+
+  if (!ssrFalse) {
+    const Wrapper = forwardRef<unknown, LazyProps>((props, ref) => <LazyInner {...props} ref={ref as never} />);
+    Wrapper.displayName = "LazyWrapper";
+    return Wrapper as unknown as LoadedOf<Loaded>;
+  }
+
+  const Gate = forwardRef<unknown, LazyProps>((props, ref) => {
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => setMounted(true), []);
+    if (!mounted) return <>{renderFallback()}</>;
+    return <LazyInner {...props} ref={ref as never} />;
+  });
+  Gate.displayName = "LazySsrFalseGate";
+  return Gate as unknown as LoadedOf<Loaded>;
+};

package/webkit/types.ts

@@ -0,0 +1,7 @@
+export type LoginAuth = "user" | "admin" | "public";
+export interface LoginForm {
+  auth: LoginAuth;
+  redirect?: string;
+  unauthorize?: string;
+  jwt?: string | null;
+}

package/webkit/useCamera.tsx

@@ -0,0 +1,99 @@
+"use client";
+import type { PermissionStatus } from "@capacitor/camera";
+import { Device, loadCapacitorCamera } from "akanjs/client";
+import { useEffect, useState } from "react";
+import { isMobile } from "react-device-detect";
+
+/** Capacitor camera/photos hook with permission checks and app-settings fallback. */
+export const useCamera = () => {
+  const [permissions, setPermissions] = useState<PermissionStatus>({ camera: "prompt", photos: "prompt" });
+
+  /**
+   * 최초로 킬 경우 권한은 prompt 상태이다.
+   * prompt 상태일 경우 권한을 요청한다.
+   * 권한이 denied 상태일 경우 설정으로 이동한다.
+   * 이후 state의 permission을 업데이트해야한다.
+   *
+   */
+  const checkPermission = async (type: "photos" | "camera" | "all") => {
+    try {
+      const { Camera } = await loadCapacitorCamera();
+      if (type === "photos") {
+        if (permissions.photos === "prompt") {
+          const { photos } = await Camera.requestPermissions();
+          setPermissions((prev) => ({ ...prev, photos }));
+        } else if (permissions.photos === "denied") {
+          location.assign("app-settings:");
+          return;
+        }
+      } else if (type === "camera") {
+        if (permissions.camera === "prompt") {
+          const { camera } = await Camera.requestPermissions();
+          setPermissions((prev) => ({ ...prev, camera }));
+        } else if (permissions.camera === "denied") {
+          location.assign("app-settings:");
+          return;
+        }
+      } else {
+        if (permissions.camera === "prompt" || permissions.photos === "prompt") {
+          const permissions = await Camera.requestPermissions();
+          setPermissions(permissions);
+        } else if (permissions.camera === "denied" || permissions.photos === "denied") {
+          location.assign("app-settings:");
+          return;
+        }
+      }
+    } catch {
+    }
+  };
+
+  const getPhoto = async (src: "prompt" | "camera" | "photos" = "prompt") => {
+    const { Camera, CameraResultType, CameraSource } = await loadCapacitorCamera();
+    const source =
+      Device.getDevice().info.platform !== "web"
+        ? src === "prompt"
+          ? CameraSource.Prompt
+          : src === "camera"
+            ? CameraSource.Camera
+            : CameraSource.Photos
+        : CameraSource.Photos;
+    const permission = src === "prompt" ? "all" : src === "camera" ? "camera" : "photos";
+    await checkPermission(permission);
+    try {
+      const photo = await Camera.getPhoto({
+        quality: 100,
+        source,
+        allowEditing: false,
+        resultType: CameraResultType.DataUrl,
+        promptLabelHeader: "프로필 사진을 올려주세요",
+        promptLabelPhoto: "앨범에서 선택하기",
+        promptLabelPicture: "사진 찍기",
+        promptLabelCancel: "취소",
+      });
+      return photo;
+    } catch (e) {
+      if (e === "User cancelled photos app") return;
+    }
+  };
+
+  const pickImage = async () => {
+    await checkPermission("photos");
+    const { Camera } = await loadCapacitorCamera();
+    const photo = await Camera.pickImages({
+      quality: 90,
+    });
+
+    return photo;
+  };
+
+  useEffect(() => {
+    void (async () => {
+      if (isMobile) {
+        const { Camera } = await loadCapacitorCamera();
+        const permissions = await Camera.checkPermissions();
+        setPermissions(permissions);
+      }
+    })();
+  }, []);
+  return { permissions, getPhoto, pickImage, checkPermission };
+};

package/webkit/useCodepush.tsx

@@ -0,0 +1,99 @@
+"use client";
+import { loadCapacitorApp, loadCapacitorDevice, loadCapacitorUpdater } from "akanjs/client";
+import { HttpClient, mergeVersion, splitVersion } from "akanjs/common";
+import type { ProtoAppInfo, ProtoFile } from "akanjs/constant";
+import { useState } from "react";
+
+export const useCodepush = ({ serverUrl }: { serverUrl: string }) => {
+  const [update, setUpdate] = useState(false);
+  const [version, setVersion] = useState("");
+
+  const initialize = async () => {
+    const { CapacitorUpdater } = await loadCapacitorUpdater();
+    await CapacitorUpdater.notifyAppReady();
+  };
+  const checkNewRelease = async () => {
+    const [{ App }, { Device }, { CapacitorUpdater }] = await Promise.all([
+      loadCapacitorApp(),
+      loadCapacitorDevice(),
+      loadCapacitorUpdater(),
+    ]);
+    
+    const info = await Device.getInfo();
+    const app = await App.getInfo();
+    const pluginVersion = await CapacitorUpdater.getPluginVersion();
+    const { deviceId } = await CapacitorUpdater.getDeviceId();
+    const { bundle: version, native } = await CapacitorUpdater.current();
+    const builtInversion = await CapacitorUpdater.getBuiltinVersion();
+    const appId = app.id;
+    const platform = info.platform;
+
+    window.alert(
+      `getBuildinVersion:${builtInversion.version}\ncurrent.bundle:${version.version}\ncurrennt.native:${native}`,
+    );
+    /**
+     *  "version_name": "builtin",
+     *   "version_code": "1",
+     *   "app_id": "com.lu.app",
+     *   "plugin_version": "5.6.9",
+     *   "version_build": "1.0",
+     *   "is_prod": true,
+     *   "version_os": "17.0.1",
+     *   "is_emulator": true,
+     *   "custom_id": "",
+     *   "device_id": "C77000B1-7D28-4697-ADE0-74452F47C350",
+     *   "platform": "ios",
+     *   "defaultChannel": ""
+     */
+    const { major, minor, patch } = splitVersion(version.version === "builtin" ? app.version : version.version);
+    const appName = process.env.AKAN_PUBLIC_APP_NAME ?? "";
+
+    const appInfo: ProtoAppInfo = {
+      appId,
+      appName,
+      deviceId: deviceId,
+      platform: platform as "ios" | "android",
+      branch: process.env.AKAN_PUBLIC_ENV ?? "debug",
+      isEmulator: info.isVirtual,
+      major: parseInt(major),
+      minor: parseInt(minor),
+      patch: parseInt(patch),
+      buildNum: app.build, //앱내 빌드시 버전 횟수 모르면 고한테 물어보기
+      versionOs: info.osVersion,
+    };
+    
+    const url = serverUrl.replace("lu", "akasys");
+    const httpClient = new HttpClient(url);
+    const release = await httpClient.post<(ProtoAppInfo & { appBuild: string }) | null>("/release/codepush", {
+      data: { ...appInfo },
+    });
+    if (!release) return;
+    const file = await httpClient.get<ProtoFile>(`/file/file/${release.appBuild}`);
+
+    return { release: release, bundleFile: file };
+  };
+
+  const codepush = async () => {
+    
+    const newRelease = await checkNewRelease();
+    if (!newRelease) return;
+    const { release, bundleFile } = newRelease;
+    const { CapacitorUpdater } = await loadCapacitorUpdater();
+    setUpdate(true);
+    const bundle = await CapacitorUpdater.download({
+      url: bundleFile.url,
+      version: mergeVersion(release.major, release.minor, release.patch),
+    });
+    
+    await CapacitorUpdater.set(bundle);
+  };
+  const getVersion = async () => {
+    const { CapacitorUpdater } = await loadCapacitorUpdater();
+    return await CapacitorUpdater.getBuiltinVersion();
+  };
+
+  const statManager = async () => {
+  };
+
+  return { update, version, initialize, checkNewRelease, codepush, statManager };
+};

package/webkit/useContact.tsx

@@ -0,0 +1,48 @@
+"use client";
+import type { PermissionStatus } from "@capacitor-community/contacts";
+import { Device, loadCapacitorContacts } from "akanjs/client";
+import { useEffect, useState } from "react";
+
+/** Capacitor contacts hook with permission checks and contact loading helpers. */
+export const useContact = () => {
+  const [permissions, setPermissions] = useState<PermissionStatus>({ contacts: "prompt" });
+
+  /**
+   * 최초로 킬 경우 권한은 prompt 상태이다.
+   * prompt 상태일 경우 권한을 요청한다.
+   * 권한이 denied 상태일 경우 설정으로 이동한다.
+   * 이후 state의 permission을 업데이트해야한다.
+   *
+   */
+  const checkPermission = async () => {
+    try {
+      const { Contacts } = await loadCapacitorContacts();
+      if (permissions.contacts === "prompt") {
+        const { contacts } = await Contacts.requestPermissions();
+        setPermissions((prev) => ({ ...prev, contacts }));
+      } else if (permissions.contacts === "denied") {
+        location.assign("app-settings:");
+        return;
+      }
+    } catch {
+    }
+  };
+
+  const getContacts = async () => {
+    await checkPermission();
+    const { Contacts } = await loadCapacitorContacts();
+    const { contacts } = await Contacts.getContacts({ projection: { name: true, phones: true } });
+    return contacts;
+  };
+
+  useEffect(() => {
+    void (async () => {
+      if (Device.getDevice().info.platform === "web") return;
+      const { Contacts } = await loadCapacitorContacts();
+      const permissions = await Contacts.checkPermissions();
+      setPermissions(permissions);
+    })();
+  }, []);
+
+  return { permissions, getContacts, checkPermission };
+};