diff --git a/public/index.html b/public/index.html index aa069f2..6a203ed 100644 --- a/public/index.html +++ b/public/index.html @@ -5,39 +5,14 @@ - + - - - React App + Application
- diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index f9d735d..2d18956 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Flex, Box } from '@chakra-ui/react'; +import { Flex, Box, useColorMode } from '@chakra-ui/react'; import AppName from './AppName'; import UserInfo from './User/UserInfo'; import UserNotifications from './User/UserNotifications'; @@ -11,6 +11,7 @@ const Header: React.FC = () => { const { uiStore: { isDesktop }, } = useRootStore(); + const { colorMode } = useColorMode(); return ( { left={0} right={0} borderBottomWidth={1} - width='100%' - height='4rem' + backgroundColor={colorMode === 'dark' ? 'gray.800' : 'white'} zIndex={4} > { width='100%' height='100%' alignItems='center' - paddingLeft='1.5rem' - paddingRight='1.5rem' + padding='5px 1.5rem 5px 1.5rem' > diff --git a/src/components/Header/User/UserInfo.tsx b/src/components/Header/User/UserInfo.tsx index dac748f..7362e9b 100644 --- a/src/components/Header/User/UserInfo.tsx +++ b/src/components/Header/User/UserInfo.tsx @@ -24,16 +24,6 @@ const UserInfo: React.FC = () => { const { userStore } = useRootStore(); const { logout } = useLogoutQuery(); - // const onLogoutHandler = async (e: React.MouseEvent) => { - // try { - // await authStore.logout(); - // history.push('/auth'); - // toast({ title: 'You are logged out.', isClosable: true, status: 'info' }); - // } catch (error) { - // console.error(error); - // } - // }; - if (userStore.me === null) { return ; } diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index 659f9e3..1488a64 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -6,7 +6,6 @@ import { observer } from 'mobx-react'; import { useRootStore } from 'hooks/useRootStore'; import { useErrorHandler } from 'react-error-boundary'; import { ColorModeSwitcher } from 'components/ColorModeSwitcher/ColorModeSwitcher'; -import LoadingPage from 'components/Loading/LoadingPage'; /** * @@ -24,24 +23,29 @@ const Layout: React.FC = ({ children }) => { return ( <>
- - + + - - {userStore.me === null ? : children} - - + {children} + ); diff --git a/src/components/Loading/LoadingProfilePage.tsx b/src/components/Loading/LoadingProfilePage.tsx new file mode 100644 index 0000000..6f17414 --- /dev/null +++ b/src/components/Loading/LoadingProfilePage.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Box, Skeleton, SkeletonCircle, Flex, Spinner } from '@chakra-ui/react'; + +const LoadingProfilePage = () => { + return ( + + + + + + + + + + + + + + + + ); +}; + +export default LoadingProfilePage; diff --git a/src/components/Nav/Desktop/Nav.tsx b/src/components/Nav/Desktop/Nav.tsx index eef0ee7..4199354 100644 --- a/src/components/Nav/Desktop/Nav.tsx +++ b/src/components/Nav/Desktop/Nav.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Flex, Box } from '@chakra-ui/react'; +import { Flex, Box, useColorMode } from '@chakra-ui/react'; import NavList from '../NavList'; import { useRootStore } from 'hooks/useRootStore'; import { observer } from 'mobx-react'; @@ -14,22 +14,33 @@ const Nav: React.FC = () => { const { uiStore: { isDesktop }, } = useRootStore(); + const { colorMode } = useColorMode(); if (isDesktop) { return ( - - - - - - + + + + ); } diff --git a/src/components/Nav/Mobile/Nav.tsx b/src/components/Nav/Mobile/Nav.tsx index 28ff05d..8842e7e 100644 --- a/src/components/Nav/Mobile/Nav.tsx +++ b/src/components/Nav/Mobile/Nav.tsx @@ -11,11 +11,13 @@ import { HamburgerIcon } from '@chakra-ui/icons'; import { useDisclosure, IconButton, useColorMode, Skeleton } from '@chakra-ui/react'; import NavList from '../NavList'; import config from 'config'; +import useLogoutQuery from 'hooks/useLogoutQuery'; const NavMobile: React.FC = () => { const { userStore } = useRootStore(); const { colorMode } = useColorMode(); const { isOpen, onOpen, onClose } = useDisclosure(); + const { logout } = useLogoutQuery(); return ( <> @@ -24,46 +26,50 @@ const NavMobile: React.FC = () => { - - - - {userStore.me ? ( - - - - - - {`${userStore.me.first_name} ${userStore.me.last_name}`} - - - View profile - + + + + + {userStore.me ? ( + + + + + + {`${userStore.me.first_name} ${userStore.me.last_name}`} + + + View profile + + + } + /> - } /> - - - ) : ( - - )} + + ) : ( + + )} + diff --git a/src/components/Nav/NavList.tsx b/src/components/Nav/NavList.tsx index 5e91679..41075a3 100644 --- a/src/components/Nav/NavList.tsx +++ b/src/components/Nav/NavList.tsx @@ -1,9 +1,9 @@ import React, { useCallback } from 'react'; import { observer } from 'mobx-react'; import NavLink from './NavLink'; -// import { useRootStore } from 'hooks/useRootStore'; -// import { userHasRoles } from 'helpers'; -// import { UserRoleEnum } from 'enums'; +import { useRootStore } from 'hooks/useRootStore'; +import { userHasRoles } from 'helpers'; +import { UserRoleEnum } from 'enums'; import { useHistory } from 'react-router-dom'; import { LinkType } from 'interfaces'; @@ -16,7 +16,7 @@ type NavListPropsType = { * Render a navigation list of links */ const NavList: React.FC = ({ links, onCloseDrawer }) => { - // const { userStore } = useRootStore(); + const { userStore } = useRootStore(); const history = useHistory(); const onClickLink = useCallback( (link: LinkType) => { @@ -31,7 +31,14 @@ const NavList: React.FC = ({ links, onCloseDrawer }) => { return ( <> {links.map(link => { - return ; + if (link.public) { + return ; + } else { + if (userStore.me && userHasRoles(userStore.me.roles, [UserRoleEnum.ADMIN])) { + return ; + } + } + return null; })} ); diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index 66426eb..d63a53f 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile.tsx @@ -1,15 +1,39 @@ import React, { useEffect } from 'react'; -import { Box, Heading, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Grid } from '@chakra-ui/react'; +import { + Box, + Heading, + Flex, + Avatar, + useColorMode, + Text, + Stack, + Button, + StackDivider, + FormControl, + Input, + Tabs, + TabList, + Tab, + TabPanels, + TabPanel, + FormHelperText, +} from '@chakra-ui/react'; + +import { MdSave } from 'react-icons/md'; import { IPageProps } from 'interfaces'; import { useRootStore } from 'hooks/useRootStore'; import { useHistory } from 'react-router-dom'; +import { observer } from 'mobx-react'; +import UserBadge from 'components/User/UserBadge'; +import LoadingProfilePage from 'components/Loading/LoadingProfilePage'; /** * Profile page */ const ProfilePage: React.FC = ({ title }) => { - const { authStore } = useRootStore(); + const { colorMode } = useColorMode(); + const { userStore, authStore } = useRootStore(); const history = useHistory(); useEffect(() => { @@ -18,23 +42,166 @@ const ProfilePage: React.FC = ({ title }) => { } }); + if (userStore.me === null) { + return ; + } + return ( - <> - - - {title} - - - + + My account + - Profile page - - ... - + + + {`${userStore.me.first_name} ${userStore.me.last_name}`} + + + {userStore.me.email} + + + + + + + + + + Account information + My contacts + + + {/* Account info */} + + + + Account information + + }> + + + + First Name + + + {userStore.me.first_name} + + + + + + + + Last Name + + + {userStore.me.last_name} + + + + + + + + Email + + + {userStore.me.email} + + + + + + + + + Password + + + ********** + + + + + + + + + {/* Contacts */} + + + + + My Contacts + + + + Telephone + + + + Twitter + + + + Telegram + + + + VKontakte + + + + + + + + + - + ); }; -export default ProfilePage; +export default observer(ProfilePage); diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts index 6bb18bf..44d2d2b 100644 --- a/src/stores/UIStore.ts +++ b/src/stores/UIStore.ts @@ -54,11 +54,11 @@ export default class UIStore { } get isDesktop() { - return this.windowDimensions.width > 768; + return this.windowDimensions.width > 991; } get isTablet() { - return this.windowDimensions.width < 768; + return this.windowDimensions.width < 991; } get isMobile() {