Merge pull request #595 from dat-land/refactor/clear-up-dom-locations

Refactor/clear up dom locations
dat-ecosystem-archive · Nov 30, 2018 · 3a2f1c4 · 3a2f1c4
2 parents f2fa777 + 1216463
commit 3a2f1c4
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 91 deletions.
diff --git a/app/components/app.js b/app/components/app.js
@@ -1,6 +1,10 @@
 'use strict'
 
 import React, { Fragment } from 'react'
+import { connect } from 'react-redux'
+
+import SCREEN from '../consts/screen'
+
 import IntroContainer from '../containers/intro'
 import HeaderContainer from '../containers/header'
 import TableContainer from '../containers/table'
@@ -9,17 +13,36 @@ import StatusBarContainer from '../containers/status-bar'
 import InspectContainer from '../containers/inspect'
 import DragDropContainer from '../containers/drag-drop'
 
-const App = () => (
-  <Fragment>
-    <IntroContainer />
-    <HeaderContainer />
-    <TableContainer />
-    <Dialog.LinkContainer />
-    <Dialog.ConfirmContainer />
-    <InspectContainer />
-    <StatusBarContainer />
-    <DragDropContainer />
-  </Fragment>
-)
-
-export default App
+const mapStateToProps = state => ({
+  screen: state.screen
+})
+
+const mapDispatchToProps = dispatch => ({})
+
+export default connect(mapStateToProps, mapDispatchToProps)(function ({
+  screen
+}) {
+  if (screen === SCREEN.INTRO) {
+    return <IntroContainer />
+  }
+  return (
+    <Fragment>
+      {/* header */}
+      <HeaderContainer />
+      {/* /header */}
+
+      {/* main */}
+      <TableContainer />
+      <InspectContainer />
+      {/* /main */}
+
+      {/* footer */}
+      <StatusBarContainer />
+      {/* /footer */}
+
+      <Dialog.LinkContainer />
+      <Dialog.ConfirmContainer />
+      <DragDropContainer />
+    </Fragment>
+  )
+})
diff --git a/app/components/header.js b/app/components/header.js
@@ -9,12 +9,12 @@ import * as Button from './button'
 import Icon from './icon'
 
 const Container = styled.header`
+  width: 100%;
   height: 2.5rem;
   padding: 0.25rem 0.75rem;
   -webkit-app-region: drag;
   background-color: var(--color-neutral);
   color: var(--color-white);
-  z-index: 4;
 `
 
 const HideLayer = styled.div`
@@ -24,7 +24,6 @@ const HideLayer = styled.div`
   height: 100%;
   left: 0;
   top: 0;
-  z-index: 5;
 `
 
 const Header = ({ onShare, onMenu, onReport, menuVisible, version }) => {

diff --git a/app/components/inspect.js b/app/components/inspect.js
@@ -14,12 +14,15 @@ import {
 import SCREEN from '../consts/screen'
 
 const DetailHeader = styled.header`
+  width: 100%;
   height: 4rem;
   flex-shrink: 0;
   border-bottom: 1px solid var(--color-neutral-20);
 `
 
 const DetailFooter = styled.footer`
+  width: 100%;
+  bottom: 0;
   flex-shrink: 0;
   border-top: 1px solid var(--color-neutral-20);
 `
@@ -71,47 +74,45 @@ const Inspect = ({
 
   return (
     <main className='flex flex-column'>
-      <div className='flex flex-column flex-auto'>
-        <DetailHeader className='flex items-center'>
-          <div className='w3'>
-            <Icon name='hexagon-down' className='w2 center color-neutral-30' />
-          </div>
-          <h2 className='f5 normal truncate pr3 w-90'>{title}</h2>
-        </DetailHeader>
-        <div className='flex-auto pa3 pl5 bg-neutral-04 overflow-y-auto'>
-          <Row label='Link:' data-test='key'>
-            {toStr(dat.key)}
-          </Row>
-          <Row label='Size:' data-test='size'>
-            {size}
-          </Row>
-          <Row label='Peers:' data-test='peers'>
-            {peers}
-          </Row>
-          <Row label='Author:' data-test='author'>
-            {author}
-          </Row>
-          <Row label='Description:' data-test='description'>
-            {description}
-          </Row>
-          <Row label='Download to:' className='flex bg-white' data-test='path'>
-            <pre
-              className='flex-auto f7 f6-l'
-              style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
-            >
-              {dat.path}
-            </pre>
-            <TextButton onClick={() => changeDownloadPath(dat.key)}>
-              CHANGE...
-            </TextButton>
-          </Row>
-          <Row label='Files:'>
-            <FileList
-              dat={dat}
-              fallback={<div className='f7 f6-l pa2'>N/A</div>}
-            />
-          </Row>
+      <DetailHeader className='flex items-center bg-white'>
+        <div className='w3'>
+          <Icon name='hexagon-down' className='w2 center color-neutral-30' />
         </div>
+        <h2 className='f5 normal truncate pr3 w-90'>{title}</h2>
+      </DetailHeader>
+      <div className='flex-auto pa3 pl5 bg-neutral-04 overflow-y-auto'>
+        <Row label='Link:' data-test='key'>
+          {toStr(dat.key)}
+        </Row>
+        <Row label='Size:' data-test='size'>
+          {size}
+        </Row>
+        <Row label='Peers:' data-test='peers'>
+          {peers}
+        </Row>
+        <Row label='Author:' data-test='author'>
+          {author}
+        </Row>
+        <Row label='Description:' data-test='description'>
+          {description}
+        </Row>
+        <Row label='Download to:' className='flex bg-white' data-test='path'>
+          <pre
+            className='flex-auto f7 f6-l'
+            style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
+          >
+            {dat.path}
+          </pre>
+          <TextButton onClick={() => changeDownloadPath(dat.key)}>
+            CHANGE...
+          </TextButton>
+        </Row>
+        <Row label='Files:'>
+          <FileList
+            dat={dat}
+            fallback={<div className='f7 f6-l pa2'>N/A</div>}
+          />
+        </Row>
       </div>
       {screen === SCREEN.INSPECT && (
         <DetailFooter className='pa3 flex items-center justify-between bg-white'>

diff --git a/app/components/intro.js b/app/components/intro.js
@@ -6,7 +6,7 @@ import { Green as GreenButton, Plain as PlainButton } from './button'
 
 const Intro = styled.main`
   position: relative;
