From 759bdc0bc382547bf07e67a4fbc398d8f24e13c4 Mon Sep 17 00:00:00 2001 From: Gorji Date: Wed, 26 May 2021 08:48:28 +0430 Subject: [PATCH] redux fix --- .babelrc | 3 ++ package.json | 13 ++++-- src/Redux/Reducers/Reduce.js | 3 -- src/Redux/actions/chat.js | 5 +++ src/Redux/actions/index.js | 6 +++ src/Redux/actions/public.js | 3 ++ src/Redux/actions/user.js | 9 ++++ src/Redux/index.js | 7 +++ src/Redux/proxy.js | 28 ++++++++---- src/Redux/reducers/chat.js | 12 ++++++ src/Redux/reducers/index.js | 6 +++ src/Redux/reducers/public.js | 12 ++++++ src/Redux/reducers/user.js | 15 +++++++ src/Redux/store.js | 9 ++-- src/views/Auth/Login/Login.js | 13 +++--- src/views/Home/Body/ChatList/ChatList.js | 43 ++++++------------- .../Home/Header/NavbarDrawer/NavbarDrawer.js | 15 +++---- yarn.lock | 33 ++++++++++++-- 18 files changed, 165 insertions(+), 70 deletions(-) create mode 100644 .babelrc delete mode 100644 src/Redux/Reducers/Reduce.js create mode 100644 src/Redux/actions/chat.js create mode 100644 src/Redux/actions/index.js create mode 100644 src/Redux/actions/public.js create mode 100644 src/Redux/actions/user.js create mode 100644 src/Redux/index.js create mode 100644 src/Redux/reducers/chat.js create mode 100644 src/Redux/reducers/index.js create mode 100644 src/Redux/reducers/public.js create mode 100644 src/Redux/reducers/user.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..4d57705 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "plugins": ["wildcard"] +} diff --git a/package.json b/package.json index 0a8b860..c9f8e79 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,6 @@ "name": "chat-pwa", "version": "0.1.0", "private": true, - "proxy": "http://localhost:4040/", "dependencies": { "@material-ui/core": "^4.11.4", "@material-ui/icons": "^4.11.2", @@ -13,7 +12,10 @@ "audio-react-recorder": "^1.0.4", "axios": "^0.21.1", "babel-eslint": "^10.1.0", + "babel-plugin-import-directory": "^1.1.0", + "babel-plugin-wildcard": "^7.0.0", "bootstrap": "^4.6.0", + "create-index": "^2.6.0", "jalali-moment": "^3.3.10", "leaflet": "^1.7.1", "node-sass": "^5.0.0", @@ -41,7 +43,8 @@ "test": "react-scripts test", "eject": "react-scripts eject", "prettier": "prettier --write \"**/*\"", - "eslint": "eslint \"**/*.js\"" + "eslint": "eslint \"**/*.js\"", + "index": "create-index ./src/Redux -r" }, "browserslist": [ ">0.2%", @@ -61,5 +64,9 @@ "eslint-plugin-react": "7.19.0", "eslint-plugin-react-hooks": "2.5.1", "prettier": "^2.2.1" - } + }, + "plugins": [ + "wildcard", + "import-directory" + ] } \ No newline at end of file diff --git a/src/Redux/Reducers/Reduce.js b/src/Redux/Reducers/Reduce.js deleted file mode 100644 index e61eba5..0000000 --- a/src/Redux/Reducers/Reduce.js +++ /dev/null @@ -1,3 +0,0 @@ -import { combineReducers } from 'redux'; - -export default combineReducers({}); diff --git a/src/Redux/actions/chat.js b/src/Redux/actions/chat.js new file mode 100644 index 0000000..0a12d5c --- /dev/null +++ b/src/Redux/actions/chat.js @@ -0,0 +1,5 @@ +import proxy from '../proxy'; +export const list = + (data = {}) => + async (dispatch) => + (await proxy.get('chat/list', data)).dispatch(dispatch); diff --git a/src/Redux/actions/index.js b/src/Redux/actions/index.js new file mode 100644 index 0000000..1723be2 --- /dev/null +++ b/src/Redux/actions/index.js @@ -0,0 +1,6 @@ +// @create-index + +export { default as chat } from './chat.js'; +export { default as public } from './public.js'; +export { default as user } from './user.js'; + diff --git a/src/Redux/actions/public.js b/src/Redux/actions/public.js new file mode 100644 index 0000000..9f4f773 --- /dev/null +++ b/src/Redux/actions/public.js @@ -0,0 +1,3 @@ +import proxy from '../proxy'; +export const otp = (data) => async (dispatch) => + (await proxy.get('public/otp', data)).dispatch(dispatch); diff --git a/src/Redux/actions/user.js b/src/Redux/actions/user.js new file mode 100644 index 0000000..35fe2d0 --- /dev/null +++ b/src/Redux/actions/user.js @@ -0,0 +1,9 @@ +import proxy from '../proxy'; +export const login = + (data = {}) => + async (dispatch) => + (await proxy.login(data)).dispatch(dispatch); +export const logout = + (data = {}) => + async (dispatch) => + (await proxy.logout(data)).dispatch(dispatch); diff --git a/src/Redux/index.js b/src/Redux/index.js new file mode 100644 index 0000000..94cfa95 --- /dev/null +++ b/src/Redux/index.js @@ -0,0 +1,7 @@ +// @create-index + +export { default as actions } from './actions'; +export { default as proxy } from './proxy.js'; +export { default as reducers } from './reducers'; +export { default as store } from './store.js'; + diff --git a/src/Redux/proxy.js b/src/Redux/proxy.js index fe438cd..25f4400 100644 --- a/src/Redux/proxy.js +++ b/src/Redux/proxy.js @@ -9,18 +9,26 @@ const Axios = axios.create({ validateStatus: null, baseURL, }); +class dispatch {} class Proxy { - get = (url, params, opt = {}) => this.check(() => Axios.get(url, { params, ...opt })); - post = (url, params, opt = {}) => this.check(() => Axios.post(url, params, opt)); - put = (url, params, opt = {}) => this.check(() => Axios.put(url, params, opt)); - delete = (url, params, opt = {}) => this.check(() => Axios.delete(url, params, opt)); - check = async (fetch) => { + get = (url, params, opt = {}) => this.check(url, () => Axios.get(url, { params, ...opt })); + post = (url, params, opt = {}) => this.check(url, () => Axios.post(url, params, opt)); + put = (url, params, opt = {}) => this.check(url, () => Axios.put(url, params, opt)); + delete = (url, params, opt = {}) => this.check(url, () => Axios.delete(url, params, opt)); + result = (url, data) => ({ + ...data, + dispatch: (dispatch) => { + dispatch({ type: url, data }); + return data; + }, + }); + check = async (url, fetch) => { let response = await fetch(); switch (response.status) { case 200: - return response.data.data; + return this.result(url, response.data.data); case 401: - if (await this.refresh()) return (await fetch()).data.data; + if (await this.refresh()) return this.result(url, (await fetch()).data.data); break; default: toast(response.data.message); @@ -35,10 +43,11 @@ class Proxy { }; login = async (data, opt = { headers: { Authorization: `Bearer ${token}` } }) => { const login = await this.post(loginURL, data, opt); - if (!login) return false; + if (!login) this.result('login', false); localStorage.setItem('refresh', login.refreshToken); delete login.refreshToken; - return login; + if (data != {}) setTimeout(() => (window.location.href = '/'), 100); + return this.result('login', login); }; logout = async () => { this.post(logoutURL); @@ -48,4 +57,5 @@ class Proxy { status = () => (localStorage.getItem('refresh') ? true : false); } const _proxy = new Proxy(); + export default _proxy; diff --git a/src/Redux/reducers/chat.js b/src/Redux/reducers/chat.js new file mode 100644 index 0000000..39fbfa8 --- /dev/null +++ b/src/Redux/reducers/chat.js @@ -0,0 +1,12 @@ +const initialState = { + list: [], +}; +export default function chat(state = initialState, action) { + let { type, data } = action; + switch (type) { + case 'chat/list': + return { ...state, list: data }; + default: + return state; + } +} diff --git a/src/Redux/reducers/index.js b/src/Redux/reducers/index.js new file mode 100644 index 0000000..1723be2 --- /dev/null +++ b/src/Redux/reducers/index.js @@ -0,0 +1,6 @@ +// @create-index + +export { default as chat } from './chat.js'; +export { default as public } from './public.js'; +export { default as user } from './user.js'; + diff --git a/src/Redux/reducers/public.js b/src/Redux/reducers/public.js new file mode 100644 index 0000000..96c3db4 --- /dev/null +++ b/src/Redux/reducers/public.js @@ -0,0 +1,12 @@ +const initialState = { + otp: null, +}; +export default function publics(state = initialState, action) { + let { type, data } = action; + switch (type) { + case 'public/otp': + return { ...state, ...data }; + default: + return state; + } +} diff --git a/src/Redux/reducers/user.js b/src/Redux/reducers/user.js new file mode 100644 index 0000000..2b598b1 --- /dev/null +++ b/src/Redux/reducers/user.js @@ -0,0 +1,15 @@ +import proxy from '../proxy'; +const initialState = { + isLogin: proxy.status(), +}; +export default function user(state = initialState, action) { + let { type, data } = action; + switch (type) { + case 'login': + return { ...state, ...data, islogin: proxy.status() }; + case 'logout': + return { ...state, islogin: proxy.status() }; + default: + return state; + } +} diff --git a/src/Redux/store.js b/src/Redux/store.js index e2f2a83..15d823a 100644 --- a/src/Redux/store.js +++ b/src/Redux/store.js @@ -1,16 +1,13 @@ import { createStore, applyMiddleware } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; -import rootReducer from './Reducers/Reduce'; +import { combineReducers } from 'redux'; +import * as reducers from './reducers'; import thunk from 'redux-thunk'; - const initialState = {}; - const middleware = [thunk]; - const store = createStore( - rootReducer, + combineReducers(reducers), initialState, composeWithDevTools(applyMiddleware(...middleware)) ); - export default store; diff --git a/src/views/Auth/Login/Login.js b/src/views/Auth/Login/Login.js index 4cbe0a3..755ddf0 100644 --- a/src/views/Auth/Login/Login.js +++ b/src/views/Auth/Login/Login.js @@ -1,9 +1,12 @@ import React, { Component } from 'react'; import Mobile from './Mobile/Mobile'; import Code from './Code/Code'; -import proxy from '../../../Redux/proxy'; +import { otp } from '../../../Redux/actions/public'; +import { login } from '../../../Redux/actions/user'; +import { connect } from 'react-redux'; + import './Login.scss'; -export default class Login extends Component { +class Login extends Component { constructor(props) { super(props); this.state = { @@ -12,9 +15,8 @@ export default class Login extends Component { } async componentDidUpdate() { const { cellphone, otp, section } = this.state; - if (cellphone && !otp) proxy.get('public/otp', { cellphone }); - if (section && cellphone && otp) - if (await proxy.login({ cellphone, otp })) window.location.href = '/'; + if (cellphone && !otp) this.props.otp({ cellphone }); + if (section && cellphone && otp) this.props.login({ cellphone, otp }); } render() { @@ -39,3 +41,4 @@ export default class Login extends Component { ); } } +export default connect((state) => ({ isLogin: state.user.isLogin }), { otp, login })(Login); diff --git a/src/views/Home/Body/ChatList/ChatList.js b/src/views/Home/Body/ChatList/ChatList.js index e1284d3..c4c1c37 100644 --- a/src/views/Home/Body/ChatList/ChatList.js +++ b/src/views/Home/Body/ChatList/ChatList.js @@ -1,41 +1,17 @@ import React, { Component } from 'react'; import Chat from './Chat/Chat'; import pencil from '../../../../assets/icons/pencil.svg'; -import logo from '../../../../assets/icons/logo.svg'; import './ChatList.scss'; -import proxy from '../../../../Redux/proxy'; - -export default class ChatList extends Component { - constructor(props) { - super(props); - this.state = { - chats: [ - { - id: 0, - name: 'داستان نمونه', - lastMessage: 'نمونه اولیه داستان ایما', - imageUrl: logo, - badge: 'جدید', - }, - { - id: 0, - name: 'نمونه امکانات', - lastMessage: 'نمونه امکانات داستان ایما', - imageUrl: logo, - badge: 'تست', - }, - ], - }; - } - async componentDidMount() { - console.log(proxy); - let chatList = await proxy.get('chat/list'); - console.log(chatList); +import { list } from '../../../../Redux/actions/chat'; +import { connect } from 'react-redux'; +class ChatList extends Component { + componentDidMount() { + this.props.list(); } render() { return (
- {this.state.chats.map((item, i) => ( + {this.props.chat_list.map((item, i) => ( ))}
@@ -45,3 +21,10 @@ export default class ChatList extends Component { ); } } + +export default connect( + (state) => ({ + chat_list: state.chat.list || [], + }), + { list } +)(ChatList); diff --git a/src/views/Home/Header/NavbarDrawer/NavbarDrawer.js b/src/views/Home/Header/NavbarDrawer/NavbarDrawer.js index ba7edde..9e7ca70 100644 --- a/src/views/Home/Header/NavbarDrawer/NavbarDrawer.js +++ b/src/views/Home/Header/NavbarDrawer/NavbarDrawer.js @@ -9,8 +9,9 @@ import SettingsIcon from '@material-ui/icons/Settings'; import UpdateIcon from '@material-ui/icons/Update'; import ReportIcon from '@material-ui/icons/Report'; import ShareIcon from '@material-ui/icons/Share'; -import proxy from '../../../../Redux/proxy'; -// import {connect} from 'react-redux'; +import { logout } from '../../../../Redux/actions/user'; +import { connect } from 'react-redux'; + import './NavbarDrawer.scss'; class NavbarDrawer extends Component { constructor(props) { @@ -52,7 +53,7 @@ class NavbarDrawer extends Component { link: '/auth', icon: , toast: '', - onClick: proxy.logout, + onClick: this.props.logout, }, ], }; @@ -91,10 +92,4 @@ class NavbarDrawer extends Component { ); } } - -// const mapStateToProps = state => ({ -// status: state.user.status, -// }); - -// export default connect(mapStateToProps,{})(NavbarDrawer); -export default NavbarDrawer; +export default connect((state) => ({ isLogin: state.user.isLogin }), { logout })(NavbarDrawer); diff --git a/yarn.lock b/yarn.lock index 8cb97b1..339bd7d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1165,7 +1165,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3": +"@babel/template@^7.1.2", "@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3": version "7.12.13" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327" integrity sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA== @@ -2837,6 +2837,13 @@ babel-plugin-dynamic-import-node@^2.3.3: dependencies: object.assign "^4.1.0" +babel-plugin-import-directory@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/babel-plugin-import-directory/-/babel-plugin-import-directory-1.1.0.tgz#69c3f630418cae8d97fec35211a6a538f6bb4df6" + integrity sha512-D0zOCA1g+OPYFVDl1R63wcQ3/viQt9dwfQfu+QnsQcpHzbNkiNqnlFQnBWgMgaf/oReb8tKEQ1ssFUK4vOC2Xw== + dependencies: + "@babel/template" "^7.1.2" + babel-plugin-istanbul@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765" @@ -2929,6 +2936,13 @@ babel-plugin-transform-react-remove-prop-types@0.4.24: resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a" integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA== +babel-plugin-wildcard@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/babel-plugin-wildcard/-/babel-plugin-wildcard-7.0.0.tgz#ad72322e6b794717eeb616f8966c17ec1e431bfb" + integrity sha512-3duaRaULzxmmgr+YO9EPEE3m/irVyOWKvXCOz2S41tlp0g2UarSEtpM++D3IS+asK205OOqW1ajnjFeoRRqfZg== + dependencies: + rimraf "^2.6.2" + babel-preset-current-node-syntax@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b" @@ -3953,6 +3967,17 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7: safe-buffer "^5.0.1" sha.js "^2.4.8" +create-index@^2.6.0: + version "2.6.0" + resolved "https://registry.yarnpkg.com/create-index/-/create-index-2.6.0.tgz#6839c1445513a23c655d331bcdb34528466d6bf9" + integrity sha512-c9p7sNMIfiKv+RRORw9jbwxMRLrkt0Hq8PFGLxcDXGoMqqGrwnDIw97tUnpdp9rAkIToAPbqejH6qHpGWQGAww== + dependencies: + chalk "^4.0.0" + glob "^7.1.6" + lodash "^4.17.15" + moment "^2.25.3" + yargs "^15.3.1" + cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" @@ -8247,7 +8272,7 @@ mkdirp@^1.0.3, mkdirp@^1.0.4: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== -moment@^2.26.0: +moment@^2.25.3, moment@^2.26.0: version "2.29.1" resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ== @@ -10775,7 +10800,7 @@ rimraf@2.6.3: dependencies: glob "^7.1.3" -rimraf@^2.5.4, rimraf@^2.6.3: +rimraf@^2.5.4, rimraf@^2.6.2, rimraf@^2.6.3: version "2.7.1" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec" integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w== @@ -12991,7 +13016,7 @@ yargs@^13.3.2: y18n "^4.0.0" yargs-parser "^13.1.2" -yargs@^15.4.1: +yargs@^15.3.1, yargs@^15.4.1: version "15.4.1" resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8" integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==