add query

Relates #5

client/package.json

@@ -15,13 +15,15 @@
   "private": true,
   "dependencies": {
     "antd": "^3.24.3",
+    "apollo-boost": "^0.4.4",
     "axios": "^0.19.0",
     "babel-eslint": "^9.0.0",
     "esri-leaflet-geocoder": "^2.3.1",
     "leaflet": "^1.5.1",
     "moment": "^2.24.0",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
+    "react-apollo": "^3.1.3",
     "react-dom": "^16.9.0",
     "react-helmet": "^5.2.1",
     "react-notifications": "^1.4.3",

client/src/components/common/Filter/index.js

@@ -1,8 +1,11 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/prop-types */
 import React, { Component } from 'react';
-import axios from 'axios';
 import PropTypes from 'prop-types';
+import { graphql } from 'react-apollo';
 import { Select, Form, Button, Switch, notification } from 'antd';
 
+import getCities from '../../query';
 import Loader from '../Loader';
 import { types, ranges } from './staticData';
 import './style.css';
@@ -15,9 +18,17 @@ class Filter extends Component {
   };
 
   componentDidMount = async () => {
-    const result = await axios.get('/api/v1/cities');
-    const availableCities = result.data.data;
-    this.setState({ cities: availableCities });
+    // when data is reseved
+    const {
+      data,
+      data: { loading },
+    } = this.props;
+    if (!loading) {
+      // this.setState({ cities: availableCities });
+    }
+    // will removed
+    // const result = await axios.get('/api/v1/cities');
+    // const availableCities = result.data.data;
   };
 
   handleSubmit = e => {
@@ -130,4 +141,4 @@ Filter.propTypes = {
   disabled: PropTypes.bool.isRequired,
   handleSubmit: PropTypes.func.isRequired,
 };
-export default WrappedRegistrationForm;
+export default graphql(getCities)(WrappedRegistrationForm);

client/src/components/query.js

@@ -0,0 +1,11 @@
+import { gql } from 'apollo-boost';
+
+const citiesQuery = gql`
+  {
+    AllTherapists {
+      city
+    }
+  }
+`;
+
+export default citiesQuery;