fixing so much trouble

libs/utils/src/constants/index.ts

@@ -0,0 +1 @@
+export * from './permissions';

libs/utils/src/constants/permissions.ts

@@ -0,0 +1,40 @@
+export const PERMISSIONS = {
+  USERS: {
+    READ_LIST: 'Read List Users',
+    READ_DETAIL: 'Read Detail Users',
+    CREATE: 'Create Users',
+    UPDATE: 'Update Users',
+    DELETE: 'Delete Users',
+    ACTIVATE: 'Activate Users',
+  },
+  ROLES: {
+    READ_LIST: 'Read List Roles',
+    READ_DETAIL: 'Read Detail Roles',
+    CREATE: 'Create Roles',
+    UPDATE: 'Update Roles',
+    DELETE: 'Delete Roles',
+  },
+  PERMISSIONS: {
+    READ_LIST: 'Read List Permissions',
+    READ_DETAIL: 'Read Detail Permissions',
+    CREATE: 'Create Permissions',
+    UPDATE: 'Update Permissions',
+    DELETE: 'Delete Permissions',
+  },
+  GACHA_CLAIMS: {
+    CREATE: 'Create Gacha Claims',
+    READ_DETAIL: 'Read Detail Gacha Claims',
+  },
+  GACHA_ITEMS: {
+    READ_LIST: 'Read List Gacha Items',
+    READ_DETAIL: 'Read Detail Gacha Items',
+    CREATE: 'Create Gacha Items',
+    UPDATE: 'Update Gacha Items',
+    DELETE: 'Delete Gacha Items',
+  },
+  GACHA_ROLLS: {
+    READ_DETAIL: 'Read Detail Gacha Rolls',
+    CREATE: 'Create Gacha Rolls',
+    EXECUTE: 'Execute Gacha Rolls',
+  },
+};

libs/utils/src/cookies/index.ts

@@ -0,0 +1,36 @@
+import Cookies from 'js-cookie';
+
+type TTokenItem = {
+  access_token: string;
+  refresh_token: string;
+};
+
+const TOKEN_KEY = 'token';
+
+type TStoredToken =
+  | {
+      token?: TTokenItem;
+    }
+  | undefined;
+
+export const SessionToken = {
+  set: (val: TStoredToken) => {
+    Cookies.set(TOKEN_KEY, JSON.stringify(val), {
+      secure: true,
+      sameSite: 'Strict',
+      expires: 7,
+    });
+  },
+  get: (): TStoredToken => {
+    const token = Cookies.get(TOKEN_KEY);
+    if (!token) return undefined;
+    try {
+      return JSON.parse(token);
+    } catch {
+      return undefined;
+    }
+  },
+  remove: () => {
+    Cookies.remove(TOKEN_KEY);
+  },
+};

libs/utils/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './use-query-state';
-export * from './use-session';
+export * from './use-auth-store';
 export * from './use-modal-login';
+export * from './use-session';

libs/utils/src/hooks/use-auth-store.ts

@@ -0,0 +1,47 @@
+import { create } from 'zustand';
+import { TLoginItem } from '@imphnen-frontend-service/service';
+import { SessionToken } from '../cookies';
+import { SessionUser } from '../local-storage';
+
+export enum ESessionStatus {
+  Authenticated = 'authenticated',
+  Authenticating = 'authenticating',
+  Unauthenticated = 'unauthenticated',
+}
+
+type SessionState = {
+  isLoading: boolean;
+  session?: TLoginItem;
+  status?: ESessionStatus;
+  setLoading: (val: boolean) => void;
+  setSession: (payload: TLoginItem) => void;
+  clearSession: () => void;
+};
+
+export const useAuthStore = create<SessionState>((set) => {
+  const session = SessionToken.get();
+  const user = SessionUser.get();
+  const isAuthenticated = !!session;
+
+  return {
+    isLoading: false,
+    session: isAuthenticated ? { ...session, ...user } : undefined,
+    status: isAuthenticated
+      ? ESessionStatus.Authenticated
+      : ESessionStatus.Unauthenticated,
+    setLoading: (val) => set({ isLoading: val }),
+    setSession: (data) => {
+      SessionToken.set({ token: data.token });
+      SessionUser.set(data.user);
+      set({
+        session: data,
+        status: ESessionStatus.Authenticated,
+      });
+    },
+    clearSession: () => {
+      SessionToken.remove();
+      SessionUser.remove();
+      set({ session: undefined, status: ESessionStatus.Unauthenticated });
+    },
+  };
+});

