reza fixed profile and login

master
RezaAshrafi77 3 years ago
parent 6f05664810
commit 975d787694
  1. 22
      src/AppRouter.js
  2. 11
      src/Redux/reducers/user.js
  3. BIN
      src/assets/icons/drawer-qr.png
  4. BIN
      src/assets/icons/home_ar(2).png
  5. BIN
      src/assets/images/images.rar
  6. 9
      src/views/Auth/Profile/index.js
  7. 53
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
  8. 36
      src/views/MyBooks/index.scss
  9. 85
      src/views/Products/Product/index.js
  10. 267
      src/views/Products/Product/index.scss
  11. 17
      src/views/Products/index.js
  12. 26
      src/views/Products/index.scss

@ -34,10 +34,26 @@ class AppRouter extends Component {
state = {};
componentDidMount() {
if (this.props.profile) {
return;
} else {
this.props.getProfile();
}
}
render() {
let home = (
<Route exact path={"/"}>
{proxy.status() ? <Home /> : <Auth />}
{proxy.status() ? (
this.props.profile.status ? (
<Home />
) : (
<Auth page={"profile"} />
)
) : (
<Auth />
)}
</Route>
);
@ -115,8 +131,8 @@ class AppRouter extends Component {
export default connect(
(state) => ({
profile: state.user.status.profile || {},
profile: state.user.status || {},
// status: state.user.status,
}),
{}
{ getProfile: user.getProfile }
)(AppRouter);

@ -1,4 +1,5 @@
import proxy from "../proxy";
import { ToastContainer, toast } from "react-toastify";
const initialState = {
status: proxy.status(),
loading: false,
@ -15,9 +16,16 @@ export default function user(state = initialState, action) {
case "user/register":
case "user/switchRole":
case "user/getProfile":
case "user/login":
case "public/sendOTP":
case "user/otp/login":
return { ...state, loading: false, status: data, error: null };
case "user/otp/login":
return {
...state,
loading: false,
status: data.profile,
error: null,
};
case "user/logout":
return { ...state, loading: false, status: proxy.status(), error: null };
case "user/getUserRole":
@ -34,6 +42,7 @@ export default function user(state = initialState, action) {
case "loading":
return { ...state, loading: true };
case "error":
toast.error(data.message);
return { ...state, loading: false, error: data.message };
default:
return state;

Binary file not shown.

After

Width:  |  Height:  |  Size: 773 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

@ -56,6 +56,10 @@ class Profile extends Component {
},
};
componentDidMount() {
this.props.getProfile();
}
onChange = (name, value) => {
if (name === "gardeId" && this.state.userRoleId === "معلم") {
this.setState((prevState) => ({
@ -68,11 +72,6 @@ class Profile extends Component {
}
};
async componentDidMount() {
const { getProfile, profile } = this.props;
getProfile();
}
onSubmit = async (e) => {
const {
firstName,

@ -2,24 +2,24 @@ import React, { Component } from "react";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import Avatar from "@material-ui/core/Avatar";
import CheckIcon from '@material-ui/icons/Check';
import CheckIcon from "@material-ui/icons/Check";
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
// import { logout } from '../../../../Redux/actions/user';
// import { connect } from 'react-redux';
import user1 from "../../../../../assets/images/user1.png";
import user2 from "../../../../../assets/images/user2.png";
import mobileHome from "../../../../../assets/icons/mobileHome.svg";
import mobileAr from "../../../../../assets/icons/mobileAr.svg";
import qrcode from "../../../../../assets/icons/qr.svg";
import mobileBasket from "../../../../../assets/icons/mobileBasket.svg";
import mobileBlog from "../../../../../assets/icons/mobileBlog.svg";
import mobileMail from "../../../../../assets/icons/mobileMail.svg";
import mobileProfile from "../../../../../assets/icons/mobileProfile.svg";
import mobileDanger from "../../../../../assets/icons/mobileDanger.svg";
import mobileLogout from "../../../../../assets/icons/mobileLogout.svg";
import user1 from "~/assets/images/user1.png";
import user2 from "~/assets/images/user2.png";
import mobileHome from "~/assets/icons/mobileHome.svg";
import mobileAr from "~/assets/icons/mobileAr.svg";
import qrcode from "~/assets/icons/drawer-qr.png";
import mobileBasket from "~/assets/icons/mobileBasket.svg";
import mobileBlog from "~/assets/icons/mobileBlog.svg";
import mobileMail from "~/assets/icons/mobileMail.svg";
import mobileProfile from "~/assets/icons/mobileProfile.svg";
import mobileDanger from "~/assets/icons/mobileDanger.svg";
import mobileLogout from "~/assets/icons/mobileLogout.svg";
import "./NavbarDrawer.scss";
class NavbarDrawer extends Component {
@ -124,63 +124,63 @@ NavbarDrawer.defaultProps = {
link: "/",
icon: <img src={mobileHome} alt="صفحه اصلی" />,
toast: "",
message : "",
message: "",
},
{
name: "واقعیت افزوده",
link: "/",
icon: <img src={mobileAr} alt="واقعیت افزوده" />,
toast: "",
message : "",
message: "",
},
{
name: "بارکد خوان",
link: "/qr-scan",
icon: <img src={qrcode} alt="بارکد خوان" />,
toast: "",
message : "",
message: "",
},
{
name: "کتاب الکترونیک",
link: "/activation",
icon: <img src={mobileBlog} alt="کتاب الکترونیک" />,
toast: "",
message : "",
message: "",
},
{
name: "فروشگاه",
link: "/products",
icon: <img src={mobileBasket} alt="فروشگاه" />,
toast: "",
message : "",
message: "",
},
{
name: "بلاگ",
link: "/blog",
icon: <img src={mobileBlog} alt="بلاگ" />,
toast: "",
message : "",
message: "",
},
{
name: "پیام رسان",
link: "/chatroom",
icon: <img src={mobileMail} alt="بلاگ" />,
toast: "",
message : "",
message: "",
},
{
name: "ویرایش مشخصات",
link: "/profile",
icon: <img src={mobileProfile} alt="ویرایش مشخصات" />,
toast: "",
message : "4 پیام",
message: "4 پیام",
},
{
name: "گزارش ایراد",
link: "/",
icon: <img src={mobileDanger} alt="گزارش ایراد" />,
toast: "",
message : "",
message: "",
// onClick: this.props.logout,
},
{
@ -188,7 +188,7 @@ NavbarDrawer.defaultProps = {
link: "/",
icon: <img src={mobileLogout} alt="خروج" />,
toast: "",
message : "",
message: "",
// onClick: this.props.logout,
},
],
@ -221,10 +221,11 @@ const User = (props) => {
{props.data.title}
</div>
</div>
{
props.data.status === 1 ?
<div style={{ position: 'absolute', left: 24, top: 16}}><CheckIcon style={{fontSize: 40, color: '#00CC69'}} /></div> : null
}
{props.data.status === 1 ? (
<div style={{ position: "absolute", left: 24, top: 16 }}>
<CheckIcon style={{ fontSize: 40, color: "#00CC69" }} />
</div>
) : null}
</div>
);
};

@ -23,26 +23,37 @@
margin-bottom: 10px;
}
&__item {
background-color: #f2f2f2;
width: calc(100vw / 2 - 15px);
margin: 5px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
margin: 10px auto;
height: calc(100vh - 200px);
max-height: 470px;
background-color: #fafafa;
border-radius: 0.5rem;
box-shadow: 0 3px 8px 0 rgb(0 0 0 / 16%);
margin-bottom: 20px;
& img {
width: 100%;
height: calc(100vh / 3.5);
border-radius: 30px;
max-height: 200px;
h1 {
font-family: numeralMedium;
color: #6f7074;
margin-bottom: 10px;
}
& img {
height: 60%;
width: 80%;
min-height: 250px;
max-height: 290px;
border-radius: 10px;
margin: 20px auto;
// max-height: 320px;
// margin: 20px 40px;
}
&--buttons {
padding: 5px 9px;
// padding: 5px 9px;
width: 80%;
margin: 0px auto;
a {
text-decoration: none;
width: 100%;
padding: 8px;
font-family: numeralLight;
font-family: numeralMedium;
margin-bottom: 10px;
border-radius: 10px;
text-align: center;
@ -50,6 +61,7 @@
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 5px;
img {
position: absolute;
top: calc(50% - 8px);

@ -9,77 +9,83 @@ const maxMobileSize = 550;
const maxDesktopSize = 1250;
const fontSize = {
mobile : {
h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 26,
mobile: {
h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 22,
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 34,
div: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 32,
a: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 26,
},
desktop : {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70,
div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120,
},
}
};
export default class Product extends Component {
render() {
const { product, id } = this.props;
return (
<>
{window.innerWidth < 1000 ? (
<div
className="mobile-mybooks__item d-flex flex-column"
style={{
borderBottomLeftRadius: Number(id) % 2 === 1 ? 30 : 0,
borderBottomRightRadius: Number(id) % 2 === 0 ? 30 : 0,
}}
>
<img src={product.image} alt={"عکس مجصول"} />
<div className="mobile-mybooks__item--buttons d-flex flex-column">
<Link
style={{
background: product.status.digital ? "#FFEE00" : "#FFFFFF",
fontSize: fontSize.mobile.a,
color: product.status.ar ? "#4D4D4F" : "#4D4D4F",
}}
>
کتاب دیجیتال
{ !product.status.digital ? <img src={basket} alt="افزودن به سبد خرید" /> : null}
</Link>
<Link
style={{
background: product.status.ar ? "#00CC69" : "#FFFFFF",
color: product.status.ar ? "#FFFFFF" : "#4D4D4F",
fontSize: fontSize.mobile.a,
}}
>
واقعیت افزوده
{ !product.status.ar ? <img src={basket} alt="افزودن به سبد خرید" /> : null}
</Link>
<div className="mobile-products-product d-flex flex-column">
<img src={product.image} alt={"عکس مجصول"} />
<div className="mobile-products-product__info d-flex flex-column">
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{product.title}</h1>
</div>
<div className="mobile-products-product__links d-flex mt-2">
<Link
style={{ fontSize: fontSize.mobile.a }}
className="mobile-products-product__links--physical"
>
کتاب دیجیتال
{!product.status.digital ? (
<img src={basket} alt="افزودن به سبد خرید" />
) : null}
</Link>
<Link
style={{ fontSize: fontSize.mobile.a }}
className="mobile-products-product__links--ar"
>
واقعیت افزوده
{!product.status.ar ? (
<img src={basket} alt="افزودن به سبد خرید" />
) : null}
</Link>
</div>
</div>
</div>
) : null}
{window.innerWidth > 1000 ? (
<article className="products-product d-flex flex-column align-items">
<Link to={`/products/${product.id}`}>
<img src={product.image} alt={product.title} />
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{product.title + ' ' + product.subTitle}</h1>
<h1 style={{ fontSize: fontSize.desktop.h1 }}>
{product.title + " " + product.subTitle}
</h1>
{product.price ? (
<div className="products-product__price d-flex justify-content-center align-items-center">
{product.oldPrice ? (
<div>
<div style={{ fontSize: fontSize.desktop.old }} className="products-product__price--old d-flex">
<div
style={{ fontSize: fontSize.desktop.old }}
className="products-product__price--old d-flex"
>
{product.oldPrice} تومان
<span></span>
</div>
</div>
) : null}
<div style={{ fontSize: fontSize.desktop.div }} className="products-product__price--price">
<div
style={{ fontSize: fontSize.desktop.div }}
className="products-product__price--price"
>
{product.price} تومان
</div>
</div>
) : (
<div style={{ fontSize: fontSize.desktop.div }} className="products-product__notAvailabe">
<div
style={{ fontSize: fontSize.desktop.div }}
className="products-product__notAvailabe"
>
ناموجود
</div>
)}
@ -90,4 +96,3 @@ export default class Product extends Component {
);
}
}

@ -1,114 +1,235 @@
.mobile-products-product{
width: calc(100% / 3);
.mobile-products-product {
}
.products-product {
width: calc(100% / 4);
padding: 10px;
a{
width : 100%;
margin-bottom: 20px;
a {
width: 100%;
text-decoration: none;
&:hover{
&:hover {
}
img{
img {
width: 100%;
height: 170px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
height: 200px;
border-radius: 30px;
}
h1{
h1 {
font-family: numeralBold;
margin-top: 15px;
color: #7dc241;
letter-spacing: -1px;
}
h2{
font-family: numeralLight;
margin-top: 10px;
color: #6f7074;
color: #02a1a6;
letter-spacing: -1px;
text-align: center;
}
}
&__notAvailabe{
&__notAvailabe {
font-family: numeralBold;
width : 100%;
width: 100%;
text-align: center;
color: #6f7074;
margin-top: 15px;
}
&__price{
width : 100%;
&__price {
width: 100%;
margin-top: 15px;
text-align: center;
&--old{
&--old {
font-family: numeralBold;
color: #6f7074;
position: relative;
margin-left: 10px;
align-items:center;
span{
align-items: center;
span {
position: absolute;
left: 0px;
width : 100%;
width: 100%;
height: 2px;
background-color: rgba(121, 121, 121, 0.534);
transform: rotate(-14deg);
transform: rotate(-14deg);
}
}
&--price{
color: #02733c;
&--price {
color: #4d4d4d;
font-family: numeralBold;
}
}
}
.products-product{
width: calc(100% / 4);
padding: 10px;
margin-bottom: 20px;
a{
width : 100%;
text-decoration: none;
&:hover{
@media screen and (max-width: 350px) {
.mobile-products-product {
width: 100%;
background-color: #fafafa;
margin: 20px;
border-radius: 0.5rem;
box-shadow: 0 3px 8px 0 rgb(0 0 0 / 16%);
img {
width: 80%;
margin: 10px auto;
}
img{
width: 100%;
height: 200px;
border-radius: 30px;
&__info {
width: 80%;
margin: 10px auto;
h1 {
font-family: NumeralLight;
color: #4d4d4d;
letter-spacing: -1px;
}
a {
width: 48%;
padding: 5px 3px;
border-radius: 7px;
font-family: numeralMedium;
text-decoration: none;
}
&--physical {
background-color: #7fc75d;
color: white;
}
&--ar {
border: 1px solid #7fc75d;
color: #7fc75d;
}
}
h1{
font-family: numeralBold;
margin-top: 15px;
color: #02A1A6;
letter-spacing: -1px;
text-align: center;
&__links {
width: 80%;
margin: 10px auto;
justify-content: space-between;
a {
width: 48%;
padding: 5px 3px;
border-radius: 7px;
font-family: numeralMedium;
text-decoration: none;
}
&--physical {
background-color: #7fc75d;
color: white;
}
&--ar {
border: 1px solid #7fc75d;
color: #7fc75d;
}
}
}
&__notAvailabe{
font-family: numeralBold;
width : 100%;
text-align: center;
color: #6f7074;
margin-top: 15px;
}
@media screen and (min-width: 350px) {
.mobile-products-product {
width: calc(50% - 20px);
background-color: #fafafa;
margin: 10px;
border-radius: 0.5rem;
box-shadow: 0 3px 8px 0 rgb(0 0 0 / 16%);
img {
width: 80%;
margin: 10px auto;
}
&__info {
width: 80%;
margin: 10px auto;
h1 {
font-family: NumeralLight;
color: #4d4d4d;
letter-spacing: -1px;
}
a {
width: 48%;
padding: 5px 3px;
border-radius: 7px;
font-family: numeralMedium;
text-decoration: none;
}
&--physical {
background-color: #7fc75d;
color: white;
}
&--ar {
border: 1px solid #7fc75d;
color: #7fc75d;
}
}
&__links {
width: 80%;
margin: 10px auto;
flex-direction: column;
a {
width: 100%;
padding: 10px 5px;
border-radius: 7px;
font-family: numeralMedium;
text-decoration: none;
margin-bottom: 5px;
}
&--physical {
background-color: #7fc75d;
color: white;
}
&--ar {
border: 1px solid #7fc75d;
color: #7fc75d;
}
}
}
&__price{
width : 100%;
margin-top: 15px;
text-align: center;
&--old{
font-family: numeralBold;
color: #6f7074;
position: relative;
margin-left: 10px;
align-items:center;
span{
position: absolute;
left: 0px;
width : 100%;
height: 2px;
background-color: rgba(121, 121, 121, 0.534);
transform: rotate(-14deg);
}
@media screen and (min-width: 550px) {
.mobile-products-product {
width: calc(33% - 20px);
background-color: #fafafa;
margin: 10px;
border-radius: 0.5rem;
box-shadow: 0 3px 8px 0 rgb(0 0 0 / 16%);
img {
width: 80%;
margin: 10px auto;
}
&__info {
width: 80%;
margin: 10px auto;
h1 {
font-family: NumeralLight;
color: #4d4d4d;
letter-spacing: -1px;
}
a {
width: 48%;
padding: 5px 3px;
border-radius: 7px;
font-family: numeralMedium;
text-decoration: none;
}
&--physical {
background-color: #7fc75d;
color: white;
}
&--ar {
border: 1px solid #7fc75d;
color: #7fc75d;
}
}
&--price{
color: #4d4d4d;
font-family: numeralBold;
&__links {
width: 80%;
margin: 10px auto;
flex-direction: column;
a {
width: 100%;
padding: 10px 5px;
border-radius: 7px;
font-family: numeralMedium;
text-decoration: none;
margin-bottom: 5px;
}
&--physical {
background-color: #7fc75d;
color: white;
}
&--ar {
border: 1px solid #7fc75d;
color: #7fc75d;
}
}
}
}
}

@ -15,8 +15,17 @@ import sciense_7 from "../../assets/images/sciense-7.png";
import sciense_8 from "../../assets/images/sciense-8.png";
import sciense_9 from "../../assets/images/sciense-9.png";
import zist_10 from "../../assets/images/zist-10.png";
import navbarSearch from "../../assets/icons/navbarSearch.png";
import "./index.scss";
const maxMobileSize = 1250;
const fontSize = {
mobile: {
input: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 27,
},
};
export default class Products extends Component {
state = {
selectedSort: null,
@ -68,6 +77,14 @@ export default class Products extends Component {
<>
<div className="mobile-products d-flex flex-column">
<Navbar page={"products"} />
<div className="mobile-products__search d-flex">
<input
type="search"
style={{ fontSize: fontSize.mobile.input }}
placeholder={"جستجو"}
/>
<img src={navbarSearch} alt="جستجو" />
</div>
<div className="mobile-products__filters d-flex">
<div className="d-flex">
<Select name="first" options={firstFilters} parent={this} />

@ -23,6 +23,32 @@
direction: rtl;
overflow-x: hidden;
padding-top: 70px;
&__search {
// width: 100%;
position: relative;
margin: 15px 10px;
height: 35px;
img {
position: absolute;
left: 7px;
top: 7px;
width: 20px;
}
input {
width: 100%;
padding: 5px 5px 5px 35px;
font-family: numeralMedium;
border: 1px solid #afafaf;
border-radius: 5px;
color: #6f7074;
&:focus {
outline: 0px;
}
&::placeholder {
color: #afafaf;
}
}
}
&__filters {
width: 100%;
align-items: center;

Loading…
Cancel
Save