Danovin
/
danovin
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza added products and product api

Browse Source
master
RezaAshrafi77 3 years ago
parent 975d787694
commit 1bfe0c3272
15 changed files with 492 additions and 186 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 165
      src/AppRouter.js
  2. 31
      src/Redux/actions/book.js
  3. 1
      src/Redux/actions/index.js
  4. 28
      src/Redux/reducers/book.js
  5. 1
      src/Redux/reducers/index.js
  6. 2
      src/Redux/reducers/user.js
  7. 2
      src/views/Auth/Profile/index.js
  8. 253
      src/views/Product/index.js
  9. 1
      src/views/Product/index.scss
  10. 25
      src/views/Products/Product/index.js
  11. 3
      src/views/Products/Product/index.scss
  12. 111
      src/views/Products/index.js
  13. 35
      src/views/QR/Image/index.js
  14. 13
      src/views/QR/Image/index.scss
  15. 7
      src/views/QR/index.js

165
src/AppRouter.js
Unescape View File

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

31
src/Redux/actions/book.js
Unescape View File

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

1
src/Redux/actions/index.js
Unescape View File

@ -5,3 +5,4 @@ export { default as chat } from "./chat.js";
// export { default as public } from './public.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"; export { default as qr } from "./qr.js";
export { default as book } from "./book.js";

28
src/Redux/reducers/book.js
Unescape View File

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

1
src/Redux/reducers/index.js
Unescape View File

@ -5,3 +5,4 @@ export { default as message } from "./message.js";
export { default as public } from "./public.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"; export { default as qr } from "./qr.js";
export { default as book } from "./book.js";

2
src/Redux/reducers/user.js
Unescape View File

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

2
src/views/Auth/Profile/index.js
Unescape View File

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

253
src/views/Product/index.js
Unescape View File

