init frontend

2026-05-20 11:39:22 +01:00 · 2023-09-27 20:27:25 +01:00
parent 4aa5cd6dfc
commit 9e6659c14e
63 changed files with 4901 additions and 0 deletions
@@ -0,0 +1,77 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useForm, hasLength } from '@mantine/form'
+import { Center, Container, Paper, Title, Text, TextInput, Textarea, Stack, Button } from '@mantine/core'
+
+import { useAppSelector } from '../app/hooks'
+import { useCreatePanelMutation } from '../app/api/panels'
+import type { CreatePanelData } from '../app/types/panels'
+
+const NewPanelPage = () => {
+  const navigate = useNavigate()
+  const [errorMsg, setErrorMsg] = useState('')
+
+  // Ensure the user is authenticated
+  const currentUser = useAppSelector((state) => state.auth.currentUser)
+  if (currentUser === null) {
+    throw Error('Authentication Required')
+  }
+
+  const panelForm = useForm<CreatePanelData>({
+    initialValues: {
+      name: '',
+      description: '',
+    },
+    validate: {
+      name: hasLength({ min: 3, max: 20 }, 'Panel name must be between 3 and 20 characters long'),
+      description: hasLength({ min: 3, max: 512 }, 'Description must be between 3 and 512 characters'),
+    }
+  })
+
+  const [createPanel, { isLoading }] = useCreatePanelMutation()
+  const submitPanelForm = async (values: CreatePanelData) => {
+    await createPanel({
+      ...values
+    }).unwrap().then((panel) => {
+      navigate(`/panel/${panel.name}`)
+    }).catch((error) => {
+      if (!error.data) {
+        setErrorMsg('Failed to access the API')
+      } else {
+        setErrorMsg(error.data.msg)
+      }
+    })
+  }
+
+  return (
+    <Center h='95%'>
+      <Container>
+        <Title align='center' weight={900}>Create a Panel</Title>
+
+        <Paper withBorder shadow='md' radius='md' p={30} mt={30}>
+          <form onSubmit={panelForm.onSubmit(submitPanelForm)}>
+            <Stack spacing='md'>
+              <TextInput 
+                label='Name'
+                placeholder='e.g. music, programming, football'
+                {...panelForm.getInputProps('name')}
+              />
+
+              <Textarea
+                label='Description'
+                placeholder='e.g. The place to talk about all things music related...'
+                {...panelForm.getInputProps('description')}
+              />
+
+              { errorMsg && <Text color='red' align='center'>{'Error: ' + errorMsg}</Text> }
+
+              <Button type='submit' variant='outline' color='teal' disabled={isLoading} fullWidth>Create Panel</Button>
+            </Stack>
+          </form>
+        </Paper>
+      </Container>
+    </Center>
+  )
+}
+
+export default NewPanelPage