Location map modal

src/components/Dashboard/Directions.js

@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "styled-components";
+
+const Directions = ({ address }) => (
+  <DirectionsContainer>
+    <Button
+      href={`https://www.google.com/maps/dir//${address}/`}
+      target="_blank"
+    >
+      {"Directions "}
+      <i className="fas fa-directions"></i>
+    </Button>
+  </DirectionsContainer>
+);
+
+export default Directions;
+
+const DirectionsContainer = styled.div`
+  display: flex;
+  flex-flow: row-reverse;
+`;
+
+const Button = styled.a`
+  color: black
+  text-decoration: none;
+  padding: 0.2rem 0.5rem;
+  background-color: gold;
+  border-radius: 5px;
+  font-weight: 500;
+
+  &&:hover {
+    background-color: yellow;
+  }
+`;

src/components/Dashboard/LocationDetails.js

@@ -4,6 +4,8 @@ import styled from "styled-components";
 
 import RemoveOption from "./RemoveOption";
 
+import Directions from "./Directions";
+
 const LocationDetails = props => {
   const { location, visit } = props;
   const { name, address, icon, phone } = location || visit.location;
@@ -24,15 +26,7 @@ const LocationDetails = props => {
         <LocationName>{name}</LocationName>
         <address>{address}</address>
         <PhoneNumber href={`tel:${phone}`}>{phone}</PhoneNumber>
-        <DirectionsContainer>
-          <Directions
-            href={`https://www.google.com/maps/dir//${address}/`}
-            target="_blank"
-          >
-            {"Directions "}
-            <i className="fas fa-directions"></i>
-          </Directions>
-        </DirectionsContainer>
+        <Directions address={address} />
       </DetailsContainer>
       <ImageContainer>
         {!!icon ? <Image src={icon} /> : <i className="fas fa-store-alt fa-7x" />}
@@ -62,24 +56,6 @@ const PhoneNumber = styled.a`
   text-decoration: none;
 `;
 
-const DirectionsContainer = styled.div`
-  display: flex;
-  flex-flow: row-reverse;
-`;
-
-const Directions = styled.a`
-  color: black
-  text-decoration: none;
-  padding: 0.2rem 0.5rem;
-  background-color: gold;
-  border-radius: 5px;
-  font-weight: 500;
-
-  &&:hover {
-    background-color: yellow;
-  }
-`;
-
 const ImageContainer = styled.section`
   display: flex;
   justify-content: center;

src/components/Dashboard/RecentlyVisited.js

@@ -1,17 +1,32 @@
 import React from "react";
 import LocationCard from "./LocationCard";
+import styled from "styled-components";
 
 const RecentlyVisited = props => {
   const { visits } = props;
 
   return (
     <>
       <p className="sub-header">Recently Visited</p>
-      {visits.map(visit => (
-        <LocationCard key={`user-visit-${visit.id}`} visit={visit} />
-      ))}
+      {!!visits[0] ? (
+        visits.map(visit => (
+          <LocationCard key={`user-visit-${visit.id}`} visit={visit} />
+        ))
+      ) : (
+        <NoVisits className="location-listing">
+          No Visits
+        </NoVisits>
+      )}
     </>
   );
 };
 
 export default RecentlyVisited;
+
+const NoVisits = styled.p`
+  &&:hover {
+    cursor: default !important;
+    background: #f1ca0957 !important;
+    transform: none !important;
+  }
+`;

src/components/Dashboard/SavedLocations.js

@@ -1,20 +1,35 @@
 import React from "react";
 import LocationCard from "./LocationCard";
+import styled from "styled-components";
 
 const SavedLocations = props => {
   const { savedLocations } = props;
   return (
     <>
       <p className="sub-header">Saved Locations</p>
-      {savedLocations.map(location => (
-        <LocationCard
-          key={`saved-location-${location.id}`}
-          location={location}
-          saved
-        />
-      ))}
+      {!!savedLocations ? (
+        savedLocations.map(location => (
+          <LocationCard
+            key={`saved-location-${location.id}`}
+            location={location}
+            saved
+          />
+        ))
+      ) : (
+        <NoLocations className="location-listing">
+          No Saved Locations
+        </NoLocations>
+      )}
     </>
   );
 };
 
 export default SavedLocations;
+
+const NoLocations = styled.p`
+  &&:hover {
+    cursor: default !important;
+    background: #f1ca0957 !important;
+    transform: none !important;
+  }
+`;

src/components/Map/SingleMapCard.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import Popup from "reactjs-popup";
+import Modal from "styled-react-modal";
 import Review from "../Review/Review";
 import styled from "styled-components";
 import StarRatings from "react-star-ratings";
@@ -13,7 +13,9 @@ class SingleMapCard extends Component {
     this.state = {
       details: [],
       hours: [],
-      id: null
+      id: null,
+      isOpen: false,
+      opacity: 0
     };
   }
 
@@ -30,6 +32,7 @@ class SingleMapCard extends Component {
     service.getDetails(request, (place, status) => {
       if (status === google.maps.places.PlacesServiceStatus.OK) {
         this.setState({
+          ...this.state,
           details: [place.name, place.formatted_phone_number],
           hours: !place.opening_hours
             ? ["N/A"]
@@ -55,6 +58,23 @@ class SingleMapCard extends Component {
     this.props.map.setZoom(16);
   };
 
+  toggleModal = e => {
+    this.setState({ ...this.state, isOpen: !this.state.isOpen });
+  };
+
+  afterOpen = () => {
+    setTimeout(() => {
+      this.setState({ ...this.state, opacity: 1 });
+    }, 20);
+  };
+
+  beforeClose = () => {
+    return new Promise(resolve => {
+      this.setState({ ...this.state, opacity: 0 });
+      setTimeout(resolve, 200);
+    });
+  };
+
   render() {
     const location = this.props.location;
 
@@ -68,7 +88,6 @@ class SingleMapCard extends Component {
             <img src={location.icon} alt="Icon of the location" />
             <DetailContainer>
               <h2>{`${location.name}`}</h2>
-              {/* Placeholder rating */}
               <h4>
                 {`rating: ${location.rating} `}
                 <StarRatings
@@ -81,19 +100,25 @@ class SingleMapCard extends Component {
                 />
               </h4>
               <p>{`${location.address}`}</p>
-              <Popup modal trigger={<DetailButton>Details</DetailButton>}>
-                {close => (
-                  <Review
-                    close={close}
-                    onClick={this.requestDetails(location.id)}
-                    details={this.state.details}
-                    hours={this.state.hours}
-                    address={this.props.address}
-                    locationId={this.state.id}
-                    icon={location.icon}
-                  />
-                )}
-              </Popup>
+              <DetailButton onClick={this.toggleModal}>Details</DetailButton>
+              <StyledModal
+                isOpen={this.state.isOpen}
+                afterOpen={this.afterOpen}
+                beforeClose={this.beforeClose}
+                onBackgroundClick={this.toggleModal}
+                onEscapeKeydown={this.toggleModal}
+                opacity={this.opacity}
+                backgroundProps={{ opacity: this.state.opacity }}
+              >
+                <Review
+                  onClick={this.requestDetails(location.id)}
+                  details={this.state.details}
+                  hours={this.state.hours}
+                  location={this.props.location}
+                  locationId={this.state.id}
+                  icon={location.icon}
+                />
+              </StyledModal>
             </DetailContainer>
           </SingleMapCardContainer>
         ) : null}
@@ -163,3 +188,14 @@ const DetailButton = styled.button`
     transition: 0.2s;
   }
 `;
+
+const StyledModal = Modal.styled`
+  max-width: 40rem;
+  opacity: ${props => props.opacity};
+  transition: opacity ease 1000ms;
+  border-radius: 30px;
+
+  @media (min-width: 700px) {
+    width: 40rem;
+  }
+`;

src/components/Redux/actions/index.js

@@ -57,7 +57,7 @@ export const checkToken = () => dispatch => {
   axiosWithAuth()
     .get("/auth/info")
     .then(res => {
-      if (res.status < 200)
+      if (res.status === 200)
         dispatch({ type: LOGIN_SUCCESS, payload: res.data });
       else {
       }

src/components/Review/CheckIn.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const CheckIn = props => {
+  return <span>Check in</span>;
+};
+
+export default CheckIn;

src/components/Review/FavoriteLocation.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const FavoriteLocation = props => {
+  return <span>Favorite Location</span>;
+};
+
+export default FavoriteLocation;

src/components/Review/NonAuthAllReviews.js

@@ -1,8 +1,7 @@
 // IMPORTS
 import React from "react";
 import styled from "styled-components";
-import axios from "axios";
-// import { withFirebase } from "../../Firebase";
+import axiosWithAuth from "../../Helpers/axiosWithAuth";
 
 // STYLED COMPONENTS
 const StyleModal = styled.div`
@@ -88,22 +87,11 @@ display: flex;
 class AllReviewsPanel1 extends React.Component {
   state = {
     reviews: []
-    // uid: this.props.firebase.auth.currentUser.uid,
-    // u_id: null,
-    // loc_id: null
   };
 
   componentDidMount() {
-    let locationReq = this.props.locationId;
-    console.log("location id", locationReq);
-    return axios
-      .get(`https://wheretocode-master.herokuapp.com/locations/${locationReq}`)
-      .then(res => {
-        let locationId = res.data[0].id;
-        return axios.get(
-          `https://wheretocode-master.herokuapp.com/reviews/${locationId}/location`
-        );
-      })
+    return axiosWithAuth()
+      .get(`/reviews/${this.props.locationId}/location`)
       .then(res => {
         if (res) {
           this.setState({
@@ -131,12 +119,11 @@ class AllReviewsPanel1 extends React.Component {
           </StyleModal>
         ) : (
           <StyleModal>
-            <Header> Reviews </Header>
             <Content>
-              <ol className='ratingInfo'>
+              <ol className="ratingInfo">
                 {this.state.reviews[0].map((review, i) => (
                   <li key={review.ratingId}>
-                    <a href='#'>
+                    <a href="#">
                       Username:{review.userName} -- Overall Rating:{" "}
                       {review.rating} -- Internet Rating:{" "}
                       {review.internet_rating} -- Comments:{review.comments}{" "}