attendance table

src/pages/attendance/attendance.tsx

@@ -0,0 +1,89 @@
+import React, { useMemo } from 'react'
+import { useParams } from 'react-router-dom'
+import styled from '@emotion/styled'
+
+import { api } from '../../__data__/api/api'
+import { PageLoader } from '../../components/page-loader/page-loader'
+import { Box, Container, Heading } from '@chakra-ui/react'
+import dayjs from 'dayjs'
+
+export const Attendance = () => {
+  const { courseId } = useParams()
+  const { data: attendance, isLoading } = api.useLessonListQuery(courseId, {
+    selectFromResult: ({ data, isLoading }) => ({
+      data: data?.body,
+      isLoading,
+    }),
+  })
+  const { data: courseInfo, isLoading: courseInfoIssLoading } =
+    api.useGetCourseByIdQuery(courseId)
+
+  const data = useMemo(() => {
+    if (!attendance) return null
+
+    const studentsMap = new Map()
+
+    attendance.forEach((lesson) => {
+      lesson.students.forEach((student) => {
+        studentsMap.set(student.sub, {
+          ...student,
+          value:
+            student.family_name && student.given_name
+              ? `${student.family_name} ${student.given_name}`
+              : student.name || student.email,
+        })
+      })
+    })
+    const compare = Intl.Collator('ru').compare
+
+    const students = [...studentsMap.values()]
+    students.sort(({ family_name: name }, { family_name: nname }) =>
+      compare(name, nname),
+    )
+    return {
+      students,
+    }
+  }, [attendance])
+
+  if (!data || isLoading || courseInfoIssLoading) {
+    return <PageLoader />
+  }
+
+  return (
+    <Container maxW="container.xl">
+      <Box mt={12} mb={12}>
+        <Heading>{courseInfo.name}</Heading>
+      </Box>
+      <Box>
+        <table>
+          <thead>
+            <tr>
+              <th>Дата</th>
+              <th>Название занятия</th>
+              {data.students.map((student) => (
+                <th key={student.sub}>{student.name}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {attendance.map((lesson, index) => (
+              <tr key={lesson.name}>
+                <td>{dayjs(lesson.date).format('DD.MM.YYYY')}</td>
+                <td>{lesson.name}</td>
+                {data.students.map((st) => {
+                  const wasThere =
+                    lesson.students.findIndex((u) => u.sub === st.sub) !== -1
+                  return <td style={{
+                    textAlign: 'center',
+                    backgroundColor: wasThere ? '#8ef78a' : '#e09797',
+                  }} key={st.sub}>{wasThere ? '+' : '-'}</td>
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Box>
+      {/* <pre>{JSON.stringify(attendance, null, 2)}</pre> */}
+    </Container>
+  )
+}