feature/mantine form with validation for host signup

.gitignore

@@ -11,7 +11,7 @@
 # next.js
 /.next/
 /out/
-
+.trunk
 # production
 /build
 
@@ -36,3 +36,4 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+.markdownlint.yaml

components/hostLookup.tsx

@@ -19,13 +19,15 @@ export const HostLookup = ({ hosts }: HostLookupProps) => {
   const rows = hosts?.map((element) => (
     <tr key={element.fields.firstName}>
       <td>{element.fields.cityRegion}</td>
-      <td>{element.fields.firstName} {element.fields.lastName}</td>
+      <td>
+        {element.fields.firstName} {element.fields.lastName}
+      </td>
       <td>{element.fields.hostCapacity}</td>
       <td>
-          <Button variant="light" size="xs">
-            <MdOutlineHouse style={{ height: '1rem', width: '1rem' }} />
-            Contact
-          </Button>
+        <Button variant="light" size="xs">
+          <MdOutlineHouse style={{ height: '1rem', width: '1rem' }} />
+          Contact
+        </Button>
       </td>
     </tr>
   ));
@@ -37,22 +39,19 @@ export const HostLookup = ({ hosts }: HostLookupProps) => {
         <Title order={3} style={{ padding: '1rem' }}>
           Available hosts
         </Title>
-
-        <Table
-          striped
-          horizontalSpacing={5}
-          style={{ display: 'block', height: 350, overflow: 'auto' }}
-        >
-          <thead>
-            <tr>
-              <th>Location</th>
-              <th>Name</th>
-              <th>Cap.</th>
-              <th>Contact host</th>
-            </tr>
-          </thead>
-          <tbody>{rows}</tbody>
-        </Table>
+        <div style={{ width: '100%', maxHeight: 500, overflow: 'auto' }}>
+          <Table striped horizontalSpacing={5}>
+            <thead>
+              <tr>
+                <th>Location</th>
+                <th>Name</th>
+                <th>Cap.</th>
+                <th>Contact host</th>
+              </tr>
+            </thead>
+            <tbody>{rows}</tbody>
+          </Table>
+        </div>
       </Paper>
       <Space h="xl" />
 

components/hostSignup.tsx

@@ -1,24 +1,125 @@
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { Space } from '@mantine/core';
+import { useForm } from '@mantine/hooks';
+
+import {
+  Space,
+  Paper,
+  Title,
+  TextInput,
+  Textarea,
+  Button,
+  NumberInput,
+  MultiSelect,
+  Checkbox,
+} from '@mantine/core';
+import { MdOutlineMailOutline, MdMap, MdPhone } from 'react-icons/md';
+import axios from 'axios';
+
+const languagesOptions = [
+  { value: 'English', label: 'English' },
+  { value: 'Ukrainian', label: 'Ukrainian' },
+  { value: 'Russian', label: 'Russian' },
+  { value: 'Polish', label: 'Polish' },
+  { value: 'Romanian', label: 'Romanian' },
+  { value: 'German', label: 'German' },
+  { value: 'Hungarian', label: 'Hungarian' },
+];
+
 export const HostSignup = () => {
-  const { register, handleSubmit } = useForm();
-  const [data, setData] = useState('');
+  const form = useForm({
+    initialValues: {
+      firstName: '',
+      lastName: '',
+      phoneNumber: '',
+      email: '',
+      cityRegion: '',
+      accomodationDetails: '',
+      hostCapacity: 0,
+      languages: '',
+      termsOfService: false,
+    },
+
+    validationRules: {
+      email: (value) => /^\S+@\S+$/.test(value),
+    },
+  });
+
+  const onSubmitHandler = (values: typeof form['values']) => {
+    console.log(values);
+    axios({ method: 'POST', url: '/api/host', data: values });
+  };
 
   return (
     <>
       <Space h="sm" />
-      <iframe
-        className="airtable-embed"
-        src="https://airtable.com/embed/shrGJ9QFefvxi47xL?backgroundColor=yellow"
-        frameBorder="0"
-        style={{
-          width: '100%',
-          height: '100%',
-          background: 'transparent',
-          display: 'block',
-        }}
-      ></iframe>
+      <Paper padding="lg" shadow="sm" radius="md" withBorder>
+        <Title order={3}>Find a host</Title>
+        <Space h="lg" />
+
+        <form onSubmit={form.onSubmit(onSubmitHandler)}>
+          <TextInput
+            {...form.getInputProps('firstName')}
+            placeholder="First Name"
+            label="First Name"
+            required
+          />
+          <TextInput
+            {...form.getInputProps('lastName')}
+            placeholder="Last Name"
+            label="Last Name"
+            required
+          />
+          <TextInput
+            {...form.getInputProps('phoneNumber')}
+            icon={<MdPhone />}
+            placeholder="+03 123 456 789"
+            label="Phone Number"
+            required
+          />
+          <TextInput
+            {...form.getInputProps('email')}
+            icon={<MdOutlineMailOutline />}
+            placeholder="Email"
+            label="Email address"
+            required
+          />
+          <TextInput
+            {...form.getInputProps('cityRegion')}
+            icon={<MdMap />}
+            placeholder="City"
+            label="City / Region Name"
+            required
+          />
+          <Textarea
+            {...form.getInputProps('accomodationDetails')}
+            placeholder="About the accomodation and Rules"
+            label="Accomodation details"
+          />
+          <NumberInput
+            defaultValue={1}
+            {...form.getInputProps('hostCapacity')}
+            placeholder="Number of people"
+            label="Host capacity"
+            required
+          />
+          <MultiSelect
+            {...form.getInputProps('languages')}
+            data={languagesOptions}
+            label="Spoken languages"
+            placeholder="Pick all that you like"
+          />
+          <Space h="lg" />
+          <Checkbox
+            {...form.getInputProps('termsOfService')}
+            label="I agree to sell my privacy"
+            required
+          />
+          <Space h="xl" />
+
+          <Button type="submit" color="teal">
+            Submit
+          </Button>
+        </form>
+      </Paper>
     </>
   );
 };

config/index.ts

@@ -1,2 +1,2 @@
-export const AIRTABLE_URL = `https://api.airtable.com/v0/${process.env.AIRTABLE_APP_ID}/Hosts?maxRecords=50&view=Grid%20view`;
-export const AIRTABLE_API_KEY = process.env.AIRTABLE_API_KEY;
+export const AIRTABLE_URL = `https://api.airtable.com/v0/${process.env.AIRTABLE_APP_ID}/Hosts`;
+export const AIRTABLE_API_KEY = process.env.AIRTABLE_API_KEY;

pages/api/host.ts

@@ -0,0 +1,50 @@
+import axios from 'axios';
+import { AIRTABLE_API_KEY, AIRTABLE_URL } from '../../config';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method === 'POST') {
+    console.log('Called with', req.body);
+    const {
+      firstName,
+      lastName,
+      phoneNumber,
+      email,
+      cityRegion,
+      accomodationDetails,
+      hostCapacity,
+      languages,
+    } = req.body;
+    try {
+      const response = await axios({
+        method: 'POST',
+        url: AIRTABLE_URL,
+        data: {
+          records: [
+            {
+              fields: {
+                firstName,
+                lastName,
+                phoneNumber,
+                email,
+                cityRegion,
+                accomodationDetails,
+                hostCapacity,
+                languages,
+              },
+            },
+          ],
+          typecast: true,
+        },
+        headers: { Authorization: `Bearer ${AIRTABLE_API_KEY}` },
+      });
+      res.status(200).json({ created: response.data });
+    } catch (err) {
+      res.status(500).json({ error: err });
+    }
+  } else {
+    res.status(404).json({ info: 'method not implemented' });
+  }
+};
+
+export default handler;

pages/host-lookup.tsx

@@ -23,7 +23,7 @@ export default Home;
 export async function getServerSideProps() {
   const response = await axios({
     method: 'GET',
-    url: AIRTABLE_URL,
+    url: `${AIRTABLE_URL}?maxRecords=50&view=Grid%20view`,
     headers: { Authorization: `Bearer ${AIRTABLE_API_KEY}` },
   });