merge(dev): 🚑 Important Bug Fix (#68)

* refactor(auth): 🎨 Extract session data from user hook

* chore(src): 🎨 Prettier and Lint

* fix(permissions): 🚑 Check with buildteam when required

.prettierrc.json

@@ -4,5 +4,6 @@
 	"singleQuote": true,
 	"quoteProps": "as-needed",
 	"trailingComma": "all",
-	"endOfLine": "lf"
+	"endOfLine": "lf",
+	"plugins": ["prettier-plugin-organize-imports"]
 }

package.json

@@ -105,7 +105,8 @@
 		"postcss": "^8.4.31",
 		"postcss-preset-mantine": "^1.7.0",
 		"postcss-simple-vars": "^7.0.1",
-		"prettier": "^2.6.2",
+		"prettier": "^3.3.0",
+		"prettier-plugin-organize-imports": "^3.2.4",
 		"typescript": "^4.7.2",
 		"webpack-bundle-analyzer": "^4.5.0"
 	}

src/components/Animations.tsx

@@ -1,4 +1,4 @@
-import { AnimatePresence, MotionStyle, motion } from 'framer-motion';
+import { AnimatePresence, motion, MotionStyle } from 'framer-motion';
 import { useEffect, useState } from 'react';
 
 import { Box } from '@mantine/core';

src/components/ContextMenu.tsx

