<repo_name>vcCoderBlue/DCVisitPlanner<file_sep>/src/pages/pageitems/AddTodo.js
import React, { Component } from 'react';

class AddTodo extends Component {
  constructor(props) {
    super(props);

    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(event) {
    event.preventDefault();

    this.props.onAdd(this.contentInput.value);

    this.contentInput.value = '';
  }

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <h4>Add a Todo</h4>
        <input placeholder="Type a Todo" ref={contentInput => this.contentInput = contentInput} /> <br />
        <button>Add</button>

        <hr />
      </form>
    );
  }
}

export default AddTodo;
<file_sep>/src/pages/pageitems/actions/linkAction.js
export function addLink(favorites) {
  return {
    type: "ADD_LINK",
    payload: favorites
  };
}
<file_sep>/src/pages/pageitems/Main1.js
import React from 'react';

export const Main1 = (props) => {
        return (
            <div>
              <div onClick={() => props.addFavsfavorite(<li></li>)}>
                <i class="fa fa-heart-o fa-2x"></i>
              </div>
            </div>
        );
}
<file_sep>/src/pages/Shopping.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import '../App.css';
import Shopping1 from "./pageitems/Shopping1";
import Shopping2 from "./pageitems/Shopping2";
import Shopping3 from "./pageitems/Shopping3";
import Shopping4 from "./pageitems/Shopping4";
import Shopping5 from "./pageitems/Shopping5";
import Footer from "../components/Footer";
import Gmps from "./maps/Gmps";

function Font5() {
  return (
    <i class="fa fa-shopping-bag fa-3x"></i>
  )
}

class Shopping extends Component {
  render() {
    return (
      <div>
      <Router>
        <div className="pages">
          <h2>Shopping</h2>
          <div className="items">
            <ul>
              <li>1<Font5 /><Link to="/DCVisitPlanner/Shopping/Shopping1"> CityCenterDC</Link></li><br />
              <li>2<Font5 /><Link to="/DCVisitPlanner/Shopping/Shopping2"> Fashion Centre at Penatagon City</Link></li><br />
              <li>3<Font5 /><Link to="/DCVisitPlanner/Shopping/Shopping3"> Georgetown</Link></li><br />
              <li>4<Font5 /><Link to="/DCVisitPlanner/Shopping/Shopping4"> Mazza Gallerie</Link></li><br />
              <li>5<Font5 /><Link to="/DCVisitPlanner/Shopping/Shopping5"> Tysons Corner Center</Link></li><br />
            </ul>

              <Route path="/DCVisitPlanner/Shopping/Shopping1" component={Shopping1}/>
              <Route path="/DCVisitPlanner/Shopping/Shopping2" component={Shopping2}/>
              <Route path="/DCVisitPlanner/Shopping/Shopping3" component={Shopping3}/>
              <Route path="/DCVisitPlanner/Shopping/Shopping4" component={Shopping4}/>
              <Route path="/DCVisitPlanner/Shopping/Shopping5" component={Shopping5}/>
            </div>
          </div>
      </Router>
          <div className="map">
            <Gmps /><br /><br /><br /><br/><br /><br /><br /><br/><br /><br /><br /><br/><br /><br /><br /><br/>
          </div>
          <Footer />
        </div>
    );
  }
}

export default Shopping;
<file_sep>/src/pages/pageitems/TodoItem.js
import React, { Component } from 'react';

class TodoItem extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isEdit: false
    };

    this.onDelete = this.onDelete.bind(this);
    this.onEdit = this.onEdit.bind(this);
    this.onEditSubmit = this.onEditSubmit.bind(this);
  }

  onDelete() {
    const { onDelete, content } = this.props;

    onDelete(content);
  }

  onEdit() {
      this.setState({ isEdit: true });
  }

  onEditSubmit(event) {
      event.preventDefault();

      this.props.onEditSubmit(this.contentInput.value, this.props.content);

      this.setState({ isEdit: false });
  }

  render() {
    const { content } = this.props;

    return (
      <div>
        {
          this.state.isEdit
            ? (
              <form onSubmit={this.onEditSubmit}>
                <input placeholder="Todo" ref={contentInput => this.contentInput = contentInput} defaultValue={content} />
                <br />
                <button>Save</button>
              </form>
            )
            : (
              <div>
                <p>{content}</p>

                <button onClick={this.onEdit}>Edit</button>
                {' | '}
                <button onClick={this.onDelete}>Delete</button>
              </div>
            )
        }
      </div>
    );
  }
}

