refactor with code documentation

Author: akmamun

README.md

@@ -25,7 +25,7 @@
 - [Not Found Page](react-js/NotFound.js) 
 
 ## Python 
-- [Google Cloud Pub/Sub](python/pubsub.py)
+- [Google Cloud Pub/Sub Publishing messages](python/pubsub.py)
 - [Dockerize Flask App](python/Dockerfile)
 - [Cython Compile File Generator](python/compile.py)
 - [Camera Live Streaming with Flask and Open-CV](python/camera.py)

python/pubsub.py

@@ -1,3 +1,4 @@
+# pip install google-cloud-pubsub
 import os, json
 from google.cloud import pubsub_v1
 from google.auth import jwt

react-js/api/APIAsyncDataList.js

@@ -1,8 +1,6 @@
+//npm install axios
 import React, { Component } from 'react';
-import { Link} from 'react-router-dom';
-
-import api  from '../../api';
- 
+import { axios } from 'axios'; 
 class TodoList extends Component {
     constructor(props) {
         super(props);
@@ -16,7 +14,7 @@ class TodoList extends Component {
      }
 
      getData = async () => {
-         const response = await api.endpoint("api route").getAll();
+         const response = await axios.get("api route");
          this.setState({todos: response.data});
          setTimeout(this.getData, 1000);  /*auto request to endpoint every second to fetch data*/
      };
@@ -32,9 +30,7 @@ class TodoList extends Component {
                 <h2>Todo List</h2>
                 {todos.map((todo, index) => (
                   <div key={index}>
-                    <h4>
-                      <Link to={`/todo/${todo._id}`}>{todo.title}</Link> 
-                    </h4>
+        
                     <p> {todo.body}</p>
                   </div>
                 ))}

react-js/api/APIDataList.js

@@ -1,7 +1,5 @@
+//npm install axios
 import React, { Component } from 'react';
-import { Link} from 'react-router-dom';
-
-import api  from '../../api';
 
 class TodoList extends Component {
     constructor(props) {
@@ -12,7 +10,7 @@ class TodoList extends Component {
     }
 
     componentDidMount() {
-        api.todos().getAll()
+        axios.get("api endpoint route")
         .then(response => this.setState({ todos: response.data }))
     }
 
@@ -26,9 +24,7 @@ class TodoList extends Component {
                 <h2>Todo List</h2>
                 {todos.map((todo, index) => (
                   <div key={index}>
-                    <h4>
-                      <Link to={`/todo/${todo._id}`}>{todo.title}</Link> 
-                    </h4>
+              
                     <p> {todo.body}</p>
                   </div>
                 ))}

react-js/api/ApiAdd.js

@@ -1,5 +1,6 @@
+//npm install axios
 import React, { Component } from 'react';
-import api from '../../api'; 
+import { axios } from 'axios';
 
 class AddTodo extends Component {
   constructor(props) {
@@ -23,12 +24,13 @@ class AddTodo extends Component {
     const {title, body} = this.state;
     // define state variable for use in return
     //and store in state value
-     api.todos().create({ title: title, body: body})
+    const data = { title: title, body: body};
+     axios.post("your api endpoint route" , data) //post your data
       .then(this.setState({   //clear inputs after submit 
         title: "",
         body: ""
       }))
-       .then(response => this.props.history.push('/')); 
+       .then(response => this.props.history.push('/')); //redirect to route
   }
 
   render() {

react-js/api/ApiEdit.js

@@ -1,6 +1,6 @@
+//npm install axios
 import React, { Component } from "react";
-
-import api from "../../api";
+import { axios } from 'axios';
 
 class APIEdit extends Component {
     constructor(props) {
@@ -12,8 +12,8 @@ class APIEdit extends Component {
     }
 
     componentDidMount() {
-        const todoId = this.props.match.params;
-        api.todos().getOne(todoId)
+        const id = "your id like 1245";
+        axios.get("your api endpoint route", id)
             .then(response => this.setState({
                 title: response.data.title,
                 body: response.data.body
@@ -24,10 +24,10 @@ class APIEdit extends Component {
     }
     onSubmit = (e) => {
         e.preventDefault() //prevent load
-        const todoId = this.props.match.params;
         // get our form data out of state
         const { title, body } = this.state;   // define state variable for use in return and store in state value
-        api.todos().update(todoId, { title: title, body: body })
+        data = { title: title, body: body }
+        axios.put("your api endpoint route", data) // url and update data pass through put axios method
             .then(response => this.props.history.push('/'));
     }
 

react-js/api/ApiHelper.js

@@ -1,3 +1,4 @@
+//npm install axios
 import axios from "axios";  /* npm install axios*/
 /* description: this function for callback api endpoint
                  contains GET,POST,PUT, DELETE requests via axios package
@@ -13,7 +14,7 @@ import axios from "axios";  /* npm install axios*/
 
 export default {
     endpoint(url) {
-        url = "base url"+ url; //concat base url and url with base api endpoint
+        url = "base api endpoint url"+ url; //concat base url and url with base api endpoint
         return {
             getOne: (id) => axios.get(url + `/${id}`), //id_url
             getAll: () => axios.get(url),

react-js/api/ApiTodo.js

@@ -1,8 +1,7 @@
+//npm install axios
 import React, { Component } from "react";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {Link} from 'react-router-dom';
+import { axios } from 'axios';
 
-import api from "../../api";
 
 class APITodo extends Component {
   constructor(props) {
@@ -13,13 +12,14 @@ class APITodo extends Component {
   }
 
   componentDidMount() {
-    const todoId = this.props.match.params;
-    api.todos().getOne(todoId)
+    const id = "your id like 1245";
+    axios.get("your api endpoint route", id)
       .then(response => this.setState({ todo: response.data }));
   }
   onDelete = () => {
-    const todoId = this.props.match.params;
-    api.todos().delete(todoId)
+    // const todoId = this.props.match.params;
+       const todoId = "your deleted id like 123";
+    axios.delete("your api endpoint route", id) //id for specific data delete
       .then(response => this.props.history.push('/'));
   }
 
@@ -31,10 +31,7 @@ class APITodo extends Component {
         <div className="row mt-5">
           <div className="col-lg-8 offset-lg-2">
             <h4> {todo.title} 
-             <Link to={`/todo/edit/${todo._id}`}> 
-              <FontAwesomeIcon icon="edit" className="ml-5" />
-               </Link>
-                <FontAwesomeIcon icon="trash" onClick={this.onDelete} className="float-right mr-5" />
+  
             </h4> 
               <p> {todo.body}</p>
           </div>

react-js/api/ExampleApi.js

@@ -1,12 +1,11 @@
-// api.js file contains this code
-// note: npm install axios
+// note: if axios install it by npm install axios
 const axios = require('axios')
 
 const baseUrl =  "http://127.0.0.1:5000/";
 const todos = baseUrl + "todos";
 
 export default {
-    endpointFetch() {
+    endpointLoadWithFetch() {
         return {
             getOne: ({ id }) => fetch(todos + `/${id}`), //id_url 
             getAll: () => fetch(todos),  //url
@@ -16,7 +15,7 @@ export default {
         }
 
     },
-    endpointFetch() {
+    endpointLoadWithAxios() {
        return {
             getOne: ({id}) => axios.get(todos + `/${id}`), //id_url 
             getAll: () => axios.get(todos),
@@ -26,13 +25,12 @@ export default {
         }
     }
 }
-//[Example Component](react-js/ApiIntegration.js)
 // componentDidMount(){
-// api.todosFetch().getAll()
+// endpointLoadWithAxios().getAll()
 //     .then(response => response.json()  //fetch method need to convert json
 //         .then(data => this.setState({ todos: data })));  //define converted data state variable
 //}
 // componentDidMount(){
-    // api.todosAxios().getAll()
+    // endpointLoadWithAxios().getAll()
      //   .then(response => this.setState({ axiosTodos: response.data }))
 //}