Reza_ashrafi
3 years ago
parent
f309ac09a0
commit
fb80e688ab
27 changed files with 509 additions and 144 deletions
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 843 B |
|
After Width: | Height: | Size: 855 B |
@ -0,0 +1,17 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Drawer from "react-modern-drawer"; |
||||||
|
|
||||||
|
const MyDrawer = ({ drawerOpen, setDrawerOpen }) => { |
||||||
|
return ( |
||||||
|
<Drawer |
||||||
|
open={drawerOpen} |
||||||
|
onClose={() => setDrawerOpen(() => !drawerOpen)} |
||||||
|
size={'80%'} |
||||||
|
direction="right" |
||||||
|
> |
||||||
|
|
||||||
|
</Drawer> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default MyDrawer; |
||||||
@ -1,24 +1,31 @@ |
|||||||
import React, {useState, useEffect} from 'react'; |
import React, { useState, useEffect } from "react"; |
||||||
import SignUp from './SignUp/index'; |
import SignUp from "./SignUp/index"; |
||||||
import Profile from './Profile/index'; |
import Profile from "./Profile/index"; |
||||||
import Login from './Login/index'; |
import Login from "./Login/index"; |
||||||
import {connect} from 'react-redux'; |
import { connect } from "react-redux"; |
||||||
|
|
||||||
|
|
||||||
function Auth(props) { |
function Auth(props) { |
||||||
const [page, setPage] = useState(props.page); |
const [page, setPage] = useState(props.page); |
||||||
useEffect(() => { |
useEffect(() => { |
||||||
setPage(() => props.page); |
setPage(() => props.page); |
||||||
},[props.page]); |
}, [props.page]); |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{ page === 'signup' && <SignUp theme={props.theme} /> } |
{page === "signup" && ( |
||||||
{ page === 'login' && <Login theme={props.theme} setPage={setPage} /> } |
<SignUp theme={props.theme} headerOptions={props.headerOptions} /> |
||||||
{ page === 'profile' && <Profile theme={props.theme} /> } |
)} |
||||||
|
{page === "login" && ( |
||||||
|
<Login |
||||||
|
theme={props.theme} |
||||||
|
setPage={setPage} |
||||||
|
headerOptions={props.headerOptions} |
||||||
|
/> |
||||||
|
)} |
||||||
|
{page === "profile" && <Profile theme={props.theme} />} |
||||||
</> |
</> |
||||||
) |
); |
||||||
} |
} |
||||||
|
|
||||||
export default connect((state) => ({ |
export default connect((state) => ({ |
||||||
theme : state.publicApi.theme, |
theme: state.publicApi.theme, |
||||||
}))(Auth); |
}))(Auth); |
||||||
@ -1,13 +1,25 @@ |
|||||||
import React from 'react'; |
import React, { useEffect } from "react"; |
||||||
import Landscape from './Landscape'; |
import { connect } from "react-redux"; |
||||||
import Portrait from './Portrait'; |
import Landscape from "./Landscape"; |
||||||
|
import Portrait from "./Portrait"; |
||||||
|
import { publicApi } from "../../redux/actions"; |
||||||
|
|
||||||
|
function Home({ setHeaderOptions, headerOptions }) { |
||||||
export default function Home() { |
useEffect(() => { |
||||||
|
setHeaderOptions(headerOptions); |
||||||
|
}, []); |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
<Portrait /> |
<Portrait /> |
||||||
<Landscape /> |
<Landscape /> |
||||||
</> |
</> |
||||||
) |
); |
||||||
} |
} |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({}); |
||||||
|
|
||||||
|
const mapDispatchToProps = { |
||||||
|
setHeaderOptions: publicApi.setHeaderOptions, |
||||||
|
}; |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(Home); |
||||||
|
|||||||
@ -1,14 +1,37 @@ |
|||||||
import React from "react"; |
import React, {useState} from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import { userFactor } from "../../../redux/actions"; |
||||||
|
|
||||||
|
function Code({ codeId, setCodeId, userId, factorId }) { |
||||||
|
const [value, setValue] = React.useState(codeId || ""); |
||||||
|
|
||||||
|
const setOff = () => { |
||||||
|
setCodeId({ offCodeValue: value, userId: userId, id: factorId }); |
||||||
|
} |
||||||
|
|
||||||
export default function Code({}) { |
|
||||||
return ( |
return ( |
||||||
<form className="flex w-full flex-row border border-blueC0 border-solid rounded-md mt-3 overflow-hidden"> |
<form className="flex w-full flex-row border border-blueC0 border-solid rounded-md mt-3 overflow-hidden"> |
||||||
<input |
<input |
||||||
type="text" |
type="text" |
||||||
className="border-0 flex-1 text-right pr-3 font-medium text-xs dark:bg-gray2077 placeholder:text-blue5F" |
className="border-0 flex-1 text-right pr-3 font-medium text-xs dark:bg-gray2077 placeholder:text-blue5F dark:text-white" |
||||||
placeholder={"کد تخفیف دارید ؟"} |
placeholder={"کد تخفیف دارید ؟"} |
||||||
/> |
/> |
||||||
<button className={"py-3 px-4 text-xs bg-blueC0 text-white border border-blueC0 border-solid"}>ثبت کد</button> |
<button className={"py-3 px-4 text-xs bg-blueC0 text-white border border-blueC0 border-solid"} onClick={setOff}>ثبت کد</button> |
||||||
</form> |
</form> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
codeId: state.userFactor.info?.codeId, |
||||||
|
userId: state.user.status.id, |
||||||
|
factorId: state.userFactor.info?.id, |
||||||
|
}); |
||||||
|
|
||||||
|
const mapDispatchToProps = { |
||||||
|
setCodeId: userFactor.update, |
||||||
|
} |
||||||
|
|
||||||
|
export default connect( |
||||||
|
mapStateToProps, |
||||||
|
mapDispatchToProps |
||||||
|
)(Code); |
||||||
@ -1,43 +1,95 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import { userProduct } from "../../../redux/actions"; |
||||||
|
|
||||||
// assets
|
// assets
|
||||||
import bookImage from "../../../assets/images/zist-11.svg"; |
import bookImage from "../../../assets/images/zist-11.svg"; |
||||||
import exitIcon from "../../../assets/icons/exit.svg"; |
import exitIcon from "../../../assets/icons/exit.svg"; |
||||||
|
|
||||||
export default function Product({ product }) { |
function Product({ product, grades, pushToCart }) { |
||||||
return ( |
return ( |
||||||
<div className="flex flex-row justify-between py-5 border-b border-solid border-grayDB dark:border-gray45"> |
<div className="flex flex-row justify-between py-5 border-b border-solid border-grayDB dark:border-gray45"> |
||||||
<div className="flex flex-row"> |
<div className="flex flex-row"> |
||||||
<img src={bookImage} className="rounded-md w-20" /> |
<img |
||||||
|
src={"https://dnvn.ir/api/v1/file/" + product.product.book.fileIds} |
||||||
|
className="rounded-md w-20" |
||||||
|
/> |
||||||
<div className="flex flex-col pr-2"> |
<div className="flex flex-col pr-2"> |
||||||
<strong className="text-sm text-blue5F mb-1 dark:text-white"> |
<strong className="text-sm text-blue5F mb-1 dark:text-white"> |
||||||
علوم اجتماعی |
{product.product.book.name} |
||||||
</strong> |
</strong> |
||||||
<span className="text-gray70 text-xs mb-1 dark:text-greenBA"> |
<span className="text-gray70 text-xs mb-1 dark:text-greenBA"> |
||||||
پایه دوم |
{"پایه" + " " + grades[product.product.book.gradeId]} |
||||||
</span> |
</span> |
||||||
<span className="text-gray70 text-xs mb-1 dark:text-greenBA"> |
<span className="text-gray70 text-xs mb-1 dark:text-greenBA"> |
||||||
نسخه فیزیکی |
{product.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"} |
||||||
</span> |
</span> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div className={"flex flex-col justify-between items-end"}> |
<div className={"flex flex-col justify-between items-end"}> |
||||||
<img src={exitIcon} className="w-4" alt="" /> |
<img |
||||||
|
src={exitIcon} |
||||||
|
className="w-4" |
||||||
|
alt="" |
||||||
|
onClick={() => |
||||||
|
pushToCart( |
||||||
|
{ |
||||||
|
productId: product?.productId, |
||||||
|
userId: product?.userId, |
||||||
|
count: product?.productType === 1 ? -1 : -product?.count, |
||||||
|
}, |
||||||
|
{}, |
||||||
|
{id : product?.factorId} |
||||||
|
) |
||||||
|
} |
||||||
|
/> |
||||||
<div className="flex flex-col items-center"> |
<div className="flex flex-col items-center"> |
||||||
|
{product.productType === 2 && ( |
||||||
<div className="flex flex-row items-center mb-3"> |
<div className="flex flex-row items-center mb-3"> |
||||||
<button className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0"> |
<button |
||||||
|
className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0" |
||||||
|
onClick={() => |
||||||
|
pushToCart({ |
||||||
|
productId: product?.productId, |
||||||
|
userId: product?.userId, |
||||||
|
count: 1, |
||||||
|
}) |
||||||
|
} |
||||||
|
> |
||||||
+ |
+ |
||||||
</button> |
</button> |
||||||
<span className="mx-2.5 font-semibold text-md text-blueC0">1</span> |
<span className="mx-2.5 font-semibold text-md text-blueC0"> |
||||||
<button className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-grayDB text-grayDB dark:border-blueC0 dark:text-blueC0"> |
{product.count} |
||||||
|
</span> |
||||||
|
<button |
||||||
|
className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-grayDB text-grayDB dark:border-blueC0 dark:text-blueC0" |
||||||
|
onClick={() => |
||||||
|
pushToCart({ |
||||||
|
productId: product?.productId, |
||||||
|
userId: product?.userId, |
||||||
|
count: -1, |
||||||
|
}) |
||||||
|
} |
||||||
|
> |
||||||
- |
- |
||||||
</button> |
</button> |
||||||
</div> |
</div> |
||||||
|
)} |
||||||
<strong className="font-bold text-md text-blue5F dark:text-white"> |
<strong className="font-bold text-md text-blue5F dark:text-white"> |
||||||
145.000 |
{product.product.price} تومان |
||||||
</strong> |
</strong> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
grades: state.publicApi.grades, |
||||||
|
}); |
||||||
|
|
||||||
|
const mapDispatchToProps = { |
||||||
|
pushToCart: userProduct.add, |
||||||
|
}; |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(Product); |
||||||
|
|||||||
Loading…
Reference in new issue