feat(frontend): modal component and basic request hookup (#91)

src/hooks/useLockBodyScroll.ts

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+/**
+ * Hook to lock the body scroll whenever a component is mounted or
+ * whenever isLocked is set to true.
+ *
+ * You can pass in true always to cause a lock on mount/dismount of the component
+ * using this hook.
+ *
+ * @param isLocked Toggle the scroll lock
+ * @param disabled Disables the entire hook (allows conditional skipping of the lock)
+ */
+export const useLockBodyScroll = (
+  isLocked: boolean,
+  disabled?: boolean
+): void => {
+  useEffect(() => {
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    if (isLocked && !disabled) {
+      document.body.style.overflow = 'hidden';
+    }
+    return () => {
+      if (!disabled) {
+        document.body.style.overflow = originalStyle;
+      }
+    };
+  }, [isLocked, disabled]);
+};

src/hooks/useUser.ts

@@ -1,5 +1,7 @@
 import useSwr from 'swr';
 import { useRef } from 'react';
+import { hasPermission } from '../../server/lib/permissions';
+
 export interface User {
   id: number;
   email: string;
@@ -7,11 +9,23 @@ export interface User {
   permissions: number;
 }
 
+export enum Permission {
+  NONE = 0,
+  ADMIN = 2,
+  MANAGE_SETTINGS = 4,
+  MANAGE_USERS = 8,
+  MANAGE_REQUESTS = 16,
+  REQUEST = 32,
+  VOTE = 64,
+  AUTO_APPROVE = 128,
+}
+
 interface UserHookResponse {
   user?: User;
   loading: boolean;
   error: string;
   revalidate: () => Promise<boolean>;
+  hasPermission: (permission: Permission | Permission[]) => boolean;
 }
 
 export const useUser = ({
@@ -29,10 +43,15 @@ export const useUser = ({
     }
   );
 
+  const checkPermission = (permission: Permission | Permission[]): boolean => {
+    return hasPermission(permission, data?.permissions ?? 0);
+  };
+
   return {
     user: data,
     loading: !data && !error,
     error,
     revalidate,
+    hasPermission: checkPermission,
   };
 };