@media

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": {
+  "browserslist": [
-    "production": [
+    ">0.2%",
-      ">0.2%",
+    "not dead",
-      "not dead",
+    "not op_mini all"
-      "not op_mini all"
+  ]
-    ],
+}
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}

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;

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 = <Route exact path={'/'}>			
 			<Home />	
 		</Route> 

src/views/Auth/Auth.js

@@ -28,7 +28,7 @@ export default class Auth extends Component {
           this.state.page === 'bio' ? <Bio setPage={this.setPage} /> : null
         }
         {
-          this.state.page === 'login' ? <Login /> : null
+          this.state.page === 'login' ? <Login/> : null
         }
       </div>
     );

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;

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%;

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;
         
       }

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) => {
+  async componentDidUpdate(){
-    this.setState({
+    const {cellphone,otp,section} = this.state
-      section : val,
+    if(cellphone && !otp) proxy.get("public/otp",{cellphone})
-    })
+    if(section && cellphone && otp) if(await proxy.login({cellphone,otp})) window.location.href="/"
-  }
-  componentDidMount() {
-    
   }
   
   render() {
+    const {section} = this.state;
     return(
       <div className="login d-flex flex-column">
         {
-          this.state.section === 0 ? 
+          section  ? <Code parent={this}/> :<Mobile parent={this} /> 
-          <Mobile setSection={this.setSection} /> : null
-        }
-        {
-          this.state.section === 1 ? 
-          <Code setSection={this.setSection}/> : null
         }
+       
         <div className="logo__footer d-flex align-self-center">
             <h2 style={{fontFamily : 'IRANSansNumeralBold',marginRight : 10, color : "rgb(108, 72, 191)"}}>Eema</h2>
             <h2 style={{fontSize :17, color : "rgb(108, 72, 191)"}}>Entertainments</h2>

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%;

src/views/Auth/Login/Mobile/Mobile.js

@@ -11,10 +11,14 @@ export default class Mobile extends Component {
           <img src={phonenumber}  alt=""/>
         </div>
         <div className="login-mobile__input d-flex">
-          <input type="text" maxLength={9} />
+          <input type="text" maxLength={9}  inputMode="numeric"
+          onChange={e=>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]/,'')} />
           <div>09</div>
         </div>
-        <button onClick={() => this.props.setSection(1)}>
+        <button onClick={() => this.props.parent.setState({section:1,cellphone:"09"+this.state.cellphone})}>
           ادامه
         </button>
       </>

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%;

src/views/ChatRoom/Body/Body.js

@@ -506,6 +506,7 @@ export default class Body extends Component {
         </div> 
         <div className="chat-body__content d-flex flex-column" id="chatroom"  
           style={{
+            overflowX: 'hidden',
             overflowY : this.state.file !== null ? 'hidden' : 'scroll',
             paddingBottom : this.state.footer === 'suggest' ? 110 : 70
           }}

src/views/ChatRoom/Body/Body.scss

@@ -1,4 +1,4 @@
-@media screen and (max-width: 450px){
+@media screen and (max-width: 4500px){
   .chat-body{
     background-color: rgb(210, 196, 214);
     justify-content:flex-start;
@@ -81,6 +81,7 @@
       background: url(../../../assets/images/chat.png);
       background-size: cover;
       overflow-y: scroll;
+      overflow-x: hidden;
       position: fixed;
       bottom: 0px;
       left: 0;

src/views/ChatRoom/Body/ChatInputs/ChatInputs.scss

@@ -1,4 +1,4 @@
-@media screen and (max-width: 450px){
+@media screen and (max-width: 4500px){
   .chat-inputs{
     border-bottom-right-radius: 40px;
     border-bottom-left-radius: 40px;

src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss

@@ -1,4 +1,4 @@
-@media screen and (max-width: 450px){
+@media screen and (max-width: 4500px){
   .chat-suggest{
     // border-bottom-right-radius: 40px;
     // border-bottom-left-radius: 40px;

src/views/ChatRoom/Body/Message/Message2D/Message2D.scss

@@ -1,4 +1,4 @@
-@media screen and (max-width: 450px){
+@media screen and (max-width: 4500px){
   .message-2d{
     // width: 100%;
     position: relative;

src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss

@@ -1,4 +1,4 @@
-@media screen and (max-width: 450px){
+@media screen and (max-width: 4500px){
   .normal-message{
     // width: 100%;
     position: relative;

src/views/ChatRoom/ChatInfo/ChatInfo.scss

@@ -1,4 +1,4 @@
-@media screen and (max-width: 450px){
+@media screen and (max-width: 4500px){
   .chat-info{
     width: 100%;
     min-height: 100vh;
@@ -45,6 +45,7 @@
       transform: translateY(-40px);
       top : -150px;
       overflow-y: scroll;
+      overflow-x: hidden;
       &::-webkit-scrollbar{
         display: none;
       }

src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.scss

@@ -1,4 +1,4 @@
-@media screen and (max-width: 450px){
+@media screen and (max-width: 4500px){
   .file-tabs{
     width: 100%;
     position: relative;

src/views/ChatRoom/ChatInfo/Gallery/Gallery.scss

@@ -1,4 +1,4 @@
-@media screen and (max-width: 450px){
+@media screen and (max-width: 4500px){
   .gallery-modal{
     width: 100%;
     height: 100%;

src/views/ChatRoom/ChatRoom.scss

@@ -1,10 +1,11 @@
-@media screen and (max-width: 450px){
+@media screen and (max-width: 4500px){
   .chat-room{
     flex : 1;
     background: rgb(139, 73, 186);
     background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%);
     height: 100vh;
     overflow-y: hidden;
+    
     width:  100vw;
     box-shadow: 0px 0px 40px rgba(145, 145, 145, 0.8);
     &__status{

src/views/ChatRoom/Header/Header.scss

@@ -1,4 +1,4 @@
-@media screen and (max-width: 450px){
+@media screen and (max-width: 4500px){
   .chat-header{
     height: 70px;
     width: 100%;

src/views/Home/Body/Body.js

@@ -8,9 +8,9 @@ export default class Body extends Component {
   render(){
     return (
       <div className="body d-flex">
-        {this.props.tabBar === 'chat' ? <ChatList /> : null}
+        {this.props.tabBar === 'chat' ? <ChatList/> : null}
-        {this.props.tabBar === 'location' ? <Location /> : null}
+        {this.props.tabBar === 'location' ? <Location/> : null}
-        {this.props.tabBar === 'info' ? <Info /> : null}
+        {this.props.tabBar === 'info' ? <Info/> : null}
       </div>
     );
   }

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;

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;

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 (

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;

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%;

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%;

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: <ExitToAppIcon style={{color : "white" , width : 35, height : 35,marginLeft : 10}} />,
           toast : '',
+          onClick :   proxy.logout
+          
         },
       ],
     }

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%);

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%;