users screen + userCard component

src/pages/lesson-details.tsx

@@ -10,22 +10,20 @@ import {
   BreadcrumbItem,
   BreadcrumbLink,
   Container,
-  HStack,
   VStack,
   Heading,
+  Stack,
 } from '@chakra-ui/react'
 
+import { api } from '../__data__/api/api'
+import { User } from '../__data__/model'
+import { UserCard } from '../components/user-card'
+
 import {
   QRCanvas,
-  LessonItem,
-  Lessonname,
-  AddMissedButton,
-  UnorderList,
+  StudentList,
   BreadcrumbsWrapper,
-  Avatar,
 } from './style'
-import { api } from '../__data__/api/api'
-import { User } from '../__data__/model'
 
 export function getGravatarURL(email, user) {
   if (!email) return void 0
@@ -39,13 +37,11 @@ export function getGravatarURL(email, user) {
 const LessonDetail = () => {
   const { lessonId, courseId } = useParams()
   const canvRef = useRef(null)
-  const [lesson, setLesson] = useState(null)
   const {
     isFetching,
-    isLoading,
     data: accessCode,
-    error,
     isSuccess,
+    refetch,
   } = api.useCreateAccessCodeQuery(
     { lessonId },
     {
@@ -60,6 +56,13 @@ const LessonDetail = () => {
     () => `${location.origin}/journal/u/${lessonId}/${accessCode?.body?._id}`,
     [accessCode, lessonId],
   )
+
+  useEffect(() => {
+    if (manualAddRqst.isSuccess) {
+      refetch()
+    }
+  }, [manualAddRqst.isSuccess])
+
   useEffect(() => {
     if (!isFetching && isSuccess) {
       QRCode.toCanvas(
@@ -136,32 +139,22 @@ const LessonDetail = () => {
             человек
           </Box>
         </VStack>
-        <HStack spacing="8" sx={{ flexDirection: { sm: 'column', md: 'row' }}} >
+        <Stack spacing="8" sx={{ flexDirection: { sm: 'column', md: 'row' } }}>
           <a href={userUrl}>
             <QRCanvas ref={canvRef} />
           </a>
-          <UnorderList>
+          <StudentList>
             {studentsArr.map((student) => (
-              <LessonItem key={student.sub} warn={!student.present}>
-                <Lessonname>
-                  <Avatar
-                    src={student.picture || getGravatarURL(student.email, null)}
-                  />
-                  <p style={{ marginTop: 6 }}>
-                    {student.name || student.preferred_username}{' '}
-                  </p>
-                  {!student.present && (
-                    <AddMissedButton
-                      onClick={() => manualAdd({ lessonId, user: student })}
-                    >
-                      add
-                    </AddMissedButton>
-                  )}
-                </Lessonname>
-              </LessonItem>
+              <UserCard
+                wrapperAS="li"
+                key={student.sub}
+                student={student}
+                present={student.present}
+                onAddUser={(user: User) => manualAdd({ lessonId, user })}
+              />
             ))}
-          </UnorderList>
-        </HStack>
+          </StudentList>
+        </Stack>
       </Container>
     </>
   )