Add fetch for classrooms

This commit is contained in:
Leonardo Murça 2022-06-08 15:57:57 -03:00
parent 32d9a1ffc3
commit 114cd05d03
5 changed files with 81 additions and 11 deletions

View file

@ -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>
);

View file

@ -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',
};
}
});

View file

@ -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 };

View file

@ -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
View file

@ -0,0 +1,3 @@
const sleep = time => new Promise(resolve => setTimeout(resolve, time));
export { sleep };