bexoda qr ro zadam

src/AppRouter.js

@@ -1,8 +1,13 @@
 import React, { Component } from "react";
 import "./App.css";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-import history from "./History/index";
+import {
+  BrowserRouter as Router,
+  Route,
+  Switch,
+  Redirect,
+} from "react-router-dom";
 import { connect } from "react-redux";
+import { user } from "~/Redux/actions";
 
 import proxy from "./Redux/proxy";
 import Home from "./views/Home/index";
@@ -26,34 +31,27 @@ class AppRouter extends Component {
     super(props);
     window.router = this;
   }
+
   state = {};
+
   render() {
     let home = (
       <Route exact path={"/"}>
-        {proxy.status() ? (
-          this.props.profile.username ? (
-            <Home />
-          ) : (
-            <Auth page={"profile"} />
-          )
-        ) : (
-          // <Home />
-          <Auth />
-        )}
+        {proxy.status() ? <Home /> : <Auth />}
       </Route>
     );
 
     return (
-      <Router history={history}>
+      <Router>
         <Switch>
           {home}
-          <Route path={"/faq"}>
+          <Route exact path={"/faq"}>
             <Faq />
           </Route>
-          <Route path={"/contact"}>
+          <Route exact path={"/contact"}>
             <Contact />
           </Route>
-          <Route path={"/about"}>
+          <Route exact path={"/about"}>
             <About />
           </Route>
           <Route exact path={"/products"}>
@@ -65,6 +63,7 @@ class AppRouter extends Component {
           <Route exact path={"/qr"}>
             <QR />
           </Route>
+
           <Route exact path={"/auth"}>
             <Auth />
           </Route>
@@ -74,6 +73,7 @@ class AppRouter extends Component {
           <Route exact path={"/qr-scan"}>
             <QRScan />
           </Route>
+
           <Route exact path={"/activation"}>
             <Activation />
           </Route>
@@ -94,6 +94,14 @@ class AppRouter extends Component {
               <Chatroom />
             </Route>
           ) : null}
+          <Route path={""}>
+            <Redirect
+              to={{
+                pathname: "/qr",
+                search: "?id=" + window.location.pathname,
+              }}
+            />
+          </Route>
         </Switch>
       </Router>
     );
@@ -102,7 +110,7 @@ class AppRouter extends Component {
 
 export default connect(
   (state) => ({
-    profile: state.user.status || state.user.status.profile || {},
+    profile: state.user.status.profile || {},
     // status: state.user.status,
   }),
   {}

src/Redux/reducers/qr.js

@@ -1,7 +1,7 @@
 const initialState = {
   loading: false,
   error: null,
-  list: new Array(),
+  list: null,
 };
 export default function qr(state = initialState, action) {
   let { type, data } = action;

src/Redux/reducers/user.js

@@ -6,6 +6,7 @@ const initialState = {
   list: null,
   domains: [],
   mothers: [],
+  profileStatus: false,
 };
 export default function user(state = initialState, action) {
   let { type, data } = action;

src/views/Auth/Login/Cellphone/index.scss

@@ -83,7 +83,7 @@
 
 .mobile-auth-cellphone {
   width: 100%;
-  height: 100%;
+  height: 100vh;
   justify-content: center;
   align-items: center;
   max-width: 500px;

src/views/Auth/Login/Code/index.scss

@@ -60,7 +60,7 @@
 
 .mobile-auth-code {
   width: 100%;
-  height: 100%;
+  height: 100vh;
   justify-content: center;
   align-items: center;
   direction: ltr;

src/views/Auth/Profile/Input/index.js

@@ -19,7 +19,6 @@ export default function FormPropsTextFields(props) {
 
   const classes = useStyles();
   const { parent, defaultValue } = props;
-  console.log(defaultValue[props.name]);
   return (
     <form className={classes.root} noValidate autoComplete="off">
       <div>

src/views/Auth/Profile/index.js

@@ -73,14 +73,6 @@ class Profile extends Component {
     getProfile();
   }
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.profile !== this.props.profile) {
-      this.setState({
-        render: true,
-      });
-    }
-  }
-
   onSubmit = async (e) => {
     const {
       firstName,
@@ -133,7 +125,7 @@ class Profile extends Component {
                         name="firstName"
                         label="نام"
                         parent={this}
-                        defaultValue={profile.firstName}
+                        defaultValue={profile}
                       />
                     </div>
                     <div className="mb-2">
@@ -141,7 +133,7 @@ class Profile extends Component {
                         name="lastName"
                         label="نام خانوادگی"
                         parent={this}
-                        defaultValue={profile.lastName}
+                        defaultValue={profile}
                       />
                     </div>
                     <div className="mb-2">
@@ -149,7 +141,7 @@ class Profile extends Component {
                         name="username"
                         label="نام کاربری"
                         parent={this}
-                        defaultValue={profile.username}
+                        defaultValue={profile}
                         align="left"
                       />
                     </div>
@@ -168,6 +160,7 @@ class Profile extends Component {
                         label="کد ملی"
                         parent={this}
                         align="left"
+                        defaultValue={profile}
                       />
                     </div>
                     <div className="mb-2">
@@ -272,6 +265,7 @@ class Profile extends Component {
                           parent={this}
                           name="schoolId"
                           label={"نام مدرسه"}
+                          defaultValue={profile}
                         />
                       </div>
                     ) : null}
@@ -281,6 +275,7 @@ class Profile extends Component {
                           parent={this}
                           name="schoolId"
                           label={"محل تدریس"}
+                          defaultValue={profile}
                         />
                       </div>
                     ) : null}
@@ -290,6 +285,7 @@ class Profile extends Component {
                         name="postalCode"
                         label={"کد پستی"}
                         align="left"
+                        defaultValue={profile}
                       />
                     </div>
                     <div className="mb-2">
@@ -307,7 +303,12 @@ class Profile extends Component {
               </div>
             </div>
           ) : (
-            <Loader />
+            <div
+              className="d-flex justify-content-center align-items-center"
+              style={{ height: "100vh", width: "100vw" }}
+            >
+              <Loader />
+            </div>
           )
         ) : null}
         {window.innerWidth < 1000 ? (

src/views/Auth/Profile/index.scss

@@ -146,7 +146,6 @@
 
 .auth-profile {
   width: 100vw;
-  // height: 100vh;
   scrollbar-width: 0px;
   margin: 50px 0px;
   &::-webkit-scrollbar {

src/views/Auth/index.scss

@@ -1,7 +1,4 @@
 .auth {
   width: 100%;
-  height: 100vh;
-  min-height: 100vh;
   overflow-x: hidden;
-  min-height: 450px;
 }

src/views/QR/index.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import { Link } from "react-router-dom";
 import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
+import Loader from "~/components/Loader/index";
 import VoiceBox from "./VoiceBox/index.js";
 import VideoBox from "./VideoBox/index";
 import PDF from "./PDF/index";
@@ -48,8 +49,15 @@ class QR extends Component {
   };
 
   componentDidMount() {
-    console.log(typeof this.props.qrList);
+    if (window.location.search) {
+      let tail = window.location.search.slice(
+        window.location.search.lastIndexOf("/") + 1,
+        window.location.search.length
+      );
+      this.props.info({ tail: tail });
+    }
   }
+
   render() {
     const { QR, qrList } = this.props;
     const fontSize = {
@@ -80,125 +88,153 @@ class QR extends Component {
     return (
       <>
         {window.innerWidth > 1000 ? (
-          <>
-            <div className="qr d-flex flex-column">
-              <Navbar />
-              <div className="d-flex">
-                <section className="qr__sidebar d-flex flex-column p-2">
-                  <header className="qr__sidebar--header d-flex">
-                    <div className="qr__sidebar--header__right d-flex">
-                      <img src={QR.image} alt={QR.title} />
-                    </div>
-                    <div className="qr__sidebar--header__left d-flex flex-column">
-                      <h1 style={{ fontSize: fontSize.desktop.sidebar.h1 }}>
-                        {QR.title}
-                      </h1>
-                      <h2 style={{ fontSize: fontSize.desktop.sidebar.h2 }}>
-                        {QR.subTitle}
-                      </h2>
-                      <div style={{ fontSize: fontSize.desktop.sidebar.div }}>
-                        شما در حال مطالعه <strong>صفحه {QR.sample.page}</strong>{" "}
-                        هستید.
-                      </div>
-                      <div style={{ fontSize: fontSize.desktop.sidebar.div }}>
-                        پیشرفت شما در مطالعه کتاب به{" "}
-                        <span>{QR.sample.percent} درصد</span> رسیده است.
-                      </div>
-                    </div>
-                  </header>
-                  <SubjectsDropdown />
-                  <BookContent data={QR.data} />
-                </section>
-                <section className="qr__content d-flex flex-column">
-                  <header className="qr__content--header d-flex justify-content-end">
-                    <div className="qr__content--header__tools d-flex">
-                      <span
-                        className="d-flex justify-content-center align-items-center"
-                        onClick={() =>
-                          this.setState({ theme: !this.state.theme })
-                        }
-                      >
-                        <NightsStayOutlinedIcon
-                          style={{
-                            fontSize: 20,
-                            color: this.state.theme ? "#7dc241" : "white",
-                          }}
-                        />
-                      </span>
-                      <span
-                        className="d-flex justify-content-center align-items-center"
-                        onClick={() => this.handleZoom("increase")}
-                      >
-                        +
-                      </span>
-                      <span
-                        className="d-flex justify-content-center align-items-center"
-                        onClick={() => this.handleZoom("decrease")}
-                      >
-                        -
-                      </span>
-                    </div>
-                  </header>
-                  {QR.data.map((item, i) => (
-                    <Identifier fontSize={fontSize} data={item} key={i} />
-                  ))}
-                </section>
+          !this.props.loading ? (
+            <>
+              <div className="qr d-flex flex-column">
+                <Navbar />
+                {qrList ? (
+                  <div className="d-flex">
+                    <section className="qr__sidebar d-flex flex-column p-2">
+                      <header className="qr__sidebar--header d-flex">
+                        <div className="qr__sidebar--header__right d-flex">
+                          <img src={QR.image} alt={QR.title} />
+                        </div>
+                        <div className="qr__sidebar--header__left d-flex flex-column">
+                          <h1 style={{ fontSize: fontSize.desktop.sidebar.h1 }}>
+                            {QR.title}
+                          </h1>
+                          <h2 style={{ fontSize: fontSize.desktop.sidebar.h2 }}>
+                            {QR.subTitle}
+                          </h2>
+                          <div
+                            style={{ fontSize: fontSize.desktop.sidebar.div }}
+                          >
+                            شما در حال مطالعه{" "}
+                            <strong>صفحه {QR.sample.page}</strong> هستید.
+                          </div>
+                          <div
+                            style={{ fontSize: fontSize.desktop.sidebar.div }}
+                          >
+                            پیشرفت شما در مطالعه کتاب به{" "}
+                            <span>{QR.sample.percent} درصد</span> رسیده است.
+                          </div>
+                        </div>
+                      </header>
+                      <SubjectsDropdown />
+                      <BookContent data={qrList.content} />
+                    </section>
+                    <section className="qr__content d-flex flex-column">
+                      <header className="qr__content--header d-flex justify-content-end">
+                        <div className="qr__content--header__tools d-flex">
+                          <span
+                            className="d-flex justify-content-center align-items-center"
+                            onClick={() =>
+                              this.setState({ theme: !this.state.theme })
+                            }
+                          >
+                            <NightsStayOutlinedIcon
+                              style={{
+                                fontSize: 20,
+                                color: this.state.theme ? "#7dc241" : "white",
+                              }}
+                            />
+                          </span>
+                          <span
+                            className="d-flex justify-content-center align-items-center"
+                            onClick={() => this.handleZoom("increase")}
+                          >
+                            +
+                          </span>
+                          <span
+                            className="d-flex justify-content-center align-items-center"
+                            onClick={() => this.handleZoom("decrease")}
+                          >
+                            -
+                          </span>
+                        </div>
+                      </header>
+                      {qrList.content.map((item, i) => (
+                        <Identifier fontSize={fontSize} data={item} key={i} />
+                      ))}
+                    </section>
+                  </div>
+                ) : (
+                  <div className="qr__notAccess d-flex flex-column p-3">
+                    <h1>محتوایی برای این صفحه در دسترس نیست.!</h1>
+                  </div>
+                )}
               </div>
+              <Footer />
+            </>
+          ) : (
+            <div
+              className="d-flex justify-content-center align-items-center"
+              style={{ height: "100vh", width: "100vw" }}
+            >
+              <Loader />
             </div>
-            <Footer />
-          </>
+          )
         ) : null}
         {window.innerWidth < 1000 ? (
-          <>
-            <div className="mobile-qr d-flex flex-column">
-              <Navbar />
-              {this.props.qrList ? (
-                <div className="d-flex p-3">
-                  {this.state.menu ? (
-                    <div className="mobile-qr__buttons d-flex flex-column align-items-center">
-                      <div>
-                        <img
-                          src={exit}
-                          alt="خروج"
+          !this.props.loading ? (
+            <>
+              <div className="mobile-qr d-flex flex-column">
+                <Navbar />
+                {qrList ? (
+                  <div className="d-flex p-3">
+                    {this.state.menu ? (
+                      <div className="mobile-qr__buttons d-flex flex-column align-items-center">
+                        <div>
+                          <img
+                            src={exit}
+                            alt="خروج"
+                            onClick={() =>
+                              this.setState({ menu: !this.state.menu })
+                            }
+                          />
+                        </div>
+                        <button>نمایش تمامی محتواها</button>
+                        {qrList.content.map((item, i) => (
+                          <MenuIdentifier data={item} key={i} />
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="mobile-qr__buttons d-flex flex-column align-items-center">
+                        <MoreVertIcon
+                          style={{ fontSize: 40, color: "grey" }}
                           onClick={() =>
                             this.setState({ menu: !this.state.menu })
                           }
                         />
                       </div>
-                      <button>نمایش تمامی محتواها</button>
+                    )}
+                    <div className="mobile-qr__content d-flex flex-column">
+                      <div className="mobile-qr-scan__back d-flex mb-2">
+                        <Link to="/">بازگشت</Link>
+                      </div>
                       {qrList.content.map((item, i) => (
-                        <MenuIdentifier data={item} key={i} />
+                        <Identifier data={item} key={i} />
                       ))}
                     </div>
-                  ) : (
-                    <div className="mobile-qr__buttons d-flex flex-column align-items-center">
-                      <MoreVertIcon
-                        style={{ fontSize: 40, color: "grey" }}
-                        onClick={() =>
-                          this.setState({ menu: !this.state.menu })
-                        }
-                      />
-                    </div>
-                  )}
-                  <div className="mobile-qr__content d-flex flex-column">
+                  </div>
+                ) : (
+                  <div className="mobile-qr__notAccess d-flex flex-column p-3">
                     <div className="mobile-qr-scan__back d-flex mb-2">
                       <Link to="/">بازگشت</Link>
                     </div>
-                    {qrList.map((item, i) => (
-                      <Identifier data={item} key={i} />
-                    ))}
-                  </div>
-                </div>
-              ) : (
-                <div className="mobile-qr__notAccess d-flex flex-column p-3">
-                  <div className="mobile-qr-scan__back d-flex mb-2">
-                    <Link to="/">بازگشت</Link>
+                    <h1>محتوایی برای این صفحه در دسترس نیست.!</h1>
                   </div>
-                  <h1>محتوایی برای این صفحه در دسترس نیست.!</h1>
-                </div>
-              )}
+                )}
+              </div>
+            </>
+          ) : (
+            <div
+              className="d-flex justify-content-center align-items-center"
+              style={{ height: "100vh", width: "100vw" }}
+            >
+              <Loader />
             </div>
-          </>
+          )
         ) : null}
       </>
     );
@@ -208,8 +244,9 @@ class QR extends Component {
 export default connect(
   (state) => ({
     qrList: state.qr.list,
+    loading: state.qr.loading,
   }),
-  {}
+  { info: qr.info }
 )(QR);
 
 QR.defaultProps = {
@@ -229,26 +266,6 @@ QR.defaultProps = {
 const Identifier = (props) => {
   return (
     <>
-      {props.data.type === "p" ? (
-        <p
-          style={{
-            fontSize:
-              window.innerWidth > 1250 ? props.fontSize.desktop.content.p : "",
-          }}
-        >
-          {props.data.text}
-        </p>
-      ) : null}
-      {props.data.type === "h1" ? (
-        <h1
-          style={{
-            fontSize:
-              window.innerWidth > 1250 ? props.fontSize.desktop.content.h1 : "",
-          }}
-        >
-          {props.data.text}
-        </h1>
-      ) : null}
       {props.data.type === "voice" ? (
         <VoiceBox fontSize={props.fontSize} data={props.data} />
       ) : null}

src/views/QR/index.scss

@@ -148,6 +148,17 @@
   overflow-x: hidden;
   min-height: calc(100vh - 288px);
   padding-top: 100px;
+  &__notAccess {
+    justify-content: center;
+    h1 {
+      font-size: calc(100vw / 58);
+      color: #6f7074;
+      text-align: center;
+      font-family: numeralLight;
+      margin-top: calc(100vh / 2 - 250px);
+      letter-spacing: -1px;
+    }
+  }
   .qr__sidebar {
     flex: 1;
     &--header {

src/views/QRScan/index.scss

@@ -129,6 +129,22 @@
   direction: rtl;
   overflow-x: hidden;
   padding-top: 110px;
+  &__back {
+    justify-content: flex-start;
+    a {
+      display: inline;
+      font-family: numeralLight;
+      text-decoration: none;
+      padding: 5px 20px 3px;
+      background-color: #00cc69;
+      border-radius: 25px;
+      font-size: calc(100vw / 70);
+      color: white;
+      &:focus:enabled {
+        text-decoration: none;
+      }
+    }
+  }
   &__box {
     width: 100%;
     max-width: 700px;