From d2feb08881cb20284e4091d36c6722a03c190d5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= Date: Wed, 24 Aug 2022 15:28:23 -0300 Subject: [PATCH] Add PeopleTab with loading Skeleton --- src/context/user.js | 6 + src/screens/Classroom/PeopleTab/index.js | 90 +++++++++++++ src/screens/Classroom/View.js | 3 + src/screens/Classroom/index.js | 15 ++- src/services/mocks.js | 154 +++++++++++++++++++++++ src/services/user-service.js | 10 ++ 6 files changed, 276 insertions(+), 2 deletions(-) create mode 100644 src/screens/Classroom/PeopleTab/index.js diff --git a/src/context/user.js b/src/context/user.js index bc0ea65..11b34cb 100644 --- a/src/context/user.js +++ b/src/context/user.js @@ -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 ( @@ -69,6 +73,7 @@ function useUser() { fetchFAQ, fetchClassroomAnnouncements, fetchUpcomingAssignmentsByClassId, + fetchPeopleByClassId, } = useContext(UserContext); return { @@ -80,6 +85,7 @@ function useUser() { fetchFAQ, fetchClassroomAnnouncements, fetchUpcomingAssignmentsByClassId, + fetchPeopleByClassId, }; } diff --git a/src/screens/Classroom/PeopleTab/index.js b/src/screens/Classroom/PeopleTab/index.js new file mode 100644 index 0000000..e3a9142 --- /dev/null +++ b/src/screens/Classroom/PeopleTab/index.js @@ -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 ( + + + + + + + + + + + + {createArrayFrom1ToN(5).map(i => ( + + + + + ))} + + + ); + case 'idle': + return people.map(p =>

{p.name}

); + case 'gone': + return null; + default: + return null; + } + } else if (layoutType === 'mobile') { + switch (state) { + case 'loading': + return

Loading...

; + case 'idle': + return

People Tab

; + case 'gone': + return null; + default: + return null; + } + } + }; + + return layoutResolver( + peopleTabData && peopleTabData.state, + peopleTabData && peopleTabData.people, + layoutType + ); +} + +export default PeopleTab; diff --git a/src/screens/Classroom/View.js b/src/screens/Classroom/View.js index 69af2d7..add5469 100644 --- a/src/screens/Classroom/View.js +++ b/src/screens/Classroom/View.js @@ -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} /> + ); } diff --git a/src/screens/Classroom/index.js b/src/screens/Classroom/index.js index aa2663d..b3bf5d3 100644 --- a/src/screens/Classroom/index.js +++ b/src/screens/Classroom/index.js @@ -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' } + } /> ); } diff --git a/src/services/mocks.js b/src/services/mocks.js index d358ef7..797b3a4 100644 --- a/src/services/mocks.js +++ b/src/services/mocks.js @@ -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, diff --git a/src/services/user-service.js b/src/services/user-service.js index 7f91cab..93b7ee7 100644 --- a/src/services/user-service.js +++ b/src/services/user-service.js @@ -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, };