working on location form

frontend/src/components/forms/LocationForm.js

@@ -1,9 +1,12 @@
 import React, {useState, useEffect} from 'react';
-import { Text, Title, TextInput, Button, NumberInput,  } from '@mantine/core'
+import { Text, Title, TextInput, Button, NumberInput, Textarea, Grid, Group, useMantineTheme, MantineTheme } from '@mantine/core'
 import { DatePicker } from '@mantine/dates';
 import { useForm } from '@mantine/form';
 import { useAtom } from 'jotai';
 import { serverConfigAtom } from '../../state/main'
+import { backendAPI } from '../../services/backend-api';
+import { BsCardImage, BsCloudUpload, BsXLg } from 'react-icons/bs'
+import { Dropzone, DropzoneStatus, IMAGE_MIME_TYPE, PDF_MIME_TYPE } from '@mantine/dropzone';
 
 
 
@@ -11,13 +14,127 @@ function LocationForm(props) {
     const {location, modify: bool} = props
     const [opened, setOpened] = useState(false);
     const [serverConfig] = useAtom(serverConfigAtom)
+    const theme = useMantineTheme();
 
 
+    const form = useForm({
+        initialValues: {
+            Name: '',
+            Description: '',
+            Notes: '',
+            Address: '',
+            SquareFeet: 0,
+            Latitude: '',
+            Longitude: '',
+            DatePurchased: '',
+            PurchasePrice: '',
+            CurrentValue: '',
+            CoverPhoto: '',
+            AdditionalPhotos: [],
+        },
+
+        validate: {
+
+        },
+    });
+
+    // useEffect(() => {
+    //     console.log("FORM", form)
+    // }, [form])
+    
+
+    const submitNewLocation = (values) => {
+        console.log("VALUES: ", values)
+        const formData = new FormData(values)
+        backendAPI.post("/locations/new", formData).then((result) => {
+            console.log("result: ", result.data)
+        }).catch(err => {
+            console.log("Error adding new location!", err)
+        })
+    }
+
+    function ImageUploadIcon({status, ...props}) {
+        if (status.accepted) {
+          return <BsCloudUpload {...props} />;
+        }
+      
+        if (status.rejected) {
+          return <BsXLg {...props} />;
+        }
+      
+        return <BsCardImage {...props} />;
+      }
+
+    function getIconColor(status, theme) {
+        return status.accepted
+          ? theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]
+          : status.rejected
+          ? theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]
+          : theme.colorScheme === 'dark'
+          ? theme.colors.dark[0]
+          : theme.colors.gray[7];
+      }
+
+    const dropzoneChildren = (status, theme, multiple) => (
+        <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
+          <ImageUploadIcon status={status} style={{ color: getIconColor(status, theme) }} size={80} />
+      
+          <div>
+            <Text size="xl" inline>
+              Drag images here or click to select file{multiple ? "s" : ""}
+            </Text>
+            <Text size="sm" color="dimmed" inline mt={7}>
+              Attach as many files as you like, each file should not exceed 5mb
+            </Text>
+          </div>
+        </Group>
+      );
+
 
     return (
         <>
-        <Title>Location Form</Title> 
-        <Text>This is the homepage!</Text>
+            <Title>Location Form</Title> 
+            <form onSubmit={form.onSubmit((values) => submitNewLocation(values))}>
+                <Grid>
+
+                    <Grid.Col md={6} lg={4} sm={12} xs={12}>
+                        <TextInput label="Location Name" value={form.values.Name} required {...form.getInputProps('Name')}/>
+                        <TextInput label="Description" value={form.values.Description} {...form.getInputProps('Description')} />
+                        <Textarea label="Location Notes" value={form.values.Notes} {...form.getInputProps('Notes')}/>
+                        <TextInput label="Street Address" value={form.values.Address} {...form.getInputProps('Address')} />
+                        <NumberInput label="Square Feet" value={form.values.SquareFeet} {...form.getInputProps('SquareFeet')} />
+                        <TextInput label="Latitude" value={form.values.Latitude} {...form.getInputProps('Latitude')} />
+                        <TextInput label="Longitude" value={form.values.Longitude} {...form.getInputProps('Longitude')}/>
+                        <TextInput label="Date Purchased" value={form.values.DatePurchased} {...form.getInputProps('DatePurchased')} />
+                        <TextInput label="Purchase Price" value={form.values.PurchasePrice} {...form.getInputProps('PurchasePrice')}/>
+                        <TextInput label="Current Value" value={form.values.CurrentValue} {...form.getInputProps('CurrentValue')}/>
+                        <Title order={4}>Location Cover Photo</Title>
+                        <Dropzone
+                            onDrop={(files) => form.setFieldValue('CoverPhoto', files[0])}
+                            onReject={(files) => console.log('rejected files', files)}
+                            maxSize={3 * 1024 ** 2}
+                            multiple={false}
+                            accept={IMAGE_MIME_TYPE}  
+                        >
+                            {(status) => dropzoneChildren(status, theme, false)}
+                        </Dropzone>
+                        <Title order={4}>Additional Location Photos</Title>
+                        <Dropzone
+                            onDrop={(files) => form.setFieldValue('AdditionalPhotos', files)}
+                            onReject={(files) => console.log('rejected files', files)}
+                            maxSize={3 * 1024 ** 2}
+                            multiple={true}
+                            accept={PDF_MIME_TYPE}
+                            
+                        >
+                            {(status) => dropzoneChildren(status, theme, true)}
+                        </Dropzone>
+
+                    </Grid.Col>
+                 
+                </Grid>
+               
+            </form>
         </>
 
     );