Reduxで観光地と宿泊施設のデータ取得

App.js

@@ -1,11 +1,35 @@
 import React from 'react';
 import { createAppContainer } from 'react-navigation';
+import { createStore, applyMiddleware, compose } from 'redux';
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+import reducer from './src/Reducers/index';
 import Drawer from './src/drawer';
+import { getPostsTour } from './src/Actions/getPostsTour';
+import { getPostsLodging } from './src/Actions/getPostsLodging';
 
 const AppContainer = createAppContainer(Drawer);
 
+const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const store = createStore(
+  reducer,
+  composeEnhancer(applyMiddleware(thunk)),
+);
+
+const doEverything = () => {
+  return dispatch => Promise.all([
+    dispatch(getPostsTour()),
+    dispatch(getPostsLodging()),
+  ]);
+};
+
+store.dispatch(doEverything());
+
 const App = () => (
-  <AppContainer />
+  <Provider store={store}>
+    <AppContainer />
+  </Provider>
 );
 
 export default App;

app.json

@@ -4,7 +4,7 @@
     "description": "This project is really great.",
     "slug": "kanazawaApp-2018",
     "privacy": "public",
-    "sdkVersion": "32.0.0",
+    "sdkVersion": "33.0.0",
     "platforms": ["ios", "android"],
     "version": "1.0.0",
     "orientation": "portrait",

package.json

@@ -11,21 +11,27 @@
   "dependencies": {
     "@expo/vector-icons": "^8.1.0",
     "@turf/destination": "^6.0.1",
+    "cross-fetch": "^3.0.2",
     "date-utils": "^1.2.21",
-    "expo": "^32.0.0",
+    "expo": "^33.0.0",
     "expo-cli": "^2.6.5",
-    "native-base": "^2.11.0",
+    "native-base": "^2.12.1",
     "prop-types": "^15.6.2",
-    "react": "16.5.0",
+    "react": "^16.8.3",
     "react-devtools": "^3.6.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
     "react-native-elements": "^0.19.1",
+    "react-native-indicators": "^0.13.0",
     "react-native-maps": "^0.22.1",
     "react-native-maps-super-cluster": "^1.5.0",
     "react-native-modalbox": "^1.6.0",
     "react-native-vector-icons": "^6.2.0",
     "react-navigation": "^3.0.6",
     "react-navigation-drawer": "^1.1.0",
+    "react-redux": "^5.1.1",
+    "redux": "^4.0.1",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0",
     "xmldom": "^0.1.27"
   },
   "devDependencies": {
@@ -39,6 +45,7 @@
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.11.1",
     "eslint-watch": "^4.0.2",
-    "react-native-dotenv": "^0.2.0"
+    "react-native-dotenv": "^0.2.0",
+    "schedule": "^0.4.0"
   }
 }

src/Actions/getPostsLodging.js

