Merge pull request projectunic0rn#78 from projectunic0rn/modification…

…/personal-mobile

Modification/personal mobile

src/_App.scss

@@ -41,7 +41,7 @@ body {
                                   supported by Chrome and Opera */
 }
 
-input {
+input, select {
   border-radius: 0;
   -webkit-appearance: none;
 }

src/pages/Home/subcomponents/LeaderboardCard.js

@@ -4,21 +4,7 @@ import { NavLink, withRouter } from "react-router-dom";
 import UserAvatar from "../../../components/UserAvatar/UserAvatar";
 
 function LeaderboardCard({ user, rank }) {
-  function handleFontSize() {
-    console.log(user.username);
-    if (user.username.length < 13) {
-      console.log(user.username);
-      return "18px";
-    } else if (user.username.length < 16) {
-      return "16px";
-    } else if (user.username.length < 18) {
-      return "14px";
-    } else if (user.username.length < 24) {
-      return "12px";
-    } else {
-      return "10px";
-    }
-  }
+
   return (
     <NavLink
       to={{

src/pages/Home/subcomponents/_CityMap.scss

@@ -382,6 +382,7 @@
         }
         @media screen and (max-width: 500px) {
           min-width: 350px;
+          transform: translateX(20px);
         }
         @media screen and (max-width: 450px) {
           min-width: 300px;
@@ -391,8 +392,8 @@
           min-width: 280px;
         }
         @media screen and (max-width: 320px) {
-          max-width: 300px;
-          min-width: 300px;
+          max-width: 260px;
+          min-width: 260px;
         }
 
         input {
@@ -436,6 +437,9 @@
   @media screen and (max-height: 1000px) {
     bottom: 20px;
   }
+  @media screen and (max-width: 500px) {
+    left: calc(50% - 80px);
+  }
   @media screen and (max-height: 400px) {
     left: calc(50% + 240px);
     bottom: 20px;
@@ -502,6 +506,9 @@
     flex-direction: column;
     font-size: 24px;
   }
+  @media screen and (max-width: 500px) {
+    left: calc(50% - 280px);
+  }
   select {
     background: none;
     border: none;
@@ -525,7 +532,7 @@
   top: 60px;
   color: #769f93;
   background: $light-green;
-  box-shadow: 0 0 14px 2px rgba(255, 225, 167, 0.75);
+  box-shadow: 0 0 14px 2px rgba(197, 238, 143, 0.75);
   svg {
     margin-left: 6px;
     fill: #769f93;
@@ -541,7 +548,7 @@
     left: calc(50% - 210px);
   }
   @media screen and (max-width: 500px) {
-    left: calc(50% - 60px);
+    left: calc(50% - 40px);
   }
 }
 
@@ -571,7 +578,7 @@
     left: calc(50% + 160px);
   }
   @media screen and (max-width: 500px) {
-    left: calc(50% + 8px);
+    left: calc(50% + 28px);
   }
 }
 
@@ -654,9 +661,9 @@
 #sc-controls-city-side-menu {
   display: flex;
   flex-direction: column;
-  width: 80px;
+  width: 60px;
   height: 48px;
-  left: 85px;
+  left: 95px;
   top: 320px;
 }
 
@@ -678,4 +685,8 @@
         transform: translate(-40px, 140px);
       }
     }
+  }
+
+  .mapboxgl-ctrl-geocoder--icon-close {
+    margin-top: 4px;
   }

src/pages/Home/subcomponents/_NewUserCity.scss

@@ -623,7 +623,7 @@
   overflow-x: hidden; /* Disable horizontal scroll */
   padding-top: 60px; /* Place content 60px from the top */
   transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
