Compare commits

...

5 Commits

  1. 5
      .vscode/extensions.json
  2. 4
      src/Redux/proxy.js
  3. 1
      src/index.js
  4. 13
      src/views/Auth/Auth.js
  5. 8
      src/views/Auth/Auth.scss
  6. 95
      src/views/Auth/Login/Code/Code.js
  7. 10
      src/views/Auth/Login/Login.js
  8. 33
      src/views/Auth/Login/Mobile/Mobile.js
  9. 5
      src/views/Auth/Login/Timer/Timer.css
  10. 66
      src/views/Auth/Login/Timer/Timer.js
  11. 13
      src/views/ChatRoom/Body/Body.js
  12. 23
      src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.js
  13. 22
      src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss
  14. 12
      src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
  15. 37
      src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js

@ -0,0 +1,5 @@
{
"recommendations": [
"rvest.vs-code-prettier-eslint"
]
}

@ -1,6 +1,6 @@
import axios from 'axios';
import { toast } from 'react-toastify';
const baseURL = 'http://localhost:4040/api/v1'; //"https://chatstory.ir/api/v1";
const baseURL = 'https://chatstory.ir/api/v1'; //"https://chatstory.ir/api/v1";
const token = '';
const loginURL = 'user/otp/login';
const logoutURL = 'user/logout';
@ -31,7 +31,7 @@ class Proxy {
if (await this.refresh()) return this.result(url, (await fetch()).data.data);
break;
default:
toast(response.data.message);
toast.error(response.data.message);
}
return false;
};

@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.scss';
import 'react-toastify/dist/ReactToastify.css';
ReactDOM.render(
<React.StrictMode>

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import {ToastContainer} from 'react-toastify';
import Logo from './Logo/Logo';
import Bio from './Bio/Bio';
import Login from './Login/Login';
@ -24,6 +24,17 @@ export default class Auth extends Component {
{this.state.page === 'logo' ? <Logo setPage={this.setPage} /> : null}
{this.state.page === 'bio' ? <Bio setPage={this.setPage} /> : null}
{this.state.page === 'login' ? <Login /> : null}
<ToastContainer
position="bottom-right"
autoClose={1500}
hideProgressBar={true}
newestOnTop={true}
closeOnClick
rtl={true}
pauseOnFocusLoss
draggable
pauseOnHover
/>
</div>
);
}

@ -5,5 +5,13 @@
direction: rtl;
overflow-x: hidden;
position: relative;
.Toastify__toast-container {
width: calc(100vw - 20px) !important;
padding: 0 !important;
left: 0 !important;
bottom: 30px !important;
margin: 0px auto !important;
max-height: 50px;
}
}
}