@ -1,5 +1,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { book } from "~/Redux/actions";
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
@ -10,6 +12,7 @@ import Info from "./Info/index";
import AddToCart from "./AddToCart/index"; import AddToCart from "./AddToCart/index";
import HomeScroll from "../Home/HomeScroll/index"; import HomeScroll from "../Home/HomeScroll/index";
import HomeSlider from "../Home/HomeSlider/index"; import HomeSlider from "../Home/HomeSlider/index";
import Loader from "~/components/Loader/index";
import sciense_7 from "~/assets/images/sciense-7.png"; import sciense_7 from "~/assets/images/sciense-7.png";
import sciense_6 from "~/assets/images/sciense-6.png"; import sciense_6 from "~/assets/images/sciense-6.png";
@ -40,138 +43,176 @@ const fontSize = {
li: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 29, 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() { render() {
const { product, sameProducts, supportItems } = this.props; const { product, sameProducts, supportItems, info } = this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<> this.props.info ? (
<div className="product d-flex flex-column"> <>
<Navbar /> <div className="product d-flex flex-column">
<Breadcrumbs /> <Navbar />
<header className="product__header d-flex mt-4"> <Breadcrumbs />
<Gallery gallery={product.gallery} /> <header className="product__header d-flex mt-4">
<Info <Gallery gallery={product.gallery} />
subTitle={product.subTitle} <Info
title={product.title} subTitle={product.subTitle}
description={product.description} title={product.title}
/> description={product.description}
<AddToCart />
supportItems={supportItems} <AddToCart
price={product.price} supportItems={supportItems}
off={product.off} price={product.price}
/> off={product.off}
</header> />
<div className="product__comments d-flex flex-column"> </header>
<div className="d-flex justify-content-between"> <div className="product__comments d-flex flex-column">
<h3 style={{ fontSize: fontSize.desktop.h1 }}> <div className="d-flex justify-content-between">
نظرات خریداران <h3 style={{ fontSize: fontSize.desktop.h1 }}>
</h3> نظرات خریداران
<button> </h3>
ارسال نظر <button>
<img src={send_comment} alt="ارسال نظر" /> ارسال نظر
</button> <img src={send_comment} alt="ارسال نظر" />
</div> </button>
</div>
<div className="product__comments--list d-flex flex-column"> <div className="product__comments--list d-flex flex-column">
<Comment comment={product.comments[0]} /> <Comment comment={product.comments[0]} />
</div>
</div> </div>
<Identifier item={sameProducts} />
</div> </div>
<Identifier item={sameProducts} /> <Footer />
</>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div> </div>
<Footer /> )
</>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<> this.props.info ? (
<div className="mobile-product d-flex flex-column"> <>
<Navbar /> <div className="mobile-product d-flex flex-column">
<header className="mobile-product__header d-flex flex-column align-items-center"> <Navbar />
<img src={product.image} alt={product.title} /> <header className="mobile-product__header d-flex flex-column align-items-center">
<h1 style={{ fontSize: fontSize.mobile.h1 }}> <img
{product.title} src={`https://dnvn.ir/api/v1/file/${info.fileIds}`}
</h1> alt={info.name}
<h2 style={{ fontSize: fontSize.mobile.h2 }}> />
{product.subTitle} <h1 style={{ fontSize: fontSize.mobile.h1 }}>{info.name}</h1>
</h2> <h2 style={{ fontSize: fontSize.mobile.h2 }}>
<div className="d-flex flex-column mt-3"> {product.subTitle}
<div className="d-flex"> </h2>
<div className="d-flex flex-column mt-3">
<div className="d-flex">
<Link
to={`/products/${product.id}/sample`}
className="mobile-product__header--digitalButton"
style={{ fontSize: fontSize.mobile.a }}
>
خرید نسخه دیجیتال
</Link>
<Link
to={`/products/${product.id}/sample`}
className="mobile-product__header--purchase"
style={{ fontSize: fontSize.mobile.a }}
>
خرید نسخه چاپی
</Link>
</div>
<Link <Link
to={`/products/${product.id}/sample`} to={`/products/${product.id}/sample`}
className="mobile-product__header--digitalButton" className="mobile-product__header--sampleButton"
style={{ fontSize: fontSize.mobile.a }} style={{ fontSize: fontSize.mobile.a }}
> >
خرید نسخه دیجیتال مطالعه نمونه کتاب
</Link>
<Link
to={`/products/${product.id}/sample`}
className="mobile-product__header--purchase"
style={{ fontSize: fontSize.mobile.a }}
>
خرید نسخه چاپی
</Link> </Link>
</div> </div>
<Link </header>
to={`/products/${product.id}/sample`} <div className="mobile-product__abstraction d-flex flex-column">
className="mobile-product__header--sampleButton" <h3 style={{ fontSize: fontSize.mobile.h3 }}>خلاصه کتاب</h3>
style={{ fontSize: fontSize.mobile.a }} <p style={{ fontSize: fontSize.mobile.p }}>
> {product.abstraction}
مطالعه نمونه کتاب </p>
</Link>
</div> </div>
</header> <div className="mobile-product__modules d-flex flex-column">
<div className="mobile-product__abstraction d-flex flex-column"> <h3 style={{ fontSize: fontSize.mobile.h3 }}>
<h3 style={{ fontSize: fontSize.mobile.h3 }}>خلاصه کتاب</h3> این کتاب شامل چه مواردی است؟
<p style={{ fontSize: fontSize.mobile.p }}> </h3>
{product.abstraction} <ul>
</p> {product.modules.map((item, i) => (
</div> <React.Fragment key={i}>
<div className="mobile-product__modules d-flex flex-column"> <Item item={item} />
<h3 style={{ fontSize: fontSize.mobile.h3 }}> </React.Fragment>
این کتاب شامل چه مواردی است؟ ))}
</h3> </ul>
<ul> </div>
{product.modules.map((item, i) => ( <div className="mobile-product__tips d-flex flex-column">
<React.Fragment key={i}> <h3 style={{ fontSize: fontSize.mobile.h3 }}>
<Item item={item} /> نکاتی که هنگام خرید باید به آن توجه داشته باشید؟
</React.Fragment> </h3>
))} <ul>
</ul> {product.tips.map((item, i) => (
</div> <React.Fragment key={i}>
<div className="mobile-product__tips d-flex flex-column"> <Item item={item} />
<h3 style={{ fontSize: fontSize.mobile.h3 }}> </React.Fragment>
نکاتی که هنگام خرید باید به آن توجه داشته باشید؟ ))}
</h3> </ul>
<ul> </div>
{product.tips.map((item, i) => ( <div className="mobile-product__description d-flex">
<React.Fragment key={i}> <p style={{ fontSize: fontSize.mobile.p }}>
<Item item={item} /> {product.description}
</React.Fragment> </p>
))} </div>
</ul> <div className="mobile-product__comments d-flex flex-column">
</div> <h3 style={{ fontSize: fontSize.mobile.h3 }}>
<div className="mobile-product__description d-flex"> نظرات خریداران
<p style={{ fontSize: fontSize.mobile.p }}> </h3>
{product.description} <div className="mobile-product__comments--list d-flex">
</p> {product.comments.map((item, i) => (
</div> <Comment comment={item} key={i} />
<div className="mobile-product__comments d-flex flex-column"> ))}
<h3 style={{ fontSize: fontSize.mobile.h3 }}>نظرات خریداران</h3> </div>
<div className="mobile-product__comments--list d-flex">
{product.comments.map((item, i) => (
<Comment comment={item} key={i} />
))}
</div> </div>
</div> </div>
</>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div> </div>
</> )
) : null} ) : null}
</> </>
); );
} }
} }
export default connect(
(state) => ({
info: state.book.info,
// status: state.user.status,
}),
{ getInfo: book.info }
)(Product);
Product.defaultProps = { Product.defaultProps = {
supportItems: [ supportItems: [
{ title: "ارسال رایگان", icon: product_shipping }, { title: "ارسال رایگان", icon: product_shipping },

1
src/views/Product/index.scss
Unescape View File

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

25
src/views/Products/Product/index.js
Unescape View File

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

3
src/views/Products/Product/index.scss
Unescape View File

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

111
src/views/Products/index.js
Unescape View File

@ -1,5 +1,8 @@
import React, { Component } from "react"; import React, { Component } from "react";
import FilterListIcon from "@material-ui/icons/FilterList"; 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 Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
@ -20,13 +23,14 @@ import navbarSearch from "../../assets/icons/navbarSearch.png";
import "./index.scss"; import "./index.scss";
const maxMobileSize = 1250; const maxMobileSize = 1250;
const fontSize = { const fontSize = {
mobile: { mobile: {
input: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 27, input: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 27,
}, },
}; };
export default class Products extends Component { class Products extends Component {
state = { state = {
selectedSort: null, selectedSort: null,
selectedFilters: { selectedFilters: {
@ -53,59 +57,96 @@ export default class Products extends Component {
degree: "", degree: "",
}; };
componentDidMount() {
this.props.getList();
}
render() { render() {
const { dateFilters, degreeFilters, firstFilters } = this.state; const { dateFilters, degreeFilters, firstFilters } = this.state;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<> this.props.list ? (
<div className="products d-flex flex-column"> <>
<Navbar page={"products"} /> <div className="products d-flex flex-column">
<Breadcrumbs /> <Navbar page={"products"} />
<div className="products__body d-flex"> <Breadcrumbs />
<Filters parent={this} /> <div className="products__body d-flex">
<div className="products__body--left d-flex flex-column"> <Filters parent={this} />
<Sort parent={this} selectedSort={this.state.selectedSort} /> <div className="products__body--left d-flex flex-column">
<List parent={this} /> <Sort
parent={this}
selectedSort={this.state.selectedSort}
/>
<List parent={this} />
</div>
</div> </div>
</div> </div>
<Footer />
</>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div> </div>
<Footer /> )
</>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<> this.props.list ? (
<div className="mobile-products d-flex flex-column"> <>
<Navbar page={"products"} /> <div className="mobile-products d-flex flex-column">
<div className="mobile-products__search d-flex"> <Navbar page={"products"} />
<input <div className="mobile-products__search d-flex">
type="search" <input
style={{ fontSize: fontSize.mobile.input }} type="search"
placeholder={"جستجو"} style={{ fontSize: fontSize.mobile.input }}
/> placeholder={"جستجو"}
<img src={navbarSearch} alt="جستجو" /> />
</div> <img src={navbarSearch} alt="جستجو" />
<div className="mobile-products__filters d-flex"> </div>
<div className="d-flex"> <div className="mobile-products__filters d-flex">
<Select name="first" options={firstFilters} parent={this} /> <div className="d-flex">
<Select name="date" options={dateFilters} parent={this} /> <Select name="first" options={firstFilters} parent={this} />
<Select name="degree" options={degreeFilters} parent={this} /> <Select name="date" options={dateFilters} 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.list.map((item, i) => (
<Product product={item} key={i} id={i} />
))}
</div> </div>
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} />
</div>
<div className="mobile-products__list d-flex flex-wrap">
{this.props.products.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> </div>
</> )
) : null} ) : null}
</> </>
); );
} }
} }
export default connect(
(state) => ({
list: state.book.list,
// status: state.user.status,
}),
{ getList: book.list }
)(Products);
Products.defaultProps = { Products.defaultProps = {
sortItems: [ sortItems: [
"پربازدیدترین", "پربازدیدترین",

35
src/views/QR/Image/index.js
Unescape View File

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

13
src/views/QR/Image/index.scss
Unescape View File

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

7
src/views/QR/index.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save