Merge pull request #212 from seckboy/profile-refactor

add saved pins and searches to profile

client/config/dev.config.js

@@ -4,4 +4,6 @@ module.exports = {
     REGISTER_PATH: '/users/register',
     LOGIN_PATH: '/users/login',
     RESET_PATH: '/users/reset-password',
+    SEARCH_HISTORY_PATH: '/search/history',
+    SAVED_PINS_PATH: '/search/savedpins',
 };

client/src/components/SavedPinsCard/index.js

@@ -0,0 +1,59 @@
+import {h, Component} from 'preact';
+import style from './style';
+import {makeRequest, token} from "../../js/server-requests-utils";
+import {SAVED_PINS_PATH} from '../../../config';
+
+export default class SavedPinsCard extends Component {
+  constructor() {
+    super();
+    this.state = {
+      user: {},
+      savedPins: [],
+    };
+    this.getSavedPins = this.getSavedPins.bind(this);
+    this.displayPins = this.displayPins.bind(this);
+  }
+
+  componentWillMount() {
+    this.setState({user: this.props.user});
+    this.getSavedPins();
+  }
+
+  displayPins(savedPins) {
+    let pins = [];
+    savedPins.map( pin => {
+      pins.push(<div>{pin.place_id}</div>);
+    });
+    if(pins.length == 0) pins.push(<div>No saved pins</div>);
+    this.setState({pins: pins});
+  }
+
+  getSavedPins() {
+    makeRequest('GET', SAVED_PINS_PATH)
+      .then(function (response) {
+        this.displayPins(response.data.savedPins);
+      }.bind(this))
+      .catch(function (error) {
+        if (error.response === undefined) {
+          this.setState({savedPins: error});
+        } else {
+          this.setState({savedPins: error.response.data});
+        }
+      }.bind(this));
+  }
+
+  render({}, {user, pins}) {
+
+
+    return (
+      <div class={style.savedPinsCard}>
+
+        <span id={style.savedPinsCardTitle}>Saved Pins</span><br/>
+
+
+        <div class={style.savedPinsContainer}>{pins}</div>
+
+      </div>
+    );
+  }
+}

client/src/components/SavedPinsCard/style.css

@@ -0,0 +1,21 @@
+.savedPinsCard {
+    border-radius: 3px;
+    border-width: 2px;
+    border-style: groove;
+    margin-bottom: 10px;
+    padding-left: 5px;
+}
+
+#savedPinsCardTitle {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    text-align: center;
+    color: purple;
+    margin: 0 auto;
+}
+
+.savedPinsContainer{
+    text-align: center;
+}
+

client/src/components/SearchHistoryCard/index.js

@@ -0,0 +1,59 @@
+import {h, Component} from 'preact';
+import style from './style';
+import {makeRequest, token} from "../../js/server-requests-utils";
+import {SEARCH_HISTORY_PATH} from '../../../config';
+
+export default class SearchHistoryCard extends Component {
+  constructor() {
+    super();
+    this.state = {
+      user: {},
+      searchHistory: [],
+    };
+    this.getSearchHistory = this.getSearchHistory.bind(this);
+    this.displayHistory = this.displayHistory.bind(this);
+  }
+
+  componentWillMount() {
+    this.setState({user: this.props.user});
+    this.getSearchHistory();
+  }
+
+  displayHistory(searchHistory) {
+    let histories = [];
+    searchHistory.map( search => {
+      histories.push(<div>{search.query}</div>);
+    });
+    if(histories.length == 0) histories.push(<div>No saved searches</div>);
+    this.setState({histories: histories});
+  }
+
+  getSearchHistory() {
+    makeRequest('GET', SEARCH_HISTORY_PATH)
+      .then(function (response) {
+        this.displayHistory(response.data.searchHistory);
+      }.bind(this))
+      .catch(function (error) {
+        if (error.response === undefined) {
+          this.setState({searchHistory: error});
+        } else {
+          this.setState({searchHistory: error.response.data});
+        }
+      }.bind(this));
+  }
+
+  render({}, {user, histories}) {
+
+
+    return (
+      <div class={style.searchHistoryCard}>
+
+        <span id={style.searchHistoryCardTitle}>Search History</span><br/>
+
+
+        <div class={style.searchHistoriesContainer}>{histories}</div>
+
+      </div>
+    );
+  }
+}

client/src/components/SearchHistoryCard/style.css

@@ -0,0 +1,21 @@
+.searchHistoryCard {
+    border-radius: 3px;
+    border-width: 2px;
+    border-style: groove;
+    margin-bottom: 10px;
+    padding-left: 5px;
+}
+
+#searchHistoryCardTitle {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    text-align: center;
+    color: purple;
+    margin: 0 auto;
+}
+
+.searchHistoriesContainer{
+    text-align: center;
+}
+