Add PeopleTab with loading Skeleton
This commit is contained in:
parent
76e1c09632
commit
d2feb08881
6 changed files with 276 additions and 2 deletions
|
|
@ -8,6 +8,7 @@ import {
|
|||
getClassroomById,
|
||||
getClassrooms,
|
||||
getFaq,
|
||||
getPeopleByClassId,
|
||||
getUpcomingAssignmentsByClassId,
|
||||
} from '../services/user-service';
|
||||
|
||||
|
|
@ -42,6 +43,8 @@ function UserProvider(props) {
|
|||
const fetchUpcomingAssignmentsByClassId = classId =>
|
||||
getUpcomingAssignmentsByClassId(classId);
|
||||
|
||||
const fetchPeopleByClassId = classId => getPeopleByClassId(classId);
|
||||
|
||||
return (
|
||||
<UserContext.Provider
|
||||
value={{
|
||||
|
|
@ -53,6 +56,7 @@ function UserProvider(props) {
|
|||
fetchFAQ,
|
||||
fetchClassroomAnnouncements,
|
||||
fetchUpcomingAssignmentsByClassId,
|
||||
fetchPeopleByClassId,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
|
|
@ -69,6 +73,7 @@ function useUser() {
|
|||
fetchFAQ,
|
||||
fetchClassroomAnnouncements,
|
||||
fetchUpcomingAssignmentsByClassId,
|
||||
fetchPeopleByClassId,
|
||||
} = useContext(UserContext);
|
||||
|
||||
return {
|
||||
|
|
@ -80,6 +85,7 @@ function useUser() {
|
|||
fetchFAQ,
|
||||
fetchClassroomAnnouncements,
|
||||
fetchUpcomingAssignmentsByClassId,
|
||||
fetchPeopleByClassId,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
90
src/screens/Classroom/PeopleTab/index.js
Normal file
90
src/screens/Classroom/PeopleTab/index.js
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import { Container, Skeleton, Stack } from '@mui/material';
|
||||
import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN';
|
||||
|
||||
function PeopleTab({ layoutType, peopleTabData }) {
|
||||
const layoutResolver = (state, people, layoutType) => {
|
||||
if (layoutType === 'desktop') {
|
||||
switch (state) {
|
||||
case 'loading':
|
||||
return (
|
||||
<Container
|
||||
sx={{ marginTop: '50px', height: '100vh' }}
|
||||
disableGutters
|
||||
>
|
||||
<Stack alignItems="center">
|
||||
<Skeleton
|
||||
variant="rectangular"
|
||||
width="90%"
|
||||
height={70}
|
||||
sx={{ marginBottom: '30px' }}
|
||||
/>
|
||||
<Stack
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
sx={{ width: '90%', marginLeft: '20px' }}
|
||||
>
|
||||
<Skeleton variant="circular" width={60} height={60} />
|
||||
<Skeleton
|
||||
variant="rectangular"
|
||||
width="70%"
|
||||
height={40}
|
||||
sx={{ marginLeft: '15px' }}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack alignItems="center">
|
||||
<Skeleton
|
||||
variant="rectangular"
|
||||
width="90%"
|
||||
height={70}
|
||||
sx={{ marginBottom: '30px', marginTop: '50px' }}
|
||||
/>
|
||||
{createArrayFrom1ToN(5).map(i => (
|
||||
<Stack
|
||||
key={i}
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
sx={{ width: '90%', marginLeft: '20px', marginTop: '25px' }}
|
||||
>
|
||||
<Skeleton variant="circular" width={60} height={60} />
|
||||
<Skeleton
|
||||
variant="rectangular"
|
||||
width="70%"
|
||||
height={40}
|
||||
sx={{ marginLeft: '15px' }}
|
||||
/>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Container>
|
||||
);
|
||||
case 'idle':
|
||||
return people.map(p => <p key={p.id}>{p.name}</p>);
|
||||
case 'gone':
|
||||
return null;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
} else if (layoutType === 'mobile') {
|
||||
switch (state) {
|
||||
case 'loading':
|
||||
return <h1>Loading...</h1>;
|
||||
case 'idle':
|
||||
return <h1>People Tab</h1>;
|
||||
case 'gone':
|
||||
return null;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return layoutResolver(
|
||||
peopleTabData && peopleTabData.state,
|
||||
peopleTabData && peopleTabData.people,
|
||||
layoutType
|
||||
);
|
||||
}
|
||||
|
||||
export default PeopleTab;
|
||||
|
|
@ -3,6 +3,7 @@ import { Container } from '@mui/material';
|
|||
import Header from './Header';
|
||||
import AnnouncementsTab from './AnnouncementsTab';
|
||||
import AssignmentsTab from './AssignmentsTab';
|
||||
import PeopleTab from './PeopleTab';
|
||||
|
||||
import styles from './styles';
|
||||
|
||||
|
|
@ -13,6 +14,7 @@ function View({
|
|||
onSelectTabOption,
|
||||
announcementsTabData,
|
||||
assignmentsTabData,
|
||||
peopleTabData,
|
||||
}) {
|
||||
const { container } = styles[layoutType];
|
||||
return (
|
||||
|
|
@ -32,6 +34,7 @@ function View({
|
|||
layoutType={layoutType}
|
||||
assignmentsTabData={assignmentsTabData}
|
||||
/>
|
||||
<PeopleTab layoutType={layoutType} peopleTabData={peopleTabData} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ function Classroom() {
|
|||
fetchClassroomAnnouncements,
|
||||
fetchUpcomingAssignmentsByClassId,
|
||||
fetchAssignmentsByClassId,
|
||||
fetchPeopleByClassId,
|
||||
} = useUser();
|
||||
const [classroom, setClassroom] = useState(null);
|
||||
const [tabData, setTabData] = useState(null);
|
||||
|
|
@ -51,8 +52,15 @@ function Classroom() {
|
|||
}, [fetchAssignmentsByClassId, params.id]);
|
||||
|
||||
const fetchAndPopulatePoepleTabData = useCallback(async () => {
|
||||
console.log('Fetch assignments');
|
||||
}, []);
|
||||
setTabData({ tab: 'people', state: 'loading' });
|
||||
const people = await fetchPeopleByClassId(params.id);
|
||||
|
||||
setTabData({
|
||||
tab: 'people',
|
||||
state: 'idle',
|
||||
people: [...people.data],
|
||||
});
|
||||
}, [fetchPeopleByClassId, params.id]);
|
||||
|
||||
useEffect(() => {
|
||||
async function getSelectedTabData() {
|
||||
|
|
@ -108,6 +116,9 @@ function Classroom() {
|
|||
assignmentsTabData={
|
||||
tabData && tabData.tab === 'assignments' ? tabData : { state: 'gone' }
|
||||
}
|
||||
peopleTabData={
|
||||
tabData && tabData.tab === 'people' ? tabData : { state: 'gone' }
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -369,6 +369,159 @@ const faq = [
|
|||
},
|
||||
];
|
||||
|
||||
const allPeople = [
|
||||
{
|
||||
id: '1234',
|
||||
name: 'Míriam Lúcia Barbosa',
|
||||
avatar:
|
||||
'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=50&q=80',
|
||||
role: 'PROFESSOR',
|
||||
classes: [
|
||||
{
|
||||
id: '123',
|
||||
name: 'Gestão de Projetos',
|
||||
abbreviation: 'GP',
|
||||
color: '#7900F2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '4321',
|
||||
name: 'Alexandre Couto Cardoso',
|
||||
avatar: '/assets/alex.jpg',
|
||||
role: 'PROFESSOR',
|
||||
classes: [
|
||||
{
|
||||
id: '123',
|
||||
name: 'Gestão de Projetos',
|
||||
abbreviation: 'GP',
|
||||
color: '#7900F2',
|
||||
},
|
||||
{
|
||||
id: '765',
|
||||
name: 'Contabilidade Básica',
|
||||
abbreviation: 'CB',
|
||||
color: '#BB0000',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '2342',
|
||||
name: 'Carlos Alexandre Silva',
|
||||
avatar:
|
||||
'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=50&q=80',
|
||||
role: 'PROFESSOR',
|
||||
classes: [
|
||||
{
|
||||
id: '321',
|
||||
name: 'Introdução à Ciência de Dados',
|
||||
abbreviation: 'ICD',
|
||||
color: '#006FF2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '6781',
|
||||
name: 'Cristiane Norbiato Targa',
|
||||
avatar:
|
||||
'https://lh3.googleusercontent.com/a-/AOh14GhwNeQ0h2eKl2WXGuwyDzvLWtrvyrG2kJtZ7A1EBw=s75-c',
|
||||
role: 'PROFESSOR',
|
||||
classes: [
|
||||
{
|
||||
id: '666',
|
||||
name: 'Banco de Dados II',
|
||||
abbreviation: 'BDII',
|
||||
color: '#FF7A00',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '9999',
|
||||
name: 'Gabriel Felipe Cândido Novy',
|
||||
avatar:
|
||||
'https://lh3.googleusercontent.com/a-/AOh14GgvfrD--cl25V_3UOAR93sN_jKdYNJ9PXhUH2zXhQ=s75-c',
|
||||
role: 'PROFESSOR',
|
||||
classes: [
|
||||
{
|
||||
id: '333',
|
||||
name: 'Linguagens de Programação',
|
||||
abbreviation: 'LP',
|
||||
color: '#039200',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '193458673',
|
||||
name: 'Gabriel West',
|
||||
avatar: 'https://i.pravatar.cc/400?img=57',
|
||||
role: 'STUDENT',
|
||||
classes: [
|
||||
{
|
||||
id: '321',
|
||||
name: 'Introdução à Ciência de Dados',
|
||||
abbreviation: 'ICD',
|
||||
color: '#006FF2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '365967145',
|
||||
name: 'John Pager',
|
||||
avatar: 'https://i.pravatar.cc/400?img=52',
|
||||
role: 'STUDENT',
|
||||
classes: [
|
||||
{
|
||||
id: '321',
|
||||
name: 'Introdução à Ciência de Dados',
|
||||
abbreviation: 'ICD',
|
||||
color: '#006FF2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '92346574',
|
||||
name: 'Lauren Comber',
|
||||
avatar: 'https://i.pravatar.cc/400?img=44',
|
||||
role: 'STUDENT',
|
||||
classes: [
|
||||
{
|
||||
id: '321',
|
||||
name: 'Introdução à Ciência de Dados',
|
||||
abbreviation: 'ICD',
|
||||
color: '#006FF2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '239462345',
|
||||
name: 'Marina dos Santos',
|
||||
avatar: 'https://i.pravatar.cc/400?img=41',
|
||||
role: 'STUDENT',
|
||||
classes: [
|
||||
{
|
||||
id: '321',
|
||||
name: 'Introdução à Ciência de Dados',
|
||||
abbreviation: 'ICD',
|
||||
color: '#006FF2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '3454956749',
|
||||
name: 'Lee Wong',
|
||||
avatar: 'https://i.pravatar.cc/400?img=33',
|
||||
role: 'STUDENT',
|
||||
classes: [
|
||||
{
|
||||
id: '321',
|
||||
name: 'Introdução à Ciência de Dados',
|
||||
abbreviation: 'ICD',
|
||||
color: '#006FF2',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const user = {
|
||||
id: '0021564',
|
||||
username: 'leonardomurca',
|
||||
|
|
@ -385,6 +538,7 @@ export {
|
|||
allClassrooms,
|
||||
allAssignments,
|
||||
allClassroomAnnouncements,
|
||||
allPeople,
|
||||
faq,
|
||||
user,
|
||||
authFailure,
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {
|
|||
authFailure,
|
||||
allClassroomAnnouncements,
|
||||
allUpcomingAssignments,
|
||||
allPeople,
|
||||
} from './mocks';
|
||||
|
||||
const getClassrooms = userId =>
|
||||
|
|
@ -59,6 +60,14 @@ const getAssignmentsByClassId = classId =>
|
|||
};
|
||||
});
|
||||
|
||||
const getPeopleByClassId = classId =>
|
||||
sleep(4000).then(() => {
|
||||
console.log('Getting people by class id ' + classId);
|
||||
return {
|
||||
data: allPeople.filter(p => p.classes[0].id === classId),
|
||||
};
|
||||
});
|
||||
|
||||
const getFaq = () =>
|
||||
sleep(2000).then(() => {
|
||||
console.log('Fetching FAQ...');
|
||||
|
|
@ -84,6 +93,7 @@ export {
|
|||
getAssignmentsByClassId,
|
||||
getClassroomAnnouncementsById,
|
||||
getUpcomingAssignmentsByClassId,
|
||||
getPeopleByClassId,
|
||||
getFaq,
|
||||
getUser,
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue