🐱‍😒💋

frontend/src/app/components/Login.tsx

@@ -1,71 +1,40 @@
-import React, { useState, useEffect } from 'react'
-import Axios from 'axios'
+import { Button, Form, Input } from 'antd'
+import FormItem from 'antd/lib/form/FormItem'
 import { Link } from 'react-router-dom'
+import { User } from '../../types'
 
-type Props = {
-  handleLogin: (v: string) => void
-}
+import '../../scss/login.scss'
+import { useUserContext } from '../../contexts/UserContext'
 
-export const Login = ({ handleLogin }: Props) => {
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [valid, setValid] = useState(false)
-  const [error, setError] = useState('')
+type FormValues = Pick<User, 'name'> & { password: string }
 
-  useEffect(() => {
-    if (window.localStorage.userId) handleLogin(window.localStorage.userId)
-  }, [handleLogin])
+export const Login = () => {
+  const userContext = useUserContext()
 
-  useEffect(() => {
-    email && password ? setValid(true) : setValid(false)
-  }, [email, password])
+  const [form] = Form.useForm<FormValues>()
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (process.env.NODE_ENV === 'development') {
-      handleLogin(email)
-      return
-    }
-    if (!email || !password) {
-      setError('please fill out both fields')
-      return
-    }
-    try {
-      const { data } = await Axios.post('/api/login', { email, password })
-      handleLogin(data.id)
-      window.localStorage.userId = data.id
-    } catch (err) {
-      setError(err.message)
-    }
+  const handleFinish = ({ name, password }: FormValues) => {
+    userContext.handleLogin(name, password)
   }
 
   return (
     <div className="login">
-      <form onSubmit={handleSubmit}>
-        <label>
-          Type Yo Email:
-          <input
-            autoFocus
-            onChange={e => setEmail(e.target.value)}
-            value={email}
-          ></input>
-        </label>
-        <label>
-          Type Yo Password:
-          <input
-            type="password"
-            onChange={e => setPassword(e.target.value)}
-            value={password}
-          ></input>
-        </label>
-        <label>
-          <button disabled={!valid} type="submit">
-            Submit
-          </button>
-        </label>
-        {error && <p>{error}</p>}
-        <Link to="/sign-up">No Account? Sign Up!</Link>
-      </form>
+      <h1>Log In</h1>
+      <Form onFinish={handleFinish} form={form}>
+        <FormItem label="Username" name="username">
+          <Input />
+        </FormItem>
+        <FormItem label="Password" name="password">
+          <Input type="password" />
+        </FormItem>
+
+        <div className="form-footer">
+          <Link to="/sign-up">No Account? Sign Up!</Link>
+          <Button type="primary" htmlType="submit">
+            Log In!
+          </Button>
+        </div>
+      </Form>
     </div>
   )
 }