@@ -1,4 +1,4 @@
-import { Button, Menu, MenuProps, Portal, ScrollArea } from '@mantine/core';
+import { Button, Menu, MenuProps, Portal } from '@mantine/core';
 import React, { useCallback, useEffect, useState } from 'react';
 
 interface ContextMenuInfo {

src/components/Counter.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import { motion, useInView, useMotionValue, useSpring } from 'framer-motion';
+import { useInView, useMotionValue, useSpring } from 'framer-motion';
 import { useEffect, useRef } from 'react';
 
 export default function Counter({

src/components/Dropzone.tsx

@@ -1,5 +1,5 @@
-import { Group, Text, rem } from '@mantine/core';
-import { DropzoneProps, IMAGE_MIME_TYPE, Dropzone as MDropzone } from '@mantine/dropzone';
+import { Group, rem, Text } from '@mantine/core';
+import { Dropzone as MDropzone, DropzoneProps, IMAGE_MIME_TYPE } from '@mantine/dropzone';
 import { IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 
 interface ExtendDropzone extends DropzoneProps {}

src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Anchor, Button, Container, Group } from '@mantine/core';
+import { ActionIcon, Anchor, Container, Group } from '@mantine/core';
 
 import { Discord } from '@icons-pack/react-simple-icons';
 import Link from 'next/link';

src/components/GalleryGrid.tsx

@@ -1,17 +1,7 @@
-import {
-	Avatar,
-	Badge,
-	Grid,
-	GridCol,
-	Group,
-	SimpleGrid,
-	Title,
-	useMantineTheme,
-} from '@mantine/core';
+import { Avatar, Badge, Grid, GridCol, Group, Title, useMantineTheme } from '@mantine/core';
 import { AnimatePresence, motion } from 'framer-motion';
 
 import { useHover } from '@mantine/hooks';
-import Link from 'next/link';
 import React from 'react';
 import { useIsClient } from '../hooks/useIsClient';
 import BackgroundImage from './BackgroundImage';

src/components/Header.tsx

@@ -1,3 +1,12 @@
+import {
+	Discord,
+	Instagram,
+	Reddit,
+	Tiktok,
+	Twitch,
+	Twitter,
+	Youtube,
+} from '@icons-pack/react-simple-icons';
 import {
 	ActionIcon,
 	Anchor,
@@ -12,24 +21,14 @@ import {
 	Menu,
 	MenuItem,
 	Paper,
+	rem,
 	Text,
 	Tooltip,
 	Transition,
 	UnstyledButton,
-	rem,
 	useMantineColorScheme,
 	useMantineTheme,
 } from '@mantine/core';
-import { ChevronDown, FileSearch, Logout, World } from 'tabler-icons-react';
-import {
-	Discord,
-	Instagram,
-	Reddit,
-	Tiktok,
-	Twitch,
-	Twitter,
-	Youtube,
-} from '@icons-pack/react-simple-icons';
 import {
 	IconCalendar,
 	IconDashboard,
@@ -45,22 +44,23 @@ import {
 	IconUser,
 	IconUsers,
 } from '@tabler/icons-react';
-import React, { CSSProperties, useState } from 'react';
-import { signIn, signOut, useSession } from 'next-auth/react';
 import { useScroll, useTransform } from 'framer-motion';
+import { signIn, signOut, useSession } from 'next-auth/react';
+import React, { CSSProperties, useState } from 'react';
+import { ChevronDown, FileSearch, Logout, World } from 'tabler-icons-react';
 
-import Icon from './Icon';
-import Image from 'next/image';
-import Link from 'next/link';
-import classes from '../styles/components/Header.module.css';
-import { hexToDataURL } from '../utils/Color';
+import { usePermissions } from '@/hooks/usePermissions';
 import logo from '@/public/logo.gif';
 import { useDisclosure } from '@mantine/hooks';
-import { usePermissions } from '@/hooks/usePermissions';
+import Image from 'next/image';
+import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useScrollPosition } from '../hooks/useScrollPosition';
 import { useTranslation } from 'react-i18next';
+import { useScrollPosition } from '../hooks/useScrollPosition';
 import { useUser } from '../hooks/useUser';
+import classes from '../styles/components/Header.module.css';
+import { hexToDataURL } from '../utils/Color';
+import Icon from './Icon';
 
 interface HeaderProps {
 	links: {

src/components/Page.tsx

@@ -1,16 +1,15 @@
 import { Center, Container, Paper, Text, useMantineTheme } from '@mantine/core';
-import Header, { LogoHeader } from './Header';
 import { NextSeo, NextSeoProps } from 'next-seo';
+import Header, { LogoHeader } from './Header';
 
-import BackgroundImage from './BackgroundImage';
-import ErrorPage from '../pages/_error';
-import Footer from './Footer';
-import React from 'react';
-import { StaticImport } from 'next/dist/shared/lib/get-img-props';
-import classes from '../styles/components/Page.module.css';
 import { usePermissions } from '@/hooks/usePermissions';
+import { StaticImport } from 'next/dist/shared/lib/get-img-props';
 import { useRouter } from 'next/router';
-import { useUser } from '../hooks/useUser';
+import React from 'react';
+import ErrorPage from '../pages/_error';
+import classes from '../styles/components/Page.module.css';
+import BackgroundImage from './BackgroundImage';
+import Footer from './Footer';
 
 interface PageProps {
 	children: React.ReactNode;
@@ -32,7 +31,7 @@ interface PageProps {
 	seo?: NextSeoProps;
 	hideHeaderOnInitialScroll?: boolean;
 	style?: React.CSSProperties;
-	requiredPermissions?: string[];
+	requiredPermissions?: { buildteam?: string; permissions: string[] };
 	loading?: boolean;
 	solidHeader?: boolean;
 }
@@ -44,7 +43,11 @@ const Page = (props: PageProps) => {
 
 	return props.loading ? (
 		<ErrorPage code={'1'} />
-	) : props.requiredPermissions && !permissions.hasAny(props.requiredPermissions) ? (
+	) : props.requiredPermissions &&
+	  !permissions.hasAny(
+			props.requiredPermissions.permissions,
+			props.requiredPermissions.buildteam,
+	  ) ? (
 		<ErrorPage code={'403'} />
 	) : (
 		<>

src/components/RTE.tsx

@@ -2,12 +2,12 @@
 import { Link, RichTextEditor } from '@mantine/tiptap';
 
 import Highlight from '@tiptap/extension-highlight';
-import StarterKit from '@tiptap/starter-kit';
 import SubScript from '@tiptap/extension-subscript';
 import Superscript from '@tiptap/extension-superscript';
 import TextAlign from '@tiptap/extension-text-align';
 import Underline from '@tiptap/extension-underline';
 import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
 import { useEffect } from 'react';
 
 export default function RTE({

src/components/SettingsTabs.tsx

@@ -18,11 +18,10 @@ import {
 	IconUsers,
 } from '@tabler/icons-react';
 
-import { useMediaQuery } from '@mantine/hooks';
 import { usePermissions } from '@/hooks/usePermissions';
-import { useRouter } from 'next/router';
+import { useMediaQuery } from '@mantine/hooks';
 import { useSession } from 'next-auth/react';
-import { useUser } from '../hooks/useUser';
+import { useRouter } from 'next/router';
 
 const SettingsTabs = ({
 	children,
@@ -52,7 +51,7 @@ const SettingsTabs = ({
 								top: 'var(--mantine-spacing-xl)',
 								maxWidth: '300px',
 								overflow: 'hidden',
-						  }
+							}
 						: {}
 				}
 			>
@@ -161,7 +160,7 @@ export const AdminSettingsTabs = ({
 								top: 'var(--mantine-spacing-xl)',
 								maxWidth: '300px',
 								overflow: 'hidden',
-						  }
+							}
 						: {}
 				}
 			>

src/components/Stats.tsx

@@ -1,6 +1,4 @@
-import { Center, Group, Paper, PaperProps, RingProgress, Text, rem } from '@mantine/core';
-
-import Link from 'next/link';
+import { Center, Group, Paper, PaperProps, rem, RingProgress, Text } from '@mantine/core';
 
 interface StatsGridProps {
 	title: string;

src/components/UsersTable.tsx

@@ -1,5 +1,5 @@
-import { Avatar, Badge, Group, Skeleton, Table, Text, Tooltip } from '@mantine/core';
-import { IconFaceIdError, IconUserQuestion } from '@tabler/icons-react';
+import { Avatar, Group, Skeleton, Table, Text, Tooltip } from '@mantine/core';
+import { IconUserQuestion } from '@tabler/icons-react';
 
 var vagueTime = require('vague-time');
 const rolesData = ['Manager', 'Collaborator', 'Contractor'];

src/components/application/questions/Question.tsx

@@ -1,6 +1,5 @@
 import { ApplicationQuestions } from '@/utils/application/ApplicationQuestions';
 import { Divider } from '@mantine/core';
-import { Edit } from 'tabler-icons-react';
 
 const Question = (props: any) => {
 	const QuestionType = ApplicationQuestions[props.type];

src/components/application/questions/SliderQuestion.tsx

@@ -1,7 +1,6 @@
 import { Group, Input, NumberInput, Slider, Stack, TextInput } from '@mantine/core';
-import { IconAdjustments, IconTextSize } from '@tabler/icons-react';
+import { IconAdjustments } from '@tabler/icons-react';
 
-import Icon from '@/components/Icon';
 import { ApplicationQuestion } from '@/utils/application/ApplicationQuestions';
 
 export interface SliderQuestionProps extends ApplicationQuestion {

src/components/map/ClaimDrawer.tsx

@@ -29,15 +29,15 @@ import {
 	IconZoomIn,
 } from '@tabler/icons-react';
 
-import { ClaimDrawerImages } from './ClaimDrawerImages';
-import Link from 'next/link';
-import { StatsGrid } from '../Stats';
-import mapboxgl from 'mapbox-gl';
-import { showNotification } from '@mantine/notifications';
-import { useClipboard } from '@mantine/hooks';
 import { usePermissions } from '@/hooks/usePermissions';
-import useSWR from 'swr';
 import { useUser } from '@/hooks/useUser';
+import { useClipboard } from '@mantine/hooks';
+import { showNotification } from '@mantine/notifications';
+import mapboxgl from 'mapbox-gl';
+import Link from 'next/link';
+import useSWR from 'swr';
+import { StatsGrid } from '../Stats';
+import { ClaimDrawerImages } from './ClaimDrawerImages';
 
 interface ClaimDrawerProps {
 	setOpen: (bool: boolean) => void;

src/components/map/ClaimDrawerImages.tsx

@@ -5,10 +5,10 @@ import {
 	Group,
 	Image,
 	Progress,
+	rem,
 	Stack,
 	Text,
 	Tooltip,
-	rem,
 } from '@mantine/core';
 import {
 	Dropzone,
@@ -19,7 +19,7 @@ import {
 } from '@mantine/dropzone';
 import { IconPhoto, IconTrash, IconUpload, IconX } from '@tabler/icons-react';
 
-import { useUser } from '@/hooks/useUser';
+import { useAccessToken } from '@/hooks/useAccessToken';
 import classes from '@/styles/components/Gallery.module.css';
 import { modals } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
@@ -43,7 +43,7 @@ interface ClaimDrawerImagesProps {
 
 export function ClaimDrawerImages({ t, ...props }: ClaimDrawerImagesProps) {
 	const [deleteLoading, setDeleteLoading] = useState(false);
-	const user = useUser();
+	const { accessToken } = useAccessToken();
 
 	const handleDeleteImage = (image: any) => {
 		modals.openConfirmModal({
@@ -64,7 +64,7 @@ export function ClaimDrawerImages({ t, ...props }: ClaimDrawerImagesProps) {
 					method: 'DELETE',
 					headers: {
 						'Content-Type': 'application/json',
-						Authorization: 'Bearer ' + user.token,
+						Authorization: 'Bearer ' + accessToken,
 					},
 				})
 					.then((res) => res.json())
@@ -154,7 +154,7 @@ function ClaimDropzone({ id, onAdd, t }: { id: string; onAdd?: (image: any) => v
 	const [uploading, setUploading] = useState(false);
 	const [uploadingStatus, setUploadingStatus] = useState(0);
 
-	const user = useUser();
+	const { accessToken } = useAccessToken();
 
 	const upload = async (images: any[]) => {
 		let formData = new FormData();
@@ -165,7 +165,7 @@ function ClaimDropzone({ id, onAdd, t }: { id: string; onAdd?: (image: any) => v
 			method: 'POST',
 			headers: {
 				// 'Content-Type': 'multipart/form-data',
-				Authorization: 'Bearer ' + user.token,
+				Authorization: 'Bearer ' + accessToken,
 			},
 			body: formData,
 		})

src/components/map/MapContextMenu.tsx

@@ -5,7 +5,6 @@ import {
 	IconBrandBing,
 	IconBrandGoogleMaps,
 	IconBrandMinecraft,
-	IconCrop,
 	IconFile,
 	IconMap,
 	IconPin,

src/components/stats/StatLargeNumber.tsx

@@ -1,4 +1,4 @@
-import { Text, rem } from '@mantine/core';
+import { rem, Text } from '@mantine/core';
 
 import classes from '@/styles/components/StatsGroup.module.css';
 

src/hooks/useAccessToken.ts

@@ -0,0 +1,12 @@
+import { useSession } from 'next-auth/react';
+
+export const useAccessToken = () => {
+	const session = useSession();
+
+	const token = {
+		accessToken: session.data?.accessToken,
+		isLoggedIn: session.status === 'authenticated',
+		isLoading: session.status === 'loading',
+	};
+	return token;
+};