reza added products and product api

src/AppRouter.js

@@ -46,7 +46,7 @@ class AppRouter extends Component {
     let home = (
       <Route exact path={"/"}>
         {proxy.status() ? (
-          this.props.profile.status ? (
+          this.props.profile ? (
             <Home />
           ) : (
             <Auth page={"profile"} />
@@ -62,24 +62,71 @@ class AppRouter extends Component {
         <Switch>
           {home}
           <Route exact path={"/faq"}>
+            {proxy.status() ? (
               <Faq />
+            ) : (
+              <Redirect
+                to={{
+                  pathname: "/auth",
+                }}
+              />
+            )}
           </Route>
           <Route exact path={"/contact"}>
+            {proxy.status() ? (
               <Contact />
+            ) : (
+              <Redirect
+                to={{
+                  pathname: "/auth",
+                }}
+              />
+            )}
           </Route>
           <Route exact path={"/about"}>
+            {proxy.status() ? (
               <About />
+            ) : (
+              <Redirect
+                to={{
+                  pathname: "/auth",
+                }}
+              />
+            )}
           </Route>
           <Route exact path={"/products"}>
+            {proxy.status() ? (
               <Products />
+            ) : (
+              <Redirect
+                to={{
+                  pathname: "/auth",
+                }}
+              />
+            )}
           </Route>
           <Route exact path={"/products/:id"}>
+            {proxy.status() ? (
               <Product />
+            ) : (
+              <Redirect
+                to={{
+                  pathname: "/auth",
+                }}
+              />
+            )}
           </Route>
           <Route exact path={"/qr"}>
+            {proxy.status() ? (
               <QR />
+            ) : (
+              <Redirect
+                to={{
+                  pathname: "/auth",
+                }}
+              />
+            )}
           </Route>
-
           <Route exact path={"/auth"}>
             <Auth />
           </Route>
@@ -87,30 +134,87 @@ class AppRouter extends Component {
             <Auth page={"profile"} />
           </Route>
           <Route exact path={"/qr-scan"}>
+            {proxy.status() ? (
               <QRScan />
+            ) : (
+              <Redirect
+                to={{
+                  pathname: "/auth",
+                }}
+              />
+            )}
           </Route>
 
           <Route exact path={"/activation"}>
+            {proxy.status() ? (
               <Activation />
+            ) : (
+              <Redirect
+                to={{
+                  pathname: "/auth",
+                }}
+              />
+            )}
           </Route>
           <Route exact path={"/chatroom"}>
-            <ChatList />
+            {proxy.status() ? (
+              <Chatroom />
+            ) : (
+              <Redirect
+                to={{
+                  pathname: "/auth",
+                }}
+              />
+            )}
           </Route>
           <Route exact path={"/cart"}>
+            {proxy.status() ? (
               <Cart />
+            ) : (
+              <Redirect
+                to={{
+                  pathname: "/auth",
+                }}
+              />
+            )}
           </Route>
           <Route exact path={"/mybooks"}>
+            {proxy.status() ? (
               <MyBooks />
+            ) : (
+              <Redirect
+                to={{
+                  pathname: "/auth",
+                }}
+              />
+            )}
           </Route>
           <Route exact path={"/ar"}>
+            {proxy.status() ? (
               <AR />
+            ) : (
+              <Redirect
+                to={{
+                  pathname: "/auth",
+                }}
+              />
+            )}
           </Route>
           {window.innerWidth < 1000 ? (
             <Route exact path={"/chatroom/:id"}>
+              {proxy.status() ? (
                 <Chatroom />
+              ) : (
+                <Redirect
+                  to={{
+                    pathname: "/auth",
+                  }}
+                />
+              )}
             </Route>
           ) : null}
           <Route path={""}>
+            {proxy.status() ? (
               <Redirect
                 to={{
                   pathname: "/qr",
@@ -122,6 +226,13 @@ class AppRouter extends Component {
                     ),
                 }}
               />
+            ) : (
+              <Redirect
+                to={{
+                  pathname: "/auth",
+                }}
+              />
+            )}
           </Route>
         </Switch>
       </Router>
@@ -131,7 +242,7 @@ class AppRouter extends Component {
 
 export default connect(
   (state) => ({
-    profile: state.user.status || {},
+    profile: state.user.status,
     // status: state.user.status,
   }),
   { getProfile: user.getProfile }

src/Redux/actions/book.js

@@ -0,0 +1,31 @@
+import proxy from "../proxy";
+const book = {
+  list:
+    (data = {}) =>
+    async (dispatch) =>
+      await proxy.get("book/list", data, { dispatch }),
+  info:
+    (data = {}) =>
+    async (dispatch) =>
+      await proxy.get("book/info", data, { dispatch }),
+  update:
+    (data = {}, data2 = {}) =>
+    async (dispatch) => {
+      await proxy.put("book/update", data);
+      await proxy.get("book/list", data2, { dispatch });
+    },
+  add:
+    (data = {}, data2 = {}) =>
+    async (dispatch) => {
+      await proxy.post("book/add", data);
+      await proxy.get("book/list", data2, { dispatch });
+    },
+  del:
+    (data = {}, data2 = {}) =>
+    async (dispatch) => {
+      await proxy.delete("book/delete", data);
+      await proxy.get("book/list", data2, { dispatch });
+    },
+};
+
+export default book;

src/Redux/actions/index.js

@@ -5,3 +5,4 @@ export { default as chat } from "./chat.js";
 // export { default as public } from './public.js';
 export { default as user } from "./user.js";
 export { default as qr } from "./qr.js";
+export { default as book } from "./book.js";

src/Redux/reducers/book.js

@@ -0,0 +1,28 @@
+const initialState = {
+  loading: false,
+  error: null,
+  list: null,
+  info: null,
+};
+export default function book(state = initialState, action) {
+  let { type, data } = action;
+  switch (type) {
+    case "book/list":
+      return { ...state, loading: false, list: data, error: null };
+    case "book/info":
+      return { ...state, loading: false, list: null, info: data, error: null };
+    case "book/update":
+      return { ...state, loading: false, error: null };
+    case "book/add":
+      return { ...state, loading: false, error: null };
+    case "book/delete":
+      return { ...state, loading: false, error: null };
+    /////////////
+    case "loading":
+      return { ...state, loading: true };
+    case "error":
+      return { ...state, loading: false, error: data.message };
+    default:
+      return state;
+  }
+}

src/Redux/reducers/index.js

@@ -5,3 +5,4 @@ export { default as message } from "./message.js";
 export { default as public } from "./public.js";
 export { default as user } from "./user.js";
 export { default as qr } from "./qr.js";
+export { default as book } from "./book.js";

src/Redux/reducers/user.js

@@ -1,7 +1,7 @@
 import proxy from "../proxy";
 import { ToastContainer, toast } from "react-toastify";
 const initialState = {
-  status: proxy.status(),
+  status: null,
   loading: false,
   error: null,
   list: null,

src/views/Auth/Profile/index.js

@@ -57,7 +57,7 @@ class Profile extends Component {
   };
 
   componentDidMount() {
-    this.props.getProfile();
+    // this.props.getProfile();
   }
 
   onChange = (name, value) => {

src/views/Product/index.js

@@ -1,5 +1,7 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
+import { connect } from "react-redux";
+import { book } from "~/Redux/actions";
 
 import Footer from "../Home/Footer/index";
 import Navbar from "../Home/Navbar/index";
@@ -10,6 +12,7 @@ import Info from "./Info/index";
 import AddToCart from "./AddToCart/index";
 import HomeScroll from "../Home/HomeScroll/index";
 import HomeSlider from "../Home/HomeSlider/index";
+import Loader from "~/components/Loader/index";
 
 import sciense_7 from "~/assets/images/sciense-7.png";
 import sciense_6 from "~/assets/images/sciense-6.png";
@@ -40,12 +43,22 @@ const fontSize = {
     li: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 29,
   },
 };
-export default class Product extends Component {
+class Product extends Component {
+  componentDidMount() {
+    this.props.getInfo({
+      id: window.location.pathname.slice(
+        window.location.pathname.lastIndexOf("/") + 1,
+        window.location.pathname.length
+      ),
+    });
+  }
+
   render() {
-    const { product, sameProducts, supportItems } = this.props;
+    const { product, sameProducts, supportItems, info } = this.props;
     return (
       <>
         {window.innerWidth > 1000 ? (
+          this.props.info ? (
             <>
               <div className="product d-flex flex-column">
                 <Navbar />
@@ -82,16 +95,26 @@ export default class Product extends Component {
               </div>
               <Footer />
             </>
+          ) : (
+            <div
+              className="d-flex justify-content-center align-items-center"
+              style={{ height: "100vh", width: "100vw" }}
+            >
+              <Loader />
+            </div>
+          )
         ) : null}
         {window.innerWidth < 1000 ? (
+          this.props.info ? (
             <>
               <div className="mobile-product d-flex flex-column">
                 <Navbar />
                 <header className="mobile-product__header d-flex flex-column align-items-center">
-                <img src={product.image} alt={product.title} />
+                  <img
-                <h1 style={{ fontSize: fontSize.mobile.h1 }}>
+                    src={`https://dnvn.ir/api/v1/file/${info.fileIds}`}
-                  {product.title}
+                    alt={info.name}
-                </h1>
+                  />
+                  <h1 style={{ fontSize: fontSize.mobile.h1 }}>{info.name}</h1>
                   <h2 style={{ fontSize: fontSize.mobile.h2 }}>
                     {product.subTitle}
                   </h2>
@@ -157,7 +180,9 @@ export default class Product extends Component {
                   </p>
                 </div>
                 <div className="mobile-product__comments d-flex flex-column">
-                <h3 style={{ fontSize: fontSize.mobile.h3 }}>نظرات خریداران</h3>
+                  <h3 style={{ fontSize: fontSize.mobile.h3 }}>
+                    نظرات خریداران
+                  </h3>
                   <div className="mobile-product__comments--list d-flex">
                     {product.comments.map((item, i) => (
                       <Comment comment={item} key={i} />
@@ -166,12 +191,28 @@ export default class Product extends Component {
                 </div>
               </div>
             </>
+          ) : (
+            <div
+              className="d-flex justify-content-center align-items-center"
+              style={{ height: "100vh", width: "100vw" }}
+            >
+              <Loader />
+            </div>
+          )
         ) : null}
       </>
     );
   }
 }
 
+export default connect(
+  (state) => ({
+    info: state.book.info,
+    // status: state.user.status,
+  }),
+  { getInfo: book.info }
+)(Product);
+
 Product.defaultProps = {
   supportItems: [
     { title: "ارسال رایگان", icon: product_shipping },

src/views/Product/index.scss

@@ -13,6 +13,7 @@
     }
     img {
       height: calc(100vh / 2.7);
+      border-radius: 10px;
     }
     h1 {
       margin-top: 10px;

src/views/Products/Product/index.js

@@ -28,28 +28,23 @@ export default class Product extends Component {
       <>
         {window.innerWidth < 1000 ? (
           <div className="mobile-products-product d-flex flex-column">
-            <img src={product.image} alt={"عکس مجصول"} />
+            <img
+              src={`https://dnvn.ir/api/v1/file/${product.fileIds}`}
+              alt={"عکس مجصول"}
+            />
             <div className="mobile-products-product__info d-flex flex-column">
-              <h1 style={{ fontSize: fontSize.mobile.h1 }}>{product.title}</h1>
+              <h1 style={{ fontSize: fontSize.mobile.h1 }}>{product.name}</h1>
             </div>
             <div className="mobile-products-product__links d-flex mt-2">
               <Link
+                to={`/products/${product.id}`}
                 style={{ fontSize: fontSize.mobile.a }}
                 className="mobile-products-product__links--physical"
               >
-                کتاب دیجیتال
+                اطلاعات بیشتر
-                {!product.status.digital ? (
+                {/* {!product.status.digital ? (
                   <img src={basket} alt="افزودن به سبد خرید" />
-                ) : null}
+                ) : 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>
@@ -57,7 +52,7 @@ export default class Product extends Component {
         {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} />
+              <img src={product.image} alt={product.name} />
               <h1 style={{ fontSize: fontSize.desktop.h1 }}>
                 {product.title + " " + product.subTitle}
               </h1>

src/views/Products/Product/index.scss

@@ -66,6 +66,7 @@
     img {
       width: 80%;
       margin: 10px auto;
+      border-radius: 8px;
     }
     &__info {
       width: 80%;
@@ -124,6 +125,7 @@
     img {
       width: 80%;
       margin: 10px auto;
+      border-radius: 8px;
     }
     &__info {
       width: 80%;
@@ -184,6 +186,7 @@
     img {
       width: 80%;
       margin: 10px auto;
+      border-radius: 8px;
     }
     &__info {
       width: 80%;

src/views/Products/index.js

@@ -1,5 +1,8 @@
 import React, { Component } from "react";
 import FilterListIcon from "@material-ui/icons/FilterList";
+import Loader from "~/components/Loader/index";
+import { connect } from "react-redux";
+import { book } from "~/Redux/actions";
 
 import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
@@ -20,13 +23,14 @@ 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 {
+class Products extends Component {
   state = {
     selectedSort: null,
     selectedFilters: {
@@ -53,11 +57,16 @@ export default class Products extends Component {
     degree: "",
   };
 
+  componentDidMount() {
+    this.props.getList();
+  }
+
   render() {
     const { dateFilters, degreeFilters, firstFilters } = this.state;
     return (
       <>
         {window.innerWidth > 1000 ? (
+          this.props.list ? (
             <>
               <div className="products d-flex flex-column">
                 <Navbar page={"products"} />
@@ -65,15 +74,27 @@ export default class Products extends Component {
                 <div className="products__body d-flex">
                   <Filters parent={this} />
                   <div className="products__body--left d-flex flex-column">
-                  <Sort parent={this} selectedSort={this.state.selectedSort} />
+                    <Sort
+                      parent={this}
+                      selectedSort={this.state.selectedSort}
+                    />
                     <List parent={this} />
                   </div>
                 </div>
               </div>
               <Footer />
             </>
+          ) : (
+            <div
+              className="d-flex justify-content-center align-items-center"
+              style={{ height: "100vh", width: "100vw" }}
+            >
+              <Loader />
+            </div>
+          )
         ) : null}
         {window.innerWidth < 1000 ? (
+          this.props.list ? (
             <>
               <div className="mobile-products d-flex flex-column">
                 <Navbar page={"products"} />
@@ -89,23 +110,43 @@ export default class Products extends Component {
                   <div className="d-flex">
                     <Select name="first" options={firstFilters} parent={this} />
                     <Select name="date" options={dateFilters} parent={this} />
-                  <Select name="degree" options={degreeFilters} parent={this} />
+                    <Select
+                      name="degree"
+                      options={degreeFilters}
+                      parent={this}
+                    />
                   </div>
                   <FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} />
                 </div>
                 <div className="mobile-products__list d-flex flex-wrap">
-                {this.props.products.map((item, i) => (
+                  {this.props.list.map((item, i) => (
                     <Product product={item} key={i} id={i} />
                   ))}
                 </div>
               </div>
             </>
+          ) : (
+            <div
+              className="d-flex justify-content-center align-items-center"
+              style={{ height: "100vh", width: "100vw" }}
+            >
+              <Loader />
+            </div>
+          )
         ) : null}
       </>
     );
   }
 }
 
+export default connect(
+  (state) => ({
+    list: state.book.list,
+    // status: state.user.status,
+  }),
+  { getList: book.list }
+)(Products);
+
 Products.defaultProps = {
   sortItems: [
     "پربازدیدترین",

src/views/QR/Image/index.js

@@ -0,0 +1,35 @@
+import React, { Component } from "react";
+
+import "./index.scss";
+export default function QRImage(props) {
+  const list = props.data.fileIds.split(",");
+  console.log(list);
+  return (
+    <>
+      {window.innerWidth < 1000 ? (
+        (list.length === 1 ? (
+          <div className="mobile-qr-image d-flex">
+            <img
+              className="mobile-qr-image__single"
+              src={`https://dnvn.ir/api/v1/file/${list[0]}`}
+            />
+          </div>
+        ) : null,
+        list.length !== 2 ? (
+          <div className="mobile-qr-image d-flex">
+            <img
+              className="mobile-qr-image__two"
+              src={`https://dnvn.ir/api/v1/file/${list[0]}`}
+            />
+            <img
+              className="mobile-qr-image__two"
+              src={`https://dnvn.ir/api/v1/file/${list[1]}`}
+            />
+          </div>
+        ) : null)
+      ) : (
+        <p>reza</p>
+      )}
+    </>
+  );
+}

src/views/QR/Image/index.scss

@@ -0,0 +1,13 @@
+.mobile-qr-image {
+  width: 100%;
+  justify-content: space-between;
+  &__single {
+    width: 100%;
+    border-radius: 10px;
+    height: 200px;
+  }
+  &__two {
+    width: 49%;
+    height: 150px;
+  }
+}

src/views/QR/index.js

@@ -3,6 +3,7 @@ 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 Image from "./Image/index";
 import VoiceBox from "./VoiceBox/index.js";
 import VideoBox from "./VideoBox/index";
 import PDF from "./PDF/index";
@@ -50,7 +51,10 @@ class QR extends Component {
 
   componentDidMount() {
     if (window.location.search) {
-      let tail = window.location.search;
+      let tail = window.location.search.slice(
+        window.location.search.lastIndexOf("=") + 1,
+        window.location.search.length
+      );
       this.props.info({ tail: tail });
     }
   }
@@ -272,6 +276,7 @@ const Identifier = (props) => {
       {props.data.type === "pdf" ? <PDF data={props.data} /> : null}
       {props.data.type === "ppt" ? <PowerPoint data={props.data} /> : null}
       {props.data.type === "links" ? <Links data={props.data} /> : null}
+      {props.data.type === "image" ? <Image data={props.data} /> : null}
     </>
   );
 };