Servise

src/CustomerDetails.js

@@ -1,56 +1,57 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import Panel from 'react-bootstrap/lib/Panel'
-import axios from 'axios'
+// Видалено: import axios from 'axios'
+import { getCustomerDetailData } from './services/CustomerService';
 
-//This Component is a child Component of Customers Component
+// This Component is a child Component of Customers Component
 export default class CustomerDetails extends Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {}
-  }
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
 
-  //Function which is called when the component loads for the first time
-  componentDidMount() {
-    this.getCustomerDetails(this.props.val)
-  }
+    // Function which is called when the component loads for the first time
+    componentDidMount() {
+        this.getCustomerDetails(this.props.val)
+    }
 
-  //Function which is called whenver the component is updated
-  componentDidUpdate(prevProps) {
+    // Function which is called whenver the component is updated
+    componentDidUpdate(prevProps) {
 
-    //get Customer Details only if props has changed
-    if (this.props.val !== prevProps.val) {
-      this.getCustomerDetails(this.props.val)
+        // get Customer Details only if props has changed
+        if (this.props.val !== prevProps.val) {
+            this.getCustomerDetails(this.props.val)
+        }
     }
-  }
 
-  //Function to Load the customerdetails data from json.
-  getCustomerDetails(id) {
-    axios.get('assets/samplejson/customer' + id + '.json').then(response => {
-      this.setState({customerDetails: response})
-    })
-  };
+    // Function to Load the customerdetails data from json. - тепер використовує сервіс
+    getCustomerDetails = (id) => {
+        getCustomerDetailData(id).then(response => {
+            this.setState({customerDetails: response})
+        })
+    };
 
-  render() {
-    if (!this.state.customerDetails)
-      return (<p>Loading Data</p>)
-    return (<div className="customerdetails">
-      <Panel bsStyle="info" className="centeralign">
-        <Panel.Heading>
-          <Panel.Title componentClass="h3">{this.state.customerDetails.data.name}</Panel.Title>
-        </Panel.Heading>
-        <Panel.Body>
-          <p>Name : {this.state.customerDetails.data.name}</p>
-          <p>Email : {this.state.customerDetails.data.email}</p>
-          <p>Phone : {this.state.customerDetails.data.phone}</p>
-          <p>City : {this.state.customerDetails.data.city}</p>
-          <p>State : {this.state.customerDetails.data.state}</p>
-          <p>Country : {this.state.customerDetails.data.country}</p>
-          <p>Organization : {this.state.customerDetails.data.organization}</p>
-          <p>Job Profile : {this.state.customerDetails.data.jobProfile}</p>
-          <p>Additional Info : {this.state.customerDetails.data.additionalInfo}</p>
-        </Panel.Body>
-      </Panel>
-    </div>)
-  }
-}
+    render() {
+        if (!this.state.customerDetails)
+            return (<p>Loading Data</p>)
+        return (<div className="customerdetails">
+            <Panel bsStyle="info" className="centeralign">
+                <Panel.Heading>
+                    <Panel.Title componentClass="h3">{this.state.customerDetails.data.name}</Panel.Title>
+                </Panel.Heading>
+                <Panel.Body>
+                    <p>Name : {this.state.customerDetails.data.name}</p>
+                    <p>Email : {this.state.customerDetails.data.email}</p>
+                    <p>Phone : {this.state.customerDetails.data.phone}</p>
+                    <p>City : {this.state.customerDetails.data.city}</p>
+                    <p>State : {this.state.customerDetails.data.state}</p>
+                    <p>Country : {this.state.customerDetails.data.country}</p>
+                    <p>Organization : {this.state.customerDetails.data.organization}</p>
+                    <p>Job Profile : {this.state.customerDetails.data.jobProfile}</p>
+                    <p>Additional Info : {this.state.customerDetails.data.additionalInfo}</p>
+                </Panel.Body>
+            </Panel>
+        </div>)
+    }
+}

src/Customers.js

@@ -2,57 +2,62 @@ import React, {Component} from 'react';
 import Panel from 'react-bootstrap/lib/Panel'
 import Button from 'react-bootstrap/lib/Button'
 import CustomerDetails from './CustomerDetails'
-import axios from 'axios'
+// Видалено: import axios from 'axios'
+import { getCustomerListData } from './services/CustomerService';
 
 export default class Customers extends Component {
 
-  constructor(props) {
-    super(props)
-    this.state = {
-      selectedCustomer: 1
-    }
-  }
-
-  //function which is called the first time the component loads
-  componentDidMount() {
-    this.getCustomerData();
-  }
-
-  //Function to get the Customer Data from json
-  getCustomerData() {
-    axios.get('assets/samplejson/customerlist.json').then(response => {
-      this.setState({customerList: response})
-    })
-  };
-
-  render() {
-    if (!this.state.customerList)
-      return (<p>Loading data</p>)
-    return (<div className="addmargin">
-      <div className="col-md-3">
-        {
-
-          this.state.customerList.data.map(customer => <Panel bsStyle="info" key={customer.name} className="centeralign">
-            <Panel.Heading>
-              <Panel.Title componentClass="h3">{customer.name}</Panel.Title>
-            </Panel.Heading>
-            <Panel.Body>
-              <p>{customer.email}</p>
-              <p>{customer.phone}</p>
-              <Button bsStyle="info" onClick={() => this.setState({selectedCustomer: customer.id})}>
-
-                Click to View Details
-
-              </Button>
-
-            </Panel.Body>
-          </Panel>)
+    constructor(props) {
+        super(props)
+        this.state = {
+            selectedCustomer: 1
         }
-      </div>
-      <div className="col-md-6">
-        <CustomerDetails val={this.state.selectedCustomer}/>
-      </div>
-    </div>)
-  }
-
-}
+    }
+
+    // function which is called the first time the component loads
+    componentDidMount() {
+        this.getCustomerData();
+    }
+
+    // Function to get the Customer Data from json - тепер використовує сервіс
+    getCustomerData = () => {
+        // Викликаємо функцію з сервісу, яка робить запит
+        getCustomerListData().then(response => {
+            // Оновлюємо стан, як і раніше
+            this.setState({customerList: response})
+        })
+        // NOTE: Краще використовувати стрілочну функцію для методу класу,
+        // щоб уникнути проблем з 'this' при його передачі.
+    };
+
+    render() {
+        if (!this.state.customerList)
+            return (<p>Loading data</p>)
+        return (<div className="addmargin">
+            <div className="col-md-3">
+                {
+
+                    this.state.customerList.data.map(customer => <Panel bsStyle="info" key={customer.name} className="centeralign">
+                        <Panel.Heading>
+                            <Panel.Title componentClass="h3">{customer.name}</Panel.Title>
+                        </Panel.Heading>
+                        <Panel.Body>
+                            <p>{customer.email}</p>
+                            <p>{customer.phone}</p>
+                            <Button bsStyle="info" onClick={() => this.setState({selectedCustomer: customer.id})}>
+
+                                Click to View Details
+
+                            </Button>
+
+                        </Panel.Body>
+                    </Panel>)
+                }
+            </div>
+            <div className="col-md-6">
+                <CustomerDetails val={this.state.selectedCustomer}/>
+            </div>
+        </div>)
+    }
+
+}

src/services/CustomerService.js

@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+export const getCustomerListData = () => {
+    return axios.get('assets/samplejson/customerlist.json');
+};
+
+export const getCustomerDetailData = (id) => {
+    return axios.get(`assets/samplejson/customer${id}.json`);
+};