libs/utils/src/hooks/use-session.ts

@@ -1,22 +1,37 @@
-import { SessionToken, SessionUser } from '../local-storage';
+import { TLoginRequest, usePostLogin } from '@imphnen-frontend-service/service';
+import { useAuthStore } from './';
+import { toast } from 'sonner';
+import { useNavigate } from 'react-router';
 
 export const useSession = () => {
-  const session = {
-    user: SessionUser.get(),
-    token: SessionToken.get(),
+  const navigate = useNavigate();
+  const { mutate, isPending } = usePostLogin();
+  const { setLoading, setSession, clearSession, session } = useAuthStore();
+  const signIn = (payload: TLoginRequest) => {
+    setLoading(true);
+    mutate(payload, {
+      onSuccess: (data) => {
+        toast.success('Login sukses');
+        setSession(data.data);
+        navigate(0);
+      },
+      onError: (err) => {
+        toast.error(
+          err?.response?.data?.message ??
+            'Terjadi Kesalahan yang tidak diketahui'
+        );
+        clearSession();
+      },
+    });
   };
-
-  const isAuthenticated = !!session.token?.access_token;
-
   const signOut = () => {
-    SessionUser.remove();
-    SessionToken.remove();
-    window.location.reload();
+    clearSession();
+    navigate(0);
   };
-
   return {
-    isAuthenticated,
     session,
+    signIn,
     signOut,
+    isLoading: isPending,
   };
 };

libs/utils/src/index.ts

@@ -3,3 +3,6 @@ export * from './react-router';
 export * from './tailwind-merge';
 export * from './hooks';
 export * from './local-storage';
+export * from './cookies';
+export * from './session';
+export * from './constants';

libs/utils/src/local-storage/index.ts

@@ -20,41 +20,16 @@ type TUserItem = {
   email: string;
   fullname: string;
   gender: string;
-  identity_number: string;
   is_active: boolean;
-  is_profile_completed: boolean;
   phone_number: string;
-  referral_code: string;
-  referred_by: string;
-  religion: string;
-  student_type: string;
   role: TRoleItem;
 };
 
 export const SessionUser = {
-  set: (val: TUserItem) => localStorage.setItem('users', JSON.stringify(val)),
+  set: (val?: TUserItem) => localStorage.setItem('users', JSON.stringify(val)),
   get: (): TUserItem | undefined => {
     const users = localStorage.getItem('users');
     return users ? JSON.parse(users) : undefined;
   },
   remove: () => localStorage.removeItem('users'),
 };
-
-export const SessionToken = {
-  set: (val: { access_token: string; refresh_token: string }) => {
-    localStorage.setItem('access_token', val.access_token);
-    localStorage.setItem('refresh_token', val.refresh_token);
-  },
-  get: ():
-    | { access_token?: string | null; refresh_token?: string | null }
-    | undefined => {
-    return {
-      access_token: localStorage.getItem('access_token'),
-      refresh_token: localStorage.getItem('refresh_token'),
-    };
-  },
-  remove: () => {
-    localStorage.removeItem('access_token');
-    localStorage.removeItem('refresh_token');
-  },
-};

libs/utils/src/react-router/file-based-routing.tsx

@@ -1,15 +1,22 @@
-import { lazy, LazyExoticComponent, ReactElement } from 'react';
+import { lazy, LazyExoticComponent, ReactNode } from 'react';
 import { ActionFunction, LoaderFunction, RouteObject } from 'react-router';
 
+type TPermissionItem = {
+  id: string;
+  name: string;
+  created_at: string;
+  updated_at: string;
+};
+
 interface PageModuleExports {
-  default: () => ReactElement;
+  default: () => ReactNode;
   loader?: LoaderFunction;
   action?: ActionFunction;
   permissions?: Array<string>;
 }
 
 interface LoadingModuleExports {
-  default: () => ReactElement;
+  default: () => ReactNode;
 }
 
 interface RouteHandle {
@@ -38,7 +45,6 @@ export function convertPagesToRoute(
       filePath,
       loadingFiles
     );
-
     const route = createRoute({
       PageComponent: page,
       LoadingComponent: loadingComponent,
@@ -51,6 +57,20 @@ export function convertPagesToRoute(
         const result = (await importer()) as PageModuleExports;
         return 'loader' in result ? result.loader?.(args) : null;
       },
+      async guard() {
+        const result = (await importer()) as PageModuleExports;
+        const localStoragePermission = localStorage.getItem('permissions');
+        const permissions: TPermissionItem[] | undefined =
+          localStoragePermission
+            ? JSON.parse(localStoragePermission)
+            : undefined;
+        return 'permissions' in result
+          ? result.permissions?.every(
+              (permission) =>
+                permissions?.some((item) => permission === item.name) || false
+            ) || false
+          : true;
+      },
     });
     routes = mergeRoutes(routes, route);
   });
