Charonyu's Profile

我最近剛好有個想做的sideProject

第一件事我想先做一個登入的地方

我們先做一個Login 的，我是用shadcn+tailwind css做的


import React, { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import useLogin from './useLogin'

export default function Login() {
    const [account, setAccount] = useState("")
    const [password, setPassword] = useState("")
    const { login, loading, error } = useLogin()

    if (error) return <div>Error: {error}</div>
    if (loading) return <div>loading...</div>
    return (
        <div className='w-screen h-screen flex flex-col justify-center items-center'>
            <h1 className='text-2xl'>Login</h1>
            <Input className='w-[200px] my-2' type='text' placeholder="Account" value={account} onChange={(e) => setAccount(e.target.value)} />
            <Input className='w-[200px] my-2' type='password' placeholder="password" value={password} onChange={(e) => setPassword(e.target.value)} />
            <Button size="sm" onClick={() => login(account, password)}>Login</Button>
        </div>
    )
}

寫完Login發現我們需要login function, loading, error這三個東西

了解需求後我們就能開始寫hook了

useLogin


import axios from "axios";
import React, { useState } from "react";

export default function useLogin() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  async function login(account: string, password: string) {
    if (!account) return setError("請輸入帳號");
    if (!password) return setError("請輸入密碼");
    try {
      setLoading(true);
      await axios.post("apiUrl", {
        account,
        password,
      });
			// 導去別頁
    } catch (err) {
      setError(String(err));
    } finally {
      setLoading(false);
    }
  }

  return { login, loading, error };
}

api因為我還沒開始寫資料跟後端，所以先放一個假的，我們要先判斷使用者有沒有輸入account與password，如果沒有就要回傳錯誤，有的話先跑loading，成功的話可能要導去別頁，明天要把這個測試寫完，並且不只hook測試，也會講如何寫頁面的測試

[Day 26] 實戰時間useLogin