-  z-index: 5000;
+  z-index: 1000;
   a {
     padding: 8px 8px 8px 32px;
     text-decoration: none;

src/pages/Place/PlaceReviewCard.js

@@ -74,7 +74,6 @@ function PlaceReviewCard({
       default:
         break;
     }
-    console.log(user);
     let filteredArray = user.CityReviews.filter(review => {
       for (let i in keyWords) {
         if (review.attraction_type === keyWords[i]) {
@@ -83,7 +82,6 @@ function PlaceReviewCard({
       }
       return false;
     });
-    console.log(filteredArray);
     handleFilteredCityReviews(filteredArray);
     handleLoaded(true);
   }, [page]);

src/pages/Profile/Profile.js

@@ -4,7 +4,7 @@ import { Route } from "react-router-dom";
 import { Query } from "react-apollo";
 import { GET_ALL_CITY_DETAILS } from "../../GraphQL";
 
-import Sidebar from "./Sidebar";
+// import Sidebar from "./Sidebar";
 import ProfileNav from "./ProfileNav";
 import ProfileCities from "./subpages/Cities/ProfileCities";
 import ProfileTrips from './subpages/UserTrips/ProfileTrips';
@@ -153,7 +153,6 @@ export default function Profile({ user, urlUsername, refetch }) {
       handleLoaded(true);
     }
   }, [cityData]);
-  console.log(cityReviews);
   return (
     <Query
       query={GET_ALL_CITY_DETAILS}

src/pages/Profile/subpages/Cities/CityReviewsContainer.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { Mutation } from "react-apollo";
 import { useQuery } from "@apollo/react-hooks";
@@ -19,16 +19,14 @@ function PlanningMapFriendReviews({
   sendFriendReviewsBackwards,
   userId
 }) {
-  const { data, error, loading } = useQuery(CITY_REVIEWS_ALL_USERS, {
+  const { data } = useQuery(CITY_REVIEWS_ALL_USERS, {
     variables: { placeId }
   });
-    // const dataLoaded = useRef(true);
 
     if (data !== undefined && data !== null) {
       handleDataReturn(data[Object.keys(data)[0]]);
     } 
     function handleDataReturn(data) {
-      console.log("friend query");
       let newData = data.filter(
         (item, index, self) =>
           index ===
@@ -70,10 +68,7 @@ export default function CityReviewsContainer({
   const [showFriendReviews, handleShowFriendReviews] = useState(false);
   const [placeId] = useState(city.cityId);
 
-  useEffect(() => {
-    console.log("city review container loaded");
-  }, []);
-  console.log("showFriendReviews: ", showFriendReviews);
+
   useEffect(() => {
     let reviewHolder = [...reviews];
     for (let i in reviewHolder) {

src/pages/Profile/subpages/UserTrips/CitySelectContainer.js

@@ -12,7 +12,7 @@ import SaveIcon from "../../../../icons/SaveIcon";
 import TrashIcon from "../../../../icons/TrashIcon";
 import ClusterMarker from "../../../Home/subcomponents/ClusterMarker";
 
-function CitySelectContainer(props) {
+function CitySelectContainer() {
     const {
         tripTiming,
         tripCities, 
@@ -38,7 +38,6 @@ function CitySelectContainer(props) {
   const [cityTooltip, handleCityTooltip] = useState(null);
   const [timingState, handleTimingState] = useState(tripTiming === "future" ? 1 : 0);
   const [clickedCityArray, handleClickedCityArray] = useState([]);
-console.log(clickedCityArray)
 
   const mapRef = useRef();
   const clusterPast = useRef();
@@ -148,59 +147,6 @@ console.log(clickedCityArray)
     handleTripTimingCounts([pastCount, futureCount, liveCount]);
   }
 
-  function deleteLoadedCity(cityTooltip) {
-    let cityArrayIndex;
-    let newClickedCityArray = [...loadedClickedCityArray];
-    newClickedCityArray.filter((city, index) => {
-      if (
-        city.cityId === cityTooltip.cityId &&
-        city.tripTiming === cityTooltip.tripTiming
-      ) {
-        cityArrayIndex = index;
-      }
-    });
-    let markerIndex;
-    let markerDisplay;
-    let pastCount = tripTimingCounts[0];
-    let futureCount = tripTimingCounts[1];
-    let liveCount = tripTimingCounts[2];
-    switch (cityTooltip.tripTiming) {
-      case 0:
-        markerPastDisplay.filter((city, index) => {
-          if (Number(city.key) === cityTooltip.cityId) {
-            markerIndex = index;
-          }
-        });
-        newClickedCityArray.splice(cityArrayIndex, 1);
-        markerDisplay = [...markerPastDisplay];
-        markerDisplay.splice(markerIndex, 1);
-        pastCount--;
-        handleLoadedClickedCityArray(newClickedCityArray);
-        handleMarkerPastDisplay(markerDisplay);
-        handleCityTooltip(null);
-        updateTripCities(newClickedCityArray)
-        break;
-      case 1:
-        markerFutureDisplay.filter((city, index) => {
-          if (Number(city.key) === cityTooltip.cityId) {
-            markerIndex = index;
-          }
-        });
-        newClickedCityArray.splice(cityArrayIndex, 1);
-        markerDisplay = [...markerFutureDisplay];
-        markerDisplay.splice(markerIndex, 1);
-        futureCount--;
-        handleClickedCityArray(newClickedCityArray);
-        handleMarkerFutureDisplay(markerDisplay);
-        handleCityTooltip(null);
-        updateTripCities(newClickedCityArray)
-        break;
-      default:
-        break;
-    }
-    handleTripTimingCounts([pastCount, futureCount, liveCount]);
-  }
-
   function handleLoadedCities(data) {
     let pastCount = tripTimingCounts[0];
     let futureCount = tripTimingCounts[1];
@@ -400,7 +346,6 @@ console.log(clickedCityArray)
   }
 
   function handleTripTimingCityHelper(city) {
-
     let newClickedCityArray = [...clickedCityArray];
     newClickedCityArray.push({
       country: city.country,
@@ -414,10 +359,8 @@ console.log(clickedCityArray)
     });
     let pastCount = tripTimingCounts[0];
     let futureCount = tripTimingCounts[1];
-    let liveCount = tripTimingCounts[2];
     let newMarkerPastDisplay = [...markerPastDisplay];
     let newMarkerFutureDisplay = [...markerFutureDisplay];
-    let newMarkerLiveDisplay = [...markerLiveDisplay];
     let color = "";
     switch (timingState) {
       case 0:

src/pages/Profile/subpages/UserTrips/TripBasicsContainer.js

@@ -12,7 +12,7 @@ function TripBasicsContainer({ trip, refetch, urlUsername }) {
   const [loaded, handleLoaded] = useState(false);
   const [cityBasics, handleCityBasics] = useState();
   const [tripDuration, handleTripDuration] = useState(null);
-//   const [id] = useState(trip.id);
+  //   const [id] = useState(trip.id);
   const [edit, handleEdit] = useState(true);
   const {
     tripName,
@@ -58,23 +58,23 @@ function TripBasicsContainer({ trip, refetch, urlUsername }) {
 
   function handleStartDate(e) {
     let startDate = new Date(e.target.value).toISOString().slice(0, 10);
-    console.log(startDate);
+
     if (startDate !== null && tripEndDate !== null) {
       let timeDiff = new Date(tripEndDate) - new Date(startDate);
       let diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 0.00001);
-      console.log(diffDays);
+
       handleTripDuration(diffDays);
     }
     updateTripStartDate(startDate);
   }
 
   function handleEndDate(e) {
     let endDate = new Date(e.target.value).toISOString().slice(0, 10);
-    console.log(endDate);
+
     if (endDate !== null && tripStartDate !== null) {
       let timeDiff = new Date(endDate) - new Date(tripStartDate);
       let diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 0.00001);
-      console.log(diffDays);
+
       handleTripDuration(diffDays);
     }
     updateTripEndDate(endDate);
@@ -166,7 +166,7 @@ function TripBasicsContainer({ trip, refetch, urlUsername }) {
         <div className="review-edit-button-container">
           <Mutation
             mutation={
-                tripTiming === "past"
+              tripTiming === "past"
                 ? UPDATE_VISITED_CITY_BASICS
                 : tripTiming === "future"
                 ? UPDATE_VISITING_CITY_BASICS

src/pages/Profile/subpages/UserTrips/TripCard.js

@@ -45,7 +45,6 @@ function TripCard({
       ? REMOVE_PLACE_VISITING
       : REMOVE_PLACE_LIVING
   );
-  console.log(tripData)
   const [deletePrompt, handleDelete] = useState(false);
 //   useEffect(() => {
 //     let places = 0;

src/pages/Profile/subpages/UserTrips/TripDetailContainer.js

@@ -199,8 +199,6 @@ function TripDetailContainer({
   }
 
   function handleDateChange(date, day) {
-    console.log(date);
-    console.log(day);
     handleDate(date);
     handleDay(day);
   }
@@ -240,7 +238,6 @@ function TripDetailContainer({
       sendFriendReviewsBackwards={handleFriendReviewHandler}
     />
   );
-  console.log(selectedCity);
   if (!loaded) return "Loading";
   return (
     <TripDetailContext.Provider