@@ -62,19 +82,14 @@ function findMatchingLoadingComponent(
   loadingFiles: Record<string, () => Promise<unknown>>
 ) {
   const loadingPath = filePath.replace(/(page|layout)\.tsx$/, 'loading.tsx');
-
   const groupMatch = filePath.match(/\([^/]+\//);
   const groupLoadingPath = groupMatch ? `/${groupMatch[0]}loading.tsx` : null;
-
   const globalLoadingPath = './app/loading.tsx';
-
   const loader =
     loadingFiles[loadingPath] ||
     (groupLoadingPath && loadingFiles[groupLoadingPath]) ||
     loadingFiles[globalLoadingPath];
-
   if (!loader) return undefined;
-
   return lazy(loader as () => Promise<LoadingModuleExports>);
 }
 
@@ -86,68 +101,110 @@ function mergeRoutes(
     throw new Error(
       `Paths do not match: "${target.path}" and "${source.path}"`
     );
+  target.children = target.children || [];
+  if (source.handle?.pageType === 'layout') {
+    return handleLayoutMerge(target, source);
+  }
+  if (source.handle?.pageType === 'page') {
+    return handlePageMerge(target, source);
+  }
+  if (source.children && source.children.length > 0) {
+    if (target.handle?.pageType === 'page') {
+      if (!target.children?.some((child) => child.index)) {
+        target.children = target.children || [];
+        target.children.unshift({
+          index: true,
+          element: target.element,
+          HydrateFallback: target.HydrateFallback,
+          action: target.action,
+          loader: target.loader,
+          handle: target.handle,
+          errorElement: target.errorElement,
+        });
+      }
+      delete target.element;
+      delete target.action;
+      delete target.loader;
+      delete target.handle;
+    }
+    mergeChildRoutes(target, source);
+  }
+  return target;
+}
 
+export function mergeChildRoutes(
+  target: ExtendedRouteObject,
+  source: ExtendedRouteObject
+): void {
+  if (!source.children) return;
   if (!target.children) {
     target.children = [];
   }
+  source.children.forEach((sourceChild) => {
+    const matchingChild = target.children!.find(
+      (targetChild) => targetChild.path === sourceChild.path
+    );
 
-  if (source.handle?.pageType === 'layout') {
-    if (!target.element) {
-      target.element = source.element;
-      target.HydrateFallback = source.HydrateFallback;
-      target.action = source.action;
-      target.loader = source.loader;
-      target.handle = source.handle;
-      target.errorElement = source.errorElement;
-      target.children = target.children ?? [];
-    } else if (target.handle?.pageType === 'page') {
-      target = swapTargetRouteAsIndexRouteAndUpdateWithRoute(target, source);
+    if (matchingChild) {
+      mergeRoutes(matchingChild, sourceChild);
+    } else {
+      target.children!.push(sourceChild);
     }
-    return target;
-  }
+  });
+}
 
-  if (
-    source.handle?.pageType === 'page' &&
-    !target.children.some((child) => child.index)
-  ) {
-    target.children.unshift({
-      index: true,
+export function handleLayoutMerge(
+  target: ExtendedRouteObject,
+  source: ExtendedRouteObject
+): ExtendedRouteObject {
+  if (!target.element) {
+    Object.assign(target, {
       element: source.element,
       HydrateFallback: source.HydrateFallback,
       action: source.action,
       loader: source.loader,
       handle: source.handle,
+      errorElement: source.errorElement,
     });
-    return target;
+  } else if (target.handle?.pageType === 'page') {
+    target = swapTargetRouteAsIndexRouteAndUpdateWithRoute(target, source);
   }
-
-  if (
-    target.handle?.pageType === 'layout' &&
-    source.handle?.pageType === 'page'
-  ) {
-    target = addRouteAsIndexRouteForTargetRoute(target, source);
-    return target;
-  }
-
-  if (source.children) {
-    target.children = target.children ?? [];
-    source.children.forEach((sourceChild) => {
-      const matchingChild = target.children?.find(
-        (targetChild) => targetChild.path === sourceChild.path
-      );
-      if (matchingChild) mergeRoutes(matchingChild, sourceChild);
-      else target.children?.push(sourceChild);
-    });
-  }
-
   return target;
 }
 
-function swapTargetRouteAsIndexRouteAndUpdateWithRoute(
+export function handlePageMerge(
   target: ExtendedRouteObject,
-  route: ExtendedRouteObject
+  source: ExtendedRouteObject
 ): ExtendedRouteObject {
-  target.children = target.children ?? [];
+  if (!target.children) {
+    target.children = [];
+  }
+  if (
+    !target.children.some((child) => child.index) ||
+    target.handle?.pageType === 'layout'
+  ) {
+    if (target.handle?.pageType === 'layout') {
+      addRouteAsIndexRouteForTargetRoute(target, source);
+    } else {
+      target.children.unshift({
+        index: true,
+        element: source.element,
+        HydrateFallback: source.HydrateFallback,
+        action: source.action,
+        loader: source.loader,
+        handle: source.handle,
+        errorElement: source.errorElement,
+      });
+    }
+  }
+  return target;
+}
+
+export function swapTargetRouteAsIndexRouteAndUpdateWithRoute(
+  target: ExtendedRouteObject,
+  layout: ExtendedRouteObject
+): ExtendedRouteObject {
+  target.children = target.children || [];
   target.children.push({
     index: true,
     element: target.element,
@@ -157,38 +214,38 @@ function swapTargetRouteAsIndexRouteAndUpdateWithRoute(
     handle: target.handle,
     errorElement: target.errorElement,
   });
-
-  target.element = route.element;
-  target.HydrateFallback = route.HydrateFallback;
-  target.action = route.action;
-  target.loader = route.loader;
-  target.handle = route.handle;
-  target.errorElement = route.errorElement;
-
+  Object.assign(target, {
+    element: layout.element,
+    HydrateFallback: layout.HydrateFallback,
+    action: layout.action,
+    loader: layout.loader,
+    handle: layout.handle,
+    errorElement: layout.errorElement,
+  });
   return target;
 }
 
-function addRouteAsIndexRouteForTargetRoute(
+export function addRouteAsIndexRouteForTargetRoute(
   target: ExtendedRouteObject,
-  route: ExtendedRouteObject
+  page: ExtendedRouteObject
 ): ExtendedRouteObject {
-  target.children = target.children ?? [];
+  target.children = target.children || [];
   target.children.push({
     index: true,
-    element: route.element,
-    HydrateFallback: route.HydrateFallback,
-    action: route.action,
-    loader: route.loader,
-    handle: route.handle,
-    errorElement: route.errorElement,
+    element: page.element,
+    HydrateFallback: page.HydrateFallback,
+    action: page.action,
+    loader: page.loader,
+    handle: page.handle,
+    errorElement: page.errorElement,
   });
   return target;
 }
 
 function createRoute(args: {
   segments: string[];
-  PageComponent: LazyExoticComponent<() => ReactElement>;
-  LoadingComponent?: LazyExoticComponent<() => ReactElement>;
+  PageComponent: LazyExoticComponent<() => ReactNode>;
+  LoadingComponent?: LazyExoticComponent<() => ReactNode>;
   loader?: LoaderFunction;
   action?: ActionFunction;
   guard?: () => Promise<boolean>;
@@ -196,21 +253,24 @@ function createRoute(args: {
   const [current, ...rest] = args.segments;
   const [cleanPath, pageType] = current.split(separator);
   const route: ExtendedRouteObject = { path: cleanPath };
-
   if (pageType === 'page' || pageType === 'layout') {
     route.element = <args.PageComponent />;
     route.HydrateFallback =
       args.LoadingComponent ?? (() => <div>Loading...</div>);
     route.action = args.action;
     route.loader = async (...props) => {
+      if (!(await args.guard?.())) {
+        throw new Response('Forbidden', {
+          status: 403,
+          statusText: 'Forbidden',
+        });
+      }
       return args.loader?.(...props);
     };
     route.handle = { pageType: pageType as 'layout' | 'page' };
   }
-
   if (rest.length > 0) {
     const nextSegment = rest[0].split(separator)[0];
-
     if (nextSegment === 'update' || nextSegment === 'edit') {
       return {
         path: `${cleanPath}/${nextSegment}`,
@@ -221,20 +281,16 @@ function createRoute(args: {
         handle: { pageType: pageType as 'layout' | 'page' },
       };
     }
-
     const childRoute = createRoute({ ...args, segments: rest });
-
     if (!route.children) {
       route.children = [];
     }
-
     if (cleanPath.startsWith(':')) {
       route.children.unshift(childRoute);
     } else {
       route.children.push(childRoute);
     }
   }
-
   return route;
 }
 
@@ -258,7 +314,6 @@ export function getRouteSegmentsFromFilePath(
       if (segment.startsWith('[')) return getParamFromSegment(segment);
       return segment;
     });
-
   return getRouteSegments(segments[0], segments, transformer);
 }
 
@@ -306,7 +361,7 @@ export function addErrorElementToRoutes(
       (_, prevSegment) => prevSegment
     );
     const ErrorBoundary = lazy(
-      importer as () => Promise<{ default: () => ReactElement }>
+      importer as () => Promise<{ default: () => ReactNode }>
     );
     setRoute(segments, routes, (route) => {
       route.errorElement = <ErrorBoundary />;
@@ -325,7 +380,7 @@ export function add404PageToRoutesChildren(
       (_, prevSegment) => prevSegment
     );
     const NotFound = lazy(
-      importer as () => Promise<{ default: () => ReactElement }>
+      importer as () => Promise<{ default: () => ReactNode }>
     );
     setRoute(segments, routes, (route) => {
       if (route.children) {
@@ -340,9 +395,7 @@ export function add404PageToRoutesChildren(
           action: tempRoute.action,
           loader: tempRoute.loader,
         });
-
         route.children.push({ path: '*', element: <NotFound /> });
-
         delete route.element;
         delete route.action;
         delete route.loader;
@@ -352,7 +405,7 @@ export function add404PageToRoutesChildren(
   });
 }
 
-function set404NonPage(routes: RouteObject, notFoundElement: ReactElement) {
+function set404NonPage(routes: RouteObject, notFoundElement: ReactNode) {
   if (
     routes.path &&
     routes.children?.length &&
@@ -377,7 +430,6 @@ function setRoute(
   segments.forEach((_segment, i) => {
     const isLastSegment = i === segments.length - 1;
     if (isLastSegment) return (temp = updater(temp));
-
     if (!isLastSegment) {
       const nextSegment = segments[i + 1];
       const index = temp.children?.findIndex(

libs/utils/src/session/guard/index.tsx

@@ -0,0 +1,27 @@
+import { FC, PropsWithChildren, ReactNode, useMemo } from 'react';
+import { useSession } from '../../hooks/use-session';
+
+type TProps = PropsWithChildren<{
+  permissions: Array<string>;
+  fallback?: ReactNode;
+}>;
+
+export const Guard: FC<TProps> = (props): ReactNode => {
+  const { session } = useSession();
+
+  const permissionKeys = useMemo(() => {
+    return session?.user?.role?.permissions.map((perm) => perm.name) ?? [];
+  }, [session?.user?.role]);
+
+  const allowed = useMemo(() => {
+    return props.permissions.every((permission) =>
+      permissionKeys.includes(permission)
+    );
+  }, [permissionKeys, props.permissions]);
+
+  if (allowed) {
+    return props.children;
+  }
+
+  return props.fallback ?? null;
+};

libs/utils/src/session/index.ts

@@ -0,0 +1 @@
+export * from './guard';