Skip to content

# Step 14 — More Component

Jump to bottom
Gerald Goh edited this page Jul 26, 2020 · 5 revisions

Build More component

  • Added profile picture with random robot pictures
  • Added profile name
  • Added various full length cards
app/javascript/components/profile/sessings.jsx

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faCrosshairs,
  faEnvelope,
  faUser,
  faCog,
  faInfoCircle,
} from '@fortawesome/free-solid-svg-icons';
import SignoutBtn from '../home/Signout';

const Settings = () => {
  const userName = JSON.parse(localStorage.getItem('redux')).name;
  return (
    <div className="more">
      <div className="row more-list">
        <div className="col-4 container">
          <div className="img-circle hor">
            <img src={`https://robohash.org/${userName}?set=set2`} alt="Profile" />
          </div>
        </div>
        <div className="col-8 container profile-content">
          <strong className="profile-name">{userName}</strong>
        </div>
      </div>
      <div className="row more-items">
        <div className="col-4 container more-icons">
          <FontAwesomeIcon icon={faCrosshairs} className="more-icon" />
        </div>
        <div className="col-8 container more-texts">
          <strong className="more-text">Your Target</strong>
        </div>
      </div>
      <div className="row more-items">
        <div className="col-4 container more-icons">
          <FontAwesomeIcon icon={faEnvelope} className="more-icon" />
        </div>
        <div className="col-8 container more-texts">
          <strong className="more-text">Mailing List</strong>
        </div>
      </div>
      <div className="row more-items">
        <div className="col-4 container more-icons">
          <FontAwesomeIcon icon={faUser} className="more-icon" />
        </div>
        <div className="col-8 container more-texts">
          <strong className="more-text">Your Profile</strong>
        </div>
      </div>
      <div className="row more-items">
        <div className="col-4 container more-icons">
          <FontAwesomeIcon icon={faCog} className="more-icon" />
        </div>
        <div className="col-8 container more-texts">
          <strong className="more-text">Settings</strong>
        </div>
      </div>
      <div className="row more-items">
        <div className="col-4 container more-icons">
          <FontAwesomeIcon icon={faInfoCircle} className="more-icon" />
        </div>
        <div className="col-8 container more-texts">
          <strong className="more-text">Help</strong>
        </div>
      </div>
      <div className="row more-items">
        <SignoutBtn />
      </div>
    </div>
  );
};

export default Settings;

Built More container

app/javascript/containers/More.jsx

import React from 'react';
import Head from '../components/profile/Head';
import Settings from '../components/profile/Settings';
import Navbar from '../components/Navbar';

export default () => (
  <div>
    <Head />
    <Settings />
    <Navbar />
  </div>
);

Removed logout button from Navbar

app/components/Navbar.jsx

/* eslint-disable no-return-assign, jsx-a11y/anchor-is-valid, import/no-named-as-default */
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faChartBar,
  faChartLine,
  faChartPie,
  faEllipsisH
} from '@fortawesome/free-solid-svg-icons';

const Navbar = () => (
  <footer id="sticky-footer" className="bg-grey fixed-bottom">
    <div className="container text-center">
      <ul className="row foot-row nav nav-pills tablist" role="tablist">
        <li className="col foot-col nav-item">
          <a onClick={() => window.location.href = '/addreading'} className="nav-link" data-toggle="pill" href="#">
            <FontAwesomeIcon icon={faChartBar} className="navIcon" />
            <p>Add Readings</p>
          </a>
        </li>
        <li className="col foot-col nav-item">
          <a onClick={() => window.location.href = '/readings'} className="nav-link" data-toggle="pill" href="#">
            <FontAwesomeIcon icon={faChartLine} className="navIcon" />
            <p>Track.it</p>
          </a>
        </li>
        <li className="col foot-col nav-item">
          <a onClick={() => window.location.href = '/report'} className="nav-link" data-toggle="pill" href="#">
            <FontAwesomeIcon icon={faChartPie} className="navIcon" />
            <p>Report</p>
          </a>
        </li>
        <li className="col foot-col nav-item">
          <a onClick={() => window.location.href = '/more'} className="nav-link" data-toggle="pill" href="#">
            <FontAwesomeIcon icon={faEllipsisH} className="navIcon" />
            <p>More</p>
          </a>
        </li>
      </ul>
    </div>
  </footer>
);

export default Navbar;

Add route params for More container

app/javascript/routes/index.jsx

/* eslint-disable no-underscore-dangle */
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import { compose, createStore } from 'redux';
import persistState from 'redux-localstorage';
import Home from '../containers/Home';
import Readings from '../containers/Readings';
import Reading from '../containers/Reading';
import AddReading from '../containers/AddReading';
import Report from '../containers/Report';
import More from '../containers/More';
import reducer from '../reducer/sessions';


const store = createStore(
  reducer, compose(persistState(),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()),
);

export default (
  <Provider store={store}>
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/addreading" component={AddReading} />
        <Route path="/readings" component={Readings} />
        <Route path="/report" component={Report} />
        <Route path="/user/:userId/reading/:id" component={Reading} />
        <Route path="/more" component={More} />
      </Switch>
    </Router>
  </Provider>
);

export { store };
Clone this wiki locally