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 3966c04

Browse files
committed
add date time , exportable api for react and not found page
1 parent 2bc3284 commit 3966c04

File tree

6 files changed

+104
-34
lines changed

6 files changed

+104
-34
lines changed

‎README.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
## JavaScript
44
- [JavaScript Form Validation](js/form-validation.js)
55
- [Select Single Checkbox](js/single-checkbox-selection.js)
6+
- [Date Time](js/datetime.js)
67
## React JS
7-
8-
- [API Routes ](react-js/Api.js)
8+
-[Exportable API Endpoint](react-js/Api.js)
9+
- [Example API Routes ](react-js/ExampleApi.js)
910
- [API Integration Add Component](react-js/ApiAdd.js)
1011
- [API Integration Data List Component](react-js/APIDataList.js)
1112
- [API Integration Edit Component](react-js/ApiEdit.js)
@@ -16,6 +17,8 @@
1617
- [Array Interval Delay and Hide Previous Element](react-js/array-plus-delay.js)
1718
- [Manual Delay](react-js/delay.js)
1819
- [React Web Camera Streaming](react-js/webcam.js)
20+
- [Exportable Date Time](react-js/dateTime.js)
21+
- [Not Found Page](react-js/NotFound.js)
1922

2023
## Python
2124
- [Dockerize Flask App](python/Dockerfile)

‎js/datetime.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
function _getDateTime(dateTime) {
2+
if (dateTime) {
3+
let date = new Date(dateTime);
4+
let options = {
5+
hour: 'numeric',
6+
minute: 'numeric',
7+
year: 'numeric',
8+
month: 'numeric',
9+
day: 'numeric',
10+
timeZone: 'UTC'
11+
};
12+
return Intl.DateTimeFormat('en-BD', options).format(date)
13+
//format like 10/10/2019 10:20AM
14+
}
15+
}

‎react-js/Api.js‎

Lines changed: 11 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,17 @@
1-
// api.js file contains this code
2-
// note: npm install axios
3-
const axios = require('axios')
4-
5-
const baseUrl = "http://127.0.0.1:5000/";
6-
const todos = baseUrl + "todos";
1+
import axios from "axios";
2+
//helper function for api endpoint contains GET,POST,PUT, DELETE
73

4+
const apiBase = "localhost:9010";
85
export default {
9-
todosFetch() {
6+
endpoint(url) {
7+
url = apiBase + url; //concat base url and url with base api endpoint
108
return {
11-
getOne: ({ id }) => fetch(todos+`/${id}`), //id_url
12-
getAll: () => fetch(todos),//url
13-
create: (data) => fetch(todos, data), //url, data
14-
update: ({ id }, data) => fetch(todos + `/${id}`, data), //url, data
15-
delete: ({ id }) => fetch(todos + `${id}`)
9+
getOne: (id) => axios.get(url+`/${id}`), //id_url
10+
getAll: () => axios.get(url),
11+
create: (data) => axios.post(url, data), //url, data
12+
update: (id, data) => axios.put(url + `/${id}`, data), //url, data
13+
delete: (id) => axios.delete(url + `/${id}`),
1614
}
17-
1815
},
19-
todosAxios() {
20-
return {
21-
getOne: ({id}) => axios.get(todos + `/${id}`), //id_url
22-
getAll: () => axios.get(todos),
23-
create: (data) => axios.post(todos, data), //url, data
24-
update: ({ id }, data) => axios.put(todos + `/${id}`, data), //url, data
25-
delete: ({ id }) => axios.delete(todos + `/${id}`)//id_url
26-
}
27-
}
2816
}
29-
//[Example Component](react-js/ApiIntegration.js)
30-
// componentDidMount(){
31-
// api.todosFetch().getAll()
32-
// .then(response => response.json() //fetch method need to convert json
33-
// .then(data => this.setState({ todos: data }))); //define converted data state variable
34-
//}
35-
// componentDidMount(){
36-
// api.todosAxios().getAll()
37-
// .then(response => this.setState({ axiosTodos: response.data }))
38-
//}
17+

‎react-js/ExampleApi.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// api.js file contains this code
2+
// note: npm install axios
3+
const axios = require('axios')
4+
5+
const baseUrl = "http://127.0.0.1:5000/";
6+
const todos = baseUrl + "todos";
7+
8+
export default {
9+
todosFetch() {
10+
return {
11+
getOne: ({ id }) => fetch(todos + `/${id}`), //id_url
12+
getAll: () => fetch(todos), //url
13+
create: (data) => fetch(todos, data), //url, data
14+
update: ({ id }, data) => fetch(todos + `/${id}`, data), //url, data
15+
delete: ({ id }) => fetch(todos + `${id}`)
16+
}
17+
18+
},
19+
todosAxios() {
20+
return {
21+
getOne: ({id}) => axios.get(todos + `/${id}`), //id_url
22+
getAll: () => axios.get(todos),
23+
create: (data) => axios.post(todos, data), //url, data
24+
update: ({ id }, data) => axios.put(todos + `/${id}`, data), //url, data
25+
delete: ({ id }) => axios.delete(todos + `/${id}`)//id_url
26+
}
27+
}
28+
}
29+
//[Example Component](react-js/ApiIntegration.js)
30+
// componentDidMount(){
31+
// api.todosFetch().getAll()
32+
// .then(response => response.json() //fetch method need to convert json
33+
// .then(data => this.setState({ todos: data }))); //define converted data state variable
34+
//}
35+
// componentDidMount(){
36+
// api.todosAxios().getAll()
37+
// .then(response => this.setState({ axiosTodos: response.data }))
38+
//}

‎react-js/NotFound.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import {Link} from "react-router-dom";
3+
4+
5+
const NotFound = () => {
6+
return (
7+
<div className="container" style={{ marginTop: '220px',textAlign:"center"}} >
8+
<h2>Page not found </h2>
9+
<Link to="/">Go to home</Link>
10+
</div>
11+
12+
);
13+
};
14+
15+
16+
export default NotFound;
17+
18+
// Add in APP.js following way
19+
//<Route path="*" component={NotFound}/>

‎react-js/dateTime.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export function _getDateTime(dateTime) {
2+
if (dateTime) {
3+
let date = new Date(dateTime);
4+
let options = {
5+
hour: 'numeric',
6+
minute: 'numeric',
7+
year: 'numeric',
8+
month: 'numeric',
9+
day: 'numeric',
10+
timeZone: 'UTC'
11+
};
12+
return Intl.DateTimeFormat('en-BD', options).format(date)
13+
//format like 10/10/2019 10:20AM
14+
}
15+
}
16+

0 commit comments

Comments
(0)

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