@@ -0,0 +1,166 @@
+import { DOMParser } from 'xmldom';
+import 'date-utils';
+import { API_KEY } from 'react-native-dotenv';
+
+export const GET_POSTS_REQUEST = 'GET_POSTS_REQUEST';
+const getPostsRequest = () => {
+  return {
+    type: GET_POSTS_REQUEST,
+  };
+};
+
+export const GET_POSTS_SUCCESS = 'GET_POSTS_SUCCESS';
+const getPostsSuccess = (data) => {
+  return {
+    type: GET_POSTS_SUCCESS,
+    postslodging: data,
+    receivedAt: Date.now(),
+  };
+};
+
+/* export const GET_POSTS_FAILURE = 'GET_POSTS_FAILURE';
+const getPostsFailure = (error) => {
+  return {
+    type: GET_POSTS_FAILURE,
+    error,
+  };
+}; */
+
+let hotelsData = [];
+let vacancysData = [];
+let lodgingSpotData = [];
+let data = [];
+let start1 = 1;
+let start2 = 1;
+const jalanKey = API_KEY;
+let timeData = 20190726;
+
+lodgingSpot = (url, dispatch) => {
+  const hotelData = [];
+  const parser = new DOMParser();
+  const request = new XMLHttpRequest();
+  request.onreadystatechange = () => {
+    if (request.readyState !== 4) {
+      return;
+    }
+
+    if (request.readyState === 4) {
+      if (request.status === 200) {
+        const sMyString = request.responseText;
+        const dom = parser.parseFromString(sMyString, 'text/xml');
+        const hotels = dom.getElementsByTagName('Hotel');
+
+        for (let i = 0; i < hotels.length; i += 1) {
+          let pictureURL = '';
+          const hotelId = hotels[i].getElementsByTagName('HotelID')[0].textContent;
+          const hotelName = hotels[i].getElementsByTagName('HotelName')[0].textContent;
+          const hotelAddress = hotels[i].getElementsByTagName('HotelAddress')[0].textContent;
+          const hotelURL = hotels[i].getElementsByTagName('HotelDetailURL')[0].textContent;
+          const planSampleRateFrom = hotels[i].getElementsByTagName('SampleRateFrom')[0].textContent;
+          const hotelReview = hotels[i].getElementsByTagName('Rating')[0].textContent;
+          if (hotels[i].getElementsByTagName('PictureURL')[0] !== undefined) {
+            pictureURL = hotels[i].getElementsByTagName('PictureURL')[0].textContent;
+          }
+          const jx = hotels[i].getElementsByTagName('X')[0].textContent / 1000 / 3600;
+          const jy = hotels[i].getElementsByTagName('Y')[0].textContent / 1000 / 3600;
+          const wx = (jx - jy * 0.000046038 - jx * 0.000083043 + 0.010040);
+          const wy = (jy - jy * 0.00010695 + jx * 0.000017464 + 0.0046017);
+
+          hotelData[i] = {
+            HotelID: hotelId,
+            HotelName: hotelName,
+            HotelAddress: hotelAddress,
+            PlanSampleRateFrom: planSampleRateFrom,
+            PictureURL: pictureURL,
+            HotelUrl: hotelURL,
+            HotelReview: hotelReview,
+            X: wx,
+            Y: wy,
+            State: 'noVacancy',
+          };
+        }
+
+        start1 += 100;
+        hotelsData = hotelsData.concat(hotelData);
+        lodgingSpot(`http://jws.jalan.net/APIAdvance/HotelSearch/V1/?key=${jalanKey}&s_area=192002&start=${start1}&count=100&xml_ptn=2`, dispatch);
+      } else if (request.status === 400) {
+        lodgingVacancySpot(`http://jws.jalan.net/APIAdvance/StockSearch/V1/?key=${jalanKey}&s_area=192002&stay_date=${timeData}&start=${start2}&count=100&order=2`, dispatch);
+      }
+    }
+  };
+
+  request.open('GET', url);
+  request.send();
+};
+
+// 宿泊地取得
+lodgingVacancySpot = (url, dispatch) => {
+  let hotelData = [];
+  const parser = new DOMParser();
+  const request = new XMLHttpRequest();
+  request.onreadystatechange = () => {
+    if (request.readyState !== 4) {
+      return;
+    }
+
+    if (request.readyState === 4) {
+      if (request.status === 200) {
+        const sMyString = request.responseText;
+        const dom = parser.parseFromString(sMyString, 'text/xml');
+        const hotels = dom.getElementsByTagName('Plan');
+
+        for (let i = 0; i < hotels.length; i += 1) {
+          let pictureURL = '';
+          const hotelId = hotels[i].getElementsByTagName('HotelID')[0].textContent;
+          const hotelName = hotels[i].getElementsByTagName('HotelName')[0].textContent;
+          const sampleRate = hotels[i].getElementsByTagName('SampleRate')[0].textContent;
+          const hotelAddress = hotels[i].getElementsByTagName('HotelAddress')[0].textContent;
+          const hotelURL = hotels[i].getElementsByTagName('HotelDetailURL')[0].textContent;
+          const hotelReview = hotels[i].getElementsByTagName('Rating')[0].textContent;
+          if (hotels[i].getElementsByTagName('PictureURL')[0] !== undefined) {
+            pictureURL = hotels[i].getElementsByTagName('PictureURL')[0].textContent;
+          }
+          const jx = hotels[i].getElementsByTagName('X')[0].textContent / 1000 / 3600;
+          const jy = hotels[i].getElementsByTagName('Y')[0].textContent / 1000 / 3600;
+          const wx = (jx - jy * 0.000046038 - jx * 0.000083043 + 0.010040);
+          const wy = (jy - jy * 0.00010695 + jx * 0.000017464 + 0.0046017);
+
+          hotelData[i] = {
+            HotelID: hotelId,
+            HotelName: hotelName,
+            PlanSampleRateFrom: sampleRate,
+            HotelAddress: hotelAddress,
+            HotelUrl: hotelURL,
+            PictureURL: pictureURL,
+            HotelReview: hotelReview,
+            X: wx,
+            Y: wy,
+            State: 'vacancy',
+          };
+        }
+
+        hotelData = hotelData.filter((v1, i1, a1) => (a1.findIndex(v2 => (v1.HotelID === v2.HotelID)) === i1));
+        // 100件の空室データから重複したIDを削除(値段が安いのが残る)
+        vacancysData = vacancysData.concat(hotelData);
+        start2 += 100;
+        lodgingVacancySpot(`http://jws.jalan.net/APIAdvance/StockSearch/V1/?key=${jalanKey}&s_area=192002&stay_date=${timeData}&start=${start2}&count=100&order=2`, dispatch);
+      } else if (request.status === 400) {
+        // 全ての空室データから重複したIDを削除(値段が安いのが残る)
+        vacancysData = vacancysData.filter((v1, i1, a1) => (a1.findIndex(v2 => (v1.HotelID === v2.HotelID)) === i1));
+        // 空室データと宿泊施設データを結合し、重複したIDを削除(空室データが優先して残る)
+        lodgingSpotData = vacancysData.concat(hotelsData);
+        lodgingSpotData = lodgingSpotData.filter((v1, i1, a1) => (a1.findIndex(v2 => (v1.HotelID === v2.HotelID)) === i1));
+        dispatch(getPostsSuccess(lodgingSpotData));
+      }
+    }
+  };
+  request.open('GET', url);
+  request.send();
+};
+
+export const getPostsLodging = () => (dispatch) => {
+  dispatch(getPostsRequest());
+
+  lodgingSpot('http://jws.jalan.net/APIAdvance/HotelSearch/V1/?key=${jalanKey}&s_area=192002&start=${start1}&count=100&xml_ptn=2', dispatch);
+
+};

