write CountryOrCity subComponent

Relates #8

client/src/components/StepsQuestions/index.js

@@ -22,23 +22,34 @@ export default class StepsQuestions extends React.Component {
   handleStateChange = ({ key, value }) =>
     this.setState(({ data }) => ({ data: { ...data, [key]: value } }));
 
-  renderContent = () =>
-    questionsAndComponents.map(
-      ({ content: Component, stepNo, key, question }) => {
-        const { data } = this.state;
-        return (
-          <div key={`content${stepNo}`}>
-            <p>{question}</p>
-            <Component
-              value={data[key]}
-              handleStateChange={value =>
-                this.handleStateChange({ key, value })
-              }
-            />
-          </div>
-        );
+  renderContent = currentStep => {
+    const {
+      data,
+      data: { country },
+    } = this.state;
+    return questionsAndComponents.map(
+      ({ content: Component, stepNo, key, question, options = {} }) => {
+        const newOptions = { ...options };
+        if (key === 'city') {
+          newOptions.countrySelected = country;
+        }
+        if (currentStep === stepNo)
+          return (
+            <div key={`content${stepNo}`}>
+              <p>{question}</p>
+              <Component
+                options={newOptions}
+                value={data[key]}
+                handleStateChange={value =>
+                  this.handleStateChange({ key, value })
+                }
+              />
+            </div>
+          );
+        return '';
       }
     );
+  };
 
   renderSteps = () => {
     const { currentStep } = this.state;
@@ -66,7 +77,7 @@ export default class StepsQuestions extends React.Component {
     return (
       <div>
         {this.renderSteps()}
-        {this.renderContent()}
+        {this.renderContent(currentStep)}
         <div className="form-controls">
           {currentStep > 0 && (
             <button type="button" onClick={this.prev}>

client/src/components/StepsQuestions/subcomponents/CountryOrCity.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Select } from 'antd';
+import { getCountryNames, getCities } from 'full-countries-cities';
+
+const renderOptions = list => {
+  const { Option } = Select;
+
+  return list.map(item => (
+    <Option key={item} value={item}>
+      {item}
+    </Option>
+  ));
+};
+
+const dropDownFilter = (input, option) =>
+  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+
+const CountryOrCity = ({
+  value,
+  handleStateChange,
+  options: { type, countrySelected = '' },
+}) => {
+  let data;
+  if (type === 'city') {
+    data = countrySelected ? getCities(countrySelected) : [];
+  }
+  if (type === 'country') {
+    data = getCountryNames();
+  }
+  return (
+    <Select
+      className="ant-select-country country-w-city"
+      showSearch
+      placeholder="Select"
+      optionFilterProp="children"
+      value={value}
+      onChange={newValue => handleStateChange(newValue)}
+      filterOption={dropDownFilter}
+    >
+      {renderOptions(data)}
+    </Select>
+  );
+};
+
+CountryOrCity.propTypes = {
+  value: PropTypes.string.isRequired,
+  handleStateChange: PropTypes.func.isRequired,
+  options: PropTypes.shape({
+    type: PropTypes.string.isRequired,
+    countrySelected: PropTypes.string,
+  }).isRequired,
+};
+
+export default CountryOrCity;

client/src/components/StepsQuestions/subcomponents/WelcomeMessage.js

@@ -1,26 +1,9 @@
-// import React from 'react';
-// import { Radio } from 'antd';
+import React from 'react';
 
-// const BusinessTypes = Object.freeze({
-//   stay: 'place to stay',
-//   eat: 'place to eat or drink',
-//   shop: 'place to shop',
-// });
-// export default (values, handleStateChange) => (
-//   <div>
-//     <Radio.Group value={values.businessType} buttonStyle="solid">
-//       {Object.entries(BusinessTypes).map(([key, value]) => (
-//         <Radio.Button
-//           key={key}
-//           value={key}
-//           onClick={
-//             event => {}
-//             // handleStateChange({ businessType: event.target.value })
-//           }
-//         >
-//           {value}
-//         </Radio.Button>
-//       ))}
-//     </Radio.Group>
-//   </div>
-// );
+const Welcome = () => (
+  <div>
+    <h2>Hi, Welcome </h2>
+  </div>
+);
+
+export default Welcome;

client/src/components/StepsQuestions/subcomponents/index.js

@@ -1,4 +1,6 @@
+import WelcomeMessage from './WelcomeMessage';
 import TypeQuestion from './TypeQuestion';
 import InputQuestion from './InputQuestion';
+import CountryOrCity from './CountryOrCity';
 
-export default { TypeQuestion, InputQuestion };
+export default { TypeQuestion, InputQuestion, CountryOrCity, WelcomeMessage };

client/src/staticDataSet/questions.js

@@ -1,5 +1,20 @@
 export default [
-  { stepNo: 0, key: 'name', question: 'name?', type: 'InputQuestion' },
-  { stepNo: 1, key: 'link', question: 'link?', type: 'InputQuestion' },
-  { stepNo: 2, key: 'type', question: 'something?', type: 'TypeQuestion' },
+  { stepNo: 0, key: 'welcome', question: 'welcome', type: 'WelcomeMessage' },
+  { stepNo: 1, key: 'name', question: 'name?', type: 'InputQuestion' },
+  { stepNo: 2, key: 'link', question: 'link?', type: 'InputQuestion' },
+  {
+    stepNo: 3,
+    key: 'country',
+    question: 'something?',
+    type: 'CountryOrCity',
+    options: { type: 'country' },
+  },
+  {
+    stepNo: 4,
+    key: 'city',
+    question: 'something?',
+    type: 'CountryOrCity',
+    options: { type: 'city' },
+  },
+  { stepNo: 5, key: 'type', question: 'something?', type: 'TypeQuestion' },
 ];