Add fetch for classrooms
This commit is contained in:
parent
32d9a1ffc3
commit
114cd05d03
5 changed files with 81 additions and 11 deletions
|
@ -1,18 +1,19 @@
|
|||
import { lazy, Suspense } from 'react';
|
||||
import { Container } from '@mui/material';
|
||||
import { useUser } from './context/user';
|
||||
import { useAuthState } from './context/auth';
|
||||
|
||||
import LoadingIndicator from './components/LoadingIndicator';
|
||||
|
||||
const AuthenticatedApp = lazy(() => import('./AuthenticatedApp'));
|
||||
const UnauthenticatedApp = lazy(() => import('./UnauthenticatedApp'));
|
||||
|
||||
function App() {
|
||||
const user = useUser();
|
||||
const { isAuthenticated } = useAuthState();
|
||||
|
||||
return (
|
||||
<Suspense fallback={<LoadingIndicator isLoading />}>
|
||||
<Container maxWidth="false" sx={container}>
|
||||
{user ? <AuthenticatedApp /> : <UnauthenticatedApp />}
|
||||
{isAuthenticated ? <AuthenticatedApp /> : <UnauthenticatedApp />}
|
||||
</Container>
|
||||
</Suspense>
|
||||
);
|
||||
|
|
|
@ -1,12 +1,17 @@
|
|||
import { createContext, useContext, useState } from 'react';
|
||||
import { sleep } from '../utils/sleep';
|
||||
|
||||
const sleep = time => new Promise(resolve => setTimeout(resolve, time));
|
||||
const getUser = shouldFail =>
|
||||
sleep(3000).then(() => {
|
||||
if (shouldFail) {
|
||||
return { message: 'Falha na autenticação' };
|
||||
} else {
|
||||
return { username: 'Leonardo' };
|
||||
return {
|
||||
id: '0021564',
|
||||
username: 'leonardomurca',
|
||||
name: 'Leonardo',
|
||||
lastName: 'Murça',
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -1,14 +1,74 @@
|
|||
import { createContext, useContext } from 'react';
|
||||
import { createContext, useContext, useEffect, useState } from 'react';
|
||||
import { sleep } from '../utils/sleep';
|
||||
import { useAuthState } from './auth';
|
||||
|
||||
const getClassrooms = userId =>
|
||||
sleep(3000).then(() => {
|
||||
console.log('userId: ' + userId);
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
name: 'Introdução à Ciência de Dados',
|
||||
abbreviation: 'ICD',
|
||||
teacher: 'Carlos Alexandre Silva',
|
||||
},
|
||||
{
|
||||
name: 'Gestão de Projetos',
|
||||
abbreviation: 'GP',
|
||||
teacher: 'Míriam Lúcia Barbosa',
|
||||
},
|
||||
{
|
||||
name: 'Banco de Dados II',
|
||||
abbreviation: 'BDII',
|
||||
teacher: 'Cristiane Norbiato Targa',
|
||||
},
|
||||
{
|
||||
name: 'Contabilidade Básica',
|
||||
abbreviation: 'CB',
|
||||
teacher: 'Alexandre Couto Cardoso',
|
||||
},
|
||||
{
|
||||
name: 'Linguagens de Programação',
|
||||
abbreviation: 'LP',
|
||||
teacher: 'Gabriel Felipe Cândido Novy',
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
|
||||
const UserContext = createContext();
|
||||
|
||||
function UserProvider(props) {
|
||||
return <UserContext.Provider value={useAuthState().user} {...props} />;
|
||||
const { user } = useAuthState();
|
||||
const [state, setState] = useState({
|
||||
status: 'idle',
|
||||
user: null,
|
||||
classrooms: [],
|
||||
error: null,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setState({ user });
|
||||
}, [user]);
|
||||
|
||||
const classrooms = () => {
|
||||
setState({ ...state, status: 'pending' });
|
||||
getClassrooms(user.id).then(data =>
|
||||
setState({ status: 'success', user, classrooms: data.data, error: null })
|
||||
);
|
||||
};
|
||||
|
||||
return <UserContext.Provider value={{ state, classrooms }} {...props} />;
|
||||
}
|
||||
|
||||
function useUser() {
|
||||
return useContext(UserContext);
|
||||
const { state, classrooms } = useContext(UserContext);
|
||||
const isPending = state.status === 'pending';
|
||||
|
||||
return {
|
||||
isPending,
|
||||
classrooms,
|
||||
};
|
||||
}
|
||||
|
||||
export { UserProvider, useUser };
|
||||
|
|
|
@ -1,12 +1,13 @@
|
|||
import { useAuthState } from '../../context/auth';
|
||||
import { useUser } from '../../context/user';
|
||||
|
||||
function Home() {
|
||||
const { logout, isPending } = useAuthState();
|
||||
const { isPending, state, classrooms } = useUser();
|
||||
console.log(state);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>You're logged in!</h2>
|
||||
<button onClick={logout}>Logout</button>
|
||||
<button onClick={classrooms}>Get classrooms</button>
|
||||
{isPending && <h1>Loading...</h1>}
|
||||
</div>
|
||||
);
|
||||
|
|
3
src/utils/sleep.js
Normal file
3
src/utils/sleep.js
Normal file
|
@ -0,0 +1,3 @@
|
|||
const sleep = time => new Promise(resolve => setTimeout(resolve, time));
|
||||
|
||||
export { sleep };
|
Loading…
Reference in a new issue