src/Actions/getPostsTour.js

@@ -0,0 +1,66 @@
+import fetch from 'cross-fetch';
+
+export const GET_POSTS_REQ = 'GET_POSTS_REQ';
+const getPostsRequest = () => {
+  return {
+    type: GET_POSTS_REQ,
+  };
+};
+
+export const GET_POSTS_SUC = 'GET_POSTS_SUC';
+const getPostsSuccess = (data) => {
+  return {
+    type: GET_POSTS_SUC,
+    posts: data,
+    receivedAt: Date.now(),
+  };
+};
+
+export const GET_POSTS_FAI = 'GET_POSTS_FAI';
+const getPostsFailure = (error) => {
+  return {
+    type: GET_POSTS_FAI,
+    error,
+  };
+};
+
+let tour = [];
+
+const touristSpot = (url, dispatch) => {
+  fetch(url)
+    .then((res) => {
+      if (res.status >= 400) {
+        throw new Error('Bad response from server');
+      }
+      return res.json();
+    })
+    .then((json) => {
+      tour = tour.concat(json.facilities);
+      if (json.next_page !== undefined) {
+        touristSpot(json.next_page, dispatch);
+      } else {
+        dispatch(getPostsSuccess(tour));
+      }
+    })
+    .catch((error) => {
+      dispatch(getPostsFailure(error));
+    });
+};
+
+export const getPostsTour = () => (dispatch) => {
+  dispatch(getPostsRequest);
+
+  return fetch('https://infra-api.city.kanazawa.ishikawa.jp/facilities/search.json?lang=ja&page=1&count=50&area=1&genre=1')
+    .then((res) => {
+      if (res.status >= 400) {
+        throw new Error('Bad response from server');
+      }
+      return res.json();
+    })
+    .then((json) => {
+      tour = tour.concat(json.facilities);
+      if (json.next_page !== undefined) {
+        touristSpot(json.next_page, dispatch);
+      }
+    });
+};

src/Actions/index.js

@@ -0,0 +1,34 @@
+export const SEND_FILTER_TEXT = 'SEND_FILTER_TEXT';
+export const sendFilterText = (text) => {
+  // console.log(filterText);
+  return {
+    type: SEND_FILTER_TEXT,
+    payload: {
+      text,
+    },
+  };
+};
+
+export const MODAL_IS_OPEN = 'MODAL_IS_OPEN';
+export const modalIsOpen = () => {
+  return {
+    type: MODAL_IS_OPEN,
+  };
+};
+
+export const TOGGLE_MODAL_IS_OPEN = 'TOGGLE_MODAL_IS_OPEN';
+export const toggelModalIsOpen = () => {
+  return {
+    type: TOGGLE_MODAL_IS_OPEN,
+  };
+};
+
+export const SAVE_HOTEL_DATA = 'SAVE_HOTEL_DATA';
+export const saveHotelData = (hotelData) => {
+  return {
+    type: SAVE_HOTEL_DATA,
+    payload: {
+      hotelData,
+    },
+  };
+};

src/Container/Map.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import { modalIsOpen, saveHotelData } from '../Actions/index';
+import Map from '../Map';
+
+const mapStateToProps = (state) => {
+  return {
+    tourdata: state.postTour.items,
+    lodgingdata: state.postLodging.items,
+  };
+};
+
+const mapDispatchToProps = dispatch => ({
+  modalIsOpen() {
+    dispatch(modalIsOpen());
+  },
+  saveHotelData(hotelData) {
+    dispatch(saveHotelData(hotelData));
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Map);

src/Container/detailScreen.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import DetailScreen from '../detailScreen';
+
+const mapStateToProps = (state) => {
+  return {
+    hotelData: state.hotelData.hotelData,
+  };
+};
+
+export default connect(mapStateToProps)(DetailScreen);