wip

frontend/src/api/data/index.ts

@@ -1,6 +1,7 @@
 import { User } from '../../types'
 
 export const mockUser: User = {
-  username: 'TestUser42',
   id: '4242-4242-4242-4242',
+  username: 'TestUser42',
+  email: 'testuser@email.com',
 }

frontend/src/app/CoreLayout.tsx

@@ -6,6 +6,7 @@ import { Route, Switch } from 'react-router'
 import { Dashboard } from './pages/Dashboard'
 import { NavRoute, AppHeader } from './layout/AppHeader'
 import { Profile } from './pages/Profile'
+import { NewUser } from './forms/NewUser'
 
 export const CoreLayout = () => {
   const { user } = useUserContext()
@@ -13,6 +14,7 @@ export const CoreLayout = () => {
   const routes: NavRoute[] = [
     { exact: true, path: '/', label: 'Dashboard', component: Dashboard },
     { path: '/profile', label: 'Profile', component: Profile },
+    { path: '/new/user', label: 'New User', component: NewUser },
   ]
 
   if (!user)

frontend/src/app/forms/NewUser.tsx

@@ -1,6 +1,9 @@
-import { Button, Form, Input, message } from 'antd'
+import { Button, Form, Input, Layout, message } from 'antd'
+import axios from 'axios'
 import { User } from '../../types'
 
+axios.defaults.baseURL = 'http://localhost:8080/'
+
 type NewUserForm = Omit<User, 'id'> & {
   password1: string
   password2: string
@@ -10,27 +13,38 @@ export const NewUser = () => {
   const [form] = Form.useForm<NewUserForm>()
 
   const handleFinish = (user: NewUserForm) => {
+    console.log('Asdfdas')
     if (user.password1 !== user.password2) {
       message.error('passwords do not match')
       return
     }
+
+    axios.post(`/dj-rest-auth/registration`, user)
   }
 
+  console.log('ASDFUASDJF')
+
   return (
-    <Form form={form} onFinish={handleFinish}>
+    <Layout>
-      <Form.Item label="username" name="name">
+      <Layout.Content>
-        <Input></Input>
+        <Form form={form} onFinish={handleFinish}>
-      </Form.Item>
+          <Form.Item label="username" name="name">
-      <Form.Item label="email" name="email">
+            <Input></Input>
-        <Input></Input>
+          </Form.Item>
-      </Form.Item>
+          <Form.Item label="email" name="email">
-      <Form.Item label="password" name="password1">
+            <Input></Input>
-        <Input></Input>
+          </Form.Item>
-      </Form.Item>
+          <Form.Item label="password" name="password1">
-      <Form.Item label="confirm" name="password2">
+            <Input></Input>
-        <Input></Input>
+          </Form.Item>
-      </Form.Item>
+          <Form.Item label="confirm" name="password2">
-      <Button htmlType="submit">Create</Button>
+            <Input></Input>
-    </Form>
+          </Form.Item>
+          <Button type="primary" htmlType="submit">
+            Create
+          </Button>
+        </Form>
+      </Layout.Content>
+    </Layout>
   )
 }

frontend/src/app/layout/AppHeader.tsx

@@ -32,7 +32,9 @@ export const AppHeader = ({ user, routes }: Props) => {
       <div className="header-left">
         <Typography.Title level={3}>MVP Django React! 🤠</Typography.Title>
         {routes?.map((route) => (
-          <Link to={route.path}>{route.label}</Link>
+          <Link key={`${route.path}-${route.label}`} to={route.path}>
+            {route.label}
+          </Link>
         ))}
       </div>
       <div>

frontend/src/contexts/UserContext.tsx

@@ -35,10 +35,10 @@ export const UserContextProvider = ({ children }: Props) => {
   useEffect(() => {
     const login = async () => {
       try {
-        const res = axios.post('/dj-rest-auth/login', {
+        // const res = axios.post('/dj-rest-auth/login', {
-          email: 'blah',
+        //   email: 'blah',
-          password: 'blah',
+        //   password: 'blah',
-        })
+        // })
         const user = await getLoggedInUser()
         if (!user) throw new Error()
         setUser(user)

frontend/src/scss/app.scss

@@ -43,3 +43,8 @@
     padding: 0;
   }
 }
+
+.ant-layout-content {
+  max-width: 900px;
+  margin: auto;
+}