merge: pull request #246 from lumium-technologies/r/sidebar

r/navbar
lumium-technologies · Jan 3, 2023 · 25ac0ab · 25ac0ab
2 parents 7e065b5 + 70bf666
commit 25ac0ab
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 82 deletions.
diff --git a/lumium-space/pages/[workspaceId]/[[...pageId]].tsx b/lumium-space/pages/[workspaceId]/[[...pageId]].tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Heading, Button, Divider, Modal, FormControl, FormErrorMessage, FormLabel, Input, InputGroup, InputRightElement, Stack, useColorModeValue } from "@chakra-ui/react";
+import { Heading, Button, FormControl, FormErrorMessage, FormLabel, Input, InputGroup, InputRightElement, Stack, useColorModeValue } from "@chakra-ui/react";
 import { useWorkspace, useUserInfo } from "@hooks/api";
 import { useRouter } from "next/router";
 import {
@@ -13,7 +13,7 @@ import {
 import { Authenticator } from '@components/security/Authenticator';
 import { LumiumRenderer } from '@components/rendering';
 import SideBar from '@sections/workspace/SideBar';
-import MobileNav from '@sections/workspace/NavBar';
+import NavBar from '@sections/workspace/NavBar';
 import { useFormik } from 'formik';
 import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 
@@ -65,72 +65,72 @@ const Workspace: React.FC = () => {
                     </DrawerContent>
                 </Drawer>
                 {/* mobilenav */}
-                <MobileNav onOpen={onOpen} userInfo={userInfo} workspace={workspace} />
+                <NavBar onOpen={onOpen} userInfo={userInfo} workspace={workspace} />
                 <Box p="4">
                     {
                         (workspace?.name && userInfo?.nickName && !pageId) &&
-                            <Heading>
-                                Welcome to the <em>{workspace?.name}</em> workspace, {userInfo?.nickName}!
-                            </Heading> ||
-                                !passwordEntered &&
-                                <Flex
-                                    align={'center'}
-                                    justify={'center'}
-                                >
-                                    <Stack
-                                        spacing={4}
-                                        w={'full'}
-                                        maxW={'md'}
-                                        rounded={'xl'}
-                                        boxShadow={'lg'}
-                                        p={6}
-                                        my={12}>
-                                        <Heading lineHeight={1.1} fontSize={{ base: '2xl', md: '3xl' }}>
-                                            Enter the password for &quot;{workspace?.name}&quot;
-                                        </Heading>
-                                        <form onSubmit={formik.handleSubmit} data-cy={"form"}>
-                                            <FormControl id="password" isRequired>
-                                                <FormLabel>Password</FormLabel>
-                                                <InputGroup>
-                                                    <Input
-                                                        name={"password"}
-                                                        type={showPassword ? 'text' : 'password'}
-                                                        onChange={formik.handleChange}
-                                                        value={formik.values.password}
-                                                        data-cy="passwordInput"
-                                                    />
-                                                    <InputRightElement h={'full'}>
-                                                        <Button
-                                                            variant={'ghost'}
-                                                            onClick={() =>
-                                                                setShowPassword((showPassword) => !showPassword)
-                                                            }>
-                                                            {showPassword ? <ViewIcon /> : <ViewOffIcon />}
-                                                        </Button>
-                                                    </InputRightElement>
-                                                </InputGroup>
-                                                <FormErrorMessage data-cy="credentialError"></FormErrorMessage>
-                                            </FormControl>
-                                            <Stack spacing={6}>
+                        <Heading>
+                            Welcome to the <em>{workspace?.name}</em> workspace, {userInfo?.nickName}!
+                        </Heading> ||
+                        !passwordEntered &&
+                        <Flex
+                            align={'center'}
+                            justify={'center'}
+                        >
+                            <Stack
+                                spacing={4}
+                                w={'full'}
+                                maxW={'md'}
+                                rounded={'xl'}
+                                boxShadow={'lg'}
+                                p={6}
+                                my={12}>
+                                <Heading lineHeight={1.1} fontSize={{ base: '2xl', md: '3xl' }}>
+                                    Enter the password for <em>{workspace?.name}</em>
+                                </Heading>
+                                <form onSubmit={formik.handleSubmit} data-cy={"form"}>
+                                    <FormControl id="password" isRequired>
+                                        <FormLabel>Password</FormLabel>
+                                        <InputGroup>
+                                            <Input
+                                                name={"password"}
+                                                type={showPassword ? 'text' : 'password'}
+                                                onChange={formik.handleChange}
+                                                value={formik.values.password}
+                                                data-cy="passwordInput"
+                                            />
+                                            <InputRightElement h={'full'}>
                                                 <Button
-                                                    bg={'blue.400'}
-                                                    color={'white'}
-                                                    _hover={{
-                                                        bg: 'blue.500',
-                                                    }}
-                                                    type="submit"
-                                                >
-                                                    Submit
+                                                    variant={'ghost'}
+                                                    onClick={() =>
+                                                        setShowPassword((showPassword) => !showPassword)
+                                                    }>
+                                                    {showPassword ? <ViewIcon /> : <ViewOffIcon />}
                                                 </Button>
-                                            </Stack>
-                                        </form>
+                                            </InputRightElement>
+                                        </InputGroup>
+                                        <FormErrorMessage data-cy="credentialError"></FormErrorMessage>
+                                    </FormControl>
+                                    <Stack spacing={6}>
+                                        <Button
+                                            bg={'blue.400'}
+                                            color={'white'}
+                                            _hover={{
+                                                bg: 'blue.500',
+                                            }}
+                                            type="submit"
+                                        >
+                                            Submit
+                                        </Button>
                                     </Stack>
-                                </Flex>
-                                    || pageId &&
-                                    <Flex flexDir="row">
-                                        <Textarea />
-                                        <LumiumRenderer />
-                                    </Flex>
+                                </form>
+                            </Stack>
+                        </Flex>
+                        || pageId &&
+                        <Flex flexDir="row">
+                            <Textarea />
+                            <LumiumRenderer />
+                        </Flex>
                     }
                     {
                         workspace?.pages.map((p) => {

diff --git a/lumium-space/pages/index.tsx b/lumium-space/pages/index.tsx
@@ -1,11 +1,15 @@
+import { useColorModeValue } from "@chakra-ui/react";
 import { CallToAction } from "@sections/landing/CallToAction";
 import { Footer } from "@sections/landing/Footer";
 import { NavBar } from "@sections/landing/NavBar";
 
 const LandingPage = () => {
+    const darkLogo = '/logo/svg/Black logo - no background.svg';
+    const lightLogo = '/logo/svg/White logo - no background.svg';
+    let logo = useColorModeValue(darkLogo, lightLogo);
     return (
         <>
-            <NavBar />
+            <NavBar logo={logo} />
             <CallToAction />
             <Footer />
         </>

diff --git a/lumium-space/pages/spaces/create.tsx b/lumium-space/pages/spaces/create.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Authenticator } from '@components/security/Authenticator';
 import CreateWorkspace from '@components/forms/CreateWorkspace';
-import { useColorModeValue } from '@chakra-ui/system';
+import { useColorModeValue } from '@chakra-ui/react';
 
 const MultistepForm: React.FC = () => {
     let disclaimerButtonColor = useColorModeValue('green', 'darkgreen');

diff --git a/lumium-space/src/sections/landing/NavBar.tsx b/lumium-space/src/sections/landing/NavBar.tsx
@@ -35,20 +35,16 @@ import {
 import Router from 'next/router';
 import { ACCOUNT, AUTH_SIGNIN, AUTH_SIGNUP } from '@routes/space';
 import packageInfo from 'package.json';
-import { useEffect, useState } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import { useApi } from "@hooks/api";
 import { SECURE_AUTH_SIGNOUT, SECURE_PONG } from '@routes/api/v1';
 
-export const NavBar = () => {
+export const NavBar = (logo) => {
     const { isOpen, onToggle } = useDisclosure();
     const { colorMode, toggleColorMode } = useColorMode();
     const [loginStatus, setLoginStatus] = useState(false);
     const [api] = useApi();
 
-    const darkLogo = '/logo/svg/Black logo - no background.svg';
-    const lightLogo = '/logo/svg/White logo - no background.svg';
-    const logo = useColorModeValue(darkLogo, lightLogo);
-
     const handleLogout = () => {
         api.post(SECURE_AUTH_SIGNOUT).then(() => Router.reload());
     };
@@ -280,7 +276,7 @@ const MobileNavItem = ({ label, children, href }: NavItem) => {
                             <Link key={child.label} py={2} href={child.href}>
                                 {child.label}
                             </Link>
-                    ))}
+                        ))}
                 </Stack>
             </Collapse>
         </Stack>

diff --git a/lumium-space/src/sections/workspace/NavBar.tsx b/lumium-space/src/sections/workspace/NavBar.tsx
@@ -1,17 +1,21 @@
 import { MoonIcon, SunIcon } from "@chakra-ui/icons";
 import { useColorMode, useColorModeValue, Box, Image, Text, FlexProps, Flex, IconButton, Stack, HStack, Button, Menu, MenuButton, Avatar, VStack, MenuList, MenuItem, MenuDivider, Spacer } from "@chakra-ui/react";
+import { useApi } from "@hooks/api";
+import { SECURE_AUTH_SIGNOUT } from "@routes/api/v1";
+import { ACCOUNT, ROOT } from "@routes/space";
 import { UserDTO, WorkspaceDTO } from "@types";
+import Router from "next/router";
 import { FiMenu, FiBell, FiChevronDown } from "react-icons/fi";
 
-interface MobileProps extends FlexProps {
+interface NavBarProps extends FlexProps {
     onOpen: () => void;
     userInfo?: UserDTO;
     workspace?: WorkspaceDTO;
 }
 
-const MobileNav = ({ onOpen, userInfo, workspace, ...rest }: MobileProps) => {
+const NavBar = ({ onOpen, userInfo, workspace, ...rest }: NavBarProps) => {
     const { colorMode, toggleColorMode } = useColorMode();
-
+    const [api] = useApi();
     let role = ""
     if (userInfo?.id) {
         if (workspace?.ownerId == userInfo?.id) {
@@ -86,15 +90,14 @@ const MobileNav = ({ onOpen, userInfo, workspace, ...rest }: MobileProps) => {
                         <MenuList
                             borderColor={useColorModeValue('gray.200', 'gray.700')}>
                             <MenuItem>Profile</MenuItem>
-                            <MenuItem>Settings</MenuItem>
-                            <MenuItem>Billing</MenuItem>
+                            <MenuItem onClick={() => { Router.push(ACCOUNT) }}>Settings</MenuItem>
                             <MenuDivider />
-                            <MenuItem>Sign out</MenuItem>
+                            <MenuItem onClick={() => { api.post(SECURE_AUTH_SIGNOUT).then(() => Router.push(ROOT)); }}>Sign out</MenuItem>
                         </MenuList>
                     </Menu>
                 </Flex>
             </HStack>
         </Flex >
     );
 };
-export default MobileNav;
+export default NavBar;
diff --git a/lumium-space/src/sections/workspace/SideBar.tsx b/lumium-space/src/sections/workspace/SideBar.tsx
@@ -1,7 +1,8 @@
 import { BoxProps, Link, Image, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, Stack, CloseButton, Menu, MenuButton, Button, MenuList, MenuItem, Divider, Icon, FlexProps } from "@chakra-ui/react";
-import { useColorModeValue } from "@chakra-ui/system";
 import CreateWorkspace from "@components/forms/CreateWorkspace";
+import { ROOT } from "@routes/space";
 import { WorkspaceDTO, UserDTO } from "@types";
+import Router from "next/router";
 import { ReactElement, ReactText } from "react";
 import { IconType } from "react-icons";
 import { FiHome, FiTrendingUp, FiCompass, FiStar, FiSettings, FiChevronDown, FiLock, FiPlus } from "react-icons/fi";
@@ -89,23 +90,23 @@ const SideBar = ({ onSelfClose, workspace, userInfo, logo, backgroundColor, disc
                         {userInfo?.ownedWorkspaces?.length != 0 &&
                             <>
                                 {userInfo?.ownedWorkspaces.map((w) => {
-                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />}>{w.name}</MenuItem>;
+                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />} onClick={() => { Router.push(ROOT + w.id) }}>{w.name}</MenuItem>;
                                 })}
                                 <Divider />
                             </>
                         }
                         {userInfo?.administratedWorkspaces?.length != 0 &&
                             <>
                                 {userInfo?.administratedWorkspaces.map((w) => {
-                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />}>{w.name}</MenuItem>;
+                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />} onClick={() => { Router.push(ROOT + w.id) }}>{w.name}</MenuItem>;
                                 })}
                                 <Divider />
                             </>
                         }
                         {userInfo?.visitorWorkspaces?.length != 0 &&
                             <>
                                 {userInfo?.visitorWorkspaces.map((w) => {
-                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />}>{w.name}</MenuItem>;
+                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />} onClick={() => { Router.push(ROOT + w.id) }}>{w.name}</MenuItem>;
                                 })}
                                 <Divider />
                             </>