reza added something

temp
Reza_ashrafi 3 years ago
parent 51258aa00b
commit 5b9c20a9f6
  1. 16
      src/components/Empty/index.js
  2. 7
      src/components/FloatingButton/index.js
  3. 2
      src/components/Navbar/index.js
  4. 1
      src/redux/actions/index.js
  5. 29
      src/redux/actions/userFavorite.js
  6. 1
      src/redux/reducers/index.js
  7. 33
      src/redux/reducers/userFavorite.js
  8. 61
      src/router.js
  9. 4
      src/views/AR/index.js
  10. 11
      src/views/AR/layouts/Book.js
  11. 12
      src/views/Address/index.js
  12. 6
      src/views/Dashboard/layouts/Mobile/List.js
  13. 316
      src/views/Dashboard/layouts/Mobile/ProfileAddress/index.js
  14. 61
      src/views/Favorites/index.js
  15. 13
      src/views/Orders/index.js

@ -0,0 +1,16 @@
import React from "react";
import { connect } from "react-redux";
export const Empty = ({ text, buttonText, buttonAction }) => {
return (
<div className="flex-1 flex flex-col justify-center items-center">
<strong className="text-tiny font-medium text-gray1">{text}</strong>
</div>
);
};
const mapStateToProps = (state) => ({});
const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(Empty);

@ -4,14 +4,14 @@ import { connect } from "react-redux";
//assets //assets
import plusIcon from "./plus.svg"; import plusIcon from "./plus.svg";
export const FloatingButton = ({ action, position, icon }) => { export const FloatingButton = ({ action, position, icon, size }) => {
return ( return (
<button <button
onClick={() => action()} onClick={() => action()}
className={`fixed bg-blueC0 w-20 h-20 rounded-full transform transition-all hover:scale-110 active:scale-90 flex justify-center items-center shadow-xl z-10`} className={`fixed bg-blueC0 rounded-full w-${size} h-${size} transform transition-all hover:scale-110 active:scale-90 flex justify-center items-center shadow-xl z-10`}
style={position} style={position}
> >
<img src={icon} alt="" className="w-7" style={{transform: 'translateX(-0px) translateY(3px)'}} /> <img src={icon} alt="" style={{transform: 'translateX(-0px) translateY(3px)', width : size * 1.3}} />
</button> </button>
); );
}; };
@ -24,4 +24,5 @@ export default connect(mapStateToProps, mapDispatchToProps)(FloatingButton);
FloatingButton.defaultProps = { FloatingButton.defaultProps = {
icon: plusIcon, icon: plusIcon,
size : 20
}; };

@ -179,7 +179,7 @@ function Navbar({
<img <img
src={isDark ? arrowWhiteIcon : arrowBlueIcon} src={isDark ? arrowWhiteIcon : arrowBlueIcon}
alt="back" alt="back"
className={`w-6 ${isDark ? "" : "transform -rotate-180"}`} className={`w-6 transform ${isDark ? "" : "-rotate-180"}`}
onClick={() => navigation(-1)} onClick={() => navigation(-1)}
/> />
) : null} ) : null}

@ -7,6 +7,7 @@ export { default as product } from "./product";
export { default as userFactor } from "./userFactor"; export { default as userFactor } from "./userFactor";
export { default as userProduct } from "./userProduct"; export { default as userProduct } from "./userProduct";
export { default as userAddress } from "./userAddress"; export { default as userAddress } from "./userAddress";
export { default as userFavorite } from "./userFavorite";
export { default as transport } from "./transport"; export { default as transport } from "./transport";
export { default as content } from "./content"; export { default as content } from "./content";
export { default as faq } from "./faq"; export { default as faq } from "./faq";

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

@ -6,6 +6,7 @@ export { default as blog } from "./blog";
export { default as product } from "./product"; export { default as product } from "./product";
export { default as content } from "./content"; export { default as content } from "./content";
export { default as userAddress } from "./userAddress"; export { default as userAddress } from "./userAddress";
export { default as userFavorite } from "./userFavorite";
export { default as transport } from "./transport"; export { default as transport } from "./transport";
export { default as faq } from "./faq"; export { default as faq } from "./faq";
export { default as file } from "./file"; export { default as file } from "./file";

