feat(buildteams): ✨ Settings Saving

Settings Save Button, Reordered Settings Groups, Settings button on buildteam page only visible with permissions, SettingsTabs disabled for non-permitted pages

src/components/Header.tsx

@@ -29,6 +29,7 @@ import Icon from './Icon';
 import { IconSettings } from '@tabler/icons';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'react-i18next';
+import { useUser } from '../hooks/useUser';
 
 const useStyles = createStyles((theme) => ({
 	root: {
@@ -338,11 +339,13 @@ interface LogoHeaderProps {
 	applyHref?: string;
 	settingsHref?: string;
 	invite?: string;
+	id: string;
 }
 
 export const LogoHeader = (props: LogoHeaderProps) => {
 	const theme = useMantineTheme();
 	const { scrollY, scrollYProgress } = useScroll();
+	const user = useUser();
 	const blur = useTransform(scrollYProgress, (latest) => `blur(${latest * 20}px)`);
 	const bgPosY = useTransform(scrollYProgress, (latest) => `${latest * 20 + 50}%`);
 	return (
@@ -443,10 +446,21 @@ export const LogoHeader = (props: LogoHeaderProps) => {
 								Apply
 							</Button>
 						)}
-						<Button component="a" href={props.settingsHref} variant="outline">
-							{/*TODO: Add Permision check */}
-							Settings
-						</Button>
+						{user.hasPermissions(
+							[
+								'team.settings.edit',
+								'team.socials.edit',
+								'team.application.edit',
+								'team.application.list',
+								'team.application.review',
+							],
+							props.id,
+						) && (
+							<Button component="a" href={props.settingsHref} variant="outline">
+								{/*TODO: Add Permision check */}
+								Settings
+							</Button>
+						)}
 					</Group>
 				</Group>
 			</Group>

src/components/RTE.tsx

@@ -43,7 +43,7 @@ export default function RTE({
 	}, [value]);
 
 	return (
-		<RichTextEditor editor={editor} style={style}>
+		<RichTextEditor editor={editor} styles={style}>
 			<RichTextEditor.Toolbar sticky stickyOffset={60}>
 				<RichTextEditor.ControlsGroup>
 					<RichTextEditor.Bold />

src/components/SWRSetup.tsx

@@ -1,7 +1,6 @@
 import { LoadingOverlay } from '@mantine/core';
 import Page from './Page';
 import { SWRConfig } from 'swr';
-import SWRProvider from './SWRProvider';
 import { useSession } from 'next-auth/react';
 
 export default function SWRSetup({ content }: any) {

src/components/SettingsTabs.tsx

@@ -1,40 +1,64 @@
-import { Box, Tabs, useMantineTheme } from '@mantine/core';
+import { Box, LoadingOverlay, Tabs, useMantineTheme } from '@mantine/core';
 import { IconDashboard, IconEyeglass, IconSearch, IconSend, IconSettings, IconUsers } from '@tabler/icons';
 
 import { useRouter } from 'next/router';
+import { useSession } from 'next-auth/react';
+import { useUser } from '../hooks/useUser';
 
-const SettingsTabs = ({ children }: { children: any }) => {
+const SettingsTabs = ({ children, team }: { children: any; team: string }) => {
 	const theme = useMantineTheme();
+	const user = useUser();
+	const session = useSession();
 	const router = useRouter();
 	return (
 		<>
 			<Tabs
 				defaultValue="settings"
 				variant="outline"
 				value={router.pathname.split('/manage/')[1]}
-				onTabChange={(value) => router.push(`/teams/${router.query.team}/manage/${value}`)}
+				onTabChange={(value) =>
+					value == 'quit'
+						? router.push(`/teams/${router.query.team}`)
+						: router.push(`/teams/${router.query.team}/manage/${value}`)
+				}
 			>
 				<Tabs.List>
-					<Tabs.Tab value="settings" icon={<IconSettings size="0.8rem" />}>
+					<Tabs.Tab
+						value="settings"
+						icon={<IconSettings size="0.8rem" />}
+						disabled={!user.hasPermissions(['team.socials.edit', 'team.settings.edit'], team)}
+					>
 						Settings
 					</Tabs.Tab>
-					<Tabs.Tab value="apply" icon={<IconSend size="0.8rem" />}>
+					<Tabs.Tab
+						value="apply"
+						icon={<IconSend size="0.8rem" />}
+						disabled={!user.hasPermission('team.application.edit', team)}
+					>
 						Application Questions
 					</Tabs.Tab>
-					<Tabs.Tab value="members" icon={<IconUsers size="0.8rem" />}>
+					<Tabs.Tab
+						value="members"
+						icon={<IconUsers size="0.8rem" />}
+						disabled={!user.hasPermissions(['permission.add', 'permission.remove'], team)}
+					>
 						Members
 					</Tabs.Tab>
-					<Tabs.Tab value="members" icon={<IconUsers size="0.8rem" />}>
+					<Tabs.Tab
+						value="members"
+						icon={<IconUsers size="0.8rem" />}
+						disabled={!user.hasPermission('team.socials.edit', team)}
+					>
 						Showcase Images
 					</Tabs.Tab>
-					<Tabs.Tab value="review" icon={<IconSearch size="0.8rem" />}>
-						Review
-					</Tabs.Tab>
 					<Tabs.Tab
-						value="quit"
-						icon={<IconDashboard size="0.8rem" />}
-						onClick={() => router.push(`/teams/${router.query.team}`)}
+						value="review"
+						icon={<IconSearch size="0.8rem" />}
+						disabled={!user.hasPermissions(['team.application.review', 'team.application.list'], team)}
 					>
+						Review
+					</Tabs.Tab>
+					<Tabs.Tab value="quit" icon={<IconDashboard size="0.8rem" />}>
 						Build Team Page
 					</Tabs.Tab>
 				</Tabs.List>
@@ -45,8 +69,10 @@ const SettingsTabs = ({ children }: { children: any }) => {
 					padding: `${theme.spacing.xs * 3}px`,
 					paddingTop: theme.spacing.md,
 					height: '100%',
+					position: 'relative',
 				})}
 			>
+				<LoadingOverlay visible={user.isLoading} overlayBlur={4} />
 				{children}
 			</Box>
 		</>

src/hooks/useUser.ts

@@ -7,16 +7,31 @@ import { useSession } from 'next-auth/react';
 export const useUser = () => {
 	const { data } = useSWR('/account');
 	const session = useSession();
+	const [loading, setLoading] = useState(true);
+	useEffect(() => {
+		if (data && session.status != 'loading') setLoading(false);
+	}, [data, session]);
+
 	const user = {
 		user: data,
 		token: session.data?.accessToken,
+		isLoading: loading,
 		refresh: () => mutate('/account'),
-		hasPermission: (permission: string) => {
+		hasPermission: (p: string, buildteam?: string) => {
+			return user.hasPermissions([p], buildteam);
+		},
+		hasPermissions: (ps: string[], buildteam?: string) => {
 			const permissions = data?.permissions;
 			if (!permissions) return false;
-			if (permissions.find((p: any) => minimatch(permission, p.permission))) return true;
+			if (
+				permissions
+					.filter((p: any) => (buildteam ? p.buildTeamId === buildteam : true))
+					.find((p: any) => ps.includes(p.permission))
+			)
+				return true;
 			return false;
 		},
+		reload: () => mutate('/account'),
 	};
 	return user;
 };