diff --git a/package.json b/package.json index a8e3c4e..1f29171 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "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", @@ -44,16 +45,9 @@ "react-app/jest" ] }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } -} + "browserslist": [ + ">0.2%", + "not dead", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/src/Redux/proxy.js b/src/Redux/proxy.js new file mode 100644 index 0000000..cccdbf9 --- /dev/null +++ b/src/Redux/proxy.js @@ -0,0 +1,50 @@ +import axios from 'axios' +const Axios = axios.create({ + withCredentials: true, + validateStatus:null, + baseURL: "https://chatstory.ir/api/v1" + // baseURL: "http://localhost:4040/api/v1" + }) + class Proxy{ + constructor({alert,loginUrl}={}){ + this.alert = alert || window.alert; + this.loginUrl = loginUrl || "user/otp/login"; + } + 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)=>{ + let response = await fetch() + switch(response.status){ + case 200: return response.data.data; + case 401: + console.log("refreshing") + if(await this.refresh()) return (await fetch()).data.data; + break; + default: window.alert(response.data.message); + } + return false; + } + refresh = async()=>{ + let refresh = localStorage.getItem('refresh') + if(!refresh) window.location.href = "/" + let login = await this.login({},{headers: { "Authorization": `Bearer ${refresh}`}}) + return login ? true : false + } + login = async(data,opt={})=>{ + const login = await this.post(this.loginUrl,data,opt) + if(!login) return false; + localStorage.setItem("refresh",login.refreshToken) + delete login.refreshToken + return login + } + logout = async()=>{ + localStorage.removeItem("refresh"); + window.location.href = "/" + } + status = ()=>localStorage.getItem("refresh")?true:false; + + } + const _proxy = new Proxy() + export default _proxy; \ No newline at end of file diff --git a/src/Router.js b/src/Router.js index f5f6453..d21d079 100644 --- a/src/Router.js +++ b/src/Router.js @@ -6,12 +6,11 @@ import { Provider } from "react-redux"; import Home from "./views/Home/Home"; import ChatRoom from "./views/ChatRoom/ChatRoom"; import Auth from "./views/Auth/Auth"; - - +import proxy from "./Redux/proxy"; export default class AppRouter extends Component { render() { let home; - if(!localStorage.getItem("access_token")){ + if(proxy.status()){ home = diff --git a/src/views/Auth/Auth.js b/src/views/Auth/Auth.js index 38dc521..03f9dd3 100644 --- a/src/views/Auth/Auth.js +++ b/src/views/Auth/Auth.js @@ -28,7 +28,7 @@ export default class Auth extends Component { this.state.page === 'bio' ? : null } { - this.state.page === 'login' ? : null + this.state.page === 'login' ? : null } ); diff --git a/src/views/Auth/Auth.scss b/src/views/Auth/Auth.scss index 81de3a9..c041c4c 100644 --- a/src/views/Auth/Auth.scss +++ b/src/views/Auth/Auth.scss @@ -1,4 +1,4 @@ -@media screen and (max-width: 450px){ +@media screen and (max-width: 4500px){ .auth{ width: 100vw; height: 100vh; diff --git a/src/views/Auth/Bio/Bio.scss b/src/views/Auth/Bio/Bio.scss index 2f11fd6..152f521 100644 --- a/src/views/Auth/Bio/Bio.scss +++ b/src/views/Auth/Bio/Bio.scss @@ -1,4 +1,4 @@ -@media screen and (max-width: 450px){ +@media screen and (max-width: 4500px){ .bio{ width: 100%; height: 100%; diff --git a/src/views/Auth/Login/Code/Code.js b/src/views/Auth/Login/Code/Code.js index 2506e34..dc110e9 100644 --- a/src/views/Auth/Login/Code/Code.js +++ b/src/views/Auth/Login/Code/Code.js @@ -24,13 +24,18 @@ export default class Code extends Component { [e.target.name]: e.target.value, }) if(e.target.name === 'auth_code1'){ + this.setState({o1:e.target.value}) this.inputRef2.focus(); }else if(e.target.name === 'auth_code2'){ + this.setState({o2:e.target.value}) this.inputRef3.focus(); }else if(e.target.name === 'auth_code3'){ + this.setState({o3:e.target.value}) this.inputRef4.focus(); }else if(e.target.name === 'auth_code4'){ - window.location.href="/" + const o4 = e.target.value; + const {o1,o2,o3} = this.state + this.props.parent.setState({otp:`${o1}${o2}${o3}${o4}`}) return; } diff --git a/src/views/Auth/Login/Login.js b/src/views/Auth/Login/Login.js index ba0b08a..20d5a87 100644 --- a/src/views/Auth/Login/Login.js +++ b/src/views/Auth/Login/Login.js @@ -2,8 +2,9 @@ import React, { Component } from 'react'; import Mobile from './Mobile/Mobile'; import Code from './Code/Code'; - +import proxy from '../../../Redux/proxy' import './Login.scss'; + export default class Login extends Component { constructor(props) { super(props); @@ -11,26 +12,20 @@ export default class Login extends Component { section : 0, } } - setSection = (val) => { - this.setState({ - section : val, - }) - } - componentDidMount() { - + 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="/" } render() { + const {section} = this.state; return(
{ - this.state.section === 0 ? - : null - } - { - this.state.section === 1 ? - : null + section ? : } +

Eema

Entertainments

diff --git a/src/views/Auth/Login/Login.scss b/src/views/Auth/Login/Login.scss index 0055fd0..76898fc 100644 --- a/src/views/Auth/Login/Login.scss +++ b/src/views/Auth/Login/Login.scss @@ -1,4 +1,4 @@ -@media screen and (max-width: 450px){ +@media screen and (max-width: 4500px){ .login{ width: 100%; height: 100%; diff --git a/src/views/Auth/Login/Mobile/Mobile.js b/src/views/Auth/Login/Mobile/Mobile.js index 7639e85..e3eefe5 100644 --- a/src/views/Auth/Login/Mobile/Mobile.js +++ b/src/views/Auth/Login/Mobile/Mobile.js @@ -11,10 +11,14 @@ export default class Mobile extends Component {
- + this.setState({cellphone:e.target.value})} + onInput={(e)=>e.target.value=e.target.value.replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) { + return c.charCodeAt(0) & 0xf; + }).replace(/[^\d]/,'')} />
09
- diff --git a/src/views/Auth/Logo/Logo.scss b/src/views/Auth/Logo/Logo.scss index 0d2bf79..8463883 100644 --- a/src/views/Auth/Logo/Logo.scss +++ b/src/views/Auth/Logo/Logo.scss @@ -1,4 +1,4 @@ -@media screen and (max-width: 450px){ +@media screen and (max-width: 4500px){ .logo{ width: 100%; height: 100%; diff --git a/src/views/ChatRoom/Body/Body.js b/src/views/ChatRoom/Body/Body.js index 9f16058..28ff07c 100644 --- a/src/views/ChatRoom/Body/Body.js +++ b/src/views/ChatRoom/Body/Body.js @@ -506,6 +506,7 @@ export default class Body extends Component {
- {this.props.tabBar === 'chat' ? : null} - {this.props.tabBar === 'location' ? : null} - {this.props.tabBar === 'info' ? : null} + {this.props.tabBar === 'chat' ? : null} + {this.props.tabBar === 'location' ? : null} + {this.props.tabBar === 'info' ? : null}
); } diff --git a/src/views/Home/Body/Body.scss b/src/views/Home/Body/Body.scss index 8ccc048..a9d17c9 100644 --- a/src/views/Home/Body/Body.scss +++ b/src/views/Home/Body/Body.scss @@ -1,4 +1,4 @@ -@media screen and (max-width: 450px){ +@media screen and (max-width: 4500px){ .body{ background-color: rgb(228, 227, 227); flex : 1; @@ -6,6 +6,7 @@ border-top-left-radius: 40px; z-index: 10; overflow-y : scroll; + overflow-x: hidden; border :4px solid white; top:5px; position: relative; diff --git a/src/views/Home/Body/ChatList/Chat/Chat.scss b/src/views/Home/Body/ChatList/Chat/Chat.scss index 1f979e5..0812a55 100644 --- a/src/views/Home/Body/ChatList/Chat/Chat.scss +++ b/src/views/Home/Body/ChatList/Chat/Chat.scss @@ -1,4 +1,4 @@ -@media screen and (max-width: 450px){ +@media screen and (max-width: 4500px){ .chat{ width: 100%; direction: rtl; diff --git a/src/views/Home/Body/ChatList/ChatList.js b/src/views/Home/Body/ChatList/ChatList.js index 9f2fcee..fdba790 100644 --- a/src/views/Home/Body/ChatList/ChatList.js +++ b/src/views/Home/Body/ChatList/ChatList.js @@ -1,10 +1,11 @@ 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); @@ -26,6 +27,14 @@ export default class ChatList extends Component { }, ], } + + + + } + async componentDidMount(){ + console.log(proxy) + let chatList = await proxy.get('chat/list'); + console.log(chatList) } render(){ return ( diff --git a/src/views/Home/Body/ChatList/ChatList.scss b/src/views/Home/Body/ChatList/ChatList.scss index 8283c21..8be54b1 100644 --- a/src/views/Home/Body/ChatList/ChatList.scss +++ b/src/views/Home/Body/ChatList/ChatList.scss @@ -1,4 +1,4 @@ -@media screen and (max-width: 450px){ +@media screen and (max-width: 4500px){ .chat-list{ flex : 1; border-radius: 40px; diff --git a/src/views/Home/Body/Location/Location.scss b/src/views/Home/Body/Location/Location.scss index 5aa6b8e..6c796bc 100644 --- a/src/views/Home/Body/Location/Location.scss +++ b/src/views/Home/Body/Location/Location.scss @@ -1,4 +1,4 @@ -@media screen and (max-width: 450px){ +@media screen and (max-width: 4500px){ .location{ width: 100%; height: 100%; diff --git a/src/views/Home/Header/Header.scss b/src/views/Home/Header/Header.scss index daa5e07..2d7d767 100644 --- a/src/views/Home/Header/Header.scss +++ b/src/views/Home/Header/Header.scss @@ -1,4 +1,4 @@ -@media screen and (max-width: 450px){ +@media screen and (max-width: 4500px){ .header{ height: 60px; width: 100%; diff --git a/src/views/Home/Header/NavbarDrawer/NavbarDrawer.js b/src/views/Home/Header/NavbarDrawer/NavbarDrawer.js index ac91828..c4a4e7e 100644 --- a/src/views/Home/Header/NavbarDrawer/NavbarDrawer.js +++ b/src/views/Home/Header/NavbarDrawer/NavbarDrawer.js @@ -9,7 +9,7 @@ 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 './NavbarDrawer.scss'; @@ -51,9 +51,11 @@ class NavbarDrawer extends Component { }, { name: 'خروج', - link: '/', + link: '/auth', icon: , toast : '', + onClick : proxy.logout + }, ], } diff --git a/src/views/Home/Home.scss b/src/views/Home/Home.scss index bef0b16..ae77f13 100644 --- a/src/views/Home/Home.scss +++ b/src/views/Home/Home.scss @@ -1,5 +1,6 @@ -@media screen and (max-width: 450px){ +@media screen and (max-width: 4500px){ .home{ + overflow-y: hidden; flex : 1; background: rgb(139, 73, 186); background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%); diff --git a/src/views/Home/TabBar/TabBar.scss b/src/views/Home/TabBar/TabBar.scss index 581c2af..cfdc5cc 100644 --- a/src/views/Home/TabBar/TabBar.scss +++ b/src/views/Home/TabBar/TabBar.scss @@ -1,4 +1,4 @@ -@media screen and (max-width: 450px){ +@media screen and (max-width: 4500px){ .tabBar{ height: 50px; width: 100%;