Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c7771e3

Browse files
committed
refactor with code documentation
1 parent 607e443 commit c7771e3

File tree

9 files changed

+35
-44
lines changed

9 files changed

+35
-44
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
- [Not Found Page](react-js/NotFound.js)
2626

2727
## Python
28-
- [Google Cloud Pub/Sub](python/pubsub.py)
28+
- [Google Cloud Pub/Sub Publishing messages](python/pubsub.py)
2929
- [Dockerize Flask App](python/Dockerfile)
3030
- [Cython Compile File Generator](python/compile.py)
3131
- [Camera Live Streaming with Flask and Open-CV](python/camera.py)

‎python/pubsub.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
# pip install google-cloud-pubsub
12
import os, json
23
from google.cloud import pubsub_v1
34
from google.auth import jwt

‎react-js/api/APIAsyncDataList.js‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1+
//npm install axios
12
import React, { Component } from 'react';
2-
import { Link} from 'react-router-dom';
3-
4-
import api from '../../api';
5-
3+
import { axios } from 'axios';
64
class TodoList extends Component {
75
constructor(props) {
86
super(props);
@@ -16,7 +14,7 @@ class TodoList extends Component {
1614
}
1715

1816
getData = async () => {
19-
const response = await api.endpoint("api route").getAll();
17+
const response = await axios.get("api route");
2018
this.setState({todos: response.data});
2119
setTimeout(this.getData, 1000); /*auto request to endpoint every second to fetch data*/
2220
};
@@ -32,9 +30,7 @@ class TodoList extends Component {
3230
<h2>Todo List</h2>
3331
{todos.map((todo, index) => (
3432
<div key={index}>
35-
<h4>
36-
<Link to={`/todo/${todo._id}`}>{todo.title}</Link>
37-
</h4>
33+
3834
<p> {todo.body}</p>
3935
</div>
4036
))}

‎react-js/api/APIDataList.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1+
//npm install axios
12
import React, { Component } from 'react';
2-
import { Link} from 'react-router-dom';
3-
4-
import api from '../../api';
53

64
class TodoList extends Component {
75
constructor(props) {
@@ -12,7 +10,7 @@ class TodoList extends Component {
1210
}
1311

1412
componentDidMount() {
15-
api.todos().getAll()
13+
axios.get("api endpoint route")
1614
.then(response => this.setState({ todos: response.data }))
1715
}
1816

@@ -26,9 +24,7 @@ class TodoList extends Component {
2624
<h2>Todo List</h2>
2725
{todos.map((todo, index) => (
2826
<div key={index}>
29-
<h4>
30-
<Link to={`/todo/${todo._id}`}>{todo.title}</Link>
31-
</h4>
27+
3228
<p> {todo.body}</p>
3329
</div>
3430
))}

‎react-js/api/ApiAdd.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
//npm install axios
12
import React, { Component } from 'react';
2-
import apifrom '../../api';
3+
import {axios}from 'axios';
34

45
class AddTodo extends Component {
56
constructor(props) {
@@ -23,12 +24,13 @@ class AddTodo extends Component {
2324
const {title, body} = this.state;
2425
// define state variable for use in return
2526
//and store in state value
26-
api.todos().create({ title: title, body: body})
27+
const data = { title: title, body: body};
28+
axios.post("your api endpoint route" , data) //post your data
2729
.then(this.setState({ //clear inputs after submit
2830
title: "",
2931
body: ""
3032
}))
31-
.then(response => this.props.history.push('/'));
33+
.then(response => this.props.history.push('/')); //redirect to route
3234
}
3335

3436
render() {

‎react-js/api/ApiEdit.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
//npm install axios
12
import React, { Component } from "react";
2-
3-
import api from "../../api";
3+
import { axios } from 'axios';
44

55
class APIEdit extends Component {
66
constructor(props) {
@@ -12,8 +12,8 @@ class APIEdit extends Component {
1212
}
1313

1414
componentDidMount() {
15-
const todoId = this.props.match.params;
16-
api.todos().getOne(todoId)
15+
const id = "your id like 1245";
16+
axios.get("your api endpoint route",id)
1717
.then(response => this.setState({
1818
title: response.data.title,
1919
body: response.data.body
@@ -24,10 +24,10 @@ class APIEdit extends Component {
2424
}
2525
onSubmit = (e) => {
2626
e.preventDefault() //prevent load
27-
const todoId = this.props.match.params;
2827
// get our form data out of state
2928
const { title, body } = this.state; // define state variable for use in return and store in state value
30-
api.todos().update(todoId, { title: title, body: body })
29+
data = { title: title, body: body }
30+
axios.put("your api endpoint route", data) // url and update data pass through put axios method
3131
.then(response => this.props.history.push('/'));
3232
}
3333

‎react-js/api/ApiHelper.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
//npm install axios
12
import axios from "axios"; /* npm install axios*/
23
/* description: this function for callback api endpoint
34
contains GET,POST,PUT, DELETE requests via axios package
@@ -13,7 +14,7 @@ import axios from "axios"; /* npm install axios*/
1314

1415
export default {
1516
endpoint(url) {
16-
url = "base url"+ url; //concat base url and url with base api endpoint
17+
url = "base api endpoint url"+ url; //concat base url and url with base api endpoint
1718
return {
1819
getOne: (id) => axios.get(url + `/${id}`), //id_url
1920
getAll: () => axios.get(url),

‎react-js/api/ApiTodo.js‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1+
//npm install axios
12
import React, { Component } from "react";
2-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3-
import {Link} from 'react-router-dom';
3+
import { axios } from 'axios';
44

5-
import api from "../../api";
65

76
class APITodo extends Component {
87
constructor(props) {
@@ -13,13 +12,14 @@ class APITodo extends Component {
1312
}
1413

1514
componentDidMount() {
16-
const todoId = this.props.match.params;
17-
api.todos().getOne(todoId)
15+
const id = "your id like 1245";
16+
axios.get("your api endpoint route",id)
1817
.then(response => this.setState({ todo: response.data }));
1918
}
2019
onDelete = () => {
21-
const todoId = this.props.match.params;
22-
api.todos().delete(todoId)
20+
// const todoId = this.props.match.params;
21+
const todoId = "your deleted id like 123";
22+
axios.delete("your api endpoint route", id) //id for specific data delete
2323
.then(response => this.props.history.push('/'));
2424
}
2525

@@ -31,10 +31,7 @@ class APITodo extends Component {
3131
<div className="row mt-5">
3232
<div className="col-lg-8 offset-lg-2">
3333
<h4> {todo.title}
34-
<Link to={`/todo/edit/${todo._id}`}>
35-
<FontAwesomeIcon icon="edit" className="ml-5" />
36-
</Link>
37-
<FontAwesomeIcon icon="trash" onClick={this.onDelete} className="float-right mr-5" />
34+
3835
</h4>
3936
<p> {todo.body}</p>
4037
</div>

‎react-js/api/ExampleApi.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
// api.js file contains this code
2-
// note: npm install axios
1+
// note: if axios install it by npm install axios
32
const axios = require('axios')
43

54
const baseUrl = "http://127.0.0.1:5000/";
65
const todos = baseUrl + "todos";
76

87
export default {
9-
endpointFetch() {
8+
endpointLoadWithFetch() {
109
return {
1110
getOne: ({ id }) => fetch(todos + `/${id}`), //id_url
1211
getAll: () => fetch(todos), //url
@@ -16,7 +15,7 @@ export default {
1615
}
1716

1817
},
19-
endpointFetch() {
18+
endpointLoadWithAxios() {
2019
return {
2120
getOne: ({id}) => axios.get(todos + `/${id}`), //id_url
2221
getAll: () => axios.get(todos),
@@ -26,13 +25,12 @@ export default {
2625
}
2726
}
2827
}
29-
//[Example Component](react-js/ApiIntegration.js)
3028
// componentDidMount(){
31-
// api.todosFetch().getAll()
29+
// endpointLoadWithAxios().getAll()
3230
// .then(response => response.json() //fetch method need to convert json
3331
// .then(data => this.setState({ todos: data }))); //define converted data state variable
3432
//}
3533
// componentDidMount(){
36-
// api.todosAxios().getAll()
34+
// endpointLoadWithAxios().getAll()
3735
// .then(response => this.setState({ axiosTodos: response.data }))
3836
//}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /