bubble/educt-client
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/educt-client.git synced 2026-10-11 18:29:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: render last_login & about on user page

Browse Source
This commit is contained in:
Sergey Yarkov 2022-02-02 17:33:14 +03:00
parent 20066ec1ba
commit 7f3eabe3e4
5 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/UserProfile/Info/About.tsx
View File

@ -2,12 +2,17 @@ import React from 'react';
import { Box, Text } from '@chakra-ui/react'; import { Box, Text } from '@chakra-ui/react';
import type { IAboutProps } from '.'; import type { IAboutProps } from '.';
const About: React.FC<IAboutProps> = () => { const About: React.FC<IAboutProps> = ({ about }) => {
return ( return (
<Box> <Box>
<Text fontSize={'sm'}> <Text fontSize={'sm'}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. A quibusdam sapiente quisquam vero harum ipsam officiis {about ? (
rerum. Cum, excepturi nulla. about
) : (
<Text as='span' color='gray.500' userSelect={'none'}>
No description provided
</Text>
)}
</Text> </Text>
</Box> </Box>
); );

3
src/components/UserProfile/Info/Details.tsx
View File

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import moment from 'moment';
import { Flex, Text, Icon, Divider } from '@chakra-ui/react'; import { Flex, Text, Icon, Divider } from '@chakra-ui/react';
import { CalendarIcon, RepeatClockIcon } from '@chakra-ui/icons'; import { CalendarIcon, RepeatClockIcon } from '@chakra-ui/icons';
import type { IDetailsProps } from '.'; import type { IDetailsProps } from '.';
@ -17,7 +18,7 @@ const Details: React.FC<IDetailsProps> = ({ registered, lastLogin }) => {
<Flex alignItems={'center'} mr='5'> <Flex alignItems={'center'} mr='5'>
<Icon as={RepeatClockIcon} color='gray.500' /> <Icon as={RepeatClockIcon} color='gray.500' />
<Text fontWeight={'medium'} fontSize={'sm'} color='gray.500' ml='3'> <Text fontWeight={'medium'} fontSize={'sm'} color='gray.500' ml='3'>
Last login: {lastLogin} Last login: {lastLogin ? `${moment(lastLogin).fromNow()}` : 'Never'}
</Text> </Text>
</Flex> </Flex>
</Flex> </Flex>

4
src/components/UserProfile/Info/index.ts
View File

@ -11,11 +11,11 @@ export interface IHeadingProps {
export interface IDetailsProps { export interface IDetailsProps {
registered: string; registered: string;
lastLogin: string; lastLogin: IUser['last_login'];
} }
export interface IAboutProps { export interface IAboutProps {
about: string; about: IUser['about'];
} }
export { Info, Heading, Details, About }; export { Info, Heading, Details, About };

2
src/interfaces/index.ts
View File

@ -116,6 +116,8 @@ export interface IUser {
first_name: string; first_name: string;
last_name: string; last_name: string;
fullname: string; fullname: string;
about: string | null;
last_login: string | null;
email: string; email: string;
roles: IUserRole[]; roles: IUserRole[];
contacts: IUserContacts | null; contacts: IUserContacts | null;

8
src/pages/user/user.tsx
View File

@ -28,12 +28,8 @@ const UserPage: React.FC<IPageProps> = () => {
</UserProfile.Avatar> </UserProfile.Avatar>
<UserProfile.Info> <UserProfile.Info>
<UserProfile.Heading fullname={user.fullname} roles={user.roles} /> <UserProfile.Heading fullname={user.fullname} roles={user.roles} />
<UserProfile.Details registered={user.created_at} lastLogin='3 days ago' /> <UserProfile.Details registered={user.created_at} lastLogin={user.last_login} />
<UserProfile.About <UserProfile.About about={user.about} />
about={
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla asperiores consectetur quasi minima veritatis id quisquam natus in nostrum quam?'
}
/>
</UserProfile.Info> </UserProfile.Info>
</UserProfile> </UserProfile>
</PageContent> </PageContent>