From 32d32b890ce811a6da38e28401b73ca923fcb593 Mon Sep 17 00:00:00 2001 From: AceIsHuman Date: Mon, 27 Apr 2020 22:41:45 -0500 Subject: [PATCH 01/17] update modal to use styled-react-modal --- src/components/Map/SingleMapCard.jsx | 68 +++++++++++++++++++++------- src/components/Review/Review.js | 19 -------- 2 files changed, 52 insertions(+), 35 deletions(-) diff --git a/src/components/Map/SingleMapCard.jsx b/src/components/Map/SingleMapCard.jsx index 47c19d97..cdf78019 100644 --- a/src/components/Map/SingleMapCard.jsx +++ b/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 { Icon of the location

{`${location.name}`}

- {/* Placeholder rating */}

{`rating: ${location.rating} `}

{`${location.address}`}

- Details}> - {close => ( - - )} - + Details + + + ) : 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; + } +`; diff --git a/src/components/Review/Review.js b/src/components/Review/Review.js index 06103aa9..06cddb95 100644 --- a/src/components/Review/Review.js +++ b/src/components/Review/Review.js @@ -10,27 +10,8 @@ const StyleModal = styled.div` font-size: 12px; `; -const Close = styled.div` - cursor: pointer; - position: absolute; - display: block; - padding: 2px 5px; - line-height: 20px; - right: -10px; - top: -10px; - font-size: 24px; - background: #ffffff; - border-radius: 18px; - border: 1px solid #cfcece; -`; - export default props => ( - - - × - - Date: Mon, 27 Apr 2020 23:30:00 -0500 Subject: [PATCH 02/17] removed Session component, Tabs are now highlighted --- src/components/Review/Tabs.js | 47 ++++++++++---------- src/components/Review/Tabs.scss | 3 ++ src/components/Session/context.js | 5 --- src/components/Session/index.js | 5 --- src/components/Session/withAuthentication.js | 42 ----------------- src/components/Session/withAuthorization.js | 40 ----------------- 6 files changed, 27 insertions(+), 115 deletions(-) create mode 100644 src/components/Review/Tabs.scss delete mode 100644 src/components/Session/context.js delete mode 100644 src/components/Session/index.js delete mode 100644 src/components/Session/withAuthentication.js delete mode 100644 src/components/Session/withAuthorization.js diff --git a/src/components/Review/Tabs.js b/src/components/Review/Tabs.js index d8154190..909b8301 100644 --- a/src/components/Review/Tabs.js +++ b/src/components/Review/Tabs.js @@ -1,14 +1,14 @@ // IMPORTS -import React from "react"; +import React, { useState } from "react"; import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; import styled from "styled-components"; +import { connect } from "react-redux"; +import './Tabs.scss'; // COMPONENTS - -import NonAuthDetailsPanel from './NonAuthDetailsPanel'; +import NonAuthDetailsPanel from "./NonAuthDetailsPanel"; import { NonAuthAllReviewsPanel } from "./NonAuthAllReviews"; import { ReviewPanel } from "./ReviewPanel"; -import { AuthUserContext } from "../Session/index"; // STYLED COMPONENTS const StyledTabs = styled(Tabs)` @@ -51,9 +51,13 @@ const Header = styled.div` `; // COMPONENT & EXPORT -export default props => { +const TabsComponent = props => { + const [tabIndex, setTabIndex] = useState(0); return ( - + setTabIndex(tabIndex)} + >

Details