export default TodoItem;
<file_sep>/src/pages/Todo.js
import React, { Component } from 'react';
import '../App.css';
import Footer from '../components/Footer';

import AddTodo from './pageitems/AddTodo';
import TodoItem from './pageitems/TodoItem';

const todos = [{ content: 'remember to smile ;)'}
];

localStorage.setItem('todos', JSON.stringify(todos));

class Todo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      todos: JSON.parse(localStorage.getItem('todos')),
    };

    this.onAdd = this.onAdd.bind(this);
    this.onDelete = this.onDelete.bind(this);
    this.onEditSubmit = this.onEditSubmit.bind(this);
  }

  componentWillMount () {
    const todos = this.getTodos();

    this.setState({ todos });
  }

  getTodos() {
    return this.state.todos;
  }

  onAdd (content) {
    const todos = this.getTodos();

    todos.push({
      content
    });

    this.setState({ todos });
    localStorage.setItem('todos', JSON.stringify(todos));
  }

  onDelete(content, index) {
    const todos = this.getTodos();

    const filteredTodos = todos.filter(todo => {
      return todo.content !== content;
    });

    this.setState({
      todos: filteredTodos
    });

    localStorage.setItem('todos', JSON.stringify(todos));
  }

  onEditSubmit(content, originalContent) {
    let todos = this.getTodos();

  todos = todos.map(todo => {
    if (todo.content === originalContent) {
      todo.content = content;
    }

    return todo;
  });
  this.setState({ todos });
  localStorage.setItem('todos', JSON.stringify(todos));
}

  render() {
    return (
      <div>
        <h2>Todos</h2>
        <div className="todos">
          <AddTodo
            onAdd={this.onAdd}
          />

          {
            this.state.todos.map((todo, index) => {
              return (
                <TodoItem
                  key={todo.index}
                  {...todo}
                  onDelete={this.onDelete}
                  onEditSubmit={this.onEditSubmit}
                  />
              );
            })
          }
        </div>
          <br /><br /><br /><br /><br /><br /><br />
          <Footer />
      </div>
    );
  }
}

export default Todo;
<file_sep>/src/pages/Search.js
import React from "react";
import { NavLink } from 'react-router-dom';
import Footer from "../components/Footer";

const Font12 = () => {
  return (
    <i class="fa fa-folder-open fa-2x" aria-hidden="true"></i>
  )
}

const Font13 = () => {
  return (
    <i class="fa fa-file-text-o" aria-hidden="true"></i>
  )
}

const Font14 = () => {
  return (
    <i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i>
  )
}

const Font15 = () => {
  return (
    <i class="fa fa-folder-open fa-3x" aria-hidden="true"></i>
  )
}

class Search extends React.Component {

  onClick() {
      window.scrollTo(0, 0)
  }

