style(src): 🎨 Prettier

BuildTheEarth · Oct 22, 2023 · 25434e5 · 25434e5
1 parent 9edc8b8
commit 25434e5
Show file tree

Hide file tree

Showing 29 changed files with 314 additions and 803 deletions.
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -12,23 +12,9 @@ interface ArticleCardImageProps {
 	onClick?: () => void;
 }
 
-export function BackgroundCard({
-	image,
-	title,
-	category,
-	style,
-	showButton,
-	buttonText,
-	onClick,
-}: ArticleCardImageProps) {
+export function BackgroundCard({ image, title, category, style, showButton, buttonText, onClick }: ArticleCardImageProps) {
 	return (
-		<Paper
-			shadow="md"
-			p="xl"
-			radius="md"
-			style={{ backgroundImage: `url(${image})`, position: 'relative', ...style }}
-			className={classes.card}
-		>
+		<Paper shadow="md" p="xl" radius="md" style={{ backgroundImage: `url(${image})`, position: 'relative', ...style }} className={classes.card}>
 			<div style={{ zIndex: 8 }}>
 				<Text className={classes.category} size="xs">
 					{category}

diff --git a/src/components/GalleryGrid.tsx b/src/components/GalleryGrid.tsx
@@ -1,17 +1,4 @@
-import {
-	AspectRatio,
-	Avatar,
-	BackgroundImage,
-	Badge,
-	Box,
-	Image,
-	Modal,
-	Overlay,
-	Portal,
-	SimpleGrid,
-	Title,
-	useMantineTheme,
-} from '@mantine/core';
+import { AspectRatio, Avatar, BackgroundImage, Badge, Box, Image, Modal, Overlay, Portal, SimpleGrid, Title, useMantineTheme } from '@mantine/core';
 import React, { useState } from 'react';
 
 import { useIsClient } from '../hooks/useIsClient';

diff --git a/src/components/GridButton.tsx b/src/components/GridButton.tsx
@@ -2,23 +2,9 @@ import { Text, UnstyledButton } from '@mantine/core';
 
 import classes from '../styles/components/GridButton.module.css';
 
-export const GridButton = ({
-	icon,
-	text,
-	onClick,
-	solid,
-}: {
-	icon: any;
-	text: string;
-	onClick?: () => void;
-	solid?: boolean;
-}) => {
+export const GridButton = ({ icon, text, onClick, solid }: { icon: any; text: string; onClick?: () => void; solid?: boolean }) => {
 	return (
-		<UnstyledButton
-			className={classes.button}
-			onClick={onClick}
-			style={{ backgroundColor: solid ? 'var(--mantine-color-gray-8)' : undefined }}
-		>
+		<UnstyledButton className={classes.button} onClick={onClick} style={{ backgroundColor: solid ? 'var(--mantine-color-gray-8)' : undefined }}>
 			{icon}
 			<Text truncate="end">{text}</Text>
 		</UnstyledButton>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,25 +1,4 @@
-import {
-	ActionIcon,
-	Anchor,
-	AppShellHeader,
-	Avatar,
-	Badge,
-	Box,
-	Burger,
-	Button,
-	Container,
-	Divider,
-	Group,
-	Indicator,
-	Menu,
-	Paper,
-	Text,
-	Tooltip,
-	Transition,
-	UnstyledButton,
-	useMantineColorScheme,
-	useMantineTheme,
-} from '@mantine/core';
+import { ActionIcon, Anchor, AppShellHeader, Avatar, Badge, Box, Burger, Button, Container, Divider, Group, Indicator, Menu, Paper, Text, Tooltip, Transition, UnstyledButton, useMantineColorScheme, useMantineTheme } from '@mantine/core';
 import { ChevronDown, FileSearch, FileUpload, Logout, MoonStars, Sun, World } from 'tabler-icons-react';
 import { Discord, Instagram, Tiktok, Twitch, Twitter, Youtube } from '@icons-pack/react-simple-icons';
 import React, { CSSProperties, useState } from 'react';
@@ -280,27 +259,13 @@ export const LogoHeader = (props: LogoHeaderProps) => {
 									icon = <Icon icon={social.icon} />;
 							}
 							return (
-								<ActionIcon
-									component={Link}
-									href={social.url}
-									target="_blank"
-									variant="transparent"
-									color="gray"
-									key={social.name}
-								>
+								<ActionIcon component={Link} href={social.url} target="_blank" variant="transparent" color="gray" key={social.name}>
 									{icon}
 								</ActionIcon>
 							);
 						})}
 						{props.invite && (
-							<ActionIcon
-								component={Link}
-								href={props.invite}
-								target="_blank"
-								variant="transparent"
-								color="gray"
-								key={'discord-inv'}
-							>
+							<ActionIcon component={Link} href={props.invite} target="_blank" variant="transparent" color="gray" key={'discord-inv'}>
 								<Discord />
 							</ActionIcon>
 						)}
@@ -315,16 +280,7 @@ export const LogoHeader = (props: LogoHeaderProps) => {
 								Apply
 							</Button>
 						)}
-						{user.hasPermissions(
-							[
-								'team.settings.edit',
-								'team.socials.edit',
-								'team.application.edit',
-								'team.application.list',
-								'team.application.review',
-							],
-							props.id,
-						) && (
+						{user.hasPermissions(['team.settings.edit', 'team.socials.edit', 'team.application.edit', 'team.application.list', 'team.application.review'], props.id) && (
 							<Button component={Link} href={props.settingsHref || ''} variant="outline">
 								Settings
 							</Button>

diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
@@ -3,13 +3,7 @@ import { useMantineColorScheme } from '@mantine/core';
 /* eslint-disable jsx-a11y/alt-text */
 const Icon = ({ name, ...rest }: any) => {
 	const scheme = useMantineColorScheme();
-	return (
-		<img
-			src={'/icons/' + name + '.svg'}
-			{...rest}
-			style={{ filter: scheme.colorScheme == 'dark' ? 'invert(100%)' : '', ...rest.style }}
-		/>
-	);
+	return <img src={'/icons/' + name + '.svg'} {...rest} style={{ filter: scheme.colorScheme == 'dark' ? 'invert(100%)' : '', ...rest.style }} />;
 };
 
 export default Icon;
diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx
@@ -30,13 +30,7 @@ export function LanguageSwitcher() {
 	};
 
 	const items = languages.map((item) => (
-		<Menu.Item
-			leftSection={
-				<span className={`fi fi-${item.flag} fis`} style={{ height: 18, width: 18, borderRadius: '50%' }}></span>
-			}
-			onClick={() => changeLanguage(item)}
-			key={item.label}
-		>
+		<Menu.Item leftSection={<span className={`fi fi-${item.flag} fis`} style={{ height: 18, width: 18, borderRadius: '50%' }}></span>} onClick={() => changeLanguage(item)} key={item.label}>
 			{item.label}
 		</Menu.Item>
 	));
@@ -46,10 +40,7 @@ export function LanguageSwitcher() {
 			<Menu.Target>
 				<UnstyledButton className={classes.control} data-opened={opened}>
 					<Group gap="xs">
-						<span
-							className={`fi fi-${selected && selected.flag} fis`}
-							style={{ height: 22, width: 22, borderRadius: '50%' }}
-						></span>
+						<span className={`fi fi-${selected && selected.flag} fis`} style={{ height: 22, width: 22, borderRadius: '50%' }}></span>
 						<span className={classes.label}>{selected && selected.label}</span>
 					</Group>
 					<ChevronDown size={16} className={classes.icon} data-opened={opened} />

diff --git a/src/components/Page.tsx b/src/components/Page.tsx
@@ -42,12 +42,7 @@ const Page = (props: PageProps) => {
 	const bgPosY = useTransform(scrollYProgress, (latest) => `${latest * 5 + 50}%`);
 	return (
 		<>
-			<NextSeo
-				title={props.title || props.head?.title}
-				canonical={'https://beta.buildtheearth.net' + router.pathname}
-				description={props.description}
-				{...props.seo}
-			/>
+			<NextSeo title={props.title || props.head?.title} canonical={'https://beta.buildtheearth.net' + router.pathname} description={props.description} {...props.seo} />
 			{!props.disabled?.header && (
 				<Header
 					links={[
@@ -129,11 +124,7 @@ const Page = (props: PageProps) => {
 export const LogoPage = (props: PageProps & { headData: any; team: string }) => {
 	return (
 		<Page {...props} fullWidth>
-			<LogoHeader
-				{...props.headData}
-				applyHref={`${props.team}/apply`}
-				settingsHref={`${props.team}/manage/settings`}
-			/>
+			<LogoHeader {...props.headData} applyHref={`${props.team}/apply`} settingsHref={`${props.team}/manage/settings`} />
 			<ContentContainer style={props.style} smallPadding={props.smallPadding}>
 				{props.children}
 			</ContentContainer>

diff --git a/src/components/RTE.tsx b/src/components/RTE.tsx
@@ -10,27 +10,9 @@ import Underline from '@tiptap/extension-underline';
 import { useEditor } from '@tiptap/react';
 import { useEffect } from 'react';
 
-export default function RTE({
-	value,
-	onChange,
-	onClick,
-	style,
-}: {
-	value?: string;
-	onChange?: (e: string) => void;
-	onClick?: (e: any) => void;
-	style?: any;
-}) {
+export default function RTE({ value, onChange, onClick, style }: { value?: string; onChange?: (e: string) => void; onClick?: (e: any) => void; style?: any }) {
 	const editor = useEditor({
-		extensions: [
-			StarterKit,
-			Underline,
-			Link,
-			Superscript,
-			SubScript,
-			Highlight,
-			TextAlign.configure({ types: ['heading', 'paragraph'] }),
-		],
+		extensions: [StarterKit, Underline, Link, Superscript, SubScript, Highlight, TextAlign.configure({ types: ['heading', 'paragraph'] })],
 		content: value,
 		onUpdate: (e) => {
 			onChange && onChange(e.editor.getHTML());

diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
@@ -25,15 +25,7 @@ const SearchInput = (props: SearchInputProps) => {
 		}
 	}, [debounced, oldValue, props]);
 
-	return (
-		<TextInput
-			placeholder={t('search')}
-			leftSection={<IconSearch size="1rem" stroke={1.5} />}
-			{...props.inputProps}
-			defaultValue={value}
-			onChange={(event) => setValue(event.currentTarget.value)}
-		/>
-	);
+	return <TextInput placeholder={t('search')} leftSection={<IconSearch size="1rem" stroke={1.5} />} {...props.inputProps} defaultValue={value} onChange={(event) => setValue(event.currentTarget.value)} />;
 };
 
 export default SearchInput;
diff --git a/src/components/SettingsTabs.tsx b/src/components/SettingsTabs.tsx
@@ -30,52 +30,21 @@ const SettingsTabs = ({ children, team, loading = false }: { children: any; team
 						: {}
 				}
 			>
-				<Tabs
-					defaultValue="settings"
-					variant="pills"
-					orientation={!mobileLayout ? 'vertical' : 'horizontal'}
-					value={router.pathname.split('/manage/')[1]}
-					onChange={(value) =>
-						value == 'quit'
-							? router.push(`/teams/${router.query.team}`)
-							: router.push(`/teams/${router.query.team}/manage/${value}`)
-					}
-					style={{ width: '100%' }}
-				>
+				<Tabs defaultValue="settings" variant="pills" orientation={!mobileLayout ? 'vertical' : 'horizontal'} value={router.pathname.split('/manage/')[1]} onChange={(value) => (value == 'quit' ? router.push(`/teams/${router.query.team}`) : router.push(`/teams/${router.query.team}/manage/${value}`))} style={{ width: '100%' }}>
 					<Tabs.List>
-						<Tabs.Tab
-							value="settings"
-							leftSection={<IconSettings size="0.8rem" />}
-							disabled={!user.hasPermissions(['team.socials.edit', 'team.settings.edit'], team)}
-						>
+						<Tabs.Tab value="settings" leftSection={<IconSettings size="0.8rem" />} disabled={!user.hasPermissions(['team.socials.edit', 'team.settings.edit'], team)}>
 							Settings
 						</Tabs.Tab>
-						<Tabs.Tab
-							value="apply"
-							leftSection={<IconSend size="0.8rem" />}
-							disabled={!user.hasPermission('team.application.edit', team)}
-						>
+						<Tabs.Tab value="apply" leftSection={<IconSend size="0.8rem" />} disabled={!user.hasPermission('team.application.edit', team)}>
 							Application Questions
 						</Tabs.Tab>
-						<Tabs.Tab
-							value="members"
-							leftSection={<IconUsers size="0.8rem" />}
-							disabled={!user.hasPermissions(['permission.add', 'permission.remove'], team)}
-						>
+						<Tabs.Tab value="members" leftSection={<IconUsers size="0.8rem" />} disabled={!user.hasPermissions(['permission.add', 'permission.remove'], team)}>
 							Members
 						</Tabs.Tab>
-						<Tabs.Tab
-							value="images"
-							leftSection={<IconUsers size="0.8rem" />}
-							disabled={!user.hasPermission('team.showcases.edit', team)}
-						>
+						<Tabs.Tab value="images" leftSection={<IconUsers size="0.8rem" />} disabled={!user.hasPermission('team.showcases.edit', team)}>
 							Showcase Images
 						</Tabs.Tab>
-						<Tabs.Tab
-							value="review"
-							leftSection={<IconSearch size="0.8rem" />}
-							disabled={!user.hasPermissions(['team.application.review', 'team.application.list'], team)}
-						>
+						<Tabs.Tab value="review" leftSection={<IconSearch size="0.8rem" />} disabled={!user.hasPermissions(['team.application.review', 'team.application.list'], team)}>
 							Review
 						</Tabs.Tab>
 						<Tabs.Tab value="quit" leftSection={<IconDashboard size="0.8rem" />}>

diff --git a/src/components/application/questions/CityQuestion.tsx b/src/components/application/questions/CityQuestion.tsx
@@ -22,14 +22,7 @@ const CityQuestion = (props: CityQuestionProps) => {
 const EditQuestion = ({ editingQuestion, handleUpdateEditingQuestion }: any) => {
 	return (
 		<>
-			<TextInput
-				required
-				defaultValue={editingQuestion?.additionalData.country}
-				label="Country"
-				description="The country to autocomplete"
-				mb="md"
-				onChange={(e) => handleUpdateEditingQuestion({ additionalData: { country: e.target.value } })}
-			/>
+			<TextInput required defaultValue={editingQuestion?.additionalData.country} label="Country" description="The country to autocomplete" mb="md" onChange={(e) => handleUpdateEditingQuestion({ additionalData: { country: e.target.value } })} />
 		</>
 	);
 };

diff --git a/src/hooks/useUser.ts b/src/hooks/useUser.ts
@@ -23,12 +23,7 @@ export const useUser = () => {
 		hasPermissions: (ps: string[], buildteam?: string) => {
 			const permissions = data?.permissions;
 			if (!permissions) return false;
-			if (
-				permissions
-					.filter((p: any) => (buildteam ? p.buildTeamId === buildteam : true))
-					.find((p: any) => ps.includes(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'),

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -33,8 +33,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 			<MantineProvider
 				defaultColorScheme="dark"
 				theme={{
-					fontFamily:
-						'"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+					fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
 					breakpoints: {
 						xs: '36em',
 						sm: '48em',

diff --git a/src/pages/auth/signin.tsx b/src/pages/auth/signin.tsx
@@ -21,10 +21,8 @@ const SignIn: NextPage = () => {
 		>
 			<h2>Sign in to BuildTheEarth</h2>
 			<p>
-				On your My BuildTheEarth page, you can apply to join a Build Team or request to be verified as solo builder and
-				work on projects yourself. <br />
-				It is also the place where you can upload your world when you have finished. To access your page, you need to
-				Sign in. <br />
+				On your My BuildTheEarth page, you can apply to join a Build Team or request to be verified as solo builder and work on projects yourself. <br />
+				It is also the place where you can upload your world when you have finished. To access your page, you need to Sign in. <br />
 			</p>
 			{router.query.error && <p style={{ color: theme.colors.red[6] }}>An error occurred, please try again later.</p>}
 			<Button onClick={() => signIn('keycloak')}>Sign in</Button>