refactor: lesson items layout

src/interfaces/index.ts

@@ -1,5 +1,5 @@
 import type { RouteComponentProps } from 'react-router-dom';
-import { AttachmentFileType, LinkType } from '@educt/types';
+import { AttachmentFileType, ColorType, LinkType } from '@educt/types';
 import { CourseStatusEnum, UserRoleEnum } from '../enums';
 
 export interface IAppConfig {
@@ -39,6 +39,8 @@ export interface ILesson {
   course_id: string;
   title: string;
   description: string;
+  duration: string;
+  color?: ColorType | undefined | null;
   created_at: string;
   updated_at: string;
 }

src/pages/courses/components/CourseList/CourseItem.tsx

@@ -4,8 +4,9 @@ import { Link as ReactRouterLink } from 'react-router-dom';
 import { Badge, Image, Link, IconButton, Icon } from '@chakra-ui/react';
 import { Flex, Box, Heading, Text } from '@chakra-ui/layout';
 import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
-import { MdNote, MdMoreHoriz, MdGroup, MdThumbUp, MdVideoLibrary } from 'react-icons/md';
-import { CheckIcon, DeleteIcon, EditIcon } from '@chakra-ui/icons';
+import { MdMoreHoriz, MdGroup, MdThumbUp, MdVideoLibrary } from 'react-icons/md';
+import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
+import { DeleteIcon, EditIcon } from '@chakra-ui/icons';
 
 /**
  * Types
@@ -65,14 +66,17 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete, onSetStat
                       return (
                         <MenuItem
                           onClick={() => onSetStatus(course.id, CourseStatusEnum.PUBLISHED)}
-                          icon={<CheckIcon />}
+                          icon={<AiOutlineEye />}
                         >
                           Publish
                         </MenuItem>
                       );
                     case CourseStatusEnum.PUBLISHED:
                       return (
-                        <MenuItem onClick={() => onSetStatus(course.id, CourseStatusEnum.DRAFT)} icon={<MdNote />}>
+                        <MenuItem
+                          onClick={() => onSetStatus(course.id, CourseStatusEnum.DRAFT)}
+                          icon={<AiOutlineEyeInvisible />}
+                        >
                           Mark as Draft
                         </MenuItem>
                       );

src/pages/courses/edit/components/LessonList/LessonItem.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import moment from 'moment';
-import { Flex, Box, Text, Icon, Button } from '@chakra-ui/react';
-import { EditIcon, TimeIcon } from '@chakra-ui/icons';
-import { MdLibraryBooks, MdPlayCircleOutline } from 'react-icons/md';
+import { Flex, Box, Text, Icon, Button, IconButton } from '@chakra-ui/react';
+import { DeleteIcon } from '@chakra-ui/icons';
+import { MdTimer, MdAttachment } from 'react-icons/md';
 
 /**
  * Types
@@ -22,59 +22,66 @@ export type LessonItemPropsType = {
 const LessonItem: React.FC<LessonItemPropsType> = ({ lesson }) => {
   const history = useHistory();
 
+  const handleEditLesson = (): void => history.push(`/lessons/edit/${lesson.id}`);
+  const handleDeleteLesson = (): void => undefined;
+
   return (
-    <Box
-      key={lesson.title}
-      p='3'
-      borderBottomWidth='1px'
-      borderRadius='lg'
-      bg={useColorModeValue('gray.50', 'gray.700')}
+    <Box key={lesson.title} p='3' borderBottomWidth='1px'>
+      <Flex flexDirection={{ base: 'column', md: 'row' }} justifyContent='space-between'>
+        <Flex
+          flexDirection={{ base: 'column', md: 'row' }}
+          textAlign={{ base: 'center', md: 'left' }}
+          alignItems='center'
+          mr={{ md: '4' }}
         >
+          <Box mr='3'>
+            <Box bg={lesson.color?.hex || 'gray.100'} minH='50px' minW='50px' borderRadius='md' />
+          </Box>
           <Box>
-        <Flex justifyContent='space-between'>
-          <Text lineHeight='1.4' fontSize='lg' fontWeight='medium'>
-            <Text as='small' fontSize='sm' color='gray.500' fontWeight='normal'>
-              {/* TODO: need to make lesson order  */}
-              Lesson {lesson.id}
+            <Text fontSize='lg' fontWeight='medium' mt={{ base: '3', md: '0' }}>
+              <Text as='span' color='gray.500' mr='1' fontSize='md' fontWeight='normal'>
+                1.
               </Text>
-            <br />
               {lesson.title}
             </Text>
