Merge pull request #95 from boostcamp-2020/develop

Release v0.1.1
boostcamp-2020 · Dec 15, 2020 · 307b1cb · 307b1cb
2 parents 91bfe2e + 16bba92
commit 307b1cb
Show file tree

Hide file tree

Showing 44 changed files with 492 additions and 246 deletions.
diff --git a/client/src/components/containers/DriverInfoBox.tsx b/client/src/components/containers/DriverInfoBox.tsx
@@ -93,8 +93,8 @@ function DriverInfoBox() {
 
   useEffect(() => {
     if (data && data.cancelTrip.result === 'canceled') {
-      dispatch(setTrip({ id: '' }));
-      notifyRiderState({ variables: { tripId: trip.id, isCancel: true } });
+      dispatch(setTrip({ id: undefined }));
+      notifyRiderState({ variables: { tripId: trip.id } });
       alert('호출 취소', '취소 되었습니다.', [
         { text: 'OK', onPress: () => history.push('/rider/setcourse') },
       ]);

diff --git a/client/src/components/containers/DriverPickUpForm.tsx b/client/src/components/containers/DriverPickUpForm.tsx
@@ -79,14 +79,14 @@ export default function DriverPickUpForm() {
   }, [count]);
 
   useEffect(() => {
-    notifyDriverState({ variables: { tripId: trip.id, driverPosition: driverPos, isDrop: false } });
+    notifyDriverState({ variables: { tripId: trip.id, driverPosition: driverPos } });
   }, [driverPos]);
 
   useEffect(() => {
     if (data && data.matchedRiderState.latitude) {
       setRiderPos({ lat: data.matchedRiderState.latitude, lng: data.matchedRiderState.longitude });
     }
-    if (data && data.matchedRiderState.isCancel) {
+    if (data && data.matchedRiderState.trip.status === 'cancel') {
       alert('호출취소', '라이더가 호출을 취소하였습니다.', [{ text: 'OK', onPress: () => history.push('/driver/main') }]);
     }
   }, [data]);
@@ -109,7 +109,7 @@ export default function DriverPickUpForm() {
         pickUpLat={originPosition.lat}
         pickUpLng={originPosition.lng}
       />
-      <RiderInfoBox onBoard={false}/>
+      <RiderInfoBox onBoard={false} currentPos={driverPos}/>
     </>
   );
 }

diff --git a/client/src/components/containers/DrivingForm.tsx b/client/src/components/containers/DrivingForm.tsx
@@ -83,7 +83,7 @@ export default function DrivingForm({ isRider }:{isRider:boolean}) {
   }, [tripData]);
 
   useEffect(() => {
-    if (data && data.matchedDriverState.isDrop) {
+    if (data && data.matchedDriverState.trip.status === 'close') {
       history.push('/rider/tripend');
     }
   }, [data]);
@@ -96,6 +96,14 @@ export default function DrivingForm({ isRider }:{isRider:boolean}) {
         mapContainerStyle={containerStyle}
         zoom={16}
         center={currentPos}
+        options={{
+          zoomControl: true,
+          mapTypeControl: false,
+          scaleControl: true,
+          streetViewControl: true,
+          rotateControl: true,
+          fullscreenControl: false,
+        }}
       >
         <DistanceMatrixService
           callback={distanceMatrixCallback}

diff --git a/client/src/components/containers/DrivingMap.tsx b/client/src/components/containers/DrivingMap.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState, memo } from 'react';
+import React, { useCallback, useState, useRef, useEffect, memo } from 'react';
 
 import { OverlayView, DirectionsService, DirectionsRenderer } from '@react-google-maps/api';
 
@@ -7,12 +7,19 @@ import PinIcon from '../presentational/PinIcon';
 
 function DrivingMap({ car, destination }: {car: {lat:number, lng:number}, destination: {lat:number, lng:number}}) {
   const [directionResponse, setDirectionResponse] = useState(null);
+  const count = useRef(0);
 
   const directionCallback = useCallback((response: any, status: any) => {
-    if (response !== null && status === 'OK') {
+    if (response !== null && status === 'OK' && count.current <= 1) {
+      count.current += 1;
       setDirectionResponse(response);
     };
-  }, [car]);
+  }, [car.lat, car.lng]);
+
+  useEffect(() => {
+    count.current = 0;
+  }, [car.lat, car.lng, destination.lat, destination.lng]);
+
 
   return (
     <>

diff --git a/client/src/components/containers/LoginForm.tsx b/client/src/components/containers/LoginForm.tsx
@@ -10,11 +10,14 @@ import styled from 'styled-components';
 
 import { LOGIN_RIDER, LOGIN_DRIVER } from '../../queries/login';
 import { setLoginRole } from '../../slices/loginSlice';
+import { setTrip } from '../../slices/tripSlice';
 
 import { checkValidation } from '../../utils/validate';
 
 import Input from '../presentational/Input';
 import SubmitButton from '../presentational/SubmitButton';
+import LoadingView from '../presentational/LoadingView';
+
 
 const Div = styled.div`
   width: 90%;
@@ -54,32 +57,36 @@ const SignupButton = styled.button`
 function LoginForm() {
   const history = useHistory();
   const dispatch = useDispatch();
-  const [loginRider, { data: riderData, error: riderError }] = useMutation(
+  const [loginRider, { data: riderData, loading: riderLoading, error: riderError }] = useMutation(
     LOGIN_RIDER,
     {
       onCompleted: ({ loginRider }) => {
-        const { message, role, success, token } = loginRider;
+        const { message, success, token, user } = loginRider;
         if (success) {
           localStorage.setItem('token', token);
-          dispatch(setLoginRole(role));
+          dispatch(setLoginRole(user.role));
+          dispatch(setTrip({ id: user.tripId }));
           history.push('/rider/setcourse');
         } else {
           window.alert(message);
+          history.push('/login');
         }
       },
     },
   );
-  const [loginDriver, { data: driverData, error: driverError }] = useMutation(
+  const [loginDriver, { data: driverData, loading: driverLoading, error: driverError }] = useMutation(
     LOGIN_DRIVER,
     {
       onCompleted: ({ loginDriver }) => {
-        const { message, role, success, token } = loginDriver;
+        const { message, success, token, user } = loginDriver;
         if (success) {
           localStorage.setItem('token', token);
-          dispatch(setLoginRole(role));
+          dispatch(setLoginRole(user.role));
+          dispatch(setTrip({ id: user.tripId }));
           history.push('/driver/main');
         } else {
           window.alert(message);
+          history.push('/login');
         }
       },
     },
@@ -119,6 +126,10 @@ function LoginForm() {
     checkValidation(propertyToCheck, setIsValidate);
   }, propertyToWatch);
 
+  if (riderLoading || driverLoading) {
+    return <LoadingView />;
+  }
+
   return (
     <Div>
       {riderError && <p>try again</p>}

diff --git a/client/src/components/containers/PickUpMap.tsx b/client/src/components/containers/PickUpMap.tsx
@@ -52,6 +52,14 @@ export default function PickUpMap({ isRider, riderLat, riderLng, driverLat, driv
       mapContainerStyle={containerStyle}
       zoom={16}
       center={isRider ? riderPos : driverPos}
+      options={{
+        zoomControl: true,
+        mapTypeControl: false,
+        scaleControl: true,
+        streetViewControl: true,
+        rotateControl: true,
+        fullscreenControl: false,
+      }}
     >
       <OverlayView
         position={driverPos}

diff --git a/client/src/components/containers/RiderInfoBox.tsx b/client/src/components/containers/RiderInfoBox.tsx
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { useMutation, useQuery } from '@apollo/client';
 
-import { reverseGoecoding } from '../../utils/geocoding';
+import { reverseGeocoding } from '../../utils/geocoding';
 import { selectTripReducer } from '../../slices/tripSlice';
 
 import styled from 'styled-components';
@@ -84,7 +84,7 @@ function RiderInfoBox({ onBoard, currentPos }:{onBoard:boolean, currentPos:{ lat
 
   const updateArrivalData = async () => {
     const now = new Date();
-    const address = await reverseGoecoding(currentPos);
+    const address = await reverseGeocoding(currentPos);
     setArrival({ variables: {
       tripId: trip.id,
       arrivalTime: now,
@@ -104,24 +104,24 @@ function RiderInfoBox({ onBoard, currentPos }:{onBoard:boolean, currentPos:{ lat
   };
 
   const handleOnClickDrop = () => {
-    const tripId = trip.id;
-    setTripStatus({ variables: { tripId, newTripStatus: 'close' } });
+    updateArrivalData();
   };
 
   useEffect(() => {
     if (data && data.setTripStatus.result === 'success') {
-      notifyDriverState({ variables: { tripId: trip.id, onBoard: true } });
+      notifyDriverState({ variables: { tripId: trip.id } });
       history.push('/driver/driving');
     }
     if (data && data.setTripStatus.result === 'close success') {
-      updateArrivalData();
+      notifyDriverState({ variables: { tripId: trip.id } });
+      history.push('/driver/tripend');
     }
   }, [data]);
 
   useEffect(() => {
     if (arrivalData) {
-      notifyDriverState({ variables: { tripId: trip.id, isDrop: true } });
-      history.push('/driver/tripend');
+      const tripId = trip.id;
+      setTripStatus({ variables: { tripId, newTripStatus: 'close' } });
     }
   }, [arrivalData]);
 
@@ -139,7 +139,7 @@ function RiderInfoBox({ onBoard, currentPos }:{onBoard:boolean, currentPos:{ lat
               <PlaceInfo>{ tripData?.trip.destination.address}</PlaceInfo>
             </div>
             <Buttons>
-              <DropButton onClick={handleOnClickDrop}>라이더 하차</DropButton>
+              <DropButton type={'button'} onClick={handleOnClickDrop}>라이더 하차</DropButton>
             </Buttons>
           </>
           :
@@ -149,7 +149,7 @@ function RiderInfoBox({ onBoard, currentPos }:{onBoard:boolean, currentPos:{ lat
               <PlaceInfo>{tripData?.trip.origin.address}</PlaceInfo>
             </div>
             <Buttons>
-              <PickUpButton onClick={handleOnClickBoardCompelete}>탑승완료</PickUpButton>
+              <PickUpButton type={'button'} onClick={handleOnClickBoardCompelete}>탑승완료</PickUpButton>
             </Buttons>
           </>
         }

diff --git a/client/src/components/containers/RiderPickUpForm.tsx b/client/src/components/containers/RiderPickUpForm.tsx
@@ -80,7 +80,7 @@ export default function RiderPickUpForm() {
     if (data && data.matchedDriverState.driverPosition) {
       setDriverPos(data.matchedDriverState.driverPosition);
     }
-    if (data && data.matchedDriverState.onBoard) {
+    if (data && data.matchedDriverState.trip.status === 'onBoard') {
       history.push('/rider/driving');
     }
   }, [data]);

diff --git a/client/src/components/containers/RiderPickupPositionMap.tsx b/client/src/components/containers/RiderPickupPositionMap.tsx
@@ -9,7 +9,7 @@ import { useHistory } from 'react-router-dom';
 import { LISTEN_DRIVER_RESPONSE } from '../../queries/driverResponded';
 import { GET_ORIGIN_POSITION_AND_DESTINATION_POSITION } from '../../queries/trip';
 import { setTrip } from '../../slices/tripSlice';
-import { MATCHING_CONFIRM } from '../../constants/matchingResult';
+import { MATCHED } from '../../constants/tripStatus';
 
 const containerStyle = {
   width: '100%',
@@ -40,9 +40,9 @@ function RiderPickupPositionMap() {
 
   useEffect(() => {
     if (data) {
-      const { response, driverId, tripId } = data.driverResponded;
-      if (response === MATCHING_CONFIRM) {
-        dispatch(setTrip({ id: tripId }));
+      const { id, status } = data.driverResponded;
+      if (status === MATCHED) {
+        dispatch(setTrip({ id }));
         history.push('/rider/pickup');
       }
     }
@@ -56,6 +56,14 @@ function RiderPickupPositionMap() {
         onLoad={onLoad}
         onUnmount={onUnmount}
         center={originPosition}
+        options={{
+          zoomControl: true,
+          mapTypeControl: false,
+          scaleControl: true,
+          streetViewControl: true,
+          rotateControl: true,
+          fullscreenControl: false,
+        }}
       >
       </GoogleMap>
     </LoadScript>

diff --git a/client/src/components/containers/RiderSetCourseMap.tsx b/client/src/components/containers/RiderSetCourseMap.tsx
@@ -7,7 +7,7 @@ import { Button } from 'antd-mobile';
 
 import styled from 'styled-components';
 
-import { reverseGoecoding } from '../../utils/geocoding';
+import { reverseGeocoding } from '../../utils/geocoding';
 
 import PinIcon from '../presentational/PinIcon';
 
@@ -57,14 +57,10 @@ enum TravelMode {
   WALKING = 'WALKING',
 }
 
-function RiderSetCourseMap({ setEstimatedDistance, setEstimatedTime }: { setEstimatedDistance: any, setEstimatedTime: any}) {
+function RiderSetCourseMap({ setEstimatedDistance, setEstimatedTime, originPlace, destPlace, originPosition, destPosition }: any) {
   const {
-    originPosition,
-    destPosition,
     originMarker,
     destMarker,
-    originPlace,
-    destPlace,
   }: any = useSelector(selectMapReducer);
   const dispatch = useDispatch();
 
@@ -74,9 +70,13 @@ function RiderSetCourseMap({ setEstimatedDistance, setEstimatedTime }: { setEsti
   const [center, setCenter] = useState({ lat: 0, lng: 0 });
   const [directionResponse, setDirectionResponse] = useState(null);
   const [selectButtonDisplay, setSelectButtonDisplay] = useState('inline-block');
-
+  const count = useRef(0);
   const pickerEl = useRef(null);
 
+  useEffect(() => {
+    count.current = 0;
+  }, [originPosition.lat, originPosition.lng, destPosition.lat, destPosition.lng]);
+
   const onLoad = useCallback((map) => {
     setMap(map);
   }, []);
@@ -109,13 +109,14 @@ function RiderSetCourseMap({ setEstimatedDistance, setEstimatedTime }: { setEsti
     }
   };
 
-  const directionCallback = useCallback((response: any, status: any) => {
-    if (response !== null && status === 'OK') {
+  const directionCallback = (response: any, status: any) => {
+    if (response !== null && status === 'OK' && count.current === 0) {
+      count.current += 1;
       pickerEl.current.style.display = 'none';
       setSelectButtonDisplay('none');
       setDirectionResponse(response);
-    };
-  }, []);
+    }
+  };
 
   useEffect(() => {
     if (originMarker === '') {
@@ -163,7 +164,7 @@ function RiderSetCourseMap({ setEstimatedDistance, setEstimatedTime }: { setEsti
     NEW_MARKER_POS.lat = lat;
     NEW_MARKER_POS.lng = lng;
 
-    const address = await reverseGoecoding({ lat, lng });
+    const address = await reverseGeocoding({ lat, lng });
 
     if (originMarker !== '') {
       return checkDestMarker(address);
@@ -223,8 +224,7 @@ function RiderSetCourseMap({ setEstimatedDistance, setEstimatedTime }: { setEsti
             origin: originPosition,
             travelMode: TravelMode.DRIVING,
           }}
-        />
-        }
+        />}
         {directionResponse &&
         <DirectionsRenderer
           options={{

diff --git a/client/src/components/containers/RiderWaitingModal.tsx b/client/src/components/containers/RiderWaitingModal.tsx
@@ -86,7 +86,7 @@ function RiderWaitingForm() {
 
   useEffect(() => {
     if (data && data.cancelTrip.result === 'canceled') {
-      dispatch(setTrip({ id: '' }));
+      dispatch(setTrip({ id: undefined }));
       history.push('/rider/setcourse');
     }
   }, [data]);