some progess

.env

@@ -0,0 +1,2 @@
+NODE_PATH=src/
+REACT_APP_OWM_API_KEY=fd690720ed20f870192364c8d5e9eae1

.eslintrc

@@ -0,0 +1,28 @@
+{
+  "extends": ["airbnb", "prettier", "prettier/react"],
+  "plugins": ["prettier"],
+  "rules": {
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [".js", ".jsx"]
+      }
+    ],
+    "react/prop-types": 0,
+    "react/button-has-type": 0,
+    "no-underscore-dangle": 0,
+    "import/imports-first": ["error", "absolute-first"],
+    "import/newline-after-import": "error",
+    "no-undef": 0
+  },
+  "globals": {
+    "window": true,
+    "document": true,
+    "localStorage": true,
+    "FormData": true,
+    "FileReader": true,
+    "Blob": true,
+    "navigator": true
+  },
+  "parser": "babel-eslint"
+}

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

package.json

@@ -3,9 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.0.0",
+    "@material-ui/icons": "^4.0.0",
+    "@tweenjs/tween.js": "^17.3.0",
+    "downshift": "^3.2.10",
+    "gasp": "^0.0.2",
+    "gsap": "^2.1.3",
+    "material-ui": "^0.20.2",
+    "ramda": "^0.26.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-scripts": "3.0.1"
+    "react-redux": "^7.0.3",
+    "react-scripts": "3.0.1",
+    "react-select": "^2.4.3",
+    "redux": "^4.0.1",
+    "redux-saga": "^1.0.2",
+    "redux-thunk": "^2.3.0",
+    "styled-components": "^4.2.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -27,5 +41,18 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-plugin-import": "^2.17.3",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.13.0",
+    "husky": "^2.3.0",
+    "lint-staged": "^8.1.7",
+    "prettier": "^1.17.1",
+    "pretty-quick": "^1.11.0"
   }
 }

src/index.js

@@ -1,12 +1,28 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import TWEEN from '@tweenjs/tween.js';
 import './index.css';
-import App from './App';
+import Layout from './layout/Layout';
 import * as serviceWorker from './serviceWorker';
+import { store } from './state';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <Provider store={store}>
+    <Layout />
+  </Provider>,
+  document.getElementById('root')
+);
+
+function animate() {
+  requestAnimationFrame(animate);
+  // [...]
+  TWEEN.update();
+  // [...]
+}
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
 serviceWorker.unregister();
+animate();

src/layout/Layout.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled from 'styled-components';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { setActiveView } from '../state/layout/actions';
+import VIEWS from './views';
+import Settings from './settings/Settings';
+import Slider from './slider/Slider';
+
+const LayoutContainer = styled.div`
+  display: flex;
+  background-color: #37393f;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const Layout = props => {
+  const {
+    layout: { activeView }
+  } = props;
+
+  return (
+    <LayoutContainer>
+      {activeView === VIEWS.SETTINGS && <Settings />}
+      {activeView === VIEWS.WEATHER && <Slider />}
+    </LayoutContainer>
+  );
+};
+
+function mapStateToProps(state) {
+  return {
+    layout: state.layout
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    {
+      setActiveView
+    },
+    dispatch
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Layout);

src/layout/common/Button.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export default Button = styled.button`
+
+`;

src/layout/settings/Settings.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { setActiveView } from '../../state/layout/actions';
+import VIEWS from '../views';
+// import IntegrationReactSelect from './SelectComponents';
+
+const Settings = props => (
+  <div>
+    <button
+      onClick={() => {
+        props.setActiveView(VIEWS.WEATHER);
+      }}
+    >
+      BACK
+    </button>
+    Settings
+  </div>
+);
+
+function mapStateToProps(state) {
+  return {};
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    {
+      setActiveView
+    },
+    dispatch
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Settings);

src/layout/slider/Slider.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { map, values } from 'ramda';
+import styled from 'styled-components';
+import { setActiveView } from '../../state/layout/actions';
+import VIEWS from '../views';
+import WeatherView from '../weather/WeatherView';
+
+const SliederContainer = styled.div`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+`;
+
+const SettingsButton = styled.button``;
+
+const Slider = props => {
+  const { weather } = props;
+
+  return (
+    <SliederContainer>
+      <SettingsButton
+        onClick={() => {
+          props.setActiveView(VIEWS.SETTINGS);
+        }}
+      >
+        {'COG'}
+      </SettingsButton>
+      {values(
+        map(data => {
+          return <WeatherView data={data} />;
+        }, weather)
+      )}
+    </SliederContainer>
+  );
+};
+
+function mapStateToProps(state) {
+  return {
+    weather: state.apiData.weather
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    {
+      setActiveView
+    },
+    dispatch
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Slider);

src/layout/views.js

@@ -0,0 +1,4 @@
+export default Object.freeze({
+  SETTINGS: 'settings',
+  WEATHER: 'weather'
+});

src/layout/weather/WeatherView.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import WeatherNow from './now/WeatherNow';
+import WeatherWeek from './week/WatherWeek';
+
+export default props => {
+  const {
+    data: { now, week }
+  } = props;
+
+  return (
+    <div>
+      <WeatherNow {...now} />
+      <WeatherWeek days={week} />
+    </div>
+  );
+};

src/layout/weather/icons/ClarSky.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import Sun from './elements/Sun';
+
+export default props => {
+  return <Sun {...props} />;
+};