Added favorites and clipboard features

client/actions/actions.js

@@ -19,4 +19,22 @@ export const getResults = (location, radius, categories) => (dispatch) => {
       payload: response.data,
     });
   });
-};
+};
+
+export const addFav = (favorite) => ({
+  type: types.ADD_FAV,
+  payload: favorite,
+});
+
+export const toggleFavsPage = () => ({
+  type: types.TOGGLE_FAVS_PAGE,
+});
+
+export const addComment = (number, comment) => ({
+  type: types.ADD_COMMENT,
+  payload: { number, comment }
+});
+
+export const toggleComments = () => ({
+  type: types.TOGGLE_COMMENTS,
+});

client/components/Navbar.jsx

@@ -1,15 +1,23 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import * as actions from '../actions/actions';
 
-const Navbar = () => {
+const mapDispatchToProps = (dispatch) => ({
+    toggleFavsPage: () => {
+      dispatch(actions.toggleFavsPage());
+    }
+  });
+
+const Navbar = (props) => {
     return (
     <div id="nav">
-      <img id="logo" alt="frollic-logo" src="/assets/logo.png"></img>
+      <a href="/"><img id="logo" alt="frollic-logo" src="/assets/logo.png"></img></a>
       <div id="profile-container">
-          <button id="profile-icon">
+          <button id="profile-icon" onClick={props.toggleFavsPage}>
               <img src="https://img.icons8.com/small/32/000000/gender-neutral-user.png"/>
           </button>
       </div>
     </div>
     )
 }
-export default Navbar;
+export default connect(null, mapDispatchToProps)(Navbar);

client/components/ResultCard.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {CopyToClipboard} from 'react-copy-to-clipboard';
 
 const ResultCard = (props) => {
 
@@ -12,11 +13,15 @@ const ResultCard = (props) => {
           <p><span className="price">{props.price}</span><span>&#8226;</span><span className="rating">Rating: {props.rating}</span></p>
           <p className="Address">{props.address}</p>
           <p className="phone">{props.phone}</p>
+          <button className="add-comment">Show Comments</button>
         </div>
       </div>
       <div className="buttonContainer">
-        <button className="addFav">Add Favorite</button>
-        <button className="comment">Comment</button>
+        <button className="addFav" onClick={() => props.addFav(props.result)}>Favorite</button>
+        <button className="comment" onClick={props.addComment}>Comment</button>
+        <CopyToClipboard text={props.url}>
+          <button className="share" onClick={(e) => {e.target.innerText = 'Copied!'; setTimeout(() => {e.target.innerText = 'Share'}, 1000) }}>Share</button>
+        </CopyToClipboard>
       </div>
     </article>
   );

client/components/ResultsContainer.jsx

@@ -1,14 +1,31 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import ResultCard from './ResultCard.jsx'
+import * as actions from '../actions/actions';
 
 const mapStateToProps = (state) => ({
   searchResults: state.search.searchResults,
+  firstRender: state.search.firstRender,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  addFav: (favorite) => {
+    dispatch(actions.addFav(favorite));
+  },
+  addComment: (comment) => {
+    dispatch(actions.addComment(comment));
+  }
 });
 
 const ResultsContainer = (props) => {
 
-  if (!props.searchResults.length) {
+  if (!props.searchResults.length && !props.firstRender) {
+    return (
+      <section id="splash">
+        <h2>Sorry, no results found matching your query. <br/>Try expanding your search radius.</h2>
+      </section>
+    )
+  } else if (!props.searchResults.length) {
     return (
       <section id="splash">
         <h1>fun with frollic</h1>
@@ -18,7 +35,10 @@ const ResultsContainer = (props) => {
 
   const resultCards = props.searchResults.map((resultObj, index) => {
     return <ResultCard
+      addFav={props.addFav}
+      addComment={props.addComment}
       key={index}
+      result={resultObj}
       name={resultObj.name}
       image={resultObj.image}
       url={resultObj.url}
@@ -29,7 +49,7 @@ const ResultsContainer = (props) => {
       distance={resultObj.distance}
     />
   });
-
+  
   return (
     <section id="results-container">
       <h3 id="result-word">Results: </h3>
@@ -38,4 +58,4 @@ const ResultsContainer = (props) => {
   );
 }
 
-export default connect(mapStateToProps, null)(ResultsContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(ResultsContainer);

client/components/Sidebar.jsx

@@ -17,7 +17,6 @@ const Sidebar = (props) => {
     let categories = '';
     checkboxes.forEach((el) => categories += ',' + el.name);
     categories = categories.slice(1);
-
     props.getResults(location, radius, categories);
   }
   //  onSubmit={() => {return false}}

client/constants/actionTypes.js

@@ -1 +1,5 @@
-export const GET_RESULTS = 'GET_RESULTS';
+export const GET_RESULTS = 'GET_RESULTS';
+export const ADD_FAV = 'ADD_FAV';
+export const TOGGLE_FAVS_PAGE = 'TOGGLE_FAVS_PAGE';
+export const ADD_COMMENT = 'ADD_COMMENT';
+export const TOGGLE_COMMENTS = 'TOGGLE_COMMENTS';

client/reducers/mainReducer.js

@@ -2,16 +2,60 @@ import * as types from '../constants/actionTypes';
 
 const initialState = {
   searchResults: [],
+  favorites: [],
+  savedResults: [],
+  favsPageOn: false,
+  firstRender: true,
+  comments: [],
 };
 
 const mainReducer = (state = initialState, action) => {
 
   switch (action.type) {
     case types.GET_RESULTS:
-      return {
+
+    return {
         ...state,
+        firstRender: false,
         searchResults: action.payload,
       }
+    case types.ADD_FAV:
+      const newFavs = state.favorites.slice();
+
+      if (!state.favorites.includes(action.payload)) newFavs.push(action.payload);
+
+      return {
+        ...state,
+        favorites: newFavs,
+      }
+    case types.TOGGLE_FAVS_PAGE:
+      if (!state.favsPageOn) {
+
+        return {
+          ...state,
+          savedResults: state.searchResults,
+          searchResults: state.favorites,
+          favsPageOn: true,
+        }
+      }
+      return {
+        ...state,
+        searchResults: state.savedResults,
+        saveResults: [],
+        favsPageOn: false,
+      }
+    case types.ADD_COMMENT:
+      const newComments = state.comments.slice();
+      newComments.push(action.payload);
+
+      return {
+        ...state,
+        comments: state.newComments,
+      }
+    case types.TOGGLE_COMMENTS:
+      return {
+        ...state,
+      }
     default:
       return state;
   }