register user working with backend

package.json

@@ -17,7 +17,7 @@
         "@chakra-ui/react": "^3.2.1",
         "@emotion/react": "^11.13.5",
         "@emotion/styled": "^11.13.5",
-        "axios": "^1.6.7",
+        "axios": "^1.3.6",
         "framer-motion": "^6.5.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

src/App.jsx

@@ -21,6 +21,8 @@ import {
     Alarms,
 } from './pages';
 
+import { action as registerAction } from './pages/Register';
+
 const router = createBrowserRouter([
     {
         path: '/',
@@ -34,6 +36,7 @@ const router = createBrowserRouter([
             {
                 path: 'register',
                 element: <Register />,
+                action: registerAction,
             },
             {
                 path: 'login',

src/pages/Register.jsx

@@ -1,41 +1,39 @@
-import { Link } from 'react-router-dom';
+import { Form, redirect, Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { FormRow, Logo } from '../components';
+import customFetch from '../util/customFetch';
+
+//formData - is an api, gives back an array of arrays, must have name same as database
+export const action = async ({ request }) => {
+    const formData = await request.formData();
+    // console.log(formData);
+    const data = Object.fromEntries(formData);
+    try {
+        await customFetch.post('/auth/signup', data);
+        return redirect('/login');
+    } catch (error) {
+        console.log(error);
+        return error;
+    }
+};
 
 const Register = () => {
     return (
         <Wrapper>
-            <form className="form">
+            <Form method="post" className="form">
                 <Logo />
                 <h4>Register</h4>
-                <FormRow
-                    type="text"
-                    name="name"
-                    labelText="name"
-                    defaultValue="DefaultName"
-                    placeholder="NAME"
-                />
-                <FormRow
+                <FormRow type="text" name="name" labelText="name" placeholder="NAME" />
+                {/* <FormRow
                     type="text"
                     name="lastName"
                     labelText="lastname"
                     defaultValue="DefaultLastName"
                     placeholder="LAST NAME"
-                />
-                <FormRow
-                    type="text"
-                    name="store"
-                    labelText="store"
-                    defaultValue="DefaultStore"
-                    placeholder="STORE"
-                />
-                <FormRow
-                    type="email"
-                    name="email"
-                    labelText="email"
-                    defaultValue="[email protected]"
-                    placeholder="EMAIL"
-                />
+                /> */}
+                <FormRow type="text" name="store" labelText="store" placeholder="STORE" />
+                <FormRow type="text" name="role" labelText="role" placeholder="ROLE NAME" />
+                <FormRow type="email" name="email" labelText="email" placeholder="EMAIL" />
                 <FormRow
                     type="password"
                     name="password"
@@ -52,7 +50,7 @@ const Register = () => {
                         Login
                     </Link>
                 </p>
-            </form>
+            </Form>
         </Wrapper>
     );
 };

src/util/customFetch.js

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const customFetch = axios.create({
+    baseURL: 'http://localhost:8000/api/v1',
+});
+
+export default customFetch;

src/util/getFormValues.js

@@ -0,0 +1,10 @@
+const getFormValues = (form) => {
+    const formData = new FormData(form);
+    const values = [...formData.values()];
+    const isEmpty = values.includes('');
+    const data = Object.fromEntries(formData);
+    console.log(data);
+    return { isEmpty, data };
+};
+
+export default getFormValues;