@@ -73,29 +77,26 @@ export default props => { locationId={props.locationId} icon={props.icon} /> - - - - - {authUser => - authUser ? ( - - ) : ( -
You Must Be Registered To Leave A Review
- - ) - } - + {props.authUser ? ( + + ) : ( +
You Must Be Registered To Leave A Review
+ )} ); }; + +export default connect( + ({ userReducer }) => ({ authUser: userReducer.loggedIn }), + null +)(TabsComponent); diff --git a/src/components/Review/Tabs.scss b/src/components/Review/Tabs.scss new file mode 100644 index 00000000..1ca4d7d0 --- /dev/null +++ b/src/components/Review/Tabs.scss @@ -0,0 +1,3 @@ +.react-tabs__tab--selected { + color: gold; +} \ No newline at end of file diff --git a/src/components/Session/context.js b/src/components/Session/context.js deleted file mode 100644 index bfa7f08c..00000000 --- a/src/components/Session/context.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -const AuthUserContext = React.createContext(null); - -export default AuthUserContext; \ No newline at end of file diff --git a/src/components/Session/index.js b/src/components/Session/index.js deleted file mode 100644 index df47ea19..00000000 --- a/src/components/Session/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import AuthUserContext from './context'; -import withAuthentication from './withAuthentication'; -import withAuthorization from './withAuthorization'; - -export { AuthUserContext, withAuthentication, withAuthorization }; \ No newline at end of file diff --git a/src/components/Session/withAuthentication.js b/src/components/Session/withAuthentication.js deleted file mode 100644 index 152e962f..00000000 --- a/src/components/Session/withAuthentication.js +++ /dev/null @@ -1,42 +0,0 @@ -// import React from 'react'; - -// import AuthUserContext from './context'; -// import { withFirebase } from '../../Firebase/index'; - -// const withAuthentication = Component => { -// class WithAuthentication extends React.Component { -// constructor(props) { -// super(props); - -// this.state = { -// authUser: null, -// }; -// } - -// componentDidMount() { -// this.listener = this.props.firebase.auth.onAuthStateChanged( -// authUser => { -// authUser -// ? this.setState({ authUser }) -// : this.setState({ authUser: null }); -// }, -// ); -// } - -// componentWillUnmount() { -// this.listener(); -// } - -// render() { -// return ( -// -// -// -// ); -// } -// } - -// return withFirebase(WithAuthentication); -// }; - -// export default withAuthentication; \ No newline at end of file diff --git a/src/components/Session/withAuthorization.js b/src/components/Session/withAuthorization.js deleted file mode 100644 index 79e540c2..00000000 --- a/src/components/Session/withAuthorization.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from "react"; -import { withRouter } from "react-router-dom"; -import { compose } from "recompose"; - -import AuthUserContext from "./context"; -// import { withFirebase } from "../../Firebase"; -import * as ROUTES from "../../Routes/routes"; - -const withAuthorization = condition => Component => { - class WithAuthorization extends React.Component { - componentDidMount() { - this.listener = this.props.firebase.auth.onAuthStateChanged(authUser => { - if (!condition(authUser)) { - this.props.history.push(ROUTES.HOME); - } - }); - } - - componentWillUnmount() { - this.listener(); - } - - render() { - return ( - - {authUser => - condition(authUser) ? : null - } - - ); - } - } - - return compose( - withRouter - // withFirebase - )(WithAuthorization); -}; - -export default withAuthorization; From 7cc8b40c88123dd6cf447022841d66d83d1c7647 Mon Sep 17 00:00:00 2001 From: AceIsHuman Date: Mon, 27 Apr 2020 23:38:22 -0500 Subject: [PATCH 03/17] fix bug with loading user --- src/components/Redux/actions/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Redux/actions/index.js b/src/components/Redux/actions/index.js index fb7d7acc..7bc3e676 100644 --- a/src/components/Redux/actions/index.js +++ b/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 { } From 1cc0d8a1dc39c28fc94c36298a4bd50c7db21d54 Mon Sep 17 00:00:00 2001 From: AceIsHuman Date: Tue, 28 Apr 2020 01:43:41 -0500 Subject: [PATCH 04/17] update axios requests, remove details header --- src/components/Review/NonAuthDetailsPanel.js | 60 ++++++-------------- 1 file changed, 18 insertions(+), 42 deletions(-) diff --git a/src/components/Review/NonAuthDetailsPanel.js b/src/components/Review/NonAuthDetailsPanel.js index 8b9b0df2..1d23915c 100644 --- a/src/components/Review/NonAuthDetailsPanel.js +++ b/src/components/Review/NonAuthDetailsPanel.js @@ -1,8 +1,6 @@ // IMPORTS import React from "react"; -import axios from "axios"; import styled from "styled-components"; -// import { withFirebase } from "../../Firebase"; import axiosWithAuth from "../../Helpers/axiosWithAuth"; import StarRatings from "react-star-ratings"; @@ -14,14 +12,6 @@ const StyleModal = styled.div` padding: 10px 10px 10px 10px; font-size: 12px; `; -const Header = styled.div` - text-align: center; - font-size: 20px; - font-weight: bold; - color: #fbd702; - width: 100%; - margin-bottom: 15px; -`; const StyledFeaturedReview = styled.div` text-align: center; font-size: 18px; @@ -108,36 +98,26 @@ class DetailsPanel1 extends React.Component { if (this.props.locationId !== prevProps.locationId) { let locationReq = this.props.locationId; return axiosWithAuth() - .get( - `https://wheretocode-master.herokuapp.com/locations/${locationReq}` - ) + .get(`/locations/${locationReq}`) .then(res => { if (res.data.length === 0) { let newLocation = [ { - locationName: this.props.details[0], - locationGoogleId: this.props.locationId + googleId: this.props.locationId } ]; - return axios.post( - "https://wheretocode-master.herokuapp.com/locations", - newLocation - ); + return axiosWithAuth().post("/locations", newLocation); } else { console.log("location does not need to be posted"); } }) .then(res => { let locationReq = this.props.locationId; - return axios.get( - `https://wheretocode-master.herokuapp.com/locations/${locationReq}` - ); + return axiosWithAuth().get(`/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/${locationId}/location`); }) .then(res => { let newReview1 = res.data.slice(-1); @@ -155,13 +135,11 @@ class DetailsPanel1 extends React.Component { // METHODS componentDidMount() { let locationReq = this.props.locationId; - return axios - .get(`https://wheretocode-master.herokuapp.com/locations/${locationReq}`) + return axiosWithAuth() + .get(`/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/${locationId}/location`); }) .then(res => { let newReview1 = res.data.slice(-1); @@ -178,7 +156,6 @@ class DetailsPanel1 extends React.Component { render() { return ( -
Details