@ -0,0 +1,33 @@
import {toast} from 'react-toastify';
const initialState = {
loading: false,
error: null,
list: [],
};
export default function userAddress(state = initialState, action) {
let { type, data } = action;
switch (type) {
case "userAddress/list":
return {
...state,
loading: false,
list: data,
error: null,
};
case "userAddress/update":
return { ...state, loading: false, error: null };
case "userAddress/add":
toast.success('به لیست علاقهمندیها اضافه شد.');
return { ...state, loading: false, error: null };
case "userAddress/delete":
return { ...state, loading: false, error: null };
case "userAddress/loading":
return { ...state, loading: true };
case "userAddress/error":
toast.error(data.message);
return { ...state, loading: false, error: data.message };
default:
return state;
}
}

@ -31,6 +31,9 @@ import Blogs from "./views/Blogs";
import Blog from "./views/Blog"; import Blog from "./views/Blog";
import About from "./views/About"; import About from "./views/About";
import Dialog from "./components/Dialog"; import Dialog from "./components/Dialog";
import Address from "./views/Address";
import Favorites from "./views/Favorites";
import Addresses from "./views/Dashboard/layouts/Mobile/ProfileAddress";
function Router({ isDark, isMobile, headerOptions, dialog }) { function Router({ isDark, isMobile, headerOptions, dialog }) {
useEffect(() => { useEffect(() => {
@ -236,13 +239,13 @@ function Router({ isDark, isMobile, headerOptions, dialog }) {
} }
/> />
<Route <Route
path="/orders" path="/Orders"
exact exact
element={ element={
<Orders <Orders
headerOptions={{ headerOptions={{
shown: "true", shown: true,
title: "سفارش من", title: "سفارشات من",
back: true, back: true,
logo: false, logo: false,
menu: false, menu: false,
@ -354,6 +357,58 @@ function Router({ isDark, isMobile, headerOptions, dialog }) {
/> />
} }
/> />
<Route
path="/editProfile"
exact
element={
<Address
profilePage={true}
headerOptions={{
logo: false,
hamburgerMenu: false,
qr: false,
title: "مشخصات کاربری",
shown: true,
menu: false,
back: true,
}}
/>
}
/>
<Route
path="/favorites"
exact
element={
<Favorites
headerOptions={{
logo: false,
hamburgerMenu: false,
qr: false,
title: "علاقهمندیها",
shown: true,
menu: false,
back: true,
}}
/>
}
/>
<Route
path="/addresses"
exact
element={
<Addresses
headerOptions={{
logo: false,
hamburgerMenu: false,
qr: false,
title: "آدرس ها",
shown: true,
menu: false,
back: true,
}}
/>
}
/>
<Route <Route
path="/ar" path="/ar"
exact exact

@ -4,15 +4,13 @@ import { publicApi } from "../../redux/actions";
import Book from "./layouts/Book"; import Book from "./layouts/Book";
function AR({ getArList, arList, headerOptions, setHeaderOptions }) { function AR({ getArList, arList, headerOptions, setHeaderOptions }) {
useEffect(() => { useEffect(() => {
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
getArList(); getArList();
}, []); }, []);
return ( return (
<div className="flex flex-col flex-1 gap-4 px-4 lg:w-1/2 lg:min-h-screen lg:py-24 lg:mx-auto"> <div className="flex flex-wrap justify-between flex-1 gap-4 px-4 lg:w-1/2 lg:min-h-screen lg:py-24 lg:mx-auto">
{arList.length > 0 && {arList.length > 0 &&
arList.map((book, index) => <Book book={book} key={index} />)} arList.map((book, index) => <Book book={book} key={index} />)}
</div> </div>

@ -5,17 +5,18 @@ const Book = ({ book }) => {
<a <a
href={`https://ar.dnvn.ir/lunch?id=${book.id}`} href={`https://ar.dnvn.ir/lunch?id=${book.id}`}
target="_blank" target="_blank"
className="w-full flex flex-row rounded-md p-2 shadow-lg" className="w-1/2 flex flex-col rounded-md px-2 pt-2 pb-10 shadow-lg"
style={{ width : 'calc(100vw / 2 - 30px)' }}
> >
<img <img
src={`https://dnvn.ir/api/v1/file/${book.fileId}`} src={`https://dnvn.ir/api/v1/file/${book.fileId}`}
className="rounded-md" className="rounded-sm"
style={{ style={{
width: "calc(100vh / 10)", width: "100%",
height: "calc(100vh / 10 * 3 / 2)", // objectFit : 'contain'
}} }}
/> />
<storng className="mr-2 mt-2 text-tiny text-blue5F font-semibold"> <storng className="mr-1 mt-3 text-tiny text-blue5F font-semibold">
{book.title} {book.title}
</storng> </storng>
</a> </a>

@ -32,6 +32,8 @@ export const Address = ({
profileFields, profileFields,
setProfile, setProfile,
user, user,
setHeaderOptions,
headerOptions,
}) => { }) => {
const [addressFields, setAddressFields] = useState({}); const [addressFields, setAddressFields] = useState({});
const [mapAddress, setMapAddress] = useState(null); const [mapAddress, setMapAddress] = useState(null);
@ -40,6 +42,9 @@ export const Address = ({
if (province.length <= 1) { if (province.length <= 1) {
getProvince(); getProvince();
} }
if(isMobile){
setHeaderOptions(headerOptions);
}
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -201,7 +206,7 @@ export const Address = ({
}; };
return ( return (
<div <div
className="flex flex-col lg:flex-row-reverse flex-1 pt-10 lg:pt-0 pb-20 gap-5 lg:divide-x lg:divide-solid lg:divide-gray-200" className="flex flex-col lg:flex-row-reverse px-4 flex-1 lg:pt-0 pb-20 gap-5 lg:divide-x lg:divide-solid lg:divide-gray-200"
// style={{ minHeight: "calc(100vh - 500px)" }} // style={{ minHeight: "calc(100vh - 500px)" }}
> >
{!profilePage && ( {!profilePage && (
@ -484,7 +489,7 @@ export const Address = ({
)} )}
</div> </div>
</div> </div>
{isMobile && ( {/* {isMobile && (
<div <div
className="fixed top-0 left-0 flex justify-between items-center py-3 px-4 w-full" className="fixed top-0 left-0 flex justify-between items-center py-3 px-4 w-full"
style={{ style={{
@ -501,7 +506,7 @@ export const Address = ({
onClick={() => setPhase("deliveryForm")} onClick={() => setPhase("deliveryForm")}
/> />
</div> </div>
)} )} */}
</div> </div>
); );
}; };
@ -526,6 +531,7 @@ const mapDispatchToProps = {
setDialog: dialog.set, setDialog: dialog.set,
setProfileFields: user.setProfileFields, setProfileFields: user.setProfileFields,
setProfile: user.setProfile, setProfile: user.setProfile,
setHeaderOptions : publicApi.setHeaderOptions
}; };
export default connect(mapStateToProps, mapDispatchToProps)(Address); export default connect(mapStateToProps, mapDispatchToProps)(Address);

@ -16,7 +16,7 @@ const List = ({ mobile }) => {
{ {
icon: <img src={userGreenIcon} alt="" />, icon: <img src={userGreenIcon} alt="" />,
name: "اطلاعات حساب کاربری", name: "اطلاعات حساب کاربری",
link: "/CreateAddress", link: "/editProfile",
}, },
{ {
icon: <img src={cartGreenIcon} />, icon: <img src={cartGreenIcon} />,
@ -36,12 +36,12 @@ const List = ({ mobile }) => {
{ {
icon: <img src={bookmarkGreenIcon} />, icon: <img src={bookmarkGreenIcon} />,
name: "لیست علاقهمندیها", name: "لیست علاقهمندیها",
link: "/ProfileBookmark", link: "/favorites",
}, },
{ {
icon: <img src={addressGreenIcon} />, icon: <img src={addressGreenIcon} />,
name: "آدرسها", name: "آدرسها",
link: "/ProfileAddress", link: "/addresses",
}, },
]; ];

@ -1,35 +1,12 @@
import {
View,
Text,
Pressable,
TouchableOpacity,
Appearance,
ActivityIndicator,
SafeAreaView,
ScrollView,
StyleSheet,
Platform,
Dimensions,
StatusBar,
} from "react-native";
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { useNavigation } from "@react-navigation/native"; import { userAddress, userFactor } from "../../../../../redux/actions";
import { userAddress, userFactor } from "../../../../redux/actions"; import { Link, useNavigate } from "react-router-dom";
import Svg, { G, Path } from "react-native-svg";
//components //components
import Navbar from "../../../../components/Navbar"; import Empty from "../../../../../components/Empty";
import CustomPressable from "../../../../components/Pressable"; import Button from "../../../../../components/Button";
import Empty from "../../../../components/Empty"; import FloatingButton from "../../../../../components/FloatingButton";
//style
import tw from "tailwind-rn";
import Colors from "../../../../constants/Colors";
import fontSize from "../../../../constants/fontSize";
const { height, width } = Dimensions.get("window");
const ios = Platform.OS === "ios";
const ProfileAddress = ({ const ProfileAddress = ({
addresses, addresses,
@ -41,156 +18,81 @@ const ProfileAddress = ({
loading, loading,
closeBottomSheet, closeBottomSheet,
mobile, mobile,
isDark,
}) => { }) => {
const colorScheme = Appearance.getColorScheme(); const navigation = useNavigate();
const navigation = useNavigation();
const [height, setHeight] = React.useState(Dimensions.get("window").height);
const Location = ({ address, active }) => { const Location = ({ address, active }) => {
return ( return (
<Pressable <div
style={[ className={`bg-opacity-5 border border-solid flex flex-row items-center w-full px-3 py-2 rounded-md mt-2 ${
{ active ? "bg-blueC0 border-blueC0" : "bg-gray-300 border-gray-300"
backgroundColor: }`}
userAddressId === address?.id onClick={() =>
? Colors.theme1[colorScheme].greenCF + "0a"
: Colors.theme1[colorScheme].grayE3 + "44",
borderWidth: 2,
borderColor:
userAddressId === address?.id
? Colors.theme1[colorScheme].greenCF + "aa"
: Colors.theme1[colorScheme].grayE3,
},
tw(
`flex flex-row-reverse items-center w-full px-3 py-2 rounded-md mt-2`
),
]}
onPress={() =>
userAddressId === address?.id userAddressId === address?.id
? {} ? {}
: update({ userAddressId: address.id, userId }) : update({ userAddressId: address.id, userId })
} }
> >
<View style={tw("flex flex-1 mr-2")}> <div className={"flex flex-col flex-1 mr-2"}>
{active && ( {active && (
<View <div className={"w-full flex flex-row justify-between mb-3"}>
style={tw("w-full flex flex-row-reverse justify-between mb-3")} <div className={"flex flex-row items-center"}>
> <strong className={"text-base font-bold text-gray1"}>
<View style={tw("flex flex-row-reverse items-center")}>
<Text
style={{
fontSize: fontSize.base,
fontFamily: "bold",
color: Colors.theme1[colorScheme].gray20,
}}
>
آدرس انتخابی شما آدرس انتخابی شما
</Text> </strong>
<Text <span className={"text-xs text-gray1 mr-2.5"}>فعال</span>
style={{ </div>
fontSize: fontSize.xs, <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
fontFamily: "regular", <g fill="#07612c" data-name="vuesax/linear/more">
color: Colors.theme1[colorScheme].gray20, <path d="M10 19a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" />
marginRight: 10, <path
}}
>
فعال
</Text>
</View>
<Svg xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
<G fill="#07612c" data-name="vuesax/linear/more">
<Path d="M10 19a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" />
<Path
data-name="Vector" data-name="Vector"
d="M10 5a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2ZM10 12a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" d="M10 5a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2ZM10 12a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z"
/> />
</G> </g>
</Svg> </svg>
</View> </div>
)} )}
<View style={tw(`flex w-full ${active ? "" : "flex-row-reverse"}`)}> <div className={`flex w-full ${active ? "" : "flex-row"}`}>
<View style={tw("flex flex-1 mb-4")}> <div className={"flex flex-col flex-1 mb-4"}>
<Text <span className={"text-sm leading-6"}>
style={[
{
fontFamily: "regular",
fontSize: mobile ? fontSize.sm : fontSize.lg,
lineHeight: 22,
textAlign: ios ? "right" : "auto",
},
]}
>
{"آدرس:" + " " + address.address} {"آدرس:" + " " + address.address}
</Text> </span>
<Text <span className={"text-sm leading-6 mt-1.5"}>
style={[
{
marginTop: mobile ? 4 : 8,
fontFamily: "regular",
fontSize: mobile ? fontSize.sm : fontSize.lg,
lineHeight: 22,
textAlign: ios ? "right" : "auto",
},
]}
>
{"نام:" + " " + address.firstName + " " + address.lastName} {"نام:" + " " + address.firstName + " " + address.lastName}
</Text> </span>
<Text <span className={"text-sm leading-6 mt-1.5"}>
style={[
{
marginTop: mobile ? 4 : 8,
fontFamily: "regular",
fontSize: mobile ? fontSize.sm : fontSize.lg,
lineHeight: 22,
textAlign: ios ? "right" : "auto",
},
]}
>
{"کد پستی:" + " " + address.postalCode} {"کد پستی:" + " " + address.postalCode}
</Text> </span>
<Text <span className={"text-sm leading-6 mt-1.5"}>
style={[
{
marginTop: mobile ? 4 : 8,
fontFamily: "regular",
fontSize: mobile ? fontSize.sm : fontSize.lg,
lineHeight: 22,
textAlign: ios ? "right" : "auto",
},
]}
>
{"شماره تماس:" + " " + address.cellphone} {"شماره تماس:" + " " + address.cellphone}
</Text> </span>
</View> </div>
{!active && ( {!active && (
<Svg xmlns="http://www.w3.org/2000/svg" width={24} height={24}> <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
<G <g fill={"#aaa"} data-name="vuesax/linear/more">
fill={Colors.theme1[colorScheme].gray20} <path d="M10 19a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" />
data-name="vuesax/linear/more" <path
>
<Path d="M10 19a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" />
<Path
data-name="Vector" data-name="Vector"
d="M10 5a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2ZM10 12a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" d="M10 5a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2ZM10 12a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z"
/> />
</G> </g>
</Svg> </svg>
)} )}
</View> </div>
<Button
<CustomPressable title="نمایش روی نقشه"
title={"مشاهده روی نقشه"} backgroundColor={isDark ? "bg-transparent" : "bg-blueC0"}
backgroundColor={ border={{
active color: isDark ? "#ffffff55" : "#196EC055",
? Colors.theme1[colorScheme].greenCF width: "0px",
: Colors.theme1[colorScheme].gray20 + "66" }}
} width="100%"
color={"white"} color={isDark ? "text-blueC0" : "text-white"}
border={{ color: "#196EC0", width: 0 }} onClick={() => {}}
width={"100%"}
onPress={() => {}}
/> />
</View> </div>
</Pressable> </div>
); );
}; };
@ -200,84 +102,28 @@ const ProfileAddress = ({
}, []); }, []);
return ( return (
<SafeAreaView <div className="flex-1 flex flex-col relative">
style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative",
backgroundColor: "white",
flex: 1,
paddingBottom: 20,
}}
>
<Navbar
headerOptions={{
logo: false,
menu: false,
hamburgerMenu: false,
title: "آدرسها",
bookmark: false,
qr: false,
back: true,
}}
/>
{addresses.length > 0 ? ( {addresses.length > 0 ? (
<ScrollView <div className="w-full mt-2 px-4">
contentContainerStyle={styles.contentContainerStyle} <div className="p-0 m-0 flex ">
style={[styles.container]} {addresses.map((address, index) => (
onLayout={() => setHeight(Dimensions.get("window").height)} <Location
> address={address}
<View style={tw("w-full mt-2 px-4")}> key={index}
<View style={tw("p-0 m-0 flex ")}> active={userAddressId === address?.id}
{addresses.map((address, index) => ( />
<Location ))}
address={address} </div>
key={index} </div>
active={userAddressId === address?.id}
/>
))}
</View>
</View>
</ScrollView>
) : ( ) : (
<Empty text="هیچ آدرسی ثبت نشده :(" /> <Empty text="هیچ آدرسی ثبت نشده :(" />
)} )}
<View style={tw("w-full px-4")}> <FloatingButton
<TouchableOpacity action={() => navigation("/createAddress")}
style={[ position={{ bottom: 100, right: 16 }}
{ size={16}
backgroundColor: Colors.theme1[colorScheme].greenCF + "05", />
borderColor: Colors.theme1[colorScheme].greenCF, </div>
borderWidth: 1.5,
},
tw(
`flex flex-row-reverse self-end justify-center py-2 rounded-md items-center mt-4 w-full`
),
]}
onPress={() => navigation.push("CreateAddress")}
>
<Text
style={{
fontFamily: "bold",
fontSize: fontSize.tiny,
color: Colors.theme1[colorScheme].greenCF,
}}
>
یک آدرس جدید اضافه کنید
</Text>
<Text
style={{
marginTop: 3,
marginRight: 5,
fontSize: fontSize.xl3,
color: Colors.theme1[colorScheme].greenCF,
fontFamily: "bold",
}}
>
+
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
); );
}; };
@ -287,6 +133,7 @@ const mapStateToProps = (state) => ({
loading: state.userFactor.loading, loading: state.userFactor.loading,
addresses: state.userAddress.list, addresses: state.userAddress.list,
mobile: state.publicApi.mobile, mobile: state.publicApi.mobile,
isDark: state.publicApi.isDark,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
@ -296,16 +143,3 @@ const mapDispatchToProps = {
}; };
export default connect(mapStateToProps, mapDispatchToProps)(ProfileAddress); export default connect(mapStateToProps, mapDispatchToProps)(ProfileAddress);
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 100,
position: "relative",
},
container: {
backgroundColor: "white",
flexDirection: "column",
paddingVertical: 0,
paddingHorizontal: 0,
},
});

@ -1,28 +1,24 @@
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { publicApi, userFavorite } from "../../redux/actions";
//assets //assets
import bookImage from "./book.svg"; import bookImage from "./book.svg";
import bookmarkIcon from "./bookmark.svg"; import bookmarkIcon from "./bookmark.svg";
const Favorites = ({ bookmarkList, isMobile }) => { const Favorites = ({
const Bookmark = ({ bookmark }) => { bookmarkList,
return ( isMobile,
<div className="lg:w-1/2 xl:w-1/3 p-2 mb-4"> headerOptions,
<div setHeaderOptions,
className={`flex justify-between px-3.5 py-2 border-2 border-gray-300 border-solid rounded-md relative`} getList,
> }) => {
<div className={"flex w-full"}> React.useEffect(() => {
<img src={bookmark.image} alt="" className="w-1/5" /> if (isMobile) {
<div className={`flex flex-col mr-2 pt-2`}> setHeaderOptions(headerOptions);
<strong className="text-base text-gray1">{bookmark.name}</strong> }
<span className="text-sm mt-2 text-green7B font-bold">{bookmark.grade}</span> getList();
</div> }, []);
</div>
<img src={bookmarkIcon} alt="" className="w-7 absolute left-2 top-2" />
</div>
</div>
);
};
return ( return (
<div className="flex flex-row flex-wrap"> <div className="flex flex-row flex-wrap">
@ -33,12 +29,37 @@ const Favorites = ({ bookmarkList, isMobile }) => {
); );
}; };
const Bookmark = ({ bookmark }) => {
return (
<div className="w-full lg:w-1/2 xl:w-1/3 px-4 lg:p-2 mb-4">
<div
className={`flex justify-between px-3.5 py-2 border-2 border-gray-200 border-solid rounded-md relative`}
>
<div className={"flex w-full"}>
<img src={bookmark.image} alt="" className="w-1/5" />
<div className={`flex flex-col mr-2 pt-2`}>
<strong className="text-base text-gray1">{bookmark.name}</strong>
<span className="text-sm mt-2 text-green7B font-bold">
{bookmark.grade}
</span>
</div>
</div>
<img src={bookmarkIcon} alt="" className="w-7 absolute left-2 top-2" />
</div>
</div>
);
};
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
loading: state.userFactor.loading, loading: state.userFactor.loading,
isMobile: state.publicApi.isMobile, isMobile: state.publicApi.isMobile,
bookmarkList: state.userFavorite.list,
}); });
const mapDispatchToProps = {}; const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
getList: userFavorite.list,
};
export default connect(mapStateToProps, mapDispatchToProps)(Favorites); export default connect(mapStateToProps, mapDispatchToProps)(Favorites);

@ -1,10 +1,15 @@
import React from "react"; import React from "react";
import Order from "./components/Order"; import Order from "./components/Order";
import { connect } from "react-redux"; import { connect } from "react-redux";
import {publicApi} from '../../redux/actions';
//assets //assets
import bookImage from "../../assets/images/book-mini.svg"; import bookImage from "../../assets/images/book-mini.svg";
function Orders({ orders }) { function Orders({ orders, headerOptions, setHeaderOptions }) {
React.useEffect(() => {
setHeaderOptions(headerOptions);
},[]);
return ( return (
<div className="flex flex-col px-4"> <div className="flex flex-col px-4">
{orders.map((order, index) => ( {orders.map((order, index) => (
@ -14,9 +19,13 @@ function Orders({ orders }) {
); );
} }
const mapStateToProps = () => ({}); const mapStateToProps = (state) => ({
isMobile : state.publicApi.isMobile,
});
const mapDispatchToProps = { const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
}; };
export default connect(mapStateToProps, mapDispatchToProps)(Orders); export default connect(mapStateToProps, mapDispatchToProps)(Orders);

Loading…
Cancel
Save