-  height: 100vh;
+  height: 100%;
   background-color: var(--color-neutral);
   color: var(--color-white);
   display: flex;
@@ -19,13 +19,13 @@ const Intro = styled.main`
 const Content = styled.div`
   position: relative;
   flex: 1;
-  width: 100vw;
+  width: 100%;
   padding: 3rem 2rem;
 `
 
 const Footer = styled.div`
   position: relative;
-  width: 100vw;
+  width: 100%;
   padding: 1rem;
   display: flex;
   justify-content: space-between;
@@ -34,8 +34,8 @@ const Footer = styled.div`
   }
 `
 const Image = styled.img`
-  max-width: 100vw;
-  max-height: 100vh;
+  max-width: 100%;
+  max-height: 100%;
 `
 
 const StyledDots = styled.div`

diff --git a/app/components/status-bar.js b/app/components/status-bar.js
@@ -1,32 +1,23 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import bytes from 'prettier-bytes'
 
-const Bar = styled.div`
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100vw;
-  padding: 0.5rem 1rem 0.75rem;
+const StatusBar = styled.footer`
+  width: 100%;
+  min-width: 800px;
+  height: 2.5rem;
+  padding: 0.25rem 0.75rem;
   background-color: var(--color-neutral-04);
   color: var(--color-neutral-60);
 `
 
-const StatusBar = ({ up, down, show }) => {
-  if (!show) {
-    return (
-      <Fragment>
-        <div />
-      </Fragment>
-    )
-  }
+export default function ({ up, down, show }) {
+  if (!show) return null
 
   return (
-    <Bar id='status-bar'>
+    <StatusBar>
       <span className='f7 mr3'>Download: {bytes(down)}/s</span>
       <span className='f7'>Upload: {bytes(up)}/s</span>
-    </Bar>
+    </StatusBar>
   )
 }
-
-export default StatusBar
diff --git a/app/containers/status-bar.js b/app/containers/status-bar.js
@@ -1,13 +1,12 @@
 'use strict'
 
-import SCREEN from '../consts/screen'
 import StatusBar from '../components/status-bar'
 import { connect } from 'react-redux'
 
 const mapStateToProps = state => ({
   up: state.speed.up,
   down: state.speed.down,
-  show: state.screen === SCREEN.DATS
+  show: true
 })
 
 const mapDispatchToProps = dispatch => ({})

diff --git a/app/index.js b/app/index.js
@@ -54,7 +54,7 @@ datMiddleware
       <Provider store={store}>
         <App />
       </Provider>,
-      document.querySelector('div')
+      document.getElementById('app-root')
     )
   })
   .catch(err => {

diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="static/base.css" />
   </head>
   <body>
-    <div></div>
+    <div id="app-root"></div>
     <script>
       // Spectron doesn't work with "preload" enabled, we need to load
       // the bundle in the test the insecure way.

diff --git a/static/base.css b/static/base.css
@@ -34,11 +34,10 @@ body {
   line-height: 1.5;
   overflow: hidden;
   min-width: 800px;
+  height: 100vh;
 }
 
 main {
-  overflow-y: auto;
-  height: calc(100vh - 2.5rem); /* height of header + status bar */
   background-color: var(--color-white);
 }
 
@@ -94,3 +93,13 @@ button {
   35% { background-color: rgba(42,202,75,.2); }
   100% { background-color: rgba(42,202,75,0); }
 }
+
+#app-root {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+#app-root > main {
+  flex: 1;
+}
diff --git a/unit-tests/file-list.js b/unit-tests/file-list.js
@@ -1,19 +1,19 @@
 import test from 'tape'
 import React from 'react'
-import { render } from 'enzyme'
+import { shallow, render } from 'enzyme'
 import FileList from '../app/components/file-list'
 
 test('file list should render div with class pa2', t => {
   const files = []
-  const wrapper = render(
+  const wrapper = shallow(
     <FileList
       dat={{
         files
       }}
     />
   )
 
-  t.equal(wrapper.find('.pa2').length, 1)
+  t.equal(wrapper.find('.pa2').length, 0)
 
   t.end()
 })

diff --git a/unit-tests/status-bar.js b/unit-tests/status-bar.js
@@ -3,10 +3,10 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import StatusBar from '../app/components/status-bar'
 
-test('status bar should render a fragment with single child (div) when show is false', t => {
+test('status bar should render empty when show is false', t => {
   const wrapper = shallow(<StatusBar up={20} down={40} show={false} />)
 
-  t.equal(wrapper.find('div').length, 1)
+  t.equal(wrapper.isEmptyRender(), true)
 
   t.end()
 })