bexoda qr ro zadam

master
RezaAshrafi77 3 years ago
parent 250ab86004
commit 6d0e852267
  1. 42
      src/AppRouter.js
  2. 2
      src/Redux/reducers/qr.js
  3. 1
      src/Redux/reducers/user.js
  4. 2
      src/views/Auth/Login/Cellphone/index.scss
  5. 2
      src/views/Auth/Login/Code/index.scss
  6. 1
      src/views/Auth/Profile/Input/index.js
  7. 23
      src/views/Auth/Profile/index.js
  8. 1
      src/views/Auth/Profile/index.scss
  9. 3
      src/views/Auth/index.scss
  10. 77
      src/views/QR/index.js
  11. 11
      src/views/QR/index.scss
  12. 16
      src/views/QRScan/index.scss

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

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

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

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

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

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

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

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

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

@ -2,6 +2,7 @@ import React, { Component } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import Loader from "~/components/Loader/index";
import VoiceBox from "./VoiceBox/index.js"; import VoiceBox from "./VoiceBox/index.js";
import VideoBox from "./VideoBox/index"; import VideoBox from "./VideoBox/index";
import PDF from "./PDF/index"; import PDF from "./PDF/index";
@ -48,8 +49,15 @@ class QR extends Component {
}; };
componentDidMount() { 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() { render() {
const { QR, qrList } = this.props; const { QR, qrList } = this.props;
const fontSize = { const fontSize = {
@ -80,9 +88,11 @@ class QR extends Component {
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
!this.props.loading ? (
<> <>
<div className="qr d-flex flex-column"> <div className="qr d-flex flex-column">
<Navbar /> <Navbar />
{qrList ? (
<div className="d-flex"> <div className="d-flex">
<section className="qr__sidebar d-flex flex-column p-2"> <section className="qr__sidebar d-flex flex-column p-2">
<header className="qr__sidebar--header d-flex"> <header className="qr__sidebar--header d-flex">
@ -96,18 +106,22 @@ class QR extends Component {
<h2 style={{ fontSize: fontSize.desktop.sidebar.h2 }}> <h2 style={{ fontSize: fontSize.desktop.sidebar.h2 }}>
{QR.subTitle} {QR.subTitle}
</h2> </h2>
<div style={{ fontSize: fontSize.desktop.sidebar.div }}> <div
شما در حال مطالعه <strong>صفحه {QR.sample.page}</strong>{" "} style={{ fontSize: fontSize.desktop.sidebar.div }}
هستید. >
شما در حال مطالعه{" "}
<strong>صفحه {QR.sample.page}</strong> هستید.
</div> </div>
<div style={{ fontSize: fontSize.desktop.sidebar.div }}> <div
style={{ fontSize: fontSize.desktop.sidebar.div }}
>
پیشرفت شما در مطالعه کتاب به{" "} پیشرفت شما در مطالعه کتاب به{" "}
<span>{QR.sample.percent} درصد</span> رسیده است. <span>{QR.sample.percent} درصد</span> رسیده است.
</div> </div>
</div> </div>
</header> </header>
<SubjectsDropdown /> <SubjectsDropdown />
<BookContent data={QR.data} /> <BookContent data={qrList.content} />
</section> </section>
<section className="qr__content d-flex flex-column"> <section className="qr__content d-flex flex-column">
<header className="qr__content--header d-flex justify-content-end"> <header className="qr__content--header d-flex justify-content-end">
@ -139,20 +153,34 @@ class QR extends Component {
</span> </span>
</div> </div>
</header> </header>
{QR.data.map((item, i) => ( {qrList.content.map((item, i) => (
<Identifier fontSize={fontSize} data={item} key={i} /> <Identifier fontSize={fontSize} data={item} key={i} />
))} ))}
</section> </section>
</div> </div>
) : (
<div className="qr__notAccess d-flex flex-column p-3">
<h1>محتوایی برای این صفحه در دسترس نیست.!</h1>
</div>
)}
</div> </div>
<Footer /> <Footer />
</> </>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
!this.props.loading ? (
<> <>
<div className="mobile-qr d-flex flex-column"> <div className="mobile-qr d-flex flex-column">
<Navbar /> <Navbar />
{this.props.qrList ? ( {qrList ? (
<div className="d-flex p-3"> <div className="d-flex p-3">
{this.state.menu ? ( {this.state.menu ? (
<div className="mobile-qr__buttons d-flex flex-column align-items-center"> <div className="mobile-qr__buttons d-flex flex-column align-items-center">
@ -184,7 +212,7 @@ class QR extends Component {
<div className="mobile-qr-scan__back d-flex mb-2"> <div className="mobile-qr-scan__back d-flex mb-2">
<Link to="/">بازگشت</Link> <Link to="/">بازگشت</Link>
</div> </div>
{qrList.map((item, i) => ( {qrList.content.map((item, i) => (
<Identifier data={item} key={i} /> <Identifier data={item} key={i} />
))} ))}
</div> </div>
@ -199,6 +227,14 @@ class QR extends Component {
)} )}
</div> </div>
</> </>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)
) : null} ) : null}
</> </>
); );
@ -208,8 +244,9 @@ class QR extends Component {
export default connect( export default connect(
(state) => ({ (state) => ({
qrList: state.qr.list, qrList: state.qr.list,
loading: state.qr.loading,
}), }),
{} { info: qr.info }
)(QR); )(QR);
QR.defaultProps = { QR.defaultProps = {
@ -229,26 +266,6 @@ QR.defaultProps = {
const Identifier = (props) => { const Identifier = (props) => {
return ( 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" ? ( {props.data.type === "voice" ? (
<VoiceBox fontSize={props.fontSize} data={props.data} /> <VoiceBox fontSize={props.fontSize} data={props.data} />
) : null} ) : null}

@ -148,6 +148,17 @@
overflow-x: hidden; overflow-x: hidden;
min-height: calc(100vh - 288px); min-height: calc(100vh - 288px);
padding-top: 100px; 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 { .qr__sidebar {
flex: 1; flex: 1;
&--header { &--header {

@ -129,6 +129,22 @@
direction: rtl; direction: rtl;
overflow-x: hidden; overflow-x: hidden;
padding-top: 110px; 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 { &__box {
width: 100%; width: 100%;
max-width: 700px; max-width: 700px;

Loading…
Cancel
Save