reza fixed profile and login

src/AppRouter.js

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

src/Redux/reducers/user.js

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

src/views/Auth/Profile/index.js

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

src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js

@@ -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 user1 from "~/assets/images/user1.png";
-import user2 from "../../../../../assets/images/user2.png";
+import user2 from "~/assets/images/user2.png";
-import mobileHome from "../../../../../assets/icons/mobileHome.svg";
+import mobileHome from "~/assets/icons/mobileHome.svg";
-import mobileAr from "../../../../../assets/icons/mobileAr.svg";
+import mobileAr from "~/assets/icons/mobileAr.svg";
-import qrcode from "../../../../../assets/icons/qr.svg";
+import qrcode from "~/assets/icons/drawer-qr.png";
-import mobileBasket from "../../../../../assets/icons/mobileBasket.svg";
+import mobileBasket from "~/assets/icons/mobileBasket.svg";
-import mobileBlog from "../../../../../assets/icons/mobileBlog.svg";
+import mobileBlog from "~/assets/icons/mobileBlog.svg";
-import mobileMail from "../../../../../assets/icons/mobileMail.svg";
+import mobileMail from "~/assets/icons/mobileMail.svg";
-import mobileProfile from "../../../../../assets/icons/mobileProfile.svg";
+import mobileProfile from "~/assets/icons/mobileProfile.svg";
-import mobileDanger from "../../../../../assets/icons/mobileDanger.svg";
+import mobileDanger from "~/assets/icons/mobileDanger.svg";
-import mobileLogout from "../../../../../assets/icons/mobileLogout.svg";
+import mobileLogout from "~/assets/icons/mobileLogout.svg";
 
 import "./NavbarDrawer.scss";
 class NavbarDrawer extends Component {
@@ -221,10 +221,11 @@ const User = (props) => {
           {props.data.title}
         </div>
       </div>
-      {
+      {props.data.status === 1 ? (
-        props.data.status === 1 ?
+        <div style={{ position: "absolute", left: 24, top: 16 }}>
-        <div style={{ position: 'absolute', left: 24, top: 16}}><CheckIcon style={{fontSize: 40, color: '#00CC69'}} /></div> : null
+          <CheckIcon style={{ fontSize: 40, color: "#00CC69" }} />
-      }
+        </div>
+      ) : null}
     </div>
   );
 };

src/views/MyBooks/index.scss

