From 7f3eabe3e46d4be38220ec3cf9266d984493bbe5 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Wed, 2 Feb 2022 17:33:14 +0300
Subject: [PATCH] feat: render last_login & about on user page

---
 src/components/UserProfile/Info/About.tsx   | 11 ++++++++---
 src/components/UserProfile/Info/Details.tsx |  3 ++-
 src/components/UserProfile/Info/index.ts    |  4 ++--
 src/interfaces/index.ts                     |  2 ++
 src/pages/user/user.tsx                     |  8 ++------
 5 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/UserProfile/Info/About.tsx b/src/components/UserProfile/Info/About.tsx
index 51457c4..7f4fe5e 100644
--- a/src/components/UserProfile/Info/About.tsx
+++ b/src/components/UserProfile/Info/About.tsx
@@ -2,12 +2,17 @@ import React from 'react';
 import { Box, Text } from '@chakra-ui/react';
 import type { IAboutProps } from '.';
 
-const About: React.FC<IAboutProps> = () => {
+const About: React.FC<IAboutProps> = ({ about }) => {
   return (
     <Box>
       <Text fontSize={'sm'}>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. A quibusdam sapiente quisquam vero harum ipsam officiis
-        rerum. Cum, excepturi nulla.
+        {about ? (
+          about
+        ) : (
+          <Text as='span' color='gray.500' userSelect={'none'}>
+            No description provided
+          </Text>
+        )}
       </Text>
     </Box>
   );
diff --git a/src/components/UserProfile/Info/Details.tsx b/src/components/UserProfile/Info/Details.tsx
index 2881764..b856a8a 100644
--- a/src/components/UserProfile/Info/Details.tsx
+++ b/src/components/UserProfile/Info/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import moment from 'moment';
 import { Flex, Text, Icon, Divider } from '@chakra-ui/react';
 import { CalendarIcon, RepeatClockIcon } from '@chakra-ui/icons';
 import type { IDetailsProps } from '.';
@@ -17,7 +18,7 @@ const Details: React.FC<IDetailsProps> = ({ registered, lastLogin }) => {
           <Flex alignItems={'center'} mr='5'>
             <Icon as={RepeatClockIcon} color='gray.500' />
             <Text fontWeight={'medium'} fontSize={'sm'} color='gray.500' ml='3'>
-              Last login: {lastLogin}
+              Last login: {lastLogin ? `${moment(lastLogin).fromNow()}` : 'Never'}
             </Text>
           </Flex>
         </Flex>
diff --git a/src/components/UserProfile/Info/index.ts b/src/components/UserProfile/Info/index.ts
index 50ad6c1..7ce80d6 100644
--- a/src/components/UserProfile/Info/index.ts
+++ b/src/components/UserProfile/Info/index.ts
@@ -11,11 +11,11 @@ export interface IHeadingProps {
 
 export interface IDetailsProps {
   registered: string;
-  lastLogin: string;
+  lastLogin: IUser['last_login'];
 }
 
 export interface IAboutProps {
-  about: string;
+  about: IUser['about'];
 }
 
 export { Info, Heading, Details, About };
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
index cb74b60..f674a5a 100644
--- a/src/interfaces/index.ts
+++ b/src/interfaces/index.ts
@@ -116,6 +116,8 @@ export interface IUser {
   first_name: string;
   last_name: string;
   fullname: string;
+  about: string | null;
+  last_login: string | null;
   email: string;
   roles: IUserRole[];
   contacts: IUserContacts | null;
diff --git a/src/pages/user/user.tsx b/src/pages/user/user.tsx
index 8660c78..ec006a8 100644
--- a/src/pages/user/user.tsx
+++ b/src/pages/user/user.tsx
@@ -28,12 +28,8 @@ const UserPage: React.FC<IPageProps> = () => {
           </UserProfile.Avatar>
           <UserProfile.Info>
             <UserProfile.Heading fullname={user.fullname} roles={user.roles} />
-            <UserProfile.Details registered={user.created_at} lastLogin='3 days ago' />
-            <UserProfile.About
-              about={
-                'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla asperiores consectetur quasi minima veritatis id quisquam natus in nostrum quam?'
-              }
-            />
+            <UserProfile.Details registered={user.created_at} lastLogin={user.last_login} />
+            <UserProfile.About about={user.about} />
           </UserProfile.Info>
         </UserProfile>
       </PageContent>