  render() {
    return (
      <div>
        <h2>Sitemap</h2>
        <div className="items">
          <Font15 /> DC Visit Planner <br />
          <NavLink to='/DCVisitPlanner/Museums'><Font12 /></NavLink> Monuments/Museums <br />
          <NavLink to='/DCVisitPlanner/Museums/Museum1'><Font13 /></NavLink> Arlington National Cemetary <br />
          <NavLink to='/DCVisitPlanner/Museums/Museum2'><Font13 /></NavLink> International Spy Museum <br />
          <NavLink to='/DCVisitPlanner/Museums/Museum3'><Font13 /></NavLink> National Museum of African American History and Culture<br />
          <NavLink to='/DCVisitPlanner/Museums/Museum4'><Font13 /></NavLink> National World War II Memorial <br />
          <NavLink to='/DCVisitPlanner/Museums/Museum5'><Font13 /></NavLink> United States Holocaust Memorial Museum <br />
          <NavLink to='/DCVisitPlanner/Dining'><Font12 /></NavLink> Dining <br />
          <NavLink to='/DCVisitPlanner/Dining/Dining1'><Font13 /></NavLink> Beefsteak <br />
          <NavLink to='/DCVisitPlanner/Dining/Dining2'><Font13 /></NavLink> Chix <br />
          <NavLink to='/DCVisitPlanner/Dining/Dining3'><Font13 /></NavLink> District Taco <br />
          <NavLink to='/DCVisitPlanner/Dining/Dining4'><Font13 /></NavLink> The Hamilton <br />
          <NavLink to='/DCVisitPlanner/Dining/Dining5'><Font13 /></NavLink> Union Market <br />
          <NavLink to='/DCVisitPlanner/Shopping'><Font12 /></NavLink> Shopping <br />
          <NavLink to='/DCVisitPlanner/Shopping/Shopping1'><Font13 /></NavLink> CityCenterDC <br />
          <NavLink to='/DCVisitPlanner/Shopping/Shopping2'><Font13 /></NavLink> Fashion Centre at Pentagon City <br />
          <NavLink to='/DCVisitPlanner/Shopping/Shopping3'><Font13 /></NavLink> Georgetown <br />
          <NavLink to='/DCVisitPlanner/Shopping/Shopping4'><Font13 /></NavLink> Mazza Gallerie <br />
          <NavLink to='/DCVisitPlanner/Shopping/Shopping5'><Font13 /></NavLink> Tysons Corner Center <br />
          <NavLink to='/DCVisitPlanner/Hotels'><Font12 /></NavLink> Hotels <br />
          <NavLink to='/DCVisitPlanner/Hotels/Hotel1'><Font13 /></NavLink> Hotel Lombardy <br />
          <NavLink to='/DCVisitPlanner/Hotels/Hotel2'><Font13 /></NavLink> Kimpton Hotel Rouge <br />
          <NavLink to='/DCVisitPlanner/Hotels/Hotel3'><Font13 /></NavLink> Mandarin Oriental <br />
          <NavLink to='/DCVisitPlanner/Hotels/Hotel4'><Font13 /></NavLink> The Watergate Hotel <br />
          <NavLink to='/DCVisitPlanner/Hotels/Hotel5'><Font13 /></NavLink> Washington Plaza Hotel <br />
          <NavLink to='/DCVisitPlanner/' exact ><Font14 /></NavLink> Home <br />
          <NavLink to='/DCVisitPlanner/Transport'><Font12 /></NavLink> Transport <br />
          <NavLink to='/DCVisitPlanner/Transport/Transport1'><Font13 /></NavLink> capital bikeshare <br />
          <NavLink to='/DCVisitPlanner/Transport/Transport2'><Font13 /></NavLink> Metro <br />
          <NavLink to='/DCVisitPlanner/Weather'><Font14 /></NavLink> Weather <br />
          <NavLink to='/DCVisitPlanner/Todo'><Font14 /></NavLink> Todos <br />
          <NavLink to='/DCVisitPlanner/Favorites'><Font14 /></NavLink> Favorites <br />
          <div onClick={this.onClick}><Font14 /> Sitemap </div> <br />
        </div>

        <br /><br /><br /><br /><br /><br /><br />
        <Footer />
      </div>
    );
  }
};

export default Search;
<file_sep>/src/pages/maps/Gmpd.js
import React, { Component } from 'react';

import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

import API_KEYM from "./config_keys1";

const apiKey = API_KEYM;

const style = {
  width: '100%',
  height: '275px'
}

export class Gmpd extends Component {
  state = {
    showingInfoWindow: false,
    activeMarker: {},
    selectedPlace: {},
  };

