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 { lazy, Suspense } from 'react';
|
||||||
import { Container } from '@mui/material';
|
import { Container } from '@mui/material';
|
||||||
import { useUser } from './context/user';
|
import { useAuthState } from './context/auth';
|
||||||
|
|
||||||
import LoadingIndicator from './components/LoadingIndicator';
|
import LoadingIndicator from './components/LoadingIndicator';
|
||||||
|
|
||||||
const AuthenticatedApp = lazy(() => import('./AuthenticatedApp'));
|
const AuthenticatedApp = lazy(() => import('./AuthenticatedApp'));
|
||||||
const UnauthenticatedApp = lazy(() => import('./UnauthenticatedApp'));
|
const UnauthenticatedApp = lazy(() => import('./UnauthenticatedApp'));
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const user = useUser();
|
const { isAuthenticated } = useAuthState();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Suspense fallback={<LoadingIndicator isLoading />}>
|
<Suspense fallback={<LoadingIndicator isLoading />}>
|
||||||
<Container maxWidth="false" sx={container}>
|
<Container maxWidth="false" sx={container}>
|
||||||
{user ? <AuthenticatedApp /> : <UnauthenticatedApp />}
|
{isAuthenticated ? <AuthenticatedApp /> : <UnauthenticatedApp />}
|
||||||
</Container>
|
</Container>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,12 +1,17 @@
|
||||||
import { createContext, useContext, useState } from 'react';
|
import { createContext, useContext, useState } from 'react';
|
||||||
|
import { sleep } from '../utils/sleep';
|
||||||
|
|
||||||
const sleep = time => new Promise(resolve => setTimeout(resolve, time));
|
|
||||||
const getUser = shouldFail =>
|
const getUser = shouldFail =>
|
||||||
sleep(3000).then(() => {
|
sleep(3000).then(() => {
|
||||||
if (shouldFail) {
|
if (shouldFail) {
|
||||||
return { message: 'Falha na autenticação' };
|
return { message: 'Falha na autenticação' };
|
||||||
} else {
|
} 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';
|
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();
|
const UserContext = createContext();
|
||||||
|
|
||||||
function UserProvider(props) {
|
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() {
|
function useUser() {
|
||||||
return useContext(UserContext);
|
const { state, classrooms } = useContext(UserContext);
|
||||||
|
const isPending = state.status === 'pending';
|
||||||
|
|
||||||
|
return {
|
||||||
|
isPending,
|
||||||
|
classrooms,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export { UserProvider, useUser };
|
export { UserProvider, useUser };
|
||||||
|
|
|
@ -1,12 +1,13 @@
|
||||||
import { useAuthState } from '../../context/auth';
|
import { useUser } from '../../context/user';
|
||||||
|
|
||||||
function Home() {
|
function Home() {
|
||||||
const { logout, isPending } = useAuthState();
|
const { isPending, state, classrooms } = useUser();
|
||||||
|
console.log(state);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h2>You're logged in!</h2>
|
<h2>You're logged in!</h2>
|
||||||
<button onClick={logout}>Logout</button>
|
<button onClick={classrooms}>Get classrooms</button>
|
||||||
{isPending && <h1>Loading...</h1>}
|
{isPending && <h1>Loading...</h1>}
|
||||||
</div>
|
</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