Commit b61ee5dd authored by Mai Thanh Cong's avatar Mai Thanh Cong

create axios call API

parent 277636bf
...@@ -1618,6 +1618,53 @@ ...@@ -1618,6 +1618,53 @@
"prop-types": "^15.7.2" "prop-types": "^15.7.2"
} }
}, },
"@redux-saga/core": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@redux-saga/core/-/core-1.1.3.tgz",
"integrity": "sha512-8tInBftak8TPzE6X13ABmEtRJGjtK17w7VUs7qV17S8hCO5S3+aUTWZ/DBsBJPdE8Z5jOPwYALyvofgq1Ws+kg==",
"requires": {
"@babel/runtime": "^7.6.3",
"@redux-saga/deferred": "^1.1.2",
"@redux-saga/delay-p": "^1.1.2",
"@redux-saga/is": "^1.1.2",
"@redux-saga/symbols": "^1.1.2",
"@redux-saga/types": "^1.1.0",
"redux": "^4.0.4",
"typescript-tuple": "^2.2.1"
}
},
"@redux-saga/deferred": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@redux-saga/deferred/-/deferred-1.1.2.tgz",
"integrity": "sha512-908rDLHFN2UUzt2jb4uOzj6afpjgJe3MjICaUNO3bvkV/kN/cNeI9PMr8BsFXB/MR8WTAZQq/PlTq8Kww3TBSQ=="
},
"@redux-saga/delay-p": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@redux-saga/delay-p/-/delay-p-1.1.2.tgz",
"integrity": "sha512-ojc+1IoC6OP65Ts5+ZHbEYdrohmIw1j9P7HS9MOJezqMYtCDgpkoqB5enAAZrNtnbSL6gVCWPHaoaTY5KeO0/g==",
"requires": {
"@redux-saga/symbols": "^1.1.2"
}
},
"@redux-saga/is": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@redux-saga/is/-/is-1.1.2.tgz",
"integrity": "sha512-OLbunKVsCVNTKEf2cH4TYyNbbPgvmZ52iaxBD4I1fTif4+MTXMa4/Z07L83zW/hTCXwpSZvXogqMqLfex2Tg6w==",
"requires": {
"@redux-saga/symbols": "^1.1.2",
"@redux-saga/types": "^1.1.0"
}
},
"@redux-saga/symbols": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@redux-saga/symbols/-/symbols-1.1.2.tgz",
"integrity": "sha512-EfdGnF423glv3uMwLsGAtE6bg+R9MdqlHEzExnfagXPrIiuxwr3bdiAwz3gi+PsrQ3yBlaBpfGLtDG8rf3LgQQ=="
},
"@redux-saga/types": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@redux-saga/types/-/types-1.1.0.tgz",
"integrity": "sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg=="
},
"@svgr/babel-plugin-add-jsx-attribute": { "@svgr/babel-plugin-add-jsx-attribute": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
...@@ -2731,6 +2778,14 @@ ...@@ -2731,6 +2778,14 @@
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz", "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==" "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
}, },
"axios": {
"version": "0.21.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
"integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
"requires": {
"follow-redirects": "^1.10.0"
}
},
"axobject-query": { "axobject-query": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
...@@ -12996,6 +13051,14 @@ ...@@ -12996,6 +13051,14 @@
"@babel/runtime": "^7.9.2" "@babel/runtime": "^7.9.2"
} }
}, },
"redux-saga": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/redux-saga/-/redux-saga-1.1.3.tgz",
"integrity": "sha512-RkSn/z0mwaSa5/xH/hQLo8gNf4tlvT18qXDNvedihLcfzh+jMchDgaariQoehCpgRltEm4zHKJyINEz6aqswTw==",
"requires": {
"@redux-saga/core": "^1.1.3"
}
},
"regenerate": { "regenerate": {
"version": "1.4.2", "version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
...@@ -15267,6 +15330,27 @@ ...@@ -15267,6 +15330,27 @@
"integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==", "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==",
"dev": true "dev": true
}, },
"typescript-compare": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/typescript-compare/-/typescript-compare-0.0.2.tgz",
"integrity": "sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA==",
"requires": {
"typescript-logic": "^0.0.0"
}
},
"typescript-logic": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/typescript-logic/-/typescript-logic-0.0.0.tgz",
"integrity": "sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q=="
},
"typescript-tuple": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/typescript-tuple/-/typescript-tuple-2.2.1.tgz",
"integrity": "sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q==",
"requires": {
"typescript-compare": "^0.0.2"
}
},
"unbox-primitive": { "unbox-primitive": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
......
...@@ -49,6 +49,7 @@ ...@@ -49,6 +49,7 @@
], ],
"dependencies": { "dependencies": {
"amazon-cognito-identity-js": "^5.0.3", "amazon-cognito-identity-js": "^5.0.3",
"axios": "^0.21.1",
"bootstrap": "4.3.1", "bootstrap": "4.3.1",
"classnames": "2.2.6", "classnames": "2.2.6",
"headroom.js": "0.11.0", "headroom.js": "0.11.0",
...@@ -64,6 +65,7 @@ ...@@ -64,6 +65,7 @@
"react-router-dom": "5.1.2", "react-router-dom": "5.1.2",
"react-scripts": "3.3.1", "react-scripts": "3.3.1",
"reactstrap": "8.4.1", "reactstrap": "8.4.1",
"redux-saga": "^1.1.3",
"uuid": "^8.3.2" "uuid": "^8.3.2"
}, },
"devDependencies": { "devDependencies": {
......
import React, { useState } from "react"; /* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from "react";
import { connect, useDispatch } from "react-redux";
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { FormGroup, Input, InputGroupAddon, InputGroupText, InputGroup, Container, Button, Form } from "reactstrap"; import { FormGroup, Input, InputGroupAddon, InputGroupText, InputGroup, Container, Button, Form } from "reactstrap";
...@@ -7,14 +9,16 @@ import DemoNavbar from "components/Navbars/DemoNavbar.js"; ...@@ -7,14 +9,16 @@ import DemoNavbar from "components/Navbars/DemoNavbar.js";
import MainBanner from "components/Generals/MainBanner.js"; import MainBanner from "components/Generals/MainBanner.js";
import Sologan from "components/Generals/Sologan.js"; import Sologan from "components/Generals/Sologan.js";
import SimpleFooter from "components/Footers/SimpleFooter"; import SimpleFooter from "components/Footers/SimpleFooter";
import dummyData from "../../data/index.json";
import { listProfile, addProfile, deleteProfile, previousAction, nextAction } from "../../store/actions/ProfileAction";
import { ProfileTable } from "../../views/IndexSections/Table"; import { ProfileTable } from "../../views/IndexSections/Table";
const SearchProfile = () => { const SearchProfile = (props) => {
const [searchProfile, setSearchProfile] = useState(""); const [searchProfile, setSearchProfile] = useState("");
const history = useHistory(); const history = useHistory();
const dispatch = useDispatch();
const handleChangeSearch = (event) => { const handleChangeSearch = (event) => {
setSearchProfile(event.target.value); setSearchProfile(event.target.value);
...@@ -23,7 +27,7 @@ const SearchProfile = () => { ...@@ -23,7 +27,7 @@ const SearchProfile = () => {
const onHandleSearch = (event) => { const onHandleSearch = (event) => {
event.preventDefault(); event.preventDefault();
if (!searchProfile) return; if (!searchProfile) return;
const nameCode = dummyData.data.map(item => item.code); const nameCode = props.listProfile.data.map(item => item.code);
const checkSearch = nameCode.indexOf(searchProfile); const checkSearch = nameCode.indexOf(searchProfile);
if (checkSearch !== -1) { if (checkSearch !== -1) {
history.push({ history.push({
...@@ -35,6 +39,12 @@ const SearchProfile = () => { ...@@ -35,6 +39,12 @@ const SearchProfile = () => {
} }
} }
useEffect(() => {
dispatch(props.onLoadListProfile( { currentPage: props.currentPage, limit: props.limit } ));
}, []);
console.log("props.listProfile", props.listProfile);
return ( return (
<> <>
<DemoNavbar /> <DemoNavbar />
...@@ -68,7 +78,7 @@ const SearchProfile = () => { ...@@ -68,7 +78,7 @@ const SearchProfile = () => {
</Container> </Container>
</section> </section>
<section className="section"> <section className="section">
<ProfileTable dummyData={dummyData.data} /> <ProfileTable dummyData={props.listProfile} />
</section> </section>
<Sologan /> <Sologan />
</main> </main>
...@@ -77,4 +87,22 @@ const SearchProfile = () => { ...@@ -77,4 +87,22 @@ const SearchProfile = () => {
); );
} }
export default SearchProfile; const mapStateToProps = (state) => {
return {
listProfile: state.profileReducer.listProfile,
currentPage: state.profileReducer.currentPage,
limit: state.profileReducer.limit,
nextPage: state.profileReducer.nextPage,
previosPage: state.profileReducer.previosPage,
total: state.profileReducer.total
};
};
const mapDispatchToProps = (dispatch) => ({
onLoadListProfile: (profile) => dispatch(listProfile(profile)),
onLoadPreviousPage: (profile) => dispatch(previousAction(profile)),
onLoadNextPage: (profile) => dispatch(nextAction(profile)),
// onDeleteProfile: (profile) => dispatch(deleteProfile(profile)),
// onAddProfile: (profile) => dispatch(addProfile(profile))
});
export default connect(mapStateToProps, mapDispatchToProps)(SearchProfile);
export const GET_PROFILE_URL = "/profile";
export const ADD_NEW_PROFILE_URL = GET_PROFILE_URL + "/add-new";
export const DELETE_PROFILE_URL = GET_PROFILE_URL + "/delete";
export const EDIT_PROFILE_URL = GET_PROFILE_URL + "/edit";
export const LOAD_LIST_PROFILE = "LOAD_LIST_PROFILE";
export const LOAD_LIST_PROFILE_SUCCESS = "LOAD_LIST_PROFILE_SUCCESS";
export const PREVIOUS_PAGE = "PREVIOUS_PAGE";
export const NEX_PAGE = "NEX_PAGE";
export const ADD_PROFILE = "ADD_PROFILE";
export const ADD_PROFILE_SUCCESS = "ADD_PROFILE_SUCCESS";
export const ADD_PROFILE_FAILED = "ADD_PROFILE_FAILED";
export const DELETE_PROFILE = "DELETE_PROFILE";
export const DELETE_PROFILE_SUCCESS = "DELETE_PROFILE_SUCCESS";
export const DELETE_PROFILE_FAILED = "DELETE_PROFILE_FAILED";
export const EDIT_PROFILE = "EDIT_PROFILE";
export const EDIT_PROFILE_SUCCESS = "EDIT_PROFILE_SUCCESS";
export const EDIT_PROFILE_FAILED = "EDIT_PROFILE_FAILED";
...@@ -3,12 +3,14 @@ import ReactDOM from 'react-dom'; ...@@ -3,12 +3,14 @@ import ReactDOM from 'react-dom';
import { HashRouter } from "react-router-dom"; import { HashRouter } from "react-router-dom";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
// import store from "./store"; import store from "./store";
import HomePage from "./HomePage"; import HomePage from "./HomePage";
ReactDOM.render( ReactDOM.render(
<HashRouter> <Provider store={store}>
<HashRouter>
<HomePage /> <HomePage />
</HashRouter>, </HashRouter>
</Provider>,
document.getElementById("root") document.getElementById("root")
); );
...@@ -92,10 +92,8 @@ export const authServices = { ...@@ -92,10 +92,8 @@ export const authServices = {
cognitoUser.authenticateUser(authenticationDetails, { cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) { onSuccess: function (result) {
var accessToken = result.getAccessToken().getJwtToken(); var accessToken = result.getAccessToken().getJwtToken();
console.log("accessToken", accessToken);
localStorage.setItem("access_token", accessToken); localStorage.setItem("access_token", accessToken);
var idToken = result.getIdToken().getJwtToken(); var idToken = result.getIdToken().getJwtToken();
console.log("idToken", idToken);
localStorage.setItem("id_token", idToken); localStorage.setItem("id_token", idToken);
localStorage.setItem("signin_user_name", userName); localStorage.setItem("signin_user_name", userName);
resolve(result); resolve(result);
......
import axiosClient from "../NodeServices/index";
import { GET_NODE, GET_HISTORY_NODE } from "../../constans/Home";
const homeAPI = {
getNodesServices: () => {
return axiosClient.get(GET_NODE);
},
getNodeHistoryServices: (param) => {
return axiosClient.get(GET_HISTORY_NODE, { params: { node_id: param }});
}
};
export default homeAPI;
import axiosClient from "../NodeServices/index";
import { GET_PROFILE_URL, ADD_NEW_PROFILE_URL, DELETE_PROFILE_URL, EDIT_PROFILE_URL } from "../../constans/Profile";
const profileAPI = {
getProfilesService: (params) => {
return axiosClient.get(`${GET_PROFILE_URL}?current_page=${params.currentPage}&page_limit=${params.limit}`);
},
addNewProfileService: (params) => {
return axiosClient.post(ADD_NEW_PROFILE_URL, { ...params });
},
deleteProfileService: (profileId) => {
return axiosClient.delete(DELETE_PROFILE_URL, { params: { profile_id: profileId } });
},
editProfileService: (params) => {
return axiosClient.patch(`${EDIT_PROFILE_URL}?profile_id=${params.profile_id}`, { ...params });
},
};
export default profileAPI;
\ No newline at end of file
...@@ -2,7 +2,7 @@ import axios from "axios"; ...@@ -2,7 +2,7 @@ import axios from "axios";
import queryString from "query-string"; import queryString from "query-string";
const axiosClient = axios.create({ const axiosClient = axios.create({
baseURL: process.env.REACT_APP_BASE_URL_AQBITS, baseURL: process.env.REACT_APP_BASE_URL_AQBITS_TRACE_CODE,
headers: { headers: {
"content-text": "application/json", "content-text": "application/json",
}, },
......
import * as actionTypes from "../../constans/Profile";
export const listProfile = (params) => {
return {
type: actionTypes.LOAD_LIST_PROFILE,
params,
};
};
export const loadListProfile = (params) => {
return {
type: actionTypes.LOAD_LIST_PROFILE_SUCCESS,
params,
};
};
export const previousAction = (params) => {
return {
type: actionTypes.PREVIOUS_PAGE,
params,
};
}
export const nextAction = (params) => {
return {
type: actionTypes.NEX_PAGE,
params,
};
}
// export const addProfile = (params) => {
// return {
// type: actionTypes.ADD_PROFILE,
// params,
// };
// };
// export const addProfileSuccess = (params) => {
// return {
// type: actionTypes.ADD_PROFILE_SUCCESS,
// params,
// };
// };
// export const addProfileFailed = (params) => {
// return {
// type: actionTypes.ADD_PROFILE_FAILED,
// params,
// };
// };
// export const deleteProfile = (profileId) => {
// return {
// type: actionTypes.DELETE_PROFILE,
// profileId,
// };
// };
// export const deleteProfileSuccess = (profileId) => {
// return {
// type: actionTypes.DELETE_PROFILE_SUCCESS,
// profileId,
// };
// };
// export const deleteProfileFailed = (profileId) => {
// return {
// type: actionTypes.DELETE_PROFILE_FAILED,
// profileId,
// };
// };
// export const editProfile = (params) => {
// return {
// type: actionTypes.EDIT_PROFILE,
// params,
// };
// };
// export const editProfileSuccess = (params) => {
// return {
// type: actionTypes.EDIT_PROFILE_SUCCESS,
// params,
// };
// };
// export const editProfileFailed = (params) => {
// return {
// type: actionTypes.EDIT_PROFILE_FAILED,
// params,
// };
// };
import { applyMiddleware, combineReducers, compose, createStore } from "redux";
import createSagaMiddleware from "redux-saga";
import rootSaga from "./sagas";
import { ProfileReducer } from "./reducers/ProfileReducer";
const sagaMiddleware = createSagaMiddleware();
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
// Root reducers
const rootReducer = combineReducers({
profileReducer: ProfileReducer
});
const store = createStore(
rootReducer,
composeEnhancers(applyMiddleware(sagaMiddleware))
);
sagaMiddleware.run(rootSaga);
export default store;
\ No newline at end of file
/* eslint-disable eqeqeq */
import * as actionTypes from "../../constans/Profile";
const initialState = {
listProfile: [],
previosPage: 1,
currentPage: 1,
nextPage: 1,
total: [],
limit: 10,
};
export const ProfileReducer = (state = initialState, action) => {
switch (action.type) {
//get list profile
case actionTypes.LOAD_LIST_PROFILE_SUCCESS:
return { ...state, listProfile: action.params.data, currentPage: action.params.currentPage, limit: action.params.limit,
total: action.params.total, nextPage: action.params.nextPage, previosPage: action.params.previosPage };
case actionTypes.PREVIOUS_PAGE:
return { ...state, currentPage: action.params }
case actionTypes.NEX_PAGE:
return { ...state, currentPage: action.params }
// //add profile
// case actionTypes.ADD_PROFILE_SUCCESS:
// return { ...state, listProfile: [action.params, ...state.listProfile] };
// case actionTypes.ADD_PROFILE_FAILED:
// return { ...state, listProfile: [...state.listProfile] };
// //delete profile
// case actionTypes.DELETE_PROFILE_SUCCESS:
// const arrayList = [...state.listProfile];
// let listData = arrayList.filter(item => item.profile_id !== action.profileId);
// return { ...state, listProfile: [ ...listData ] };
// //update profile
// case actionTypes.EDIT_PROFILE_SUCCESS:
// const newArray = [...state.listProfile.data];
// for(let i=0; i <= newArray.length - 1; i++){
// if(newArray[i].profile_id === action.params.profile_id){
// newArray[i].profile_name = action.params.profile_name;
// newArray[i].profile_logo = action.params.profile_logo;
// newArray[i].profile_address = action.params.profile_address;
// newArray[i].profile_phone_number = action.params.profile_phone_number;
// newArray[i].profile_product = action.params.profile_product;
// newArray[i].profile_timestamp = action.params.profile_timestamp;
// newArray[i].profile_qr_code = action.params.profile_qr_code;
// }
// }
// return { ...state, listProfile: { data: [ ...newArray ] } };
default:
return state;
}
};
import { all, put, takeLatest } from "redux-saga/effects";
import * as actionTypes from "../../constans/Profile";
import { loadListProfile, addProfileSuccess, addProfileFailed, deleteProfileSuccess, deleteProfileFailed, editProfileSuccess, editProfileFailed } from "../actions/ProfileAction";
import profileAPI from "../../services/NodeServices/Profile";
export function* loadListProfileSaga(action) {
try {
const response = yield profileAPI.getProfilesService(action.params);
const statusCode = response.data.statusCode;
if(statusCode === 200){
const dataListProfile = JSON.parse(response.data.body);
yield put(loadListProfile(dataListProfile.data));
}else {
yield put(loadListProfile([]));
}
} catch (error) {
yield put(loadListProfile([]));
}
}
// export function* addProfileSaga(action) {
// try {
// yield profileAPI.addNewProfileService(action.params);
// yield put(addProfileSuccess(action.params));
// } catch (error) {
// yield put(addProfileFailed({}));
// }
// }
// export function* deleteProfileSaga(action) {
// try {
// yield profileAPI.deleteProfileService(action.profileId);
// yield put(deleteProfileSuccess(action.profileId));
// } catch (error) {
// yield put(deleteProfileFailed());
// }
// }
// export function* editProfileSaga(action) {
// try {
// yield profileAPI.editProfileService(action.params);
// yield put(editProfileSuccess(action.params));
// } catch (error) {
// yield put(editProfileFailed());
// }
// }
function* watchProfileSaga() {
yield all([
takeLatest(actionTypes.LOAD_LIST_PROFILE, loadListProfileSaga),
// takeLatest(actionTypes.ADD_PROFILE, addProfileSaga),
// takeLatest(actionTypes.DELETE_PROFILE, deleteProfileSaga),
// takeLatest(actionTypes.EDIT_PROFILE, editProfileSaga),
]);
}
export default watchProfileSaga;
import { all } from "redux-saga/effects";
import watchProfileSaga from "./ProfileSaga";
export default function* rootSaga() {
yield all([watchProfileSaga()]);
}
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment