Merge pull request #179 from keita-makino/qualtrics-patch

3.0.1 1

src/components/Container.tsx

@@ -34,10 +34,6 @@ export const Container: React.FC<Props> = (props) => {
         type: 'MAP_MOVE',
         location: props.view.location,
       });
-      update({
-        type: 'SET_ACCESS_TOKEN',
-        accessToken: props.accessToken,
-      });
     } else {
       geocoderService
         .forwardGeocode({
@@ -54,10 +50,6 @@ export const Container: React.FC<Props> = (props) => {
               },
             });
           }
-          update({
-            type: 'SET_ACCESS_TOKEN',
-            accessToken: props.accessToken,
-          });
         });
     }
 
@@ -93,7 +85,7 @@ export const Container: React.FC<Props> = (props) => {
   return (
     <Grid container>
       <InputForm />
-      <Map />
+      <Map accessToken={props.accessToken} />
       <ClearButton />
     </Grid>
   );

src/components/Map.tsx

@@ -6,21 +6,24 @@ import mapboxgl from 'mapbox-gl'; // eslint-disable-line import/no-webpack-loade
 import styled from '@emotion/styled';
 import { useStandbyIndex } from '../uses/useStandbyIndex';
 
-export const Map: React.FC = () => {
+type Props = {
+  accessToken: string;
+};
+
+export const Map: React.FC<Props> = (props: Props) => {
   const update = useUpdate();
   const state = useTrackedState();
-  const index = useStandbyIndex();
 
   const mapContainer = useRef<any>(null);
 
   useEffect(() => {
-    if (!mapContainer.current || !state.accessToken) return;
+    if (!mapContainer.current || !props.accessToken) return;
     const newMap = new mapboxgl.Map({
       container: mapContainer.current,
       style: 'mapbox://styles/mapbox/streets-v12',
       center: [state.view.location.lng, state.view.location.lat],
       zoom: state.view.zoom,
-      accessToken: state.accessToken,
+      accessToken: props.accessToken,
     });
 
     newMap.on('click', (event: any) => {
@@ -58,7 +61,7 @@ export const Map: React.FC = () => {
       type: 'INITIALIZE_MAP',
       map: newMap,
     });
-  }, [mapContainer, state.accessToken]);
+  }, [mapContainer, props.accessToken]);
 
   useEffect(() => {
     if (state.markers.length === 0 && state.inputs.length > 0 && state.map) {

src/index.tsx

@@ -4,31 +4,31 @@ import { Container } from './components';
 import { Provider } from './store';
 
 const mapRender = (
-  apiKey: string,
+  accessToken: string,
   target: HTMLElement,
   defaultView?: {
     location: { lat: number; lng: number };
     zoom: number;
-  }
+  },
 ) => {
   const container = document.createElement('div');
   container.setAttribute('id', `MapContainer${target.id}`);
 
   target.getElementsByClassName('ChoiceStructure')[0].appendChild(container);
 
   const directionContainer = target.querySelectorAll(
-    '[role*=presentation]'
+    '[role*=presentation]',
   )[0] as HTMLElement;
 
   render(
     <Provider>
       <Container
-        accessToken={apiKey}
+        accessToken={accessToken}
         directionContainer={directionContainer}
         view={defaultView}
       />
     </Provider>,
-    document.getElementById(`MapContainer${target.id}`)
+    document.getElementById(`MapContainer${target.id}`),
   );
   directionContainer.style.display = 'none';
 };

src/store/index.ts

@@ -8,7 +8,6 @@ import { MapiRequest } from '@mapbox/mapbox-sdk/lib/classes/mapi-request';
 import { reducer } from './reducer';
 
 export type GlobalState = {
-  accessToken?: string;
   inputs: Input[];
   map?: Map;
   view: View;
@@ -18,7 +17,6 @@ export type GlobalState = {
 };
 
 const initialState: GlobalState = {
-  accessToken: undefined,
   inputs: [],
   map: undefined,
   view: {
@@ -31,10 +29,6 @@ const initialState: GlobalState = {
 };
 
 export type Action =
-  | {
-      type: 'SET_ACCESS_TOKEN';
-      accessToken: string;
-    }
   | {
       type: 'ADD_INPUTS';
       inputs: Input[];

src/store/reducer.ts

@@ -5,11 +5,6 @@ import { mapClick } from './mapClick';
 
 export const reducer = (state: GlobalState, action: Action): GlobalState => {
   switch (action.type) {
-    case 'SET_ACCESS_TOKEN':
-      return {
-        ...state,
-        accessToken: action.accessToken,
-      };
     case 'INITIALIZE_GEOCODER': {
       return {
         ...state,