Gorji 4 years ago
parent 76af91c37c
commit ab8c506dd5
  1. 20
      package.json
  2. 50
      src/Redux/proxy.js
  3. 5
      src/Router.js
  4. 2
      src/views/Auth/Auth.js
  5. 2
      src/views/Auth/Auth.scss
  6. 2
      src/views/Auth/Bio/Bio.scss
  7. 7
      src/views/Auth/Login/Code/Code.js
  8. 23
      src/views/Auth/Login/Login.js
  9. 2
      src/views/Auth/Login/Login.scss
  10. 8
      src/views/Auth/Login/Mobile/Mobile.js
  11. 2
      src/views/Auth/Logo/Logo.scss
  12. 1
      src/views/ChatRoom/Body/Body.js
  13. 3
      src/views/ChatRoom/Body/Body.scss
  14. 2
      src/views/ChatRoom/Body/ChatInputs/ChatInputs.scss
  15. 2
      src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss
  16. 2
      src/views/ChatRoom/Body/Message/Message2D/Message2D.scss
  17. 2
      src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss
  18. 3
      src/views/ChatRoom/ChatInfo/ChatInfo.scss
  19. 2
      src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.scss
  20. 2
      src/views/ChatRoom/ChatInfo/Gallery/Gallery.scss
  21. 3
      src/views/ChatRoom/ChatRoom.scss
  22. 2
      src/views/ChatRoom/Header/Header.scss
  23. 6
      src/views/Home/Body/Body.js
  24. 3
      src/views/Home/Body/Body.scss
  25. 2
      src/views/Home/Body/ChatList/Chat/Chat.scss
  26. 11
      src/views/Home/Body/ChatList/ChatList.js
  27. 2
      src/views/Home/Body/ChatList/ChatList.scss
  28. 2
      src/views/Home/Body/Location/Location.scss
  29. 2
      src/views/Home/Header/Header.scss
  30. 6
      src/views/Home/Header/NavbarDrawer/NavbarDrawer.js
  31. 3
      src/views/Home/Home.scss
  32. 2
      src/views/Home/TabBar/TabBar.scss

@ -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"
]
}

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

@ -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>

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

@ -1,4 +1,4 @@
@media screen and (max-width: 450px){
@media screen and (max-width: 4500px){
.auth{
width: 100vw;
height: 100vh;

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

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

@ -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(
<div className="login d-flex flex-column">
{
this.state.section === 0 ?
<Mobile setSection={this.setSection} /> : null
}
{
this.state.section === 1 ?
<Code setSection={this.setSection}/> : null
section ? <Code parent={this}/> :<Mobile parent={this} />
}
<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>

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

@ -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>
</>

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

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

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

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

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

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

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

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

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

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

@ -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{

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

@ -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 === 'location' ? <Location /> : null}
{this.props.tabBar === 'info' ? <Info /> : null}
{this.props.tabBar === 'chat' ? <ChatList/> : null}
{this.props.tabBar === 'location' ? <Location/> : null}
{this.props.tabBar === 'info' ? <Info/> : null}
</div>
);
}

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

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

@ -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 (

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

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

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

@ -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
},
],
}

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

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

Loading…
Cancel
Save