reza added timer

.vscode/extensions.json

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

src/Redux/proxy.js

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

src/index.js

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

src/views/Auth/Auth.js

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

src/views/Auth/Auth.scss

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

src/views/Auth/Login/Code/Code.js

@@ -1,14 +1,17 @@
 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,
     };
   }
 
@@ -123,6 +126,17 @@ export default class Code extends Component {
             value={this.state.auth_code4}
             onKeyDown={(e) => this.keyboardEvent(e)}
           />
+          {!this.state.resendStatus ? (
+            <Timer seconds={119} 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={{

src/views/Auth/Login/Login.js

@@ -19,6 +19,11 @@ class Login extends Component {
     if (section && cellphone && otp) this.props.login({ cellphone, otp });
   }
 
+  resend = () => {
+    const {cellphone} = this.state;
+    this.props.otp({cellphone});
+  }
+
   render() {
     const { section } = this.state;
     return (

src/views/Auth/Login/Timer/Timer.css

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

src/views/Auth/Login/Timer/Timer.js

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