Commit 62232da

committed

add async request

1 parent df949b5 commit 62232daCopy full SHA for 62232da

File tree

+79

-21

lines changed

+79

-21

lines changed

Lines changed: 3 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -7,10 +7,11 @@`
`7`	`7`	`- [Select Single Checkbox](js/single-checkbox-selection.js)`
`8`	`8`	`- [Date Time](js/datetime.js)`
`9`	`9`	`## React JS`
`10`		`-- [Exportable API Endpoint](react-js/api/Api.js)`
`11`		`-- [Example API Routes ](react-js/api/ExampleApi.js)`
	`10`	`+- [Exportable API Endpoint](react-js/api/ApiHelper.js)`
	`11`	`+- [Example API Helper Routes ](react-js/api/ExampleApi.js)`
`12`	`12`	`- [API Integration Add Component](react-js/api/ApiAdd.js)`
`13`	`13`	`- [API Integration Data List Component](react-js/api/APIDataList.js)`
	`14`	`+- [Async API Integration Data List Component](react-js/api/APIAsyncDataList.js)`
`14`	`15`	`- [API Integration Edit Component](react-js/api/ApiEdit.js)`
`15`	`16`	`- [API Integration Delete Component](react-js/api/ApiTodo.js)`
`16`	`17`	`- [Basic API Integration with Fetch and Axios](react-js/fetch-axios.js)`

Lines changed: 48 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,48 @@`
	`1`	`+import React, { Component } from 'react';`
	`2`	`+import { Link} from 'react-router-dom';`
	`3`	`+`
	`4`	`+import api from '../../api';`
	`5`	`+`
	`6`	`+class TodoList extends Component {`
	`7`	`+ constructor(props) {`
	`8`	`+ super(props);`
	`9`	`+ this.state = {`
	`10`	`+ todos: []`
	`11`	`+ };`
	`12`	`+ }`
	`13`	`+`
	`14`	`+ async componentDidMount() {`
	`15`	`+ await this.getTimesheetData()`
	`16`	`+ }`
	`17`	`+`
	`18`	`+ getData = async () => {`
	`19`	`+ const response = await api.endpoint("api route").getAll();`
	`20`	`+ this.setState({todos: response.data});`
	`21`	`+ setTimeout(this.getData, 1000); /auto request to end point every second/`
	`22`	`+ };`
	`23`	`+`
	`24`	`+`
	`25`	`+ render() {`
	`26`	`+ const { todos } = this.state;`
	`27`	`+`
	`28`	`+ return (`
	`29`	`+ <div className="container">`
	`30`	`+ <div className="row">`
	`31`	`+ <div className="col-lg-8 offset-lg-2">`
	`32`	`+ <h2>Todo List</h2>`
	`33`	`+ {todos.map((todo, index) => (`
	`34`	`+ <div key={index}>`
	`35`	`+ <h4>`
	`36`	+ <Link to={`/todo/${todo._id}`}>{todo.title}</Link>
	`37`	`+ </h4>`
	`38`	`+ <p> {todo.body}</p>`
	`39`	`+ </div>`
	`40`	`+ ))}`
	`41`	`+ </div>`
	`42`	`+ </div>`
	`43`	`+ </div>`
	`44`	`+ );`
	`45`	`+ }`
	`46`	`+}`
	`47`	`+`
	`48`	`+export default TodoList;`

Lines changed: 0 additions & 17 deletions

This file was deleted.

Lines changed: 26 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,26 @@`
	`1`	`+import axios from "axios"; /* npm install axios*/`
	`2`	`+/* description: this function for callback api endpoint`
	`3`	`+ contains GET,POST,PUT, DELETE requests via axios package`
	`4`	`+ params: id , data`
	`5`	`+ - getOne method need only id params`
	`6`	`+ - getAll method no need any param`
	`7`	`+ - create method need only data param`
	`8`	`+ - updateByID method need both id and data params`
	`9`	`+ - update method need only data param`
	`10`	`+ - delete method also need only id param`
	`11`	`+ return: getOne, getAll, updateByID, update, delete`
	`12`	`+*/`
	`13`	`+`
	`14`	`+export default {`
	`15`	`+ endpoint(url) {`
	`16`	`+ url = "base url"+ url; //concat base url and url with base api endpoint`
	`17`	`+ return {`
	`18`	+ getOne: (id) => axios.get(url + `/${id}`), //id_url
	`19`	`+ getAll: () => axios.get(url),`
	`20`	`+ create: (data) => axios.post(url, data), //url, data`
	`21`	+ updateByID: (id, data) => axios.put(url + `/${id}`, data), //url, data
	`22`	`+ update: (data) => axios.put(url, data), // without id`
	`23`	+ delete: (id) => axios.delete(url + `/${id}`),
	`24`	`+ }`
	`25`	`+ },`
	`26`	`+}`

Lines changed: 2 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ const baseUrl = "http://127.0.0.1:5000/";`
`6`	`6`	`const todos = baseUrl + "todos";`
`7`	`7`
`8`	`8`	`export default {`
`9`		`- todosFetch() {`
	`9`	`+ endpointFetch() {`
`10`	`10`	`return {`
`11`	`11`	getOne: ({ id }) => fetch(todos + `/${id}`), //id_url
`12`	`12`	`getAll: () => fetch(todos), //url`
`@@ -16,7 +16,7 @@ export default {`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`},`
`19`		`- todosAxios() {`
	`19`	`+ endpointFetch() {`
`20`	`20`	`return {`
`21`	`21`	getOne: ({id}) => axios.get(todos + `/${id}`), //id_url
`22`	`22`	`getAll: () => axios.get(todos),`

Comments

(0)