Working on Select Origin

src/App.js

@@ -6,14 +6,12 @@ import React from "react";
 import { hot } from "react-hot-loader";
 import { Route, Switch } from "react-router-dom";
 import NotFoundPage from "./cmp/notFound/NotFoundPage";
-import { Home, Deal, About, Login, Register } from "./pages/";
+import { Home, Deal, About, Login, Register, DepartureCities } from "./pages/";
 
 import "./styles/tpl/style.css";
 import "./styles/tpl/bootstrap.css";
 
 class App extends React.Component {
-
-
   render() {
     return (
       <div className="page text-center">
@@ -26,6 +24,11 @@ class App extends React.Component {
           />
           <Route exact path="/" component={Home} key={"home"} />
           <Route path="/about" component={About} key={"about"} />
+          <Route
+            path="/departures"
+            component={DepartureCities}
+            key={"departures"}
+          />
           <Route path="/login" component={Login} key={"login"} />
           <Route path="/subscribe" component={Register} key={"subscribe"} />
           <Route component={NotFoundPage} key={"notFound"} />
@@ -35,5 +38,4 @@ class App extends React.Component {
   }
 }
 
-
 export default hot(module)(App);

src/actions/ConfigActions.js

@@ -1,12 +1,32 @@
 import * as configActionsCreator from "./config.actions_creator";
+import * as viewActionsCreator from "./view.actions_creator";
+import * as postActionsCreator from "./post.actions_creator";
+import * as Proxy from "./Proxy";
 import * as object from "../utils/object";
+import cookie from "react-cookies";
 
 export function loadConfig() {
   return function(dispatch) {
     dispatch(configActionsCreator.initConfigsAction(loadConfigsAPI()));
   };
 }
 
+export function updateDepartureCities(key, departureCities) {
+  return function(dispatch) {
+    if (key == "departureCities") {
+      departureCities = departureCities.map(c => c.code).join("|");
+      cookie.save("departureCities", departureCities);
+      dispatch(
+        configActionsCreator.updateDepartureCitiesAction(departureCities)
+      );
+      dispatch(viewActionsCreator.increaseFilterCountAction(departureCities));
+      dispatch(postActionsCreator.cleanPostListAction());
+
+      Proxy.post("config/updateDepartureCities", { departureCities });
+    }
+  };
+}
+
 //-------------  TEST API ------------------------
 
 function loadConfigsAPI() {
@@ -53,7 +73,7 @@ function loadConfigsAPI() {
     { name: "Winnipeg", code: "YWG", region: 6 },
     { name: "Halifax", code: "YHZ", region: 6 },
     { name: "St John's", code: "YYT", region: 6 },
-    { name: "Calgary", code: "YYC", region: 6 } 
+    { name: "Calgary", code: "YYC", region: 6 }
   ];
   return { cities: object.listToObject(cities, "code") };
 }

src/actions/auth.actions_creator.js

@@ -7,3 +7,4 @@ export const logoutAction = data => ({
   type: "LOG_OUT",
   data
 });
+

src/actions/config.actions_creator.js

@@ -1,4 +1,9 @@
 export const initConfigsAction = configs => ({
   type: "INIT_CONFIGS",
   data: { configs }
-});
+});
+
+export const updateDepartureCitiesAction = departureCities => ({
+  type: "UPDATE_DEPARTURE_CITIES",
+  data: departureCities
+});

src/cmp/header/NavBar.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import { LoginButton, FilterButton, Logo } from "./cmp";
 import { connect } from "react-redux";
 import DealsFilter from "../../pages/home/cmp/header/dealsFilter/DealsFilter";
- 
+
 class NavBar extends React.Component {
   constructor(props) {
     super(props);
@@ -104,7 +104,7 @@ class NavBar extends React.Component {
                 style={{ justifyContent: "space-between" }}
               >
                 <Logo navSolidBackground={navBck || navSolidBackground} />
- 
+
                 {hasFilters && <FilterButton />}
 
                 <ul className="rd-navbar-nav" style={{ float: "right" }}>
@@ -122,6 +122,11 @@ class NavBar extends React.Component {
                       <li>
                         <NavLink to="/about">Testimonials</NavLink>
                       </li>
+                      <li>
+                        <NavLink to="/departures">
+                          Select Departure Cities
+                        </NavLink>
+                      </li>
                       <li>
                         <NavLink to="/about">FAQ</NavLink>
                       </li>

src/cmp/header/cmp/LoginButton.js

@@ -19,30 +19,31 @@ class LoginButton extends React.Component {
 
     if (!plan) {
       return (
-        <li className={darkNavLink ? 'dark-nav-link': ''}>
+        <li className={darkNavLink ? "dark-nav-link" : ""}>
           <NavLink to="/login">Login</NavLink>
         </li>
       );
     }
 
     return (
-      <li className={`rd-navbar--has-dropdown rd-navbar-submenu ${darkNavLink ? 'dark-nav-link': ''}`}>
+      <li
+        className={`rd-navbar--has-dropdown rd-navbar-submenu ${
+          darkNavLink ? "dark-nav-link" : ""
+        }`}
+      >
         <i
           className="icon mdi mdi-account-circle white-text"
-          style={{fontSize: 22}}
+          style={{ fontSize: 22 }}
         >
           {" "}
         </i>
         <span className="rd-navbar-submenu-toggle" />
         <ul className="rd-navbar-dropdown" style={{ left: -177 }}>
           <li>
-            <a href="overview.html" >Profile</a>
+            <NavLink to="/about">Profile</NavLink>
           </li>
           <li>
-            <a href="overview.html">Departure Cities</a>
-          </li>
-          <li>
-            <a href="overview.html">Notifications</a>
+            <NavLink to="/departures">Select Departure Cities</NavLink>
           </li>
           <li>
             <span onClick={this.onLogout}>Log Out</span>

src/constants/Constants.js

@@ -2,6 +2,6 @@ export const PROD = true;
 export const TIMESTAMP = new Date().getTime();
 export var TOKEN_COOKIE = "token";
 export var BROWSER_ID = "bwid";
-export var baseURL = "http://flysupercheap-mt.us-east-1.elasticbeanstalk.com/MT/app/";
+//export var baseURL = "http://flysupercheap-mt.us-east-1.elasticbeanstalk.com/MT/app/";
 
-//export var baseURL = "http://localhost:8088/MT/app/";
+export var baseURL = "http://localhost:8088/MT/app/";

src/pages/about/About.js

@@ -15,7 +15,7 @@ const About = () => {
         <br />
         <br />
         <br />
-        <div className="centered">
+        <div className="centered-column">
           <h5 className="alt-header" style={{ maxWidth: "60%" }}>
             Our website is under construction, we are working very hard to give
             you the best experience on our new web site.

src/pages/about/DepartureCities.js

@@ -0,0 +1,66 @@
+import React from "react";
+import SelectOrigin from "../auth/register/cmp/origin/SelectOrigin";
+import * as configActions from "../../actions/ConfigActions";
+import Header from "../../cmp/header/Header";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+
+class DepartureCities extends React.Component {
+  render() {
+    var {
+      departureCities,
+      updateDepartureCities,
+      cities,
+      history
+    } = this.props;
+
+    var cityObjList = departureCities.map(c => ({
+      name: cities[c].name,
+      code: c
+    }));
+
+    return (
+      <div>
+        <Header />
+        <br />
+        <div>
+          <h5 className={"text-center h-margin-20 hr-title"}>
+            <span className="float-left" onClick={history.goBack}>
+              <a
+                className="cursor-pointer bold-text pink-text"
+                style={{ fontSize: 16 }}
+              >
+                Back
+              </a>
+              <i className="fa fa-long-arrow-left float-left bold-text pink-text margin-right-10 margin-top-3" />
+            </span>
+            {"Select up to 4 Departure Cities"}
+          </h5>
+        </div>
+        <SelectOrigin
+          departureCities={cityObjList}
+          onUpdate={updateDepartureCities}
+        />
+      </div>
+    );
+  }
+}
+
+DepartureCities.propTypes = {
+  updateDepartureCities: PropTypes.func,
+  history: PropTypes.any,
+  cities: PropTypes.any,
+  departureCities: PropTypes.any
+};
+
+const mapStateToProps = ({ authReducer, configReducer }) => ({
+  departureCities: authReducer.departureCities
+    ? authReducer.departureCities.split("|")
+    : [],
+  cities: configReducer.cities
+});
+
+export default connect(
+  mapStateToProps,
+  configActions
+)(DepartureCities);

src/pages/auth/actions/AuthActions.js

@@ -27,6 +27,12 @@ export function init() {
       cookie.remove(TOKEN_COOKIE);
       cookie.save(TOKEN_COOKIE, token);
 
+      if (data.departureCities) {
+        cookie.save("departureCities", data.departureCities);
+      } else {
+        data.departureCities = cookie.load("departureCities");
+      }
+
       dispatch(authActionsCreator.setAuthAction(data));
     });
 
@@ -42,6 +48,10 @@ export function login(email, password, callback) {
       "auth/login",
       { email, password },
       (data, status, statusMessage) => {
+        if (data.departureCities) {
+          cookie.save("departureCities", data.departureCities);
+        }
+
         dispatch(authActionsCreator.setAuthAction(data));
 
         callback(status, statusMessage);
@@ -51,11 +61,15 @@ export function login(email, password, callback) {
 }
 
 export function register(data, callback) {
-  return function(dispatch, getState) {
+  return function(dispatch) {
     dispatch(postActionsCreator.cleanPostListAction());
 
     Proxy.post("auth/register", data, (data, status, statusMessage) => {
       if (!status) {
+        if (data.departureCities) {
+          cookie.save("departureCities", data.departureCities);
+        }
+
         dispatch(authActionsCreator.setAuthAction(data));
       }
 

src/pages/auth/authStyles.scss

@@ -9,6 +9,10 @@
   }
   }
 
+  .cities-panel-container {
+    margin-bottom: 0px!important;
+  }
+
 
   .selected-city{
     margin-right: 15px;

src/pages/auth/register/Register.js

@@ -102,11 +102,9 @@ class Register extends React.Component {
         </div>
 
         {this.buildBody()}
-
-
       </div>
     );
-  } 
+  }
 
   buildBody = () => {
     var { page, data } = this.state;
@@ -129,7 +127,8 @@ class Register extends React.Component {
             onBack={this.onBack}
             onUpdate={this.onUpdate}
             onRegister={this.onRegister}
-            data={data}
+            selectedRegion={data.selectedRegion}
+            departureCities={data.departureCities}
           />
         );
     }