@ -1,14 +1,13 @@
import React, { Component } from 'react';
import Timer from '../Timer/Timer';
export default class Code extends Component {
constructor(props) {
super(props);
this.state = {
auth_code1: '',
auth_code2: '',
auth_code3: '',
auth_code4: '',
flag: false,
resendStatus: false,
};
}
@ -20,19 +19,21 @@ export default class Code extends Component {
changeValue = (e) => {
if (e.target.value.match('^[0-9]{1}$')) {
this.setState({
[e.target.name]: e.target.value,
});
if (e.target.name === 'auth_code1') {
this.setState({ o1: e.target.value });
if (e.target.name === 'o1') {
if(typeof this.state.o1 === Number){
console.log(e.target.value);
}else{
this.setState({ o1 : e.target.value });
}
this.inputRef2.focus();
} else if (e.target.name === 'auth_code2') {
} else if (e.target.name === 'o2') {
this.setState({ o2: e.target.value });
this.inputRef3.focus();
} else if (e.target.name === 'auth_code3') {
} else if (e.target.name === 'o3') {
this.setState({ o3: e.target.value });
this.inputRef4.focus();
} else if (e.target.name === 'auth_code4') {
} else if (e.target.name === 'o4') {
this.setState({ o4: e.target.value });
const o4 = e.target.value;
const { o1, o2, o3 } = this.state;
this.props.parent.setState({ otp: `${o1}${o2}${o3}${o4}` });
@ -48,15 +49,15 @@ export default class Code extends Component {
this.setState({
[e.target.name]: '',
});
if (e.target.name === 'auth_code1') {
if (e.target.name === 'o1') {
return;
} else if (e.target.name === 'auth_code2') {
} else if (e.target.name === 'o2') {
this.inputRef1.focus();
return;
} else if (e.target.name === 'auth_code3') {
} else if (e.target.name === 'o3') {
this.inputRef2.focus();
return;
} else if (e.target.name === 'auth_code4') {
} else if (e.target.name === 'o4') {
this.inputRef3.focus();
return;
}
@ -67,6 +68,17 @@ export default class Code extends Component {
this.inputRef1.focus();
}
onInput= (e) => {
e.target.value = e.target.value
.replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) {
return c.charCodeAt(0) & 0xf;
})
.replace(/[^\d]/, '')
.slice(-1);
}
render() {
return (
<>
@ -76,53 +88,72 @@ export default class Code extends Component {
</div>
<div className="login-code__bottom d-flex">
<input
name="auth_code1"
type="number"
name="o1"
type="text"
onChange={(e) => this.changeValue(e)}
maxLength="1"
maxLength="2"
inputMode="numeric"
ref={(input) => {
this.inputRef1 = input;
}}
autoComplete="false"
value={this.state.auth_code1}
value={this.state.o1}
onKeyDown={(e) => this.keyboardEvent(e)}
onInput={this.onInput}
/>
<input
name="auth_code2"
type="number"
name="o2"
type="text"
onChange={(e) => this.changeValue(e)}
maxLength="1"
maxLength="2"
inputMode="numeric"
ref={(input) => {
this.inputRef2 = input;
}}
autoComplete="false"
value={this.state.auth_code2}
value={this.state.o2}
onKeyDown={(e) => this.keyboardEvent(e)}
onInput={this.onInput}
/>
<input
name="auth_code3"
type="number"
name="o3"
type="text"
onChange={(e) => this.changeValue(e)}
maxLength="1"
maxLength="2"
inputMode="numeric"
ref={(input) => {
this.inputRef3 = input;
}}
autoComplete="false"
value={this.state.auth_code3}
value={this.state.o3}
onKeyDown={(e) => this.keyboardEvent(e)}
onInput={this.onInput}
/>
<input
name="auth_code4"
type="number"
name="o4"
type="text"
onChange={(e) => this.changeValue(e)}
maxLength="1"
maxLength="2"
inputMode="numeric"
ref={(input) => {
this.inputRef4 = input;
}}
autoComplete="false"
value={this.state.auth_code4}
value={this.state.o4}
onKeyDown={(e) => this.keyboardEvent(e)}
onInput={this.onInput}
/>
{!this.state.resendStatus ? (
<Timer seconds={5} parent={this} />
) : (
<span
style={{ top: 150, color: 'blue', textDecoration: 'underline' }}
className="logo__footer d-flex align-self-start"
onClick={ () => this.props.parent.resend()}
>
دریافت مجدد
</span>
)}
<div className="logo__footer d-flex align-self-center">
<h2
style={{

@ -15,10 +15,20 @@ class Login extends Component {
}
async componentDidUpdate() {
const { cellphone, otp, section } = this.state;
// if(cellphone.length === 9 && !otp){
// this.setState({section: 1});
// this.props.otp({cellphone});
// }
if (cellphone && !otp) this.props.otp({ cellphone });
if (section && cellphone && otp) this.props.login({ cellphone, otp });
}
resend = () => {
const {cellphone} = this.state;
this.props.otp({cellphone});
}
render() {
const { section } = this.state;
return (

@ -3,6 +3,7 @@ import phonenumber from '../../../../assets/icons/phonenumber.png';
export default class Mobile extends Component {
render() {
return (
<>
<div className="login-mobile__top d-flex">
@ -11,20 +12,24 @@ export default class Mobile extends Component {
<img src={phonenumber} alt="" />
</div>
<div className="login-mobile__input d-flex">
<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>
<form onSubmit={() => this.props.parent.setState({ section: 1, cellphone: '09' + this.state.cellphone })} >
<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]/, ''))
}
// onAction={}
/>
<div>09</div>
</form>
</div>
<button
onClick={() =>

@ -0,0 +1,5 @@
.timer{
flex-direction: row;
direction: rtl !important;
margin-right: 10px;
}

@ -0,0 +1,66 @@
import { Component } from 'react';
import './Timer.css';
export default class Timer extends Component {
constructor(props) {
super(props);
this.state = { time: {}, seconds: this.props.seconds, flag: true, };
this.timer = 0;
this.startTimer = this.startTimer.bind(this);
this.countDown = this.countDown.bind(this);
}
secondsToTime(secs) {
let hours = Math.floor(secs / (60 * 60));
let divisor_for_minutes = secs % (60 * 60);
let minutes = Math.floor(divisor_for_minutes / 60);
let divisor_for_seconds = divisor_for_minutes % 60;
let seconds = Math.ceil(divisor_for_seconds);
let obj = {
"h": hours,
"m": minutes,
"s": seconds
};
return obj;
}
componentDidMount() {
this.startTimer();
let timeLeftVar = this.secondsToTime(this.state.seconds);
this.setState({ time: timeLeftVar });
}
startTimer() {
if (this.timer === 0 && this.state.seconds > 0) {
this.timer = setInterval(this.countDown, 1000);
}
}
countDown = async () => {
// Remove one second, set state so a re-render happens.
let seconds = this.state.seconds - 1;
this.setState({
time: this.secondsToTime(seconds),
seconds: seconds,
});
if (seconds === 0) {
this.props.parent.setState({ resendStatus : true });
}
}
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return (
<div className="timer logo__footer d-flex" style={{ top : 150,color : 'blue' }}>
<div className="ml-2">دریافت مجدد کد در</div>
<div>{this.state.time.s}</div>:<div>{this.state.time.m+this.state.time.h*60}</div>
<div className="mr-2">دیگر</div>
</div>
);
}
}

@ -5,7 +5,7 @@ import ChatSuggest from './ChatSuggest/ChatSuggest';
import { RecordState } from 'audio-react-recorder';
import ReactPlayer from 'react-player';
import ReactAudioPlayer from 'react-audio-player';
import { ToastContainer } from 'react-toastify';
import photo from '../../../assets/images/reza.png';
import photo1 from '../../../assets/images/user2.png';
import './Body.scss';
@ -419,6 +419,17 @@ class Body extends Component {
) : null}
{this.state.footer === 'suggest' ? <ChatSuggest suggest={this.state.suggest} /> : null}
</div>
<ToastContainer
position="bottom-right"
autoClose={1500}
hideProgressBar={true}
newestOnTop={true}
closeOnClick
rtl={true}
pauseOnFocusLoss
draggable
pauseOnHover
/>
</div>
);
}

@ -7,8 +7,8 @@ export default class ChatSuggest extends Component {
return (
<div className="chat-suggest portrait-slider d-flex flex-column">
<Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}>
{suggest.map((item, i) => (
<Suggest item={item} key={i} />
{suggest.map((row, i) => (
<Row row={row} key={i} />
))}
</Carousel>
</div>
@ -16,9 +16,16 @@ export default class ChatSuggest extends Component {
}
}
class Suggest extends Component {
render() {
const { item } = this.props;
return <div className="chat-suggest__item d-flex">{item.text}</div>;
}
}
const Row = (row) => {
return (
<div className="chat-suggest__row d-flex">
{row.map((item, i) => (
<Suggest item={item} key={i} />
))}
</div>
);
};
const Suggest = (item) => {
return <div className="chat-suggest__row--item d-flex">{item.text}</div>;
};

@ -6,16 +6,20 @@
// height : 40px;
padding: 2px 0px 0px;
align-items: flex-end;
&__item {
padding: 8px 6px;
background-color: white;
border-radius: 5px;
margin: 5px;
width: 100% !important;
justify-content: center;
color: black;
min-height: 60px;
&__row{
width: 100%;
&--item {
padding: 8px 6px;
background-color: white;
border-radius: 5px;
margin: 5px;
width: 100% !important;
justify-content: center;
color: black;
min-height: 60px;
}
}
}
}

@ -3,15 +3,19 @@ import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import arrayMove from 'array-move';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
const SortableItem = SortableElement(({ value }) => (
<div className="message-2d__options--draggable d-flex">{value}</div>
const SortableItem = SortableElement(({ row }) => (
<div className="message-2d__options--row d-flex">
{row.map((item) => (
<div>{item.text}</div>
))}
</div>
));
const SortableList = SortableContainer(({ items }) => {
return (
<div className="message-2d__options d-flex flex-column">
{items.map((value, index) => (
<SortableItem key={`item-${value}`} index={index} value={value} />
{items.map((row, index) => (
<SortableItem key={`item-${index}`} index={index} value={row} />
))}
</div>
);

@ -38,19 +38,8 @@ export default class RadioMessage extends Component {
) : null}
</div>
<div className="message-2d__options d-flex flex-wrap justify-content-center">
{message.options.map((item, i) => (
<div
key={i}
onClick={() => this.handleRadioChange(item.name)}
className="message-2d__options--radio"
style={{
backgroundColor:
item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)',
color: item.name === this.state.value ? 'white' : 'black',
}}
>
{item.name}
</div>
{message.options.map((row, i) => (
<Row row={row} key={i} />
))}
</div>
<button className="message-2d__submit">
@ -61,3 +50,25 @@ export default class RadioMessage extends Component {
);
}
}
const Row = (row) => {
return (
<div
key={i}
onClick={() => this.handleRadioChange(item.name)}
className="message-2d__options--row d-flex"
style={{
backgroundColor: item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)',
color: item.name === this.state.value ? 'white' : 'black',
}}
>
{row.map((item) => (
<Item item={item} />
))}
</div>
);
};
const Item = (item) => {
return <div>{item.name}</div>;
};

Loading…
Cancel
Save