reza added qr redux

src/AppRouter.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import "./App.css";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-
+import history from "./History/index";
 import { connect } from "react-redux";
 
 import proxy from "./Redux/proxy";
@@ -19,6 +19,7 @@ import ChatList from "./views/ChatList/index";
 import Chatroom from "./views/ChatRoom/index";
 import Cart from "./views/Cart/index";
 import MyBooks from "./views/MyBooks/index";
+import AR from "./views/AR/index";
 
 class AppRouter extends Component {
   constructor(props) {
@@ -42,7 +43,7 @@ class AppRouter extends Component {
     );
 
     return (
-      <Router>
+      <Router history={history}>
         <Switch>
           {home}
           <Route path={"/faq"}>
@@ -84,6 +85,9 @@ class AppRouter extends Component {
           <Route exact path={"/mybooks"}>
             <MyBooks />
           </Route>
+          <Route exact path={"/ar"}>
+            <AR />
+          </Route>
           {window.innerWidth < 1000 ? (
             <Route exact path={"/chatroom/:id"}>
               <Chatroom />

src/History/index.js

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from "history";
+
+export default createBrowserHistory();

src/Redux/actions/index.js

@@ -1,7 +1,7 @@
 // @create-index
 
-export { default as chat } from './chat.js';
+export { default as chat } from "./chat.js";
 // export { default as message } from './message.js';
 // export { default as public } from './public.js';
-export { default as user } from './user.js';
-
+export { default as user } from "./user.js";
+export { default as qr } from "./qr.js";

src/Redux/actions/qr.js

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

src/Redux/reducers/blog.js

@@ -3,23 +3,23 @@ const initialState = {
   error: null,
   list: [],
 };
-export default function user(state = initialState, action) {
+export default function blog(state = initialState, action) {
   let { type, data } = action;
   switch (type) {
-    case 'blog/list':
+    case "blog/list":
       return { ...state, loading: false, list: data, error: null };
-    case 'blog/update':
+    case "blog/update":
       return { ...state, loading: false, error: null };
-    case 'blog/add':
+    case "blog/add":
       return { ...state, loading: false, error: null };
-    case 'blog/delete':
+    case "blog/delete":
       return { ...state, loading: false, error: null };
     /////////////
-    case 'loading':
+    case "loading":
       return { ...state, loading: true };
-    case 'error':
+    case "error":
       return { ...state, loading: false, error: data.message };
     default:
       return state;
   }
-}
+}

src/Redux/reducers/index.js

@@ -1,7 +1,7 @@
 // @create-index
 
-export { default as chat } from './chat.js';
-export { default as message } from './message.js';
-export { default as public } from './public.js';
-export { default as user } from './user.js';
-
+export { default as chat } from "./chat.js";
+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";

src/Redux/reducers/qr.js

@@ -0,0 +1,70 @@
+const initialState = {
+  loading: false,
+  error: null,
+  list: [
+    {
+      type: "voice",
+      title: "استاد رضایی:‌توضیح در مورد درس آتشفشان",
+      file: null,
+    },
+    {
+      type: "video",
+      title: "ویدئوی آزمایشی آتش فشان سرکه",
+      file: null,
+    },
+    {
+      type: "ppt",
+      title: "فایل پاورپوینت ارائه درس آتشفشان",
+      link: "",
+    },
+    {
+      type: "pdf",
+      title: "فایل پی دی اف ارائه درس آتشفشان",
+      link: "",
+    },
+    {
+      type: "links",
+      links: [
+        {
+          title: "وبسایت آموزشی دانوین",
+          link: "",
+        },
+        {
+          title: "وبسایت رسمی مدیریت راهبردی کشور",
+          link: "",
+        },
+        {
+          title: "سازمان تبلیغات صنایع سبک",
+          link: "",
+        },
+      ],
+    },
+  ],
+};
+export default function qr(state = initialState, action) {
+  let { type, data } = action;
+  switch (type) {
+    case "qr/list":
+      return { ...state, loading: false, error: null };
+    case "qr/update":
+      return { ...state, loading: false, error: null };
+    case "qr/add":
+      return { ...state, loading: false, error: null };
+    case "qr/delete":
+      return { ...state, loading: false, error: null };
+    case "qr/info":
+      return {
+        ...state,
+        loading: false,
+        list: action.payload === "Zist10-13" ? [] : null,
+        error: null,
+      };
+    /////////////
+    case "loading":
+      return { ...state, loading: true };
+    case "error":
+      return { ...state, loading: false, error: data.message };
+    default:
+      return state;
+  }
+}

src/views/AR/Item/index.js

@@ -0,0 +1,40 @@
+import React, { Component } from "react";
+
+import "./index.scss";
+
+const maxMobileSize = 550;
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  mobile: {
+    h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 26,
+    h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 34,
+    div: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 32,
+  },
+  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 Item extends Component {
+  render() {
+    const { data } = this.props;
+    return (
+      <>
+        {window.innerWidth < 1000 ? (
+          <article className="mobile-ar-book d-flex flex-column">
+            <a href={`https://ar.dnvn.ir/lunch?id=${data.id}`}>
+              <img src={data.imageUrl} alt={data.title} />
+              <h1 style={{ fontSize: fontSize.mobile.h1 }}>{data.title}</h1>
+            </a>
+          </article>
+        ) : null}
+        {window.innerWidth > 1000 ? (
+          <article className="products-product d-flex flex-column align-items"></article>
+        ) : null}
+      </>
+    );
+  }
+}

src/views/AR/Item/index.scss

@@ -0,0 +1,76 @@
+.mobile-ar-book {
+  width: calc(100% / 2);
+  padding: 10px;
+  a {
+    width: 100%;
+    text-decoration: none;
+    &:hover {
+    }
+    img {
+      width: 100%;
+      height: 170px;
+      border-radius: 20px;
+    }
+    h1 {
+      font-family: numeralBold;
+      margin-top: 15px;
+      color: #4d4d4d;
+      letter-spacing: -1px;
+    }
+  }
+}
+
+.products-product {
+  width: calc(100% / 4);
+  padding: 10px;
+  margin-bottom: 20px;
+  a {
+    width: 100%;
+    text-decoration: none;
+    &:hover {
+    }
+    img {
+      width: 100%;
+      height: 200px;
+      border-radius: 30px;
+    }
+    h1 {
+      font-family: numeralBold;
+      margin-top: 15px;
+      color: #02a1a6;
+      letter-spacing: -1px;
+      text-align: center;
+    }
+  }
+  &__notAvailabe {
+    font-family: numeralBold;
+    width: 100%;
+    text-align: center;
+    color: #6f7074;
+    margin-top: 15px;
+  }
+  &__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);
+      }
+    }
+    &--price {
+      color: #4d4d4d;
+      font-family: numeralBold;
+    }
+  }
+}

src/views/AR/index.js

@@ -0,0 +1,86 @@
+import React, { Component } from "react";
+import Navbar from "../Home/Navbar/index";
+import Footer from "../Home/Footer/index";
+import Item from "./Item/index";
+
+import zist_10 from "~/assets/images/zist-10.png";
+import chemistry_10 from "~/assets/images/chemistry-10.png";
+import sciense_8 from "~/assets/images/sciense-8.png";
+import sciense_7 from "~/assets/images/sciense-7.png";
+import sciense_6 from "~/assets/images/sciense-6.png";
+import sciense_9 from "~/assets/images/sciense-9.png";
+
+import "./index.scss";
+
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  desktop: {
+    h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 70,
+    p: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 90,
+  },
+};
+
+export default class AR extends Component {
+  render() {
+    const { data } = this.props;
+    return (
+      <>
+        {window.innerWidth > 1000 ? (
+          <>
+            <div className="ar d-flex flex-column align-items-center">
+              <Navbar />
+              <div className="ar__box d-flex flex-column"></div>
+            </div>
+            <Footer />
+          </>
+        ) : null}
+        {window.innerWidth < 1000 ? (
+          <div className="mobile-ar d-flex flex-column">
+            <Navbar />
+            <div className="mobile-ar__list d-flex flex-wrap">
+              {data.map((item, i) => (
+                <Item data={item} key={i} />
+              ))}
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+}
+
+AR.defaultProps = {
+  data: [
+    {
+      id: 222,
+      title: "دانوین زیست دهم",
+      imageUrl: zist_10,
+    },
+    {
+      id: 223,
+      title: "دانوین شیمی نهم",
+      imageUrl: chemistry_10,
+    },
+    {
+      id: 225,
+      title: "دانوین علوم نهم",
+      imageUrl: sciense_6,
+    },
+    {
+      id: 226,
+      title: "دانوین علوم هشتم",
+      imageUrl: sciense_8,
+    },
+    {
+      id: 227,
+      title: "دانوین علوم هفتم",
+      imageUrl: sciense_7,
+    },
+    {
+      id: 228,
+      title: "دانوین علوم ششم",
+      imageUrl: sciense_6,
+    },
+  ],
+};

src/views/AR/index.scss

@@ -0,0 +1,20 @@
+.mobile-ar {
+  width: 100vw;
+  max-width: 1250px;
+  margin: 0px auto;
+  padding: 0px 10px 40px;
+  direction: rtl;
+  padding-top: 90px;
+  overflow-x: hidden;
+}
+
+.ar {
+  width: 100vw;
+  max-width: 1250px;
+  min-height: calc(100vh - 288px);
+  margin: 0px auto;
+  padding: 0px 10px;
+  direction: rtl;
+  overflow-x: hidden;
+  padding-top: 100px;
+}

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

@@ -1,6 +1,14 @@
 import React from "react";
 
 import "./index.scss";
+
+const maxMobileSize = 550;
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  // desktop :
+};
+
 export default function Birthdate(props) {
   return (
     <>

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

@@ -84,7 +84,7 @@ export default function MultipleSelector(props) {
             style={{
               position: "absolute",
               left: 5,
-              top: 10,
+              top: 15,
               fontSize: 30,
               color: "#a5a5a5",
             }}

src/views/Auth/Profile/MultipleSelector/index.scss

@@ -1,10 +1,10 @@
 .mobile-multiple-selector {
   width: 100%;
   border-radius: 10px;
-  padding: 10px 10px;
+  padding: 9px 10px;
   border: 1px solid #ccc !important;
   margin: 0px !important;
   .MuiInput-formControl {
-    margin: 9px 0px 7px !important;
+    margin: 9px 0px 15px !important;
   }
 }

src/views/QR/index.js

@@ -10,6 +10,9 @@ import SubjectsDropdown from "./SubjectsDropdown/index";
 import BookContent from "./BookContent/index";
 import NightsStayOutlinedIcon from "@material-ui/icons/NightsStayOutlined";
 
+import { connect } from "react-redux";
+import { qr } from "~/Redux/actions";
+
 import exit from "../../assets/icons/exit.svg";
 import sciense_7 from "../../assets/images/sciense-7.png";
 
@@ -17,7 +20,7 @@ import "./index.scss";
 
 const maxDesktopSize = 1250;
 
-export default class QR extends Component {
+class QR extends Component {
   state = {
     theme: true,
     zoom: [10, 10],
@@ -41,7 +44,7 @@ export default class QR extends Component {
     }
   };
   render() {
-    const { QR } = this.props;
+    const { QR, qrList } = this.props;
     const fontSize = {
       desktop: {
         sidebar: {
@@ -141,38 +144,51 @@ export default class QR extends Component {
           <>
             <div className="mobile-qr d-flex flex-column">
               <Navbar />
-
-              <div className="d-flex pt-3">
-                <div className="mobile-qr__buttons d-flex flex-column align-items-center">
-                  <img src={exit} alt="خروج" />
-                  <button>نمایش تمامی محتواها</button>
-                  <a
-                    href="#voice"
-                    className="mobile-qr__buttons--voice mobile-qr__buttons--media"
-                  ></a>
-                  <a
-                    href="#video"
-                    className="mobile-qr__buttons--video mobile-qr__buttons--media"
-                  ></a>
-                  <a
-                    href="#ppt"
-                    className="mobile-qr__buttons--ppt mobile-qr__buttons--media"
-                  ></a>
-                  <a
-                    href="#pdf"
-                    className="mobile-qr__buttons--pdf mobile-qr__buttons--media"
-                  ></a>
-                  <a
-                    href="#links"
-                    className="mobile-qr__buttons--attachment mobile-qr__buttons--media"
-                  ></a>
+              {qrList.length === 0 && qrList !== null ? (
+                <div className="d-flex flex-column">
+                  <div className="d-flex justify-content-end">بازگشت</div>
+                  <h1>فایلی در این صفحه موجود نیست.</h1>
                 </div>
-                <div className="mobile-qr__content d-flex flex-column">
-                  {QR.data.map((item, i) => (
-                    <Identifier data={item} key={i} />
-                  ))}
+              ) : null}
+              {qrList !== null ? (
+                <div className="d-flex pt-3">
+                  <div className="mobile-qr__buttons d-flex flex-column align-items-center">
+                    <img src={exit} alt="خروج" />
+                    <button>نمایش تمامی محتواها</button>
+                    <a
+                      href="#voice"
+                      className="mobile-qr__buttons--voice mobile-qr__buttons--media"
+                    ></a>
+                    <a
+                      href="#video"
+                      className="mobile-qr__buttons--video mobile-qr__buttons--media"
+                    ></a>
+                    <a
+                      href="#ppt"
+                      className="mobile-qr__buttons--ppt mobile-qr__buttons--media"
+                    ></a>
+                    <a
+                      href="#pdf"
+                      className="mobile-qr__buttons--pdf mobile-qr__buttons--media"
+                    ></a>
+                    <a
+                      href="#links"
+                      className="mobile-qr__buttons--attachment mobile-qr__buttons--media"
+                    ></a>
+                  </div>
+                  <div className="mobile-qr__content d-flex flex-column">
+                    {qrList.map((item, i) => (
+                      <Identifier data={item} key={i} />
+                    ))}
+                  </div>
                 </div>
-              </div>
+              ) : null}
+              {qrList === null ? (
+                <div className="d-flex flex-column align-items-center">
+                  <div className="d-flex justify-content-end">بازگشت</div>
+                  <h1 className="align-center">404</h1>
+                </div>
+              ) : null}
             </div>
           </>
         ) : null}
@@ -181,6 +197,13 @@ export default class QR extends Component {
   }
 }
 
+export default connect(
+  (state) => ({
+    qrList: state.qr.list,
+  }),
+  {}
+)(QR);
+
 QR.defaultProps = {
   QR: {
     id: 1,
@@ -192,73 +215,6 @@ QR.defaultProps = {
       page: 67,
       percent: 60,
     },
-    data: [
-      {
-        type: "h1",
-        text: "خلاصه کتاب",
-      },
-      {
-        type: "p",
-        text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
-      },
-      {
-        type: "h1",
-        text: "خلاصه کتاب",
-      },
-      {
-        type: "p",
-        text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
-      },
-      {
-        type: "voice",
-        title: "استاد رضایی:‌توضیح در مورد درس آتشفشان",
-        file: null,
-      },
-      {
-        type: "p",
-        text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
-      },
-      {
-        type: "video",
-        title: "ویدئوی آزمایشی آتش فشان سرکه",
-        file: null,
-      },
-      {
-        type: "p",
-        text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
-      },
-      {
-        type: "ppt",
-        title: "فایل پاورپوینت ارائه درس آتشفشان",
-        link: "",
-      },
-      {
-        type: "pdf",
-        title: "فایل پی دی اف ارائه درس آتشفشان",
-        link: "",
-      },
-      {
-        type: "p",
-        text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
-      },
-      {
-        type: "links",
-        links: [
-          {
-            title: "وبسایت آموزشی دانوین",
-            link: "",
-          },
-          {
-            title: "وبسایت رسمی مدیریت راهبردی کشور",
-            link: "",
-          },
-          {
-            title: "سازمان تبلیغات صنایع سبک",
-            link: "",
-          },
-        ],
-      },
-    ],
   },
 };
 

src/views/QRScan/History/index.js

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from "history";
+
+export default createBrowserHistory();

src/views/QRScan/index.js

@@ -2,10 +2,14 @@ import React, { Component } from "react";
 import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
 import { Link } from "react-router-dom";
+import history from "./History/index";
 import Scanner from "./Scanner/index";
 import LastQr from "./LastQr/index";
 import ReplayIcon from "@material-ui/icons/Replay";
 
+import { connect } from "react-redux";
+import { qr } from "~/Redux/actions";
+
 import sciense_6 from "../../assets/images/sciense-6.png";
 
 import "./index.scss";
@@ -19,11 +23,22 @@ const fontSize = {
   },
 };
 
-export default class QRScan extends Component {
+class QRScan extends Component {
   state = {
     value: null,
     facingMode: "environment",
+    tail: null,
   };
+
+  async componentDidUpdate() {
+    if (this.state.value) {
+      let tail = this.state.value.slice(15, this.state.value.length);
+      this.props.info(tail);
+      console.log(this.props.list, tail);
+      this.setState({ value: null, tail: tail });
+    }
+  }
+
   render() {
     const { data } = this.props;
     return (
@@ -62,10 +77,10 @@ export default class QRScan extends Component {
                     <Scanner parent={this} />
                   )}
                 </section>
-                {this.state.value === null ? null : (
-                  <p style={{ fontSize: fontSize.desktop.p }}>
-                    {this.state.value.text}
-                  </p>
+                {this.state.tail === null ? null : (
+                  <Link to={"/qr"} style={{ fontSize: fontSize.desktop.p }}>
+                    {this.state.tail}
+                  </Link>
                 )}
                 <p
                   style={{ fontSize: fontSize.desktop.p }}
@@ -123,8 +138,8 @@ export default class QRScan extends Component {
                   <Scanner parent={this} />
                 )}
               </section>
-              {this.state.value === null ? null : (
-                <p>{this.state.value.text}</p>
+              {this.state.tail === null ? null : (
+                <Link to={"/qr"}>{this.state.tail}</Link>
               )}
               <p className="mobile-qr-scan__text d-flex">
                 لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
@@ -146,6 +161,10 @@ export default class QRScan extends Component {
   }
 }
 
+export default connect((state) => ({ list: state.qr.list }), { info: qr.info })(
+  QRScan
+);
+
 QRScan.defaultProps = {
   data: [
     {