@@ -197,11 +174,11 @@ class DetailsPanel1 extends React.Component { Overall Rating:

@@ -210,11 +187,11 @@ class DetailsPanel1 extends React.Component { Internet Rating:

@@ -231,11 +208,11 @@ class DetailsPanel1 extends React.Component { -

Name:

+

Name:

{this.props.details[0]}

Phone:

{this.props.details[1]}

-

Hours:

+

Hours:

    {this.props.hours.map((data, index) => { @@ -249,7 +226,6 @@ class DetailsPanel1 extends React.Component {

- {/* // -- // */} ); } From d82a862bcc7c22389a37a29b12e35e33d777946d Mon Sep 17 00:00:00 2001 From: AceIsHuman Date: Tue, 28 Apr 2020 01:59:45 -0500 Subject: [PATCH 05/17] update axios requests, remove reviews header --- src/components/Review/NonAuthAllReviews.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/src/components/Review/NonAuthAllReviews.js b/src/components/Review/NonAuthAllReviews.js index 862b0692..11ca5ec3 100644 --- a/src/components/Review/NonAuthAllReviews.js +++ b/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,20 +87,17 @@ 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}`) + return axiosWithAuth() + .get(`/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/${locationId}/location` ); }) .then(res => { @@ -131,12 +127,11 @@ class AllReviewsPanel1 extends React.Component { ) : ( -
Reviews
-
    +
      {this.state.reviews[0].map((review, i) => (
    1. - + Username:{review.userName} -- Overall Rating:{" "} {review.rating} -- Internet Rating:{" "} {review.internet_rating} -- Comments:{review.comments}{" "} From af93eb3be68534d5c6d928f853c9f2cec46f2bec Mon Sep 17 00:00:00 2001 From: AceIsHuman Date: Tue, 28 Apr 2020 02:52:31 -0500 Subject: [PATCH 06/17] added placeholder for locations if none exist --- src/components/Dashboard/SavedLocations.js | 29 ++++++++++++++++------ 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/src/components/Dashboard/SavedLocations.js b/src/components/Dashboard/SavedLocations.js index a72826d2..b314efc1 100644 --- a/src/components/Dashboard/SavedLocations.js +++ b/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 ( <>

      Saved Locations

      - {savedLocations.map(location => ( - - ))} + {!!savedLocations ? ( + savedLocations.map(location => ( + + )) + ) : ( + + No Saved Locations + + )} ); }; export default SavedLocations; + +const NoLocations = styled.p` + &&:hover { + cursor: default !important; + background: #f1ca0957 !important; + transform: none !important; + } +`; From d991e92e0baa29867e8054ee3c9bec577065a6d4 Mon Sep 17 00:00:00 2001 From: AceIsHuman Date: Tue, 28 Apr 2020 03:50:02 -0500 Subject: [PATCH 07/17] added placeholder for visits if none exist --- src/components/Dashboard/RecentlyVisited.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/Dashboard/RecentlyVisited.js b/src/components/Dashboard/RecentlyVisited.js index 183da300..3a7832ce 100644 --- a/src/components/Dashboard/RecentlyVisited.js +++ b/src/components/Dashboard/RecentlyVisited.js @@ -1,5 +1,6 @@ import React from "react"; import LocationCard from "./LocationCard"; +import styled from "styled-components"; const RecentlyVisited = props => { const { visits } = props; @@ -7,11 +8,25 @@ const RecentlyVisited = props => { return ( <>

      Recently Visited

      - {visits.map(visit => ( - - ))} + {!!visits[0] ? ( + visits.map(visit => ( + + )) + ) : ( + + No Visits + + )} ); }; export default RecentlyVisited; + +const NoVisits = styled.p` + &&:hover { + cursor: default !important; + background: #f1ca0957 !important; + transform: none !important; + } +`; From 3af1cbae4f2951f9abea4b1dbbe67ac91ff7aab9 Mon Sep 17 00:00:00 2001 From: AceIsHuman Date: Tue, 28 Apr 2020 04:28:45 -0500 Subject: [PATCH 08/17] update axios requests, clean up --- src/components/Review/ReviewPanel.js | 149 ++++++--------------------- 1 file changed, 29 insertions(+), 120 deletions(-) diff --git a/src/components/Review/ReviewPanel.js b/src/components/Review/ReviewPanel.js index 3edeaaf0..2fdc4026 100644 --- a/src/components/Review/ReviewPanel.js +++ b/src/components/Review/ReviewPanel.js @@ -1,9 +1,8 @@ // IMPORTS import React, { Component } from "react"; import styled from "styled-components"; -import axios from "axios"; -//import { distanceTo } from "geolocation-utils"; import axiosWithAuth from "../../Helpers/axiosWithAuth"; +import { connect } from "react-redux"; // COMPONENTS import NetworkModal from "../NetworkSpeed/networkModal"; @@ -12,7 +11,6 @@ import NetworkSpeed from "../NetworkSpeed/NetworkSpeed"; import TextArea from "../Review/TextArea"; import Select from "../Review/Select"; import Button from "../Review/Button"; -// import { withFirebase } from "../../Firebase"; /* global google */ @@ -56,7 +54,6 @@ const StyledForm = styled.form` margin: "10px 10px 10px 10px"; } `; - const NetworkTextStyle = styled.p` font-size: 20px; color: white; @@ -64,21 +61,20 @@ const NetworkTextStyle = styled.p` letter-spacing: 3px; `; -class ReviewPanel1 extends Component { +class ReviewPanel extends Component { constructor(props) { super(props); // STATE this.state = { - newUser: { - user_id: null, + newReview: { + user_id: this.props.userId, rating: " ", internet_rating: " ", comments: "", - location_id: null + location_id: this.props.locationId }, rating: ["1", "2", "3"], internet_rating: ["1", "2", "3"], - //uid: this.props.firebase.auth.currentUser.uid, submitted: false, network: false, distanceFromLocation: 100 @@ -89,96 +85,6 @@ class ReviewPanel1 extends Component { this.handleClearForm = this.handleClearForm.bind(this); this.handleInput = this.handleInput.bind(this); } - // COMPONENT - componentDidMount() { - console.log(this.props); - //Distance between user and review location, used for conditional render of button - const geocoder = new google.maps.Geocoder(); - - //Default to Sydney, Australia to match map default - let userCoords = [-33.856, 151.215]; - - //Check if user allowed location sharing - // if (navigator.geolocation) { - // navigator.geolocation.getCurrentPosition(position => { - // userCoords = [position.coords.latitude, position.coords.longitude]; - - // geocoder.__proto__.geocode( - // { address: this.props.address }, - // (res, err) => { - // const locationCoords = [ - // res[0].geometry.location.lat(), - // res[0].geometry.location.lng() - // ]; - - // this.setState(prevState => { - // return { - // ...prevState, - // distanceFromLocation: distanceTo(userCoords, locationCoords) - // }; - // }); - // } - // ); - // }); - // } - - return axiosWithAuth() - .get(`https://wheretocode-master.herokuapp.com/users/${this.state.uid}`) - .then(user => { - let currentUserId = { - user_id: user.data[0].id, - rating: null, - internet_rating: null, - comments: "" - }; - this.setState({ - newUser: currentUserId - }); - }) - .then(res => { - let locationReq = this.props.locationId; - return axios.get( - `https://wheretocode-master.herokuapp.com/locations/${locationReq}` - ); - }) - .then(res => { - if (!res) { - let newLocation = [ - { - locationName: this.props.details[0], - locationGoogleId: this.props.locationId - } - ]; - return axios.post( - "https://wheretocode-master.herokuapp.com/locations", - newLocation - ); - } else { - console.log("location does not need to be posted"); - } - }) - .then(res => { - let locationReq = this.props.locationId; - return axios.get( - `https://wheretocode-master.herokuapp.com/locations/${locationReq}` - ); - }) - .then(user => { - let currentUser = { - user_id: this.state.newUser.user_id, - rating: "", - internet_rating: "", - comments: "", - location_id: user.data[0].id - }; - this.setState({ - newUser: currentUser - }); - }) - .catch(err => { - console.log(err); - }); - } // METHODS handleInput(e) { @@ -186,8 +92,8 @@ class ReviewPanel1 extends Component { let name = e.target.name; this.setState(prevState => ({ - newUser: { - ...prevState.newUser, + newReview: { + ...prevState.newReview, [name]: value } })); @@ -196,8 +102,8 @@ class ReviewPanel1 extends Component { handleTextArea(e) { let value = e.target.value; this.setState(prevState => ({ - newUser: { - ...prevState.newUser, + newReview: { + ...prevState.newReview, comments: value } })); @@ -205,10 +111,9 @@ class ReviewPanel1 extends Component { handleFormSubmit(e) { e.preventDefault(); - let userData = this.state.newUser; + let userData = this.state.newReview; axiosWithAuth() - .post("https://wheretocode-master.herokuapp.com/reviews", userData) - // .post(`http://localhost:8080/reviews`, userData) + .post("/reviews", userData) .then(res => { this.setState({ submitted: true }); }) @@ -220,7 +125,7 @@ class ReviewPanel1 extends Component { handleClearForm(e) { e.preventDefault(); this.setState({ - newUser: { + newReview: { user_id: "", rating: " ", comments: "", @@ -253,7 +158,7 @@ class ReviewPanel1 extends Component { title={"Location Rating"} name={"rating"} options={this.state.rating} - value={this.state.newUser.rating} + value={this.state.newReview.rating} placeholder={"Select Rating"} handleChange={this.handleInput} /> @@ -262,7 +167,7 @@ class ReviewPanel1 extends Component { title={"Internet Rating"} name={"internet_rating"} options={this.state.internet_rating} - value={this.state.newUser.internet_rating} + value={this.state.newReview.internet_rating} placeholder={"Select Internet Rating"} handleChange={this.handleInput} /> @@ -271,13 +176,13 @@ class ReviewPanel1 extends Component { title={"Comments"} rows={10} cols={50} - value={this.state.newUser.comments} + value={this.state.newReview.comments} name={"comment"} handleChange={this.handleTextArea} placeholder={"Leave a comment"} /> {/*Submit */} -
      +
      - {// Only render network test option if user is within 100ft (30.48m) of location - this.state.distanceFromLocation <= 30.48 ? ( - - ) : null} + { + // Only render network test option if user is within 100ft (30.48m) of location + this.state.distanceFromLocation <= 30.48 ? ( + + ) : null + } {this.state.distanceFromLocation > 30.48 @@ -321,5 +228,7 @@ class ReviewPanel1 extends Component { } } -const ReviewPanel = ReviewPanel1; -export { ReviewPanel }; +export default connect( + ({ userReducer }) => ({ userId: userReducer.userId }), + null +)(ReviewPanel); From 410ed023e9ca945c1c8c2a5bec0ece10f904ff61 Mon Sep 17 00:00:00 2001 From: AceIsHuman Date: Tue, 28 Apr 2020 04:29:11 -0500 Subject: [PATCH 09/17] update ReviewPanel import --- src/components/Review/Tabs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Review/Tabs.js b/src/components/Review/Tabs.js index 909b8301..9c9932b7 100644 --- a/src/components/Review/Tabs.js +++ b/src/components/Review/Tabs.js @@ -8,7 +8,7 @@ import './Tabs.scss'; // COMPONENTS import NonAuthDetailsPanel from "./NonAuthDetailsPanel"; import { NonAuthAllReviewsPanel } from "./NonAuthAllReviews"; -import { ReviewPanel } from "./ReviewPanel"; +import ReviewPanel from "./ReviewPanel"; // STYLED COMPONENTS const StyledTabs = styled(Tabs)` From 363c80ec12a202d53256fedd69bb343d9d9213f7 Mon Sep 17 00:00:00 2001 From: AceIsHuman Date: Tue, 28 Apr 2020 05:26:48 -0500 Subject: [PATCH 10/17] seperate the directions component --- src/components/Dashboard/Directions.js | 34 +++++++++++++++++++++ src/components/Dashboard/LocationDetails.js | 30 ++---------------- 2 files changed, 37 insertions(+), 27 deletions(-) create mode 100644 src/components/Dashboard/Directions.js diff --git a/src/components/Dashboard/Directions.js b/src/components/Dashboard/Directions.js new file mode 100644 index 00000000..07147031 --- /dev/null +++ b/src/components/Dashboard/Directions.js @@ -0,0 +1,34 @@ +import React from "react"; +import styled from "styled-components"; + +const Directions = ({ address }) => ( + + + +); + +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; + } +`; diff --git a/src/components/Dashboard/LocationDetails.js b/src/components/Dashboard/LocationDetails.js index 15f54d65..ab60a389 100644 --- a/src/components/Dashboard/LocationDetails.js +++ b/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 => { {name}
      {address}
      {phone} - - - {"Directions "} - - - + {!!icon ? : } @@ -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; From 55093070e3fd5ea155297b6f3d167bbdb103f798 Mon Sep 17 00:00:00 2001 From: AceIsHuman Date: Tue, 28 Apr 2020 05:27:37 -0500 Subject: [PATCH 11/17] pass location into Review component --- src/components/Map/SingleMapCard.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Map/SingleMapCard.jsx b/src/components/Map/SingleMapCard.jsx index cdf78019..dcc28574 100644 --- a/src/components/Map/SingleMapCard.jsx +++ b/src/components/Map/SingleMapCard.jsx @@ -114,7 +114,7 @@ class SingleMapCard extends Component { onClick={this.requestDetails(location.id)} details={this.state.details} hours={this.state.hours} - address={this.props.address} + location={this.props.location} locationId={this.state.id} icon={location.icon} /> From 6e709d4398318b3e2d650ea5637cb55eeb05387e Mon Sep 17 00:00:00 2001 From: AceIsHuman Date: Tue, 28 Apr 2020 05:28:17 -0500 Subject: [PATCH 12/17] pass all props to NonAuthDetailsPanel --- src/components/Review/Tabs.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Review/Tabs.js b/src/components/Review/Tabs.js index 9c9932b7..617951a1 100644 --- a/src/components/Review/Tabs.js +++ b/src/components/Review/Tabs.js @@ -72,10 +72,7 @@ const TabsComponent = props => { From 6507128194f61072cc179d3774edc60c6a2843fe Mon Sep 17 00:00:00 2001 From: AceIsHuman Date: Tue, 28 Apr 2020 05:29:31 -0500 Subject: [PATCH 13/17] pass props --- src/components/Review/Review.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/components/Review/Review.js b/src/components/Review/Review.js index 06cddb95..953deb7e 100644 --- a/src/components/Review/Review.js +++ b/src/components/Review/Review.js @@ -12,13 +12,6 @@ const StyleModal = styled.div` export default props => ( - + ); From 34ecd068236a00c6b382bc1ef7e98b789fd70dbc Mon Sep 17 00:00:00 2001 From: AceIsHuman Date: Tue, 28 Apr 2020 05:31:22 -0500 Subject: [PATCH 14/17] fix axios request, add CheckIn, FavoriteLocation, and Directions components --- src/components/Review/NonAuthDetailsPanel.js | 86 +++++++++----------- 1 file changed, 39 insertions(+), 47 deletions(-) diff --git a/src/components/Review/NonAuthDetailsPanel.js b/src/components/Review/NonAuthDetailsPanel.js index 1d23915c..87952b5c 100644 --- a/src/components/Review/NonAuthDetailsPanel.js +++ b/src/components/Review/NonAuthDetailsPanel.js @@ -3,6 +3,11 @@ import React from "react"; import styled from "styled-components"; import axiosWithAuth from "../../Helpers/axiosWithAuth"; import StarRatings from "react-star-ratings"; +import Popup from "reactjs-popup"; + +import CheckIn from "./CheckIn.js"; +import FavoriteLocation from "./FavoriteLocation.js"; +import Directions from "../Dashboard/Directions"; // STYLED COMPONENTS const StyleModal = styled.div` @@ -53,8 +58,7 @@ const ContentRight = styled.div` .name { padding-top: px; } - background-color: #111; - opacity: 0.45; + background-color: #959595; `; const ContentLeft = styled.div` display: flex; @@ -84,63 +88,40 @@ const StyledFeatureReview = styled.div` display: flex; flex-direction: column; `; +const Menu = styled.div` + display: flex; + flex-direction: column; + text-align: center; + color: black; +`; +const ExtrasContainer = styled.div` + display: flex; + justify-content: flex-end; + width: 100%; + color: white; +`; // COMPONENT -class DetailsPanel1 extends React.Component { +class DetailsPanel extends React.Component { // STATE state = { - review: [], - location_id: [], - location: this.props.locationId + review: [] }; componentDidUpdate(prevProps, nextState) { if (this.props.locationId !== prevProps.locationId) { - let locationReq = this.props.locationId; - return axiosWithAuth() - .get(`/locations/${locationReq}`) - .then(res => { - if (res.data.length === 0) { - let newLocation = [ - { - googleId: this.props.locationId - } - ]; - return axiosWithAuth().post("/locations", newLocation); - } else { - console.log("location does not need to be posted"); - } - }) - .then(res => { - let locationReq = this.props.locationId; - return axiosWithAuth().get(`/locations/${locationReq}`); - }) - .then(res => { - let locationId = res.data[0].id; - return axiosWithAuth().get(`/reviews/${locationId}/location`); - }) - .then(res => { - let newReview1 = res.data.slice(-1); - let newReview = newReview1[0]; - this.setState({ - review: newReview - }); - }) - .catch(error => { - console.log(error); - }); + return this.grabReviews(); } } // METHODS componentDidMount() { - let locationReq = this.props.locationId; + return this.grabReviews(); + } + + grabReviews() { return axiosWithAuth() - .get(`/locations/${locationReq}`) - .then(res => { - let locationId = res.data[0].id; - return axiosWithAuth.get(`/reviews/${locationId}/location`); - }) + .get(`/reviews/${this.props.locationId}/location`) .then(res => { let newReview1 = res.data.slice(-1); let newReview = newReview1[0]; @@ -208,6 +189,17 @@ class DetailsPanel1 extends React.Component { + + } + position="bottom right" + > + + + + + +

      Name:

      {this.props.details[0]}

      Phone:

      @@ -224,6 +216,7 @@ class DetailsPanel1 extends React.Component { })}

      + @@ -231,5 +224,4 @@ class DetailsPanel1 extends React.Component { } } // EXPORT -const NonAuthDetailsPanel = DetailsPanel1; -export default NonAuthDetailsPanel; +export default DetailsPanel; From 76ee48ddb56b0c908a6dc4ad5293b808f932d459 Mon Sep 17 00:00:00 2001 From: AceIsHuman Date: Tue, 28 Apr 2020 05:34:36 -0500 Subject: [PATCH 15/17] begin creating CheckIn and FavoriteLocation components --- src/components/Review/CheckIn.js | 7 +++++++ src/components/Review/FavoriteLocation.js | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 src/components/Review/CheckIn.js create mode 100644 src/components/Review/FavoriteLocation.js diff --git a/src/components/Review/CheckIn.js b/src/components/Review/CheckIn.js new file mode 100644 index 00000000..eaa05aa6 --- /dev/null +++ b/src/components/Review/CheckIn.js @@ -0,0 +1,7 @@ +import React from "react"; + +const CheckIn = props => { + return Check in; +}; + +export default CheckIn; diff --git a/src/components/Review/FavoriteLocation.js b/src/components/Review/FavoriteLocation.js new file mode 100644 index 00000000..8ffe4d7b --- /dev/null +++ b/src/components/Review/FavoriteLocation.js @@ -0,0 +1,7 @@ +import React from "react"; + +const FavoriteLocation = props => { + return Favorite Location; +}; + +export default FavoriteLocation; From 8a830de31f43420dff1eaf40b185db2e9c4c83d1 Mon Sep 17 00:00:00 2001 From: AceIsHuman Date: Tue, 28 Apr 2020 20:08:02 -0500 Subject: [PATCH 16/17] correct axios request for reviews --- src/components/Review/NonAuthAllReviews.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/components/Review/NonAuthAllReviews.js b/src/components/Review/NonAuthAllReviews.js index 11ca5ec3..acbcc72b 100644 --- a/src/components/Review/NonAuthAllReviews.js +++ b/src/components/Review/NonAuthAllReviews.js @@ -90,16 +90,8 @@ class AllReviewsPanel1 extends React.Component { }; componentDidMount() { - let locationReq = this.props.locationId; - console.log("location id", locationReq); return axiosWithAuth() - .get(`/locations/${locationReq}`) - .then(res => { - let locationId = res.data[0].id; - return axiosWithAuth().get( - `/reviews/${locationId}/location` - ); - }) + .get(`/reviews/${this.props.locationId}/location`) .then(res => { if (res) { this.setState({ From b0552b163c89f2d0092aca89c6e272685a6d3795 Mon Sep 17 00:00:00 2001 From: AceIsHuman Date: Tue, 28 Apr 2020 20:09:40 -0500 Subject: [PATCH 17/17] correct userID --- src/components/Review/ReviewPanel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Review/ReviewPanel.js b/src/components/Review/ReviewPanel.js index 2fdc4026..2f22410c 100644 --- a/src/components/Review/ReviewPanel.js +++ b/src/components/Review/ReviewPanel.js @@ -67,7 +67,7 @@ class ReviewPanel extends Component { // STATE this.state = { newReview: { - user_id: this.props.userId, + user_id: this.props.userID, rating: " ", internet_rating: " ", comments: "", @@ -229,6 +229,6 @@ class ReviewPanel extends Component { } export default connect( - ({ userReducer }) => ({ userId: userReducer.userId }), + ({ userReducer }) => { console.log("userReducer", userReducer); return ({ userId: userReducer.userID })}, null )(ReviewPanel);