feat: move exit button from header to footer

jaenjs · Sep 12, 2021 · d9d82a2 · d9d82a2
1 parent 26c83d3
commit d9d82a2
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 19 deletions.
diff --git a/packages/jaen-shared-ui/src/components/app/Main/index.tsx b/packages/jaen-shared-ui/src/components/app/Main/index.tsx
@@ -21,7 +21,7 @@ import {
   TabsMain,
   LoginMain,
   LoginMainProps,
-  HeaderMainProps
+  FooterMainProps
 } from '@components/organisms/main'
 import React, {useRef} from 'react'
 
@@ -30,7 +30,7 @@ export type MainProps = {
   tabs: TabsMainProps
   authenticated: boolean
   login: LoginMainProps
-  header: HeaderMainProps
+  footer: FooterMainProps
 }
 
 const Main: React.FC<MainProps> = props => {
@@ -56,7 +56,7 @@ const Main: React.FC<MainProps> = props => {
             {props.authenticated ? (
               <>
                 <DrawerHeader>
-                  <HeaderMain {...props.header} />
+                  <HeaderMain />
                 </DrawerHeader>
                 <Divider />
                 <DrawerBody pd={0} mt={2}>
@@ -65,7 +65,7 @@ const Main: React.FC<MainProps> = props => {
                 </DrawerBody>
                 <Divider />
                 <DrawerFooter py={2}>
-                  <FooterMain />
+                  <FooterMain {...props.footer} />
                 </DrawerFooter>
               </>
             ) : (

diff --git a/packages/jaen-shared-ui/src/components/organisms/main/FooterMain/FooterMain.stories.tsx b/packages/jaen-shared-ui/src/components/organisms/main/FooterMain/FooterMain.stories.tsx
@@ -1,14 +1,16 @@
 import {Story, Meta} from '@storybook/react'
 
-import MainFooter from '.'
+import MainFooter, {FooterMainProps} from '.'
 
 export default {
   title: 'Organisms/main/MainFooter',
   component: MainFooter
 } as Meta
 
-const Template: Story = args => <MainFooter {...args} />
+const Template: Story<FooterMainProps> = args => <MainFooter {...args} />
 
 export const Primary = Template.bind({})
 
-Primary.args = {}
+Primary.args = {
+  onLogout: () => {}
+}
diff --git a/packages/jaen-shared-ui/src/components/organisms/main/FooterMain/index.tsx b/packages/jaen-shared-ui/src/components/organisms/main/FooterMain/index.tsx
@@ -5,9 +5,14 @@ import {
   VersionButton,
   TooltipButton
 } from '@components/molecules/buttons'
+import ExitButton from '@src/components/molecules/buttons/ExitButton'
 import React from 'react'
 
-const MainFooter: React.FC = () => {
+export interface FooterMainProps {
+  onLogout: () => void
+}
+
+const MainFooter: React.FC<FooterMainProps> = props => {
   return (
     <>
       <HStack width="100%">
@@ -16,6 +21,7 @@ const MainFooter: React.FC = () => {
         <TooltipButton />
         <LanguageButton />
         <VersionButton />
+        <ExitButton onClick={props.onLogout} />
       </HStack>
     </>
   )

diff --git a/packages/jaen-shared-ui/src/components/organisms/main/HeaderMain/HeaderMain.stories.tsx b/packages/jaen-shared-ui/src/components/organisms/main/HeaderMain/HeaderMain.stories.tsx
@@ -11,6 +11,4 @@ const Template: Story<HeaderMainProps> = args => <MainHeader {...args} />
 
 export const Primary = Template.bind({})
 
-Primary.args = {
-  onLogout: () => {}
-}
+Primary.args = {}
diff --git a/packages/jaen-shared-ui/src/components/organisms/main/HeaderMain/index.tsx b/packages/jaen-shared-ui/src/components/organisms/main/HeaderMain/index.tsx
@@ -12,11 +12,8 @@ import {
   QuestionButton,
   GithubButton
 } from '@components/molecules/buttons'
-import ExitButton from '@components/molecules/buttons/ExitButton'
 
-export type HeaderMainProps = {
-  onLogout: () => void
-}
+export type HeaderMainProps = {}
 
 const HeaderMain: React.FC<HeaderMainProps> = props => {
   return (
@@ -33,8 +30,6 @@ const HeaderMain: React.FC<HeaderMainProps> = props => {
         <GithubButton />
         <QuestionButton />
         <DmToggleButton onDmToggleChange={() => null} />
-        <Divider orientation="vertical" />
-        <ExitButton onClick={props.onLogout} />
       </HStack>
     </>
   )

diff --git a/packages/jaen-shared-ui/src/components/organisms/main/index.ts b/packages/jaen-shared-ui/src/components/organisms/main/index.ts
@@ -1,5 +1,5 @@
 export {default as HeaderMain, HeaderMainProps} from './HeaderMain'
 export {default as HotbarMain, HotbarMainProps} from './HotbarMain'
-export {default as FooterMain} from './FooterMain'
+export {default as FooterMain, FooterMainProps} from './FooterMain'
 export {default as LoginMain, LoginMainProps} from './LoginMain'
 export {default as TabsMain, TabsMainProps} from './TabsMain'
diff --git a/packages/jaen/src/containers/MainUI.tsx b/packages/jaen/src/containers/MainUI.tsx
@@ -50,7 +50,7 @@ const MainUI: React.FC<MainUIProps> = ({ui: {hotbar, tabs}}) => {
     <LoadableUI
       hotbar={hotbar}
       tabs={tabs}
-      header={{onLogout: handleLogout}}
+      footer={{onLogout: handleLogout}}
       authenticated={authenticated}
       login={{onLogin: handleLogin, onGuestLogin: handleGuestLogin}}
     />