  windowHasOpened =() =>
    this.setState({
      showingInfoWindow: true
    });

  windowHasClosed =() =>
    this.setState({
      showingInfoWindow: false
    });

  onMarkerClick = (props, marker, e) =>
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: !this.state.showingInfoWindow
    });

  onMapClicked = (props) => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null
      })
    }
  };

  render() {
    return (
      <Map
      google={this.props.google}
      style={style}
      initialCenter={{
        lat: 38.9145,
        lng: -77.0218
      }}
      zoom={11}
      onClick={this.onMapClicked}

      >

        <Marker onClick={this.onMarkerClick}
          title={'Beefsteak: 22nd St'}
          name={'Beefsteak: 22nd St'}
          label={'1'}
          position={{lat: 38.899920, lng: -77.049430}}
        />

        <Marker onClick={this.onMarkerClick}
            title={'Beefsteak: Wisc Ave'}
            name={'Beefsteak: Wisc Ave'}
            label={'1'}
            position={{lat: 38.948805, lng: -77.079693}}
        />

        <Marker onClick={this.onMarkerClick}
          title={'Beefsteak: Conn Ave'}
          name={'Beefsteak: <NAME>'}
          label={'1'}
          position={{lat: 38.910764, lng: -77.044427}}
        />

        <Marker onClick={this.onMarkerClick}
          title={'Chix: 14th St NW'}
          name={'Chix: 14th St NW'}
          label={'2'}
          position={{lat: 38.904533, lng: -77.031574}}
        />

        <Marker onClick={this.onMarkerClick}
          title={'Chix: Half St SE'}
          name={'Chix: Half St SE'}
          label={'2'}
          position={{lat: 38.876282, lng: -77.007260}}
        />

        <Marker onClick={this.onMarkerClick}
          title={'District Taco: Tenleytown'}
          name={'District Taco: Tenleytown'}
          label={'3'}
          position={{lat: 38.949947, lng: -77.080864}}
        />

        <Marker onClick={this.onMarkerClick}
            title={'District Taco: Dupont'}
            name={'District Taco: Dupont'}
            label={'3'}
            position={{lat: 38.906026, lng: -77.044483}}
        />

        <Marker onClick={this.onMarkerClick}
          title={'District Taco: Eastern Market'}
          name={'District Taco: Eastern Market'}
          label={'3'}
          position={{lat: 38.885242, lng: -76.996720}}
        />

        <Marker onClick={this.onMarkerClick}
          title={'District Taco: Metro Center'}
          name={'District Taco: Metro Center'}
          label={'3'}
          position={{lat: 38.897597, lng: -77.030156}}
        />

        <Marker onClick={this.onMarkerClick}
          title={'The Hamilton'}
          name={'The Hamilton'}
          label={'4'}
          position={{lat: 38.897655, lng: -77.032274}}
        />

        <Marker onClick={this.onMarkerClick}
          title={'Union Market'}
          name={'Union Market'}
          label={'5'}
          position={{lat: 38.9087, lng: -76.9980}}
        />

        <InfoWindow
          marker={this.state.activeMarker}
          onOpen={this.windowHasOpened}
          onClose={this.windowHasClosed}
          visible={this.state.showingInfoWindow}>
            <div>
              <h1>{this.state.selectedPlace.name}</h1>
            </div>
        </InfoWindow>
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: apiKey
})(Gmpd)
<file_sep>/src/pages/Home.js
import React, { Component } from 'react';
import Footer from "../components/Footer";

class Home extends Component {
  render() {
    return (
      <div>
        <h2>
          <NAME>. <br/>
          Visit Planner
        </h2>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat dapibus purus ac ultricies. Donec placerat porttitor scelerisque. Suspendisse placerat tristique nibh eu luctus. Fusce ultrices, lacus eu hendrerit lobortis, felis nisi porttitor diam, id pulvinar mi mauris sed eros.
         <br /><br /><br /><br />
         <Footer />
      </div>
    );
  }
}