@@ -23,26 +23,37 @@
     margin-bottom: 10px;
   }
   &__item {
-    background-color: #f2f2f2;
+    margin: 10px auto;
-    width: calc(100vw / 2 - 15px);
+    height: calc(100vh - 200px);
-    margin: 5px;
+    max-height: 470px;
-    border-top-left-radius: 30px;
+    background-color: #fafafa;
-    border-top-right-radius: 30px;
+    border-radius: 0.5rem;
+    box-shadow: 0 3px 8px 0 rgb(0 0 0 / 16%);
     margin-bottom: 20px;
-    & img {
+    h1 {
-      width: 100%;
+      font-family: numeralMedium;
-      height: calc(100vh / 3.5);
+      color: #6f7074;
-      border-radius: 30px;
-      max-height: 200px;
       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);

src/views/Products/Product/index.js

@@ -10,51 +10,46 @@ const maxDesktopSize = 1250;
 
 const fontSize = {
   mobile: {
-    h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 26,
+    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: {
     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
+          <div className="mobile-products-product d-flex flex-column">
-          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">
+            <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={{
+                style={{ fontSize: fontSize.mobile.a }}
-                background: product.status.digital ? "#FFEE00" : "#FFFFFF",
+                className="mobile-products-product__links--physical"
-                fontSize: fontSize.mobile.a,
-                color: product.status.ar ? "#4D4D4F" : "#4D4D4F",
-              }}
               >
                 کتاب دیجیتال
-              { !product.status.digital ? <img src={basket} alt="افزودن به سبد خرید" /> : null}
+                {!product.status.digital ? (
+                  <img src={basket} alt="افزودن به سبد خرید" />
+                ) : null}
               </Link>
               <Link
-              style={{
+                style={{ fontSize: fontSize.mobile.a }}
-                background: product.status.ar ? "#00CC69" : "#FFFFFF",
+                className="mobile-products-product__links--ar"
-                color: product.status.ar ? "#FFFFFF" : "#4D4D4F",
-                fontSize: fontSize.mobile.a,
-              }}
               >
                 واقعیت افزوده
-              { !product.status.ar ? <img src={basket} alt="افزودن به سبد خرید" /> : null}
+                {!product.status.ar ? (
+                  <img src={basket} alt="افزودن به سبد خرید" />
+                ) : null}
               </Link>
             </div>
           </div>
@@ -63,23 +58,34 @@ export default class Product extends Component {
           <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 {
     );
   }
 }
-

src/views/Products/Product/index.scss

@@ -1,6 +1,10 @@
 .mobile-products-product {
-  width: calc(100% / 3);
+}
+
+.products-product {
+  width: calc(100% / 4);
   padding: 10px;
+  margin-bottom: 20px;
   a {
     width: 100%;
     text-decoration: none;
@@ -8,21 +12,15 @@
     }
     img {
       width: 100%;
-      height: 170px;
+      height: 200px;
-      border-top-left-radius: 15px;
+      border-radius: 30px;
-      border-top-right-radius: 15px;
     }
     h1 {
       font-family: numeralBold;
       margin-top: 15px;
-      color: #7dc241;
+      color: #02a1a6;
-      letter-spacing: -1px;
-    }
-    h2{
-      font-family: numeralLight;
-      margin-top: 10px;
-      color: #6f7074;
       letter-spacing: -1px;
+      text-align: center;
     }
   }
   &__notAvailabe {
@@ -52,63 +50,186 @@
       }
     }
     &--price {
-      color: #02733c;
+      color: #4d4d4d;
       font-family: numeralBold;
     }
   }
 }
 
-.products-product{
+@media screen and (max-width: 350px) {
-  width: calc(100% / 4);
+  .mobile-products-product {
-  padding: 10px;
-  margin-bottom: 20px;
-  a{
     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;
+    }
+    &__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;
-    &:hover{
       }
+      &--physical {
+        background-color: #7fc75d;
+        color: white;
+      }
+      &--ar {
+        border: 1px solid #7fc75d;
+        color: #7fc75d;
+      }
+    }
+    &__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;
+      }
+    }
+  }
+}
+
+@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: 100%;
+      width: 80%;
-      height: 200px;
+      margin: 10px auto;
-      border-radius: 30px;
     }
+    &__info {
+      width: 80%;
+      margin: 10px auto;
       h1 {
-      font-family: numeralBold;
+        font-family: NumeralLight;
-      margin-top: 15px;
+        color: #4d4d4d;
-      color: #02A1A6;
         letter-spacing: -1px;
-      text-align: center;
       }
+      a {
+        width: 48%;
+        padding: 5px 3px;
+        border-radius: 7px;
+        font-family: numeralMedium;
+        text-decoration: none;
       }
-  &__notAvailabe{
+      &--physical {
-    font-family: numeralBold;
+        background-color: #7fc75d;
-    width : 100%;
+        color: white;
-    text-align: center;
-    color: #6f7074;
-    margin-top: 15px;
       }
-  &__price{
+      &--ar {
-    width : 100%;
+        border: 1px solid #7fc75d;
-    margin-top: 15px;
+        color: #7fc75d;
-    text-align: center;
+      }
-    &--old{
+    }
-      font-family: numeralBold;
+    &__links {
-      color: #6f7074;
+      width: 80%;
-      position: relative;
+      margin: 10px auto;
-      margin-left: 10px;
+      flex-direction: column;
-      align-items:center;
+
-      span{
+      a {
-        position: absolute;
-        left: 0px;
         width: 100%;
-        height: 2px;
+        padding: 10px 5px;
-        background-color: rgba(121, 121, 121, 0.534);
+        border-radius: 7px;
-        transform: rotate(-14deg);      
+        font-family: numeralMedium;
+        text-decoration: none;
+        margin-bottom: 5px;
       }
+      &--physical {
+        background-color: #7fc75d;
+        color: white;
       }
-    &--price{
+      &--ar {
+        border: 1px solid #7fc75d;
+        color: #7fc75d;
+      }
+    }
+  }
+}
+
+@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;
-      font-family: numeralBold;
+        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;
+      }
     }
   }
 }

src/views/Products/index.js

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

src/views/Products/index.scss

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