feat(application): ✨ Reviewer, Discord Name

BuildTheEarth · Jan 17, 2024 · 1f48286 · 1f48286
1 parent 14cc6f0
commit 1f48286
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 13 deletions.
diff --git a/src/components/application/questions/TextQuestion.tsx b/src/components/application/questions/TextQuestion.tsx
@@ -1,4 +1,4 @@
-import { NumberInput, TextInput } from '@mantine/core';
+import { NumberInput, Textarea } from '@mantine/core';
 
 import { IconTextSize } from '@tabler/icons-react';
 import { ApplicationQuestion } from '../../../utils/application/ApplicationQuestions';
@@ -20,7 +20,7 @@ function validation(props: TextQuestionProps): (value: string) => void {
 
 const TextQuestion = (props: TextQuestionProps) => {
 	return (
-		<TextInput
+		<Textarea
 			leftSection={<Icon name={props.icon} />}
 			required={props.required}
 			description={props.subtitle}
@@ -29,6 +29,9 @@ const TextQuestion = (props: TextQuestionProps) => {
 			style={props.style}
 			onChange={(e) => props.onChange && props.onChange(e.target.value)}
 			error={props.error}
+			autosize
+			minRows={1}
+			maxRows={3}
 			disabled={props.disabled}
 			readOnly={props.readonly}
 			value={props.value}

diff --git a/src/pages/teams/[team]/manage/review/[id].tsx b/src/pages/teams/[team]/manage/review/[id].tsx
@@ -1,31 +1,36 @@
 import {
+	ActionIcon,
 	Alert,
 	Badge,
 	Button,
+	Code,
 	Divider,
 	Grid,
 	Group,
 	Stack,
 	Text,
 	Textarea,
+	Tooltip,
 	useMantineTheme,
 } from '@mantine/core';
-import { IconCheck, IconX } from '@tabler/icons-react';
+import { IconCheck, IconCopy, IconX } from '@tabler/icons-react';
 import useSWR, { mutate } from 'swr';
 
+import { useClipboard } from '@mantine/hooks';
 import { modals } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
 import { NextPage } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import Page from '../../../../../components/Page';
 import SettingsTabs from '../../../../../components/SettingsTabs';
 import { useUser } from '../../../../../hooks/useUser';
-import { ApplicationQuestions } from '../../../../../utils/application/ApplicationQuestions';
 import fetcher from '../../../../../utils/Fetcher';
+import { ApplicationQuestions } from '../../../../../utils/application/ApplicationQuestions';
 
 const Apply: NextPage = ({ team, id }: any) => {
 	const theme = useMantineTheme();
 	const user = useUser();
+	const clipboard = useClipboard();
 	const { data } = useSWR(
 		`/buildteams/${team}/applications/${id}?includeAnswers=true&includeUser=true&slug=true`,
 	);
@@ -127,37 +132,55 @@ const Apply: NextPage = ({ team, id }: any) => {
 							<Stack gap={0}>
 								<Divider style={{ margin: '0' }} my="sm" />
 								<Group justify="space-between">
-									<Text>Id</Text>
+									<Text>ID</Text>
 									<Text>{data.id} </Text>
 								</Group>
 								<Divider style={{ margin: '0' }} my="sm" />
 								<Group justify="space-between">
 									<Text>Created At</Text>
-									<Text>{new Date(data.createdAt).toLocaleString()} </Text>
+									<Code>{new Date(data.createdAt).toLocaleString()} </Code>
 								</Group>
 								{data.reviewedAt && (
 									<>
 										<Divider style={{ margin: '0' }} my="sm" />
 										<Group justify="space-between">
 											<Text>Reviewed At</Text>
-											<Text>{new Date(data.reviewedAt).toLocaleString()} </Text>
+											<Code>{new Date(data.reviewedAt).toLocaleString()} </Code>
 										</Group>
 									</>
 								)}
 								<Divider style={{ margin: '0' }} my="sm" />
 								<Group justify="space-between">
-									<Text>Discord Id</Text>
-									<Text>{data?.user?.discordId} </Text>
+									<Text>Discord Name</Text>
+									<Tooltip label={'Click to copy ID'}>
+										<Group>
+											<Text>{data?.user?.discordName} </Text>
+											<ActionIcon
+												variant="light"
+												color="gray"
+												onClick={() => clipboard.copy(data?.user?.discordId)}
+											>
+												<IconCopy />
+											</ActionIcon>
+										</Group>
+									</Tooltip>
 								</Group>
 								<Divider style={{ margin: '0' }} my="sm" />
 								<Group justify="space-between">
 									<Text>Minecraft Name</Text>
-									<Text>{data?.user?.name} </Text>
+									<Text>{data?.user?.name || '--'} </Text>
 								</Group>
 								<Divider style={{ margin: '0' }} my="sm" />
 								<Group justify="space-between">
 									<Text>Trial</Text>
-									<Text>{data.trial ? 'Yes' : 'No'} </Text>
+									<Badge
+										variant="gradient"
+										gradient={
+											data.trial ? { from: 'green', to: 'lime' } : { from: 'red', to: 'orange' }
+										}
+									>
+										{data.trial ? 'Yes' : 'No'}{' '}
+									</Badge>
 								</Group>
 								<Divider style={{ margin: '0' }} my="sm" />
 								<Group justify="space-between">
@@ -166,6 +189,15 @@ const Apply: NextPage = ({ team, id }: any) => {
 										{statusToString(data.status)}
 									</Badge>
 								</Group>
+								{data.status != 'SEND' && (
+									<>
+										<Divider style={{ margin: '0' }} my="sm" />
+										<Group justify="space-between">
+											<Text>Reviewer</Text>
+											<Text>{data?.reviewer?.discordName} </Text>
+										</Group>
+									</>
+								)}
 							</Stack>
 							{data.status != 'SEND' && (
 								<Alert title="Reviewer Feedback" mt="md">

diff --git a/src/pages/teams/[team]/manage/review/index.tsx b/src/pages/teams/[team]/manage/review/index.tsx
@@ -35,8 +35,6 @@ const Review = ({ team }: any) => {
 			}}
 			seo={{ nofollow: true, noindex: true }}
 			requiredPermissions={[
-				'team.settings.edit',
-				'team.socials.edit',
 				'team.application.edit',
 				'team.application.list',
 				'team.application.review',