feat: render buttons as nextlink

advantage is that this is serversided rendered
lumium-technologies · Jan 4, 2023 · bf02e4a · bf02e4a
1 parent cc9e303
commit bf02e4a
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 23 deletions.
diff --git a/lumium-space/pages/[workspaceId]/[[...pageId]].tsx b/lumium-space/pages/[workspaceId]/[[...pageId]].tsx
@@ -16,6 +16,7 @@ import { NavBar, SideBar } from '@sections/workspace';
 import { useFormik } from 'formik';
 import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 import { PageTitle } from '@components/other';
+import NextLink from 'next/link';
 
 const Workspace: React.FC = () => {
     const router = useRouter();
@@ -138,7 +139,7 @@ const Workspace: React.FC = () => {
                         {
                             workspace?.pages.map((p) => {
                                 return (
-                                    <Button key={p.id} onClick={() => router.push(p.id)}></Button>
+                                    <Button key={p.id} as={NextLink} href={p.id}></Button>
                                 );
                             })
                         }

diff --git a/lumium-space/pages/auth/signin.tsx b/lumium-space/pages/auth/signin.tsx
@@ -20,6 +20,7 @@ import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 import { AuthBox, PageTitle } from '@components/other';
 import { useFormik } from 'formik';
 import { ReasonDTO } from '@types';
+import NextLink from 'next/link';
 
 const SignIn: React.FC = () => {
     const [showPassword, setShowPassword] = useState(false);
@@ -99,7 +100,7 @@ const SignIn: React.FC = () => {
                             <FormErrorMessage data-cy="credentialError">{error?.reason}</FormErrorMessage>
                         </FormControl>
                         <Flex justifyContent="space-between" mt="0">
-                            <Link color={'blue.400'} onClick={() => Router.push(AUTH_PASSWORD_RESET)} data-cy="forgotPasswordButton">Forgot password?</Link>
+                            <Link color={'blue.400'} data-cy="forgotPasswordButton" as={NextLink} href={AUTH_PASSWORD_RESET}>Forgot password?</Link>
                         </Flex>
                         <Button
                             bg={'blue.400'}
@@ -117,7 +118,7 @@ const SignIn: React.FC = () => {
                             <Text mb={"0"}>
                                 Create a new account?
                             </Text>
-                            <Link color={'blue.400'} onClick={() => Router.push(AUTH_SIGNUP)} data-cy="signUpSwitchButton">Create Account</Link>
+                            <Link color={'blue.400'} data-cy="signUpSwitchButton" as={NextLink} href={AUTH_SIGNUP}>Create Account</Link>
                         </Flex>
                     </Stack>
                 </form>

diff --git a/lumium-space/pages/auth/signup.tsx b/lumium-space/pages/auth/signup.tsx
@@ -21,6 +21,7 @@ import { AUTH_SIGNIN, AUTH_SIGNUP, SPACES_CREATE } from '@routes/space';
 import { AuthBox, PageTitle } from '@components/other';
 import { useFormik } from 'formik';
 import { ReasonDTO } from '@types';
+import NextLink from 'next/link';
 
 const SignUp: React.FC = () => {
     const [api] = useApi();
@@ -142,7 +143,7 @@ const SignUp: React.FC = () => {
                             <Text mb={"0"}>
                                 Already have an account?
                             </Text>
-                            <Link color={'blue.400'} onClick={() => Router.push(AUTH_SIGNIN)} data-cy="signInSwitchButton">Login</Link>
+                            <Link color={'blue.400'} data-cy="signInSwitchButton" as={NextLink} href={AUTH_SIGNIN}>Login</Link>
                         </Flex>
                     </Stack>
                 </form>

diff --git a/lumium-space/src/components/other/AuthBox.tsx b/lumium-space/src/components/other/AuthBox.tsx
@@ -1,4 +1,6 @@
-import { Flex, Stack, Heading, Box, Image } from "@chakra-ui/react"
+import { Flex, Stack, Heading, Box, Image, Link, Center } from "@chakra-ui/react"
+import { ROOT } from "@routes/space";
+import NextLink from 'next/link';
 
 export const AuthBox = (props) => {
     return (
@@ -8,7 +10,11 @@ export const AuthBox = (props) => {
         >
             <Stack spacing={8} mx={'auto'} maxW={'lg'} py={"3%"} px={"2%"} width="100%">
                 <Stack align={'center'}>
-                    <Image src={props.logo} minWidth={"70%"} maxWidth={"80%"} alt="lumium logo" />
+                    <Link as={NextLink} href={ROOT}>
+                        <Center>
+                            <Image src={props.logo} minWidth={"70%"} maxWidth={"80%"} alt="lumium logo" />
+                        </Center>
+                    </Link>
                 </Stack>
                 <Stack align={'center'}>
                     <Heading fontSize={'4xl'} textAlign={'center'}>

diff --git a/lumium-space/src/sections/landing/CallToAction.tsx b/lumium-space/src/sections/landing/CallToAction.tsx
@@ -12,6 +12,7 @@ import { useApi, useUserInfo } from '@hooks/api';
 import { SECURE_PONG } from '@routes/api/v1';
 import { AUTH_SIGNUP, AUTH_SIGNIN, SPACES_CREATE, ROOT } from '@routes/space';
 import Router from 'next/router';
+import NextLink from 'next/link';
 
 export const CallToAction = () => {
     const [api] = useApi();
@@ -60,7 +61,7 @@ export const CallToAction = () => {
                     >
                         Continue
                     </Button>
-                    <Button rounded={'full'} px={6} onClick={() => Router.push(AUTH_SIGNUP)}>
+                    <Button rounded={'full'} px={6} as={NextLink} href={AUTH_SIGNUP}>
                         Sign up
                     </Button>
                 </Stack>

diff --git a/lumium-space/src/sections/landing/NavBar.tsx b/lumium-space/src/sections/landing/NavBar.tsx
@@ -35,9 +35,10 @@ import {
 import Router from 'next/router';
 import { ACCOUNT, AUTH_SIGNIN, AUTH_SIGNUP } from '@routes/space';
 import packageInfo from 'package.json';
-import { ReactElement, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useApi } from "@hooks/api";
 import { SECURE_AUTH_SIGNOUT, SECURE_PONG } from '@routes/api/v1';
+import NextLink from 'next/link';
 
 interface NavBarProps {
     logo: string;
@@ -116,7 +117,7 @@ export const NavBar = ({ logo }: NavBarProps) => {
                                     />
                                 </MenuButton>
                                 <MenuList>
-                                    <MenuItem onClick={() => Router.push(ACCOUNT)}>Account</MenuItem>
+                                    <MenuItem as={NextLink} href={ACCOUNT}>Account</MenuItem>
                                     <MenuDivider />
                                     <MenuItem onClick={handleLogout}>Logout</MenuItem>
                                 </MenuList>
@@ -131,7 +132,8 @@ export const NavBar = ({ logo }: NavBarProps) => {
                             <Button
                                 fontSize={'sm'}
                                 fontWeight={400}
-                                onClick={() => Router.push(AUTH_SIGNIN)}
+                                as={NextLink}
+                                href={AUTH_SIGNIN}
                                 data-cy="signInButton"
                             >
                                 Sign In
@@ -140,7 +142,8 @@ export const NavBar = ({ logo }: NavBarProps) => {
                                 fontSize={'sm'}
                                 fontWeight={600}
                                 bg={"blue.400"}
-                                onClick={() => Router.push(AUTH_SIGNUP)}
+                                as={NextLink}
+                                href={AUTH_SIGNUP}
                                 data-cy="signUpButton"
                             >
                                 Sign Up

diff --git a/lumium-space/src/sections/workspace/NavBar.tsx b/lumium-space/src/sections/workspace/NavBar.tsx
@@ -6,6 +6,7 @@ import { ACCOUNT, ROOT } from "@routes/space";
 import { UserDTO, WorkspaceDTO } from "@types";
 import Router from "next/router";
 import { FiMenu, FiBell, FiChevronDown } from "react-icons/fi";
+import NextLink from 'next/link';
 
 interface NavBarProps extends FlexProps {
     onOpen: () => void;
@@ -90,8 +91,7 @@ export const NavBar = ({ onOpen, userInfo, workspace, ...rest }: NavBarProps) =>
                         <MenuList
                             borderColor={useColorModeValue('gray.200', 'gray.700')}
                         >
-                            <MenuItem>Profile</MenuItem>
-                            <MenuItem onClick={() => { Router.push(ACCOUNT) }}>Settings</MenuItem>
+                            <MenuItem as={NextLink} href={ACCOUNT}>Settings</MenuItem>
                             <MenuDivider />
                             <MenuItem onClick={() => { api.post(SECURE_AUTH_SIGNOUT).then(() => Router.push(ROOT)); }}>Sign out</MenuItem>
                         </MenuList>

diff --git a/lumium-space/src/sections/workspace/SideBar.tsx b/lumium-space/src/sections/workspace/SideBar.tsx
@@ -6,6 +6,7 @@ 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";
+import NextLink from 'next/link';
 
 interface NavItemProps extends FlexProps {
     icon: IconType;
@@ -90,41 +91,43 @@ export const SideBar = ({ onSelfClose, workspace, userInfo, logo, backgroundColo
                         {userInfo?.ownedWorkspaces?.length != 0 &&
                             <>
                                 {userInfo?.ownedWorkspaces.map((w) => {
-                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />} onClick={() => { Router.push(ROOT + w.id) }}>{w.name}</MenuItem>;
+                                    return <MenuItem key={w.id} icon={<FiLock />} as={NextLink} href={ROOT + w.id}>{w.name}</MenuItem>;
                                 })}
                                 <Divider />
                             </>
                         }
                         {userInfo?.administratedWorkspaces?.length != 0 &&
                             <>
                                 {userInfo?.administratedWorkspaces.map((w) => {
-                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />} onClick={() => { Router.push(ROOT + w.id) }}>{w.name}</MenuItem>;
+                                    return <MenuItem key={w.id} icon={<FiLock />} as={NextLink} href={ROOT + w.id}>{w.name}</MenuItem>;
                                 })}
                                 <Divider />
                             </>
                         }
                         {userInfo?.visitorWorkspaces?.length != 0 &&
                             <>
                                 {userInfo?.visitorWorkspaces.map((w) => {
-                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />} onClick={() => { Router.push(ROOT + w.id) }}>{w.name}</MenuItem>;
+                                    return <MenuItem key={w.id} icon={<FiLock />} as={NextLink} href={ROOT + w.id}>{w.name}</MenuItem>;
                                 })}
                                 <Divider />
                             </>
                         }
                         <MenuItem as={Button} onClick={onOpen} icon={<FiPlus />}>New workspace</MenuItem>
                     </MenuList>
-                </Menu>
+                </Menu >
             }
             <Divider />
             <Button leftIcon={<FiPlus />} as={Button} bg="none" justifyContent={{ base: "center", md: "flex-start" }}>
                 New page
             </Button>
             <Divider />
-            {LinkItems.map((link) => (
-                <Button key={link.name} leftIcon={link.icon} as={Button} bg="none" justifyContent={{ base: "center", md: "flex-start" }}>
-                    {link.name}
-                </Button>
-            ))}
-        </Flex>
+            {
+                LinkItems.map((link) => (
+                    <Button key={link.name} leftIcon={link.icon} as={Button} bg="none" justifyContent={{ base: "center", md: "flex-start" }}>
+                        {link.name}
+                    </Button>
+                ))
+            }
+        </Flex >
     );
 };