Add PeopleTab with loading Skeleton

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 (
     <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,
   };
 }
 

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 (
+            <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;

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}
       />
+      <PeopleTab layoutType={layoutType} peopleTabData={peopleTabData} />
     </Container>
   );
 }

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' }
+      }
     />
   );
 }

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,

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