Skip to content
This repository was archived by the owner on Jan 26, 2024. It is now read-only.

Fix show error message #43

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix show error message #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c0e34c2
add loading state on submit for login and signup
timo-tech19 Jul 19, 2022
3147578
display error message for login and sign up form
timo-tech19 Jul 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 15 additions & 7 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,29 @@ import { useGetUser } from "./hooks";

function App() {
// eslint-disable-next-line
const [{ user, isLoading, isError }, dispatch] = useGetUser();
const [{ user, isLoading, isError, errorMessage }, dispatch] = useGetUser();

return (
<BrowserRouter>
<Switch>
<Route path="/todos">
{user ? <Todo user={user} dispatch={dispatch} /> : <Redirect to="/login" />}
<Route path='/todos'>
{user ? (
<Todo user={user} dispatch={dispatch} />
) : (
<Redirect to='/login' />
)}
</Route>
<Route path="/login">
{user ? <Redirect to="/todos" /> : <Login dispatch={dispatch}/>}
<Route path='/login'>
{user ? (
<Redirect to='/todos' />
) : (
<Login dispatch={dispatch} error={errorMessage} />
)}
</Route>
<Route exact path="/">
<Route exact path='/'>
<Landing />
</Route>
<Redirect to="/" />
<Redirect to='/' />
</Switch>
</BrowserRouter>
);
Expand Down
8 changes: 7 additions & 1 deletion src/hooks/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,12 @@ export const useGetUser = () => {
user: action.payload,
};
case FetchState.FETCH_FAILURE:
return { ...state, isLoading: false, isError: true };
return {
...state,
isLoading: false,
isError: true,
errorMessage: action.payload?.message,
};
default:
throw new Error();
}
Expand All @@ -77,6 +82,7 @@ export const useGetUser = () => {
const [state, dispatch] = useReducer(reducer, {
isLoading: false,
isError: true,
errorMessage: null,
data: [],
});

Expand Down
53 changes: 31 additions & 22 deletions src/pages/Login/Login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,64 +3,73 @@ import api from "../../api/api";
import SignUp from "./SignUp";
import { FetchState } from "../../hooks";

const Login = ({ dispatch }) => {
const Login = ({ dispatch, error }) => {
const [email, setEmail] = useState();
const [password, setPassword] = useState();
const [register, setRegister] = useState(false);
const [loading, setLoading] = useState(false);

const handleLogin = async (e) => {
e.preventDefault();
setLoading(true);
dispatch({ type: FetchState.FETCH_INIT });
try {
await api.createSession(email, password);
const data = await api.getAccount();
dispatch({ type: FetchState.FETCH_SUCCESS, payload: data });
} catch (e) {
dispatch({ type: FetchState.FETCH_FAILURE });
setLoading(false);
console.log(e.message);
dispatch({
type: FetchState.FETCH_FAILURE,
payload: { message: e.message },
});
}
};

return register ? (
<SignUp setRegister={setRegister} dispatch={dispatch} />
<SignUp setRegister={setRegister} dispatch={dispatch} error={error} />
) : (
<section className="container h-screen mx-auto flex">
<div className="flex-grow flex flex-col max-w-xl justify-center p-6">
<h1 className="text-6xl font-bold">Login</h1>
<p className="mt-6">
<section className='container h-screen mx-auto flex'>
<div className='flex-grow flex flex-col max-w-xl justify-center p-6'>
<h1 className='text-6xl font-bold'>Login</h1>
<p className='mt-6'>
{" "}
Don't have an account ?{" "}
<span
className="cursor-pointer underline"
className='cursor-pointer underline'
onClick={() => setRegister(true)}
>
Sign Up
</span>{" "}
</p>
<form onSubmit={handleLogin}>
<label className="block mt-6"> Email</label>
<label className='block mt-6'> Email</label>
<input
className="w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900"
type="text"
className='w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900'
type='text'
onChange={(e) => setEmail(e.target.value)}
name="email"
autoComplete="email"
name='email'
autoComplete='email'
/>
<label className="block mt-6"> Password</label>
<label className='block mt-6'> Password</label>
<input
className="w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900"
type="password"
className='w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900'
type='password'
onChange={(e) => setPassword(e.target.value)}
name="password"
autoComplete="password"
name='password'
autoComplete='password'
/>

<div className="mt-6">
<p className='text-red-600 text-sm mt-4'>{error}&nbsp;</p>

<div className='mt-6'>
<button
type="submit"
type='submit'
disabled={!email || !password}
className="mx-auto mt-4 py-4 px-16 font-semibold rounded-lg shadow-md bg-gray-900 text-white border hover:border-gray-900 hover:text-gray-900 hover:bg-white focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
className='mx-auto mt-4 py-4 px-16 font-semibold rounded-lg shadow-md bg-gray-900 text-white border hover:border-gray-900 hover:text-gray-900 hover:bg-white focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed'
>
Login
{loading ? "Please Wait..." : "Login"}
</button>
</div>
</form>
Expand Down
60 changes: 34 additions & 26 deletions src/pages/Login/SignUp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,73 +2,81 @@ import { useState } from "react";
import api from "../../api/api";
import { FetchState } from "../../hooks";

const SignUp = ({ setRegister, dispatch }) => {
const SignUp = ({ setRegister, dispatch, error }) => {
const [name, setName] = useState();
const [email, setEmail] = useState();
const [password, setPassword] = useState();
const [loading, setLoading] = useState(false);

const handleSignup = async (e) => {
e.preventDefault();
setLoading(true);
dispatch({ type: FetchState.FETCH_INIT });
try {
const user = await api.createAccount(email, password, name);
await api.createSession(email, password);
dispatch({ type: FetchState.FETCH_SUCCESS, payload: user });
} catch (e) {
dispatch({ type: FetchState.FETCH_FAILURE });
setLoading(false);
dispatch({
type: FetchState.FETCH_FAILURE,
payload: { message: e.message },
});
}
};

return (
<>
<section className="container h-screen mx-auto flex">
<div className="flex-grow flex flex-col max-w-xl justify-center p-6">
<h1 className="text-6xl font-bold">Sign Up</h1>
<p className="mt-4">
<section className='container h-screen mx-auto flex'>
<div className='flex-grow flex flex-col max-w-xl justify-center p-6'>
<h1 className='text-6xl font-bold'>Sign Up</h1>
<p className='mt-4'>
{" "}
Already have an account ?{" "}
<span
className="cursor-pointer underline"
className='cursor-pointer underline'
onClick={() => setRegister(false)}
>
Login
</span>{" "}
</p>
<form onSubmit={handleSignup}>
<label className="block mt-6"> Name</label>
<label className='block mt-6'> Name</label>
<input
className="w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900"
type="text"
className='w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900'
type='text'
onChange={(e) => setName(e.target.value)}
name="name"
autoComplete="name"
name='name'
autoComplete='name'
/>

<label className="block mt-6"> Email</label>
<label className='block mt-6'> Email</label>
{/* “Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” */}
<input
className="w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900"
type="text"
className='w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900'
type='text'
onChange={(e) => setEmail(e.target.value)}
name="email"
autoComplete="email"
name='email'
autoComplete='email'
/>
<label className="block mt-6"> Password</label>
<label className='block mt-6'> Password</label>
<input
className="w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900"
type="password"
className='w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900'
type='password'
onChange={(e) => setPassword(e.target.value)}
name="password"
autoComplete="password"
name='password'
autoComplete='password'
/>

<div className="mt-6">
<p className='text-red-600 text-sm mt-4'>{error}&nbsp;</p>

<div className='mt-6'>
<button
type="submit"
type='submit'
disabled={!name || !email || !password}
className="mx-auto mt-4 py-4 px-16 font-semibold rounded-lg shadow-md bg-gray-900 text-white border hover:border-gray-900 hover:text-gray-900 hover:bg-white focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
className='mx-auto mt-4 py-4 px-16 font-semibold rounded-lg shadow-md bg-gray-900 text-white border hover:border-gray-900 hover:text-gray-900 hover:bg-white focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed'
>
Sign Up
{loading ? "Please wait..." : "Sign Up"}
</button>
</div>
</form>
Expand Down