export default Home;
<file_sep>/src/pages/Hotels.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import '../App.css';
import Hotel1 from "./pageitems/Hotel1";
import Hotel2 from "./pageitems/Hotel2";
import Hotel3 from "./pageitems/Hotel3";
import Hotel4 from "./pageitems/Hotel4";
import Hotel5 from "./pageitems/Hotel5";
import Footer from "../components/Footer";
import Gmph from "./maps/Gmph";

function Font3() {
  return (
    <i class="fa fa-bed fa-3x"></i>
  )
}

class Hotels extends Component {
  render() {
    return (
      <div>
      <Router>
        <div className="pages">
          <h2>Hotels</h2>
          <div className="items">
            <ul>
              <li>1<Font3 /><Link to="/DCVisitPlanner/Hotels/Hotel1"> Hotel Lombardy</Link></li><br />
              <li>2<Font3 /><Link to="/DCVisitPlanner/Hotels/Hotel2"> Kimpton Hotel Rouge</Link></li><br />
              <li>3<Font3 /><Link to="/DCVisitPlanner/Hotels/Hotel3"> Mandarin Oriental</Link></li><br />
              <li>4<Font3 /><Link to="/DCVisitPlanner/Hotels/Hotel4"> The Watergate Hotel</Link></li><br />
              <li>5<Font3 /><Link to="/DCVisitPlanner/Hotels/Hotel5"> Washington Plaza Hotel</Link></li><br />
            </ul>

              <Route path="/DCVisitPlanner/Hotels/Hotel1" component={Hotel1}/>
              <Route path="/DCVisitPlanner/Hotels/Hotel2" component={Hotel2}/>
              <Route path="/DCVisitPlanner/Hotels/Hotel3" component={Hotel3}/>
              <Route path="/DCVisitPlanner/Hotels/Hotel4" component={Hotel4}/>
              <Route path="/DCVisitPlanner/Hotels/Hotel5" component={Hotel5}/>
          </div>
        </div>
      </Router>
          <div className="map">
            <Gmph /><br /><br /><br /><br/><br /><br /><br /><br/><br /><br /><br /><br/><br /><br /><br /><br/>
          </div>
          <Footer />
        </div>
    );
  }
}

export default Hotels;
<file_sep>/src/pages/pageitems/Shopping4.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';

import { connect } from 'react-redux';
import { Main1 } from './Main1';
import { addLink } from './actions/linkAction';

function Font5() {
  return (
    <i class="fa fa-shopping-bag fa-3x"></i>
  )
}

class Shopping4 extends Component {
  onClick() {
      window.scrollTo(0, 0)
  }
  render() {
    return (
      <div>
        <div id="content1">
          <nav1>
            <div className="favorite">
              <div>
                <Main1 addFavsfavorite={() => this.props.addLink(
                  <ul><li><Font5 /><Link to="/DCVisitPlanner/Shopping/Shopping4"> <NAME></Link></li></ul>)} />
              </div>
            </div>
          </nav1>
          <aside1>
          <div className="pic">
            <Font5 /> <br />
              <a href= "https://www.mazzagallerie.com/" target="_blank" rel="noopener noreferrer">Website</a> <br/>
              <a href= "https://www.google.com/maps" target="_blank" rel="noopener noreferrer">Directions</a> <br/>
          </div>
          </aside1>
          <header1>
            <h3><NAME></h3>
          </header1>
          <main1>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat dapibus purus ac ultricies. Donec placerat porttitor scelerisque. Suspendisse placerat tristique nibh eu luctus. Fusce ultrices, lacus eu hendrerit lobortis, felis nisi porttitor diam, id pulvinar mi mauris sed eros. Sed nulla diam, placerat sed purus feugiat, dignissim suscipit tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent sit amet metus ut nunc gravida rutrum.<br /> <br />
            <div className="top" onClick={this.onClick}>Top of Page</div>
          </main1>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
      link: state.link
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    addLink: (favorites) => {
      dispatch(addLink(favorites));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Shopping4);
