update to new fork

.gitignore

@@ -5,3 +5,4 @@ public/bundle.js
 package-lock.json
 *hot-update.js
 *hot-update.json
+env.sh

frontend/components/Logo.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from 'semantic-ui-react';
+
+const Logo = () => {
+    return (
+      <div className="logo">
+        <Icon name="reddit square" size="large"/>
+      </div>
+    );
+};
+
+// Logo.propTypes = {
+//     // name: PropTypes.string,
+// };
+
+
+export default Logo;

frontend/components/Title.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { header } from 'semantic-ui-react';
 
 const Title = ( { name } ) => {
     return (

frontend/containers/AppContainer.js

@@ -2,11 +2,16 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import Title from '../components/Title';
+import HeadBar from '../containers/HeadBar';
+import Feed from '../containers/Feed';
+import SideBar from '../containers/SideBar';
 
 const AppContainer = ({ name }) => {
     return (
         <div>
-            <Title name={name} />
+            <HeadBar />
+            <Feed />
+            <SideBar />
         </div>
     );
 };

frontend/containers/Feed.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from 'semantic-ui-react';
+
+const Feed = () => {
+    return (
+      <div className="testFeed">
+        <div className="testFeedIconContainer">
+          <Icon name="genderless" size="massive" loading="true"/>
+        </div>
+      </div>
+    );
+};
+
+// Logo.propTypes = {
+//     // name: PropTypes.string,
+// };
+
+
+export default Feed;

frontend/containers/HeadBar.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Title from '../components/Title';
+import Logo from '../components/Logo';
+import { Header, Icon } from 'semantic-ui-react';
+
+
+const HeadBar = ({ name, isModalOpen }) => {
+  if(!isModalOpen) {
+    return (
+      <div className="titleBar2">
+        <div className="titleString2">
+          <Title name='DA MODAL!'/>
+          {/* <Logo /> */}
+        </div>
+      </div>
+    );
+  }
+      else {
+        return (
+
+          <div className="titleBar">
+            <div className="titleString">
+              <Title name={name}/>
+              <Logo />
+            </div>
+          </div>
+        );
+      }
+};
+
+
+HeadBar.propTypes = {
+    name: PropTypes.string,
+    isModalOpen: PropTypes.bool
+};
+
+const mapStateToProps = (state) => {
+    return {
+        name: state.name,
+        isModalOpen: state.isModalOpen
+    };
+};
+
+
+export default connect(
+    mapStateToProps,
+)(HeadBar);

frontend/containers/Root.dev.js

@@ -3,14 +3,21 @@ import React from 'react';
 import {Provider} from 'react-redux';
 import AppContainer from './AppContainer.js';
 import DevTools from './DevTools';
+import { HashRouter, Route, Switch } from 'react-router-dom';
+
+require('../css/main.css');
 
 export default function Root({ store }) {
     return (
         <Provider store={store}>
-            <div>
-                <AppContainer />
-                <DevTools />
-            </div>
+          <HashRouter>
+            <Switch>
+              <div>
+                  <Route exact path='/' component={AppContainer}/>
+                  <DevTools />
+              </div>
+            </Switch>
+          </HashRouter>
         </Provider>
     );
 }

frontend/containers/SideBar.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Header, Icon, Button } from 'semantic-ui-react';
+
+
+const SideBar = ({ name }) => {
+    return (
+      <div className="testSideBar">
+        <div className="sideBarContainer">
+          <Button inverted color='red' fluid="true">Submit</Button>
+
+          <div className="loginRegister">
+            <Button.Group fluid="true">
+              <Button>Login</Button>
+              <Button.Or />
+              <Button positive>Register</Button>
+            </Button.Group>
+          </div>
+
+          <div className="sideBarDescriptionTitle">
+            <Header as='h2'>Description: </Header>
+          </div>
+          <hr />
+          <div className="sideBarDescription">
+            <span><Header sub>This is the front page of the internet. All that is found here
+            is dog pictures and reactions to Stranger Things</Header></span>
+          </div>
+        </div>
+      </div>
+    );
+};
+
+
+SideBar.propTypes = {
+    name: PropTypes.string,
+};
+
+const mapStateToProps = (state) => {
+    return {
+        name: state.name
+    };
+};
+
+
+export default connect(
+    mapStateToProps,
+)(SideBar);

frontend/css/main.css

@@ -0,0 +1,64 @@
+.titleBar {
+  background-color: dodgerblue;
+  width: 100vw;
+  height: 15vh;
+}
+
+.titleBar2 {
+  background-color: violet;
+  width: 100vw;
+  height: 15vh;
+}
+
+
+.titleString {
+display: -webkit-inline-box;
+}
+
+.titleString2 {
+display: -webkit-inline-box;
+}
+
+.floatTitle {
+  float: left;
+}
+
+.testFeed {
+  position: absolute;
+  background-color: yellow;
+  height: 100vh;
+  width: 100vw;
+}
+
+.testSideBar {
+  width: 33vw;
+  min-width: 33%;
+  position: relative;
+  float: right;
+  height: 100vh;
+  background-color: white;
+  margin-right: 5px;
+}
+
+.sideBarContainer {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.testFeedIconContainer {
+  margin-left: 33vw;
+  margin-top: 33vh;
+}
+
+.loginRegister {
+  text-align: center;
+  margin-top: 15px;
+}
+
+.sideBarDescriptionTitle {
+  margin-top: 15px;
+}
+
+.logo {
+  /*margin-top: 7px;*/
+}

frontend/index.js

@@ -5,6 +5,8 @@ import Root from './containers/Root';
 
 import './assets/stylesheets/base.scss';
 
+// import './semantic/dist/semantic.min.css';
+
 const store = configureStore();
 
 render(

frontend/reducers/index.js

@@ -1,4 +1,4 @@
-function rootReducer(state = {name: 'Horizons'}, action) {
+function rootReducer(state = {name: 'Reddit', isModalOpen: false}, action) {
     switch (action.type) {
         default:
             return state;