feat(*): set RmAbout container

aneurysmjs · Jan 14, 2018 · 533c399 · 533c399
1 parent 8172a91
commit 533c399
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 4 deletions.
diff --git a/src/components/RmRoot/RmRoot.jsx b/src/components/RmRoot/RmRoot.jsx
@@ -8,6 +8,7 @@ import {
 import RmLanding from '../../containers/RmLanding/RmLanding';
 import RmAbout from '../../containers/RmAbout/RmAbout';
 import RmMovies from '../../containers/RmMovies/RmMovies';
+import RmProfile from '../../containers/RmProfile/RmProfile';
 import RmMovieDetails from '../../containers/RmMovieDetails/RmMovieDetails';
 import RmFooter from '../../components/RmFooter/RmFooter';
 
@@ -20,10 +21,15 @@ const RmRoot = ({ store }) => (
           <Route
             path="/about"
             component={props => <RmAbout {...props} />}
-          /><Route
+          />
+          <Route
             path="/movies"
             component={props => <RmMovies {...props} />}
           />
+          <Route
+            path="/Profile"
+            component={props => <RmProfile {...props} />}
+          />
           <Route
             path="/details/:id"
             component={props => <RmMovieDetails {...props} /> }
@@ -35,4 +41,4 @@ const RmRoot = ({ store }) => (
   </Provider>
 );
 
-export default RmRoot;
+export default RmRoot;
diff --git a/src/containers/RmAbout/RmAbout.jsx b/src/containers/RmAbout/RmAbout.jsx
@@ -8,7 +8,7 @@ class RmAbout extends Component {
   render() {
     return (
       <section className="rmAbout">
-        <RmNav />
+        <RmNav showProfile />
         <div className="rmAbout__wrapper">
           <RmHeader
             heading="About"
@@ -18,7 +18,7 @@ class RmAbout extends Component {
               <div className="col-lg-8 col-md-10 mx-auto">
                 <p>
                   This is just an app to save and share your favorite movies, because sometimes we need a recommendation
-                  when we doesn't has anything to see, so this is the perfect place.
+                  when we doesn't have anything to see, so this is the perfect place.
                 </p>
               </div>
             </div>

diff --git a/src/containers/RmNav/RmNav.jsx b/src/containers/RmNav/RmNav.jsx
@@ -18,6 +18,10 @@ class RmNav extends Component {
     this.setState({searchTerm});
   };
 
+  /**
+   *
+   * @type {Object[]}
+   */
   links = [
     {
       id: v4(),
@@ -36,13 +40,22 @@ class RmNav extends Component {
     const {
       searchTerm,
       showSearch,
+      showProfile,
       onSearch
     } = this.props;
 
     let space;
 
     if (showSearch) {
       space = <RmSearcher searchTerm={searchTerm} onSearch={onSearch} />;
+    } else if (showProfile) {
+      space = (
+        <NavLink
+          to='/profile'
+          className="btn btn-outline-secondary">
+          Profile
+        </NavLink>
+      );
     } else {
       space = (
         <NavLink

diff --git a/src/containers/RmProfile/RmProfile.jsx b/src/containers/RmProfile/RmProfile.jsx
@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+
+import RmNav from '../../containers/RmNav/RmNav';
+
+class RmProfile extends Component {
+
+  render() {
+    return (
+      <section className="rmProfile">
+        <RmNav showProfile />
+        <div className="card" style={{width: '18rem'}}>
+          <img className="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_160dec4243a%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_160dec4243a%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2299.4375%22%20y%3D%2296.3375%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" />
+          <div className="card-body">
+            <h5 className="card-title">Card title</h5>
+            <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+          </div>
+
+          <ul className="list-group list-group-flush">
+            <li className="list-group-item">Cras justo odio</li>
+            <li className="list-group-item">Dapibus ac facilisis in</li>
+            <li className="list-group-item">Vestibulum at eros</li>
+          </ul>
+          <div className="card-body">
+            <a href="#" className="card-link">Card link</a>
+            <a href="#" className="card-link">Another link</a>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+}
+
+export default RmProfile;
diff --git a/src/containers/RmProfile/RmProfile.scss b/src/containers/RmProfile/RmProfile.scss
@@ -0,0 +1,5 @@
+.rmProfile {
+
+  @include min-height;
+
+}