Add browse page

app/assets/stylesheets/components/browse.scss

@@ -0,0 +1,85 @@
+.main-container {
+  height: 1000px;
+  background-color: red; /* For browsers that do not support gradients */
+  background-image: linear-gradient(orange, red, black);
+}
+
+// .main-container {
+//   /* Set rules to fill background */
+//   min-height: 100%;
+//   min-width: 1024px;
+//
+//   /* Set up proportionate scaling */
+//   width: 100%;
+//   height: auto;
+//
+//   /* Set up positioning */
+//   position: fixed;
+//   top: 0;
+//   left: 0;
+// }
+
+.main-container .nav-bar {
+    height: 100%;
+    width: 250px;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    padding-top: 20px;
+    opacity: .9;
+}
+
+// .main-container .nav-bar a {
+//     padding: 6px 8px 6px 16px;
+//     text-decoration: none;
+//     font-size: 25px;
+//     color: purple;
+//     display: block;
+// }
+//
+// .main-container .nav-bar a:hover {
+//     color: #f1f1f1;
+// }
+
+// @media screen and (max-width: 1024px) { /* Specific to this particular image */
+//   .main-container {
+//     left: 50%;
+//     margin-left: -512px;   /* 50% */
+//   }
+// }
+//
+// .main-container .nav-bar {
+//   padding: 24px 24px 5px;
+//   display: -webkit-box;
+//   display: -ms-flexbox;
+//   display: flex;
+//   -webkit-box-orient: vertical;
+//   -webkit-box-direction: normal;
+//   -ms-flex-direction: column;
+//   flex-direction: column;
+//   height: 100%;
+//   -webkit-user-select: none;
+//   -moz-user-select: none;
+//   -ms-user-select: none;
+//   user-select: none;
+//   width: 230px;
+//   cursor: default;
+// }
+
+
+// body {
+//     --glue-font-family: "spotify-circular","noto-arabic","Helvetica Neue",Helvetica,Arial,"Hiragino Kaku Gothic Pro","Meiryo","MS Gothic",sans-serif;
+// }
+
+// body, button, input {
+//     font-size: 14px;
+//     line-height: 20px;
+//     letter-spacing: .015em;
+//     font-weight: var(--glue-font-weight-normal);
+//     color: #b3b3b3;
+//     text-transform: none;
+//     font-family: var(--glue-font-family);
+// }

db/migrate/20181115144513_create_active_storage_tables.active_storage.rb

@@ -0,0 +1,26 @@
+# This migration comes from active_storage (originally 20170806125915)
+class CreateActiveStorageTables < ActiveRecord::Migration[5.2]
+  def change
+    create_table :active_storage_blobs do |t|
+      t.string   :key,        null: false
+      t.string   :filename,   null: false
+      t.string   :content_type
+      t.text     :metadata
+      t.bigint   :byte_size,  null: false
+      t.string   :checksum,   null: false
+      t.datetime :created_at, null: false
+
+      t.index [ :key ], unique: true
+    end
+
+    create_table :active_storage_attachments do |t|
+      t.string     :name,     null: false
+      t.references :record,   null: false, polymorphic: true, index: false
+      t.references :blob,     null: false
+
+      t.datetime :created_at, null: false
+
+      t.index [ :record_type, :record_id, :name, :blob_id ], name: "index_active_storage_attachments_uniqueness", unique: true
+    end
+  end
+end

frontend/components/App.jsx

@@ -4,7 +4,7 @@ import { Route, Switch } from 'react-router-dom';
 import LoginFormContainer from './session/login_form_container';
 import SignupFormContainer from './session/signup_form_container';
 import SplashContainer from './splash/splash_container';
-// import Browse from './splash/splash';
+import Browse from './browse/browse';
 
 const App = () => {
     return (
@@ -13,11 +13,11 @@ const App = () => {
     <Switch>
       <AuthRoute exact path="/login" component={LoginFormContainer} />
       <AuthRoute exact path="/signup" component={SignupFormContainer} />
+      <ProtectedRoute exact path="/browse" component={Browse}/>
       <Route path="/" component={SplashContainer}/>
     </Switch>
   </div>
 )
 };
-// <ProtectedRoute exact path="/browse" component={Browse}/>
 
 export default App;

frontend/components/browse/browse.jsx

@@ -4,8 +4,9 @@ class Browse extends React.Component {
 
   render() {
     return (
-      <div>
-        <h1>Browse</h1>
+      <div className="main-container">
+        <nav className="nav-bar">
+        </nav>
       </div>
     );
   }

frontend/components/browse/browse_container.js

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { login } from '../../actions/session_actions';
+import SessionForm from './session_form';
+
+const mapStateToProps = (state) => {
+  return {
+
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(SessionForm);

frontend/components/splash/splash.jsx

@@ -1,5 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import Browse from '../browse/browse';
+import { withRouter, Route, Redirect } from 'react-router-dom';
+
 
 const sessionLinks = () => (
   <div className="splash-page">
@@ -31,10 +34,7 @@ const sessionLinks = () => (
 const personalGreeting = (currentUser, logout) => {
 
   return (
-    <hgroup className="header-group">
-      <h2 className="header-name">Hi, {currentUser.username}!</h2>
-      <button className="header-button" onClick={logout}>Log Out</button>
-    </hgroup>
+      <Redirect to="/browse" />
   )
 };