seperate container in body

Author: mydearxym

components/BodyLayout/index.js

@@ -0,0 +1,45 @@
+/*
+*
+* Banner
+*
+*/
+
+import React from 'react'
+import { inject, observer } from 'mobx-react'
+
+// import Link from 'next/link'
+
+import {
+  makeDebugger,
+  storeSelector,
+  getSVGIconPath,
+} from '../../utils/functions'
+
+import * as logic from './logic'
+
+import { Banner, BannerLogo } from './styles'
+
+const debug = makeDebugger('C:Banner')
+
+class BannerContainer extends React.Component {
+  componentWillMount() {
+    debug('mount')
+    logic.init(this.props.banner)
+  }
+
+  render() {
+    const { banner } = this.props
+    const { curUrlPath } = banner
+
+    const defaultIcon = 'js'
+    const iconKey = curUrlPath === '/' ? defaultIcon : curUrlPath
+
+    return (
+      <Banner>
+        <BannerLogo path={getSVGIconPath(iconKey)} />
+      </Banner>
+    )
+  }
+}
+
+export default inject(storeSelector('banner'))(observer(BannerContainer))

containers/Banner/index.js

@@ -0,0 +1,13 @@
+/*
+ * Banner Langs
+ *
+ * This contains all the text for the Banner component.
+ */
+import { defineMessages } from 'react-intl'
+
+export default defineMessages({
+  header: {
+    id: 'containers.Banner.header',
+    defaultMessage: 'This is the Banner component !',
+  },
+})

containers/Banner/lang.js

@@ -0,0 +1,17 @@
+// import R from 'ramda'
+
+import { makeDebugger } from '../../utils/functions'
+
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('L:Banner')
+/* eslint-enable no-unused-vars */
+
+let banner = null
+
+export function someMethod() {
+  debug(banner)
+}
+
+export function init(selectedStore) {
+  banner = selectedStore
+}

containers/Banner/logic.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+import ReactSVG from 'react-svg'
+
+export const Banner = styled.div`
+  padding: 5px;
+  padding-left: 80px;
+  height: 15vh;
+  border-bottom: 1px solid tomato;
+`
+
+export const BannerLogo = styled(ReactSVG)`
+  margin-top: 2em;
+  width: 100px;
+  height: 100px;
+`

containers/Banner/styles/index.js

@@ -1,10 +1,10 @@
 // import React from 'react'
 // import { shallow } from 'enzyme'
 
-// import Content from '../index'
+// import Banner from '../index'
 
-describe('<Content />', () => {
+describe('<Banner />', () => {
   it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(true)
+    expect(true).toEqual(false)
   })
 })