From 5ad94b7b25f5848ac74c74f1a4c675a184c07690 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Sun, 23 Jan 2022 21:00:42 +0300
Subject: [PATCH] feat: added layout

---
 src/components/Stat/index.tsx                 | 45 +++++++++
 .../queries/category/useUpdateCategory.ts     |  1 +
 src/pages/main/components/index.tsx           | 94 ++++++++++++++++++
 src/pages/main/main.tsx                       | 96 ++++++++++++++++++-
 src/pages/profile/components/index.tsx        |  2 +-
 5 files changed, 232 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Stat/index.tsx
 create mode 100644 src/pages/main/components/index.tsx

diff --git a/src/components/Stat/index.tsx b/src/components/Stat/index.tsx
new file mode 100644
index 0000000..8275d14
--- /dev/null
+++ b/src/components/Stat/index.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import {
+  Stat as ChakraStat,
+  StatProps,
+  useColorModeValue,
+  StatLabel as ChakraStatLabel,
+  StatLabel as ChakraStatNumber,
+  StatLabelProps,
+  Icon,
+  FlexProps,
+  Flex,
+} from '@chakra-ui/react';
+import { IconType } from 'react-icons';
+
+export const Stat: React.FC = (props: StatProps) => (
+  <ChakraStat
+    px={{ base: 4, sm: 6 }}
+    py='5'
+    bg={useColorModeValue('white', 'gray.700')}
+    shadow='base'
+    rounded='lg'
+    {...props}
+  />
+);
+
+export const StatLabel: React.FC = (props: StatLabelProps) => (
+  <ChakraStatLabel fontWeight='medium' isTruncated color={useColorModeValue('gray.500', 'gray.400')} {...props} />
+);
+
+export const StatNumber: React.FC = (props: StatLabelProps) => (
+  <ChakraStatNumber mt='2' fontWeight='medium' fontSize={'5xl'} isTruncated {...props} />
+);
+
+type StatIconPropsType = {
+  icon: IconType;
+};
+export const StatIcon: React.FC<StatIconPropsType> = props => (
+  <Icon as={props.icon} color={useColorModeValue('gray.700', 'gray.300')} width={10} height={10} />
+);
+
+export const StatContent: React.FC<FlexProps> = props => (
+  <Flex justifyContent={'space-between'} alignItems={'flex-end'}>
+    {props.children}
+  </Flex>
+);
diff --git a/src/hooks/queries/category/useUpdateCategory.ts b/src/hooks/queries/category/useUpdateCategory.ts
index c48890f..c8296f0 100644
--- a/src/hooks/queries/category/useUpdateCategory.ts
+++ b/src/hooks/queries/category/useUpdateCategory.ts
@@ -13,6 +13,7 @@ const useUpdateCategory = () => {
   const update = async (id: string, data: UpdateCategoryParamsType) => {
     try {
       const result = await CategoryServiceInstance.update(id, data);
+      toast({ title: 'Category updated.', status: 'info' });
       return result.data;
     } catch (error) {
       if (axios.isAxiosError(error)) {
diff --git a/src/pages/main/components/index.tsx b/src/pages/main/components/index.tsx
new file mode 100644
index 0000000..8833f00
--- /dev/null
+++ b/src/pages/main/components/index.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  Box,
+  BoxProps,
+  TextProps,
+  Text,
+  FlexProps,
+  Flex,
+  Tag,
+  TagLabel,
+  Icon,
+  Button,
+  useColorModeValue,
+  SimpleGrid,
+  SimpleGridProps,
+} from '@chakra-ui/react';
+import { Card } from '@educt/components/Card';
+import { MdOutlineVideoLibrary, MdOutlineGroup, MdOutlineThumbUpOffAlt, MdOutlinePlayCircle } from 'react-icons/md';
+import { useHistory } from 'react-router-dom';
+
+export const CourseCardList: React.FC<SimpleGridProps> = props => (
+  <SimpleGrid
+    mt='4'
+    templateColumns={{
+      base: '1fr',
+      md: 'repeat(auto-fill, minmax(320px, 1fr))',
+    }}
+    spacing={'6'}
+    {...props}
+  />
+);
+export const CourseCard: React.FC<BoxProps> = props => <Card py='5' px='6' {...props} />;
+export const CourseCardHeading: React.FC<BoxProps> = props => (
+  <Box borderLeftWidth={'5px'} borderColor={'blue.500'} pl='2' {...props} />
+);
+export const CourseCardTitle: React.FC<TextProps> = props => <Text fontSize={'2xl'} fontWeight={'bold'} {...props} />;
+export const CourseCardCategory: React.FC = props => (
+  <Flex mt='2'>
+    <Tag size='sm' borderRadius='full' variant={'solid'}>
+      <TagLabel>{props.children}</TagLabel>
+    </Tag>
+  </Flex>
+);
+export const CourseCardContent: React.FC<FlexProps> = props => <Flex mt='5' alignItems={'center'} {...props} />;
+export const CourseCardCreated: React.FC<{ created: string }> = props => (
+  <Box lineHeight={'1.2rem'} mr='14'>
+    <Text fontWeight={'medium'} fontSize={'sm'} color={useColorModeValue('gray.500', 'gray.400')}>
+      Created
+    </Text>
+    <Box as='time' verticalAlign='middle' dateTime={props.created}>
+      {props.created}
+    </Box>
+  </Box>
+);
+export const CourseCardLessons: React.FC<{ count: string | number }> = props => (
+  <Box>
+    <Flex alignItems={'center'}>
+      <Icon as={MdOutlineVideoLibrary} w={5} h={5} mr='3' />
+      <Box>
+        <Text fontWeight={'medium'} fontSize={'sm'} color={useColorModeValue('gray.500', 'gray.400')}>
+          Total lessons
+        </Text>
+        <Text>{props.count}</Text>
+      </Box>
+    </Flex>
+  </Box>
+);
+export const CourseCardFooter: React.FC<FlexProps> = props => (
+  <Flex justifyContent={'space-between'} alignItems={'center'} mt='9' {...props} />
+);
+
+export const CourseCardStat: React.FC<{ students: string | number; likes: string | number }> = props => (
+  <Flex>
+    <Flex alignItems={'center'} mr='5'>
+      <Icon as={MdOutlineGroup} mr='2' w={4} h={4} />
+      <Text>{props.students}</Text>
+    </Flex>
+    <Flex alignItems={'center'}>
+      <Icon as={MdOutlineThumbUpOffAlt} mr='2' w={4} h={4} />
+      <Text>{props.likes}</Text>
+    </Flex>
+  </Flex>
+);
+export const CourseCardWatch: React.FC<{ id: string }> = props => {
+  const history = useHistory();
+
+  return (
+    <Box>
+      <Button onClick={() => history.push(`/courses/${props.id}`)} leftIcon={<MdOutlinePlayCircle />} size='sm'>
+        Watch
+      </Button>
+    </Box>
+  );
+};
diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx
index ff9b74b..691c4b5 100644
--- a/src/pages/main/main.tsx
+++ b/src/pages/main/main.tsx
@@ -1,16 +1,102 @@
 import React from 'react';
-import { Box, Heading } from '@chakra-ui/react';
-
+import { Flex, Box, Text, Link, SimpleGrid, Divider } from '@chakra-ui/react';
+import { Link as ReactRouterLink } from 'react-router-dom';
 import { IPageProps } from '@educt/interfaces';
+import { PageContent, PageHeading, PageWrapper } from '@educt/components/PageElements';
+import { Stat, StatContent, StatIcon, StatLabel, StatNumber } from '@educt/components/Stat';
+import { MdOutlineCollectionsBookmark, MdOutlineGroup, MdOutlineMessage, MdOutlineVideoLibrary } from 'react-icons/md';
+import { useRootStore } from '@educt/hooks/useRootStore';
+import LoadingPage from '@educt/components/LoadingPage';
+import {
+  CourseCard,
+  CourseCardCategory,
+  CourseCardCreated,
+  CourseCardHeading,
+  CourseCardContent,
+  CourseCardLessons,
+  CourseCardTitle,
+  CourseCardFooter,
+  CourseCardWatch,
+  CourseCardStat,
+  CourseCardList,
+} from './components';
 
 /**
  * Main page
  */
 const MainPage: React.FC<IPageProps> = () => {
+  const {
+    userStore: { me },
+  } = useRootStore();
+
+  if (me === null) return <LoadingPage />;
+
   return (
-    <Box>
-      <Heading as='h1'>Main page</Heading>
-    </Box>
+    <PageWrapper>
+      <PageHeading heading={`👋 Hello ${me.first_name},`} description="This what we've got today for you." />
+      <PageContent>
+        <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing='6'>
+          <Stat>
+            <StatLabel>Unread messages</StatLabel>
+            <StatContent>
+              <StatNumber>3</StatNumber>
+              <StatIcon icon={MdOutlineMessage} />
+            </StatContent>
+          </Stat>
+
+          <Stat>
+            <StatLabel>Registered students</StatLabel>
+            <StatContent>
+              <StatNumber>24</StatNumber>
+              <StatIcon icon={MdOutlineGroup} />
+            </StatContent>
+          </Stat>
+
+          <Stat>
+            <StatLabel>Courses</StatLabel>
+            <StatContent>
+              <StatNumber>7</StatNumber>
+              <StatIcon icon={MdOutlineCollectionsBookmark} />
+            </StatContent>
+          </Stat>
+
+          <Stat>
+            <StatLabel>Lessons</StatLabel>
+            <StatContent>
+              <StatNumber>42</StatNumber>
+              <StatIcon icon={MdOutlineVideoLibrary} />
+            </StatContent>
+          </Stat>
+        </SimpleGrid>
+        <Box my='8'>
+          <Flex justifyContent={'space-between'}>
+            <Text fontWeight={'medium'}>Recently added</Text>
+            <Link as={ReactRouterLink} fontWeight={'medium'} to='/courses'>
+              See all
+            </Link>
+          </Flex>
+          <CourseCardList>
+            <CourseCard>
+              <CourseCardHeading>
+                <CourseCardTitle>Javascript in a nutshell</CourseCardTitle>
+                <CourseCardCategory>Web Developing</CourseCardCategory>
+              </CourseCardHeading>
+
+              <CourseCardContent>
+                <CourseCardCreated created='29 Nov 2022' />
+                <CourseCardLessons count={26} />
+              </CourseCardContent>
+
+              <CourseCardFooter>
+                <CourseCardStat students={24} likes={14} />
+                <CourseCardWatch id='123' />
+              </CourseCardFooter>
+            </CourseCard>
+          </CourseCardList>
+        </Box>
+        <Divider />
+      </PageContent>
+    </PageWrapper>
   );
 };
 
diff --git a/src/pages/profile/components/index.tsx b/src/pages/profile/components/index.tsx
index bd1d76c..1f89cb7 100644
--- a/src/pages/profile/components/index.tsx
+++ b/src/pages/profile/components/index.tsx
@@ -69,7 +69,7 @@ export const ProfileDescription: React.FC<IProfileDescriptionProps> = props => {
   );
 };
 
-export const ProfileSignOutButton: React.FC<ButtonProps> = props => {
+export const ProfileSignOutButton: React.FC<ButtonProps> = () => {
   const { logout } = useLogout();
 
   return (