-          <Box>
-            <Text>Created {moment(lesson.created_at).format('ll')}</Text>{' '}
-          </Box>
-        </Flex>
-        <Box>
-          <Text>{lesson.description}</Text>
-        </Box>
-      </Box>
-      <Flex justifyContent='space-between' alignItems='center' mt='2'>
-        <Flex alignItems='center'>
-          <Icon as={TimeIcon} mr='2' />
-          <Text mr='4' color={useColorModeValue('gray.600', 'gray.400')}>
-            1:30:00
+            <Text mt='2' color='gray.500'>
+              Sergey Yarkov
             </Text>
-          <Icon as={MdLibraryBooks} mr='2' />
-          <Text color={useColorModeValue('gray.600', 'gray.400')}>4 materials</Text>
+          </Box>
         </Flex>
         <Box>
-          <Button
-            onClick={() => history.push(`/lesson/${lesson.id}`)}
-            size='sm'
-            colorScheme='blue'
-            variant='outline'
-            leftIcon={<Icon as={MdPlayCircleOutline} w='4' h='4' />}
-            mr='2'
-          >
-            Visit page
-          </Button>
-          <Button
-            onClick={() => history.push(`/lessons/edit/${lesson.id}`)}
-            size='sm'
-            leftIcon={<Icon as={EditIcon} />}
-          >
+          <Flex flexDirection='column' alignItems={{ base: 'center' }} mt={{ base: '4' }}>
+            <Flex flexDirection={{ base: 'column', md: 'row' }}>
+              <Button onClick={handleEditLesson} size='md' p='0 60px' mr='1'>
                 Edit
               </Button>
+              <IconButton
+                onClick={handleDeleteLesson}
+                aria-label='Delete lesson'
+                variant='ghost'
+                colorScheme='red'
+                icon={<DeleteIcon />}
+              />
+            </Flex>
+            <Flex justifyContent='flex-end' mt={{ base: '2' }}>
+              <Text as='span' color='gray.500' mr='3'>
+                <Text as='span' verticalAlign='middle' mr='1'>
+                  <Icon as={MdTimer} />
+                </Text>
+                <Text as='small' verticalAlign='middle'>
+                  ~{moment(lesson.duration, 'HH:mm:ss').minutes()}min
+                </Text>
+              </Text>
+              <Text as='span' color='gray.500'>
+                <Text as='span' verticalAlign='middle' mr='1'>
+                  <Icon as={MdAttachment} />
+                </Text>
+                <Text as='small' verticalAlign='middle'>
+                  4 attachments
+                </Text>
+              </Text>
+            </Flex>
+          </Flex>
         </Box>
       </Flex>
     </Box>

src/pages/courses/edit/components/LessonList/LessonList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Stack, Text, Button } from '@chakra-ui/react';
+import { Box, Stack, Text, Button, StackDivider } from '@chakra-ui/react';
 
 /**
  * Types
@@ -17,29 +17,36 @@ type LessonListPropsType = {
   course: Omit<ICourse, 'students_count' | 'likes_count' | 'lessons_count'>;
 };
 
-const LessonList: React.FC<LessonListPropsType> = ({ render: Item, course }) => {
+const CreateLessonButton: React.FC<{ id: string }> = ({ id }) => {
   const history = useHistory();
 
+  const handleCreateLesson = (): void => history.push(`${id}/create-lesson`);
+
+  return (
+    <Box textAlign='center' p='10px 0'>
+      <Button onClick={handleCreateLesson} mt='3' size='sm' colorScheme='blue' variant='outline'>
+        Create new lesson
+      </Button>
+    </Box>
+  );
+};
+
+const LessonList: React.FC<LessonListPropsType> = ({ render: Item, course }) => {
   return (
     <Box>
       {course.lessons.length !== 0 ? (
+        <Box>
           <Stack mt='4'>
             {course.lessons.map(lesson => (
               <Item key={lesson.id} lesson={lesson} />
             ))}
           </Stack>
+          <CreateLessonButton id={course.id} />
+        </Box>
       ) : (
-        <Box textAlign='center' mt='10'>
+        <Box mt='10'>
           <Text>No lessons have been added to this course yet</Text>
-          <Button
-            onClick={() => history.push(`${course.id}/create-lesson`)}
-            mt='3'
-            size='sm'
-            colorScheme='blue'
-            variant='outline'
-          >
-            Create new lesson
-          </Button>
+          <CreateLessonButton id={course.id} />
         </Box>
       )}
     </Box>

src/types/index.d.ts

@@ -28,6 +28,12 @@ export type OptionType = {
   label: string;
 };
 
+export type ColorType = {
+  id: number;
+  name: string;
+  hex: string;
+};
+
 export type ConfirmEmailContainerDataType = {
   newEmail: string;
   expired_seconds: number;