From 5442e235e3f739d3d87b7abe31cd85016bb446c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=B4=B9=E1=B5=83=E1=B5=88=E1=B5=89=20=E1=B5=92=E2=81=BF?= =?UTF-8?q?=20=E1=B4=B1=E1=B5=83=CA=B3=E1=B5=97=CA=B0=20=E1=B5=87=CA=B8=20?= =?UTF-8?q?=CA=B0=E1=B5=98=E1=B5=90=E1=B5=83=E2=81=BF=CB=A2?= <39050604+EXPITC@users.noreply.github.com> Date: Wed, 21 Jun 2023 23:40:16 +0700 Subject: [PATCH 1/3] fix: cart map and chart style + src/components/ -|CartPage.styled.js -|index.js -|LandingPage/index.js -|Map/ -|Map.styled.js -|index.js -|TransactionPage/index.js + Fix update location button that not showing before. + Fix table html react rules. + Fix style. + Delete dummy data at LandingPage. + This commit allow user to see the update location button again, also fix some best practice table and some styling. --- src/components/CartPage/CartPage.styled.js | 12 +- src/components/CartPage/index.js | 167 +++++++++++---------- src/components/LandingPage/index.js | 42 ------ src/components/Map/Map.styled.js | 47 +++--- src/components/Map/index.js | 16 +- src/components/TransactionPage/index.js | 2 + 6 files changed, 140 insertions(+), 146 deletions(-) diff --git a/src/components/CartPage/CartPage.styled.js b/src/components/CartPage/CartPage.styled.js index 265f5dd..eddfeb9 100644 --- a/src/components/CartPage/CartPage.styled.js +++ b/src/components/CartPage/CartPage.styled.js @@ -185,7 +185,7 @@ export const FlexCollum = styled.div` display: flex; flex-direction: column; width: 30%; - tb { + tbody { display: flex; flex-direction: column; justify-content: space-evenly; @@ -194,11 +194,17 @@ export const FlexCollum = styled.div` border-top: 2px solid black; border-collapse: collapse; } + tr > td { + /* border: 1px solid black; */ + display: flex; + /* flex-direction: column; */ + justify-content: space-evenly; + } `; export const Pp = styled.p` - @import url("https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@800&family=Montserrat:ital,wght@1,100&family=Shippori+Antique+B1&display=swap"); + // @import url("https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@800&family=Montserrat:ital,wght@1,100&family=Shippori+Antique+B1&display=swap"); font-family: "Montserrat", sans-serif; - color: ${(props) => (props.r ? "red !important" : "black !important")}; + color: ${(props) => (props.r ? "red !important;" : "black !important;")}; font-size: 14px; font-weight: ${(props) => (props.b ? "bold" : null)}; `; diff --git a/src/components/CartPage/index.js b/src/components/CartPage/index.js index 96ffad2..35cb830 100644 --- a/src/components/CartPage/index.js +++ b/src/components/CartPage/index.js @@ -284,13 +284,7 @@ const CartPage = () => { return ( <> {open && ( - + )} {far && }
@@ -314,82 +308,103 @@ const CartPage = () => {
- {/* TC~REPEAT */} + + {/* TC~REPEAT */} + {orders.map((order, index) => { + return ( + + + + product + + +

{order.title}

+

+ {convertRupiah.convert( + order.order.qty * order.price + )} +

+ + +
+ {!transactionIdle && ( + + )} - {orders.map((order, index) => { - return ( - - - product - - -

{order.title}

-

- {convertRupiah.convert( - order.order.qty * order.price - )} -

- - -
- {!transactionIdle && ( - - )} - -

{order.order.qty}

- {!transactionIdle && ( - - )} -
- {!transactionIdle && ( - - )} - - - - - ); - })} +

{order.order.qty}

+ {!transactionIdle && ( + + )} +
+ {!transactionIdle && ( + + )} + + + + + + ); + })} +
- - - Subtotal - {convertRupiah.convert(transaction?.price)} - - - Qty - {total} - - - Ongkir - Rp.10.000 - - + + + + + + + + + + + + +
+ + Subtotal + + {convertRupiah.convert(transaction?.price)} + + +
+ + Qty + {total} + +
+ + Ongkir + Rp.10.000 + +
- + TOTAL - {convertRupiah.convert(transaction?.price + 10000)} + + {convertRupiah.convert(transaction?.price + 10000)} + diff --git a/src/components/LandingPage/index.js b/src/components/LandingPage/index.js index 015b31a..a08a3ea 100644 --- a/src/components/LandingPage/index.js +++ b/src/components/LandingPage/index.js @@ -34,48 +34,6 @@ import convertRupiah from "rupiah-format"; import AuthButtons from "../AuthButtons"; import { AuthModalContext } from "../../Context/authModalContext"; -// TC~Dummy -// const resto = [ -// { -// name: "Burger King", -// img: "https://pngimg.com/uploads/burger_king/burger_king_PNG17.png", -// }, -// { -// name: "Startbucks", -// img: "https://www.freepnglogos.com/uploads/starbucks-logo-png-25.png", -// }, -// { -// name: "KFC", -// img: "https://www.freepnglogos.com/uploads/kfc-png-logo/camera-kfc-png-logo-0.png", -// }, -// { -// name: "Jco", -// img: "https://1.bp.blogspot.com/-QaywjoHhvXM/Xt9fsQbVeuI/AAAAAAAAGXQ/ut_W8VQkhiQFODR9C_zr0zAYLf8UhlMvgCK4BGAsYHg/s1200/jco.png", -// }, -// ]; -// const near = [ -// { -// food: "Geprek Bensu", -// img: "https://upload.wikimedia.org/wikipedia/commons/2/24/Ayam_geprek.png", -// distance: "0,2 KM", -// }, -// { -// food: "Nasi Goreng Mas Roni", -// img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Nasi_Goreng.jpg/800px-Nasi_Goreng.jpg", -// distance: "0,6 KM", -// }, -// { -// food: "Pecel Ayam Prambanan", -// img: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Pecel_Solo.JPG/800px-Pecel_Solo.JPG", -// distance: "0,6 KM", -// }, -// { -// food: "Kopi Kenangan", -// img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/A_small_cup_of_coffee.JPG/800px-A_small_cup_of_coffee.JPG", -// distance: "1,6 KM", -// }, -// ]; - const LandingPage = () => { const { state } = useContext(UserContext); const { dispatch } = useContext(AuthModalContext); diff --git a/src/components/Map/Map.styled.js b/src/components/Map/Map.styled.js index 81b6399..175c3e8 100644 --- a/src/components/Map/Map.styled.js +++ b/src/components/Map/Map.styled.js @@ -50,21 +50,23 @@ export const Wrapper = styled.div` `; export const Card = styled.div` width: 419px; - height: ${(props) => (props.h ? "295px" : "185px")}; + /* height: ${(props) => (props.h ? "auto" : "185px")}; */ + height: auto; z-index: 999; background: #ffffff; box-shadow: 0px -12px 11px -6px rgba(0, 0, 0, 0.25); border-radius: 5px 5px 3px 3px; - /* position: absolute; */ position: absolute; + display: flex; + flex-direction: column; + gap: 18px; + padding-top: 10px; + padding-bottom: 10px; opacity: 0; ${(props) => - props.h - ? `top : 93px; right: 23px;` - : ` bottom:30px; - left:35%;`} + props.h ? "top : 93px; right: 23px;" : "bottom:30px; left:35%;"} animation: appear 2s ease-out forwards; - animation-delay: ${(props) => (props.h ? "1s" : null)}; + animation-delay: ${(props) => (props.h ? "1s" : "0")}; @keyframes appear { from { opacity: 0; @@ -78,36 +80,43 @@ export const Card = styled.div` padding-left: 10px; h3 { font-family: "Montserrat", sans-serif; - ${(props) => (props.h ? `margin-top : 43px; margin-bottom:17px` : null)} + /* ${(props) => (props.h ? "margin-top: 43px; margin-bottom:17px;" : "")} */ + margin: 0; } p { font-family: "Montserrat", sans-serif; font-size: 12px; margin: 0; - margin-top: 3px; + /* margin-top: 3px; */ width: 100%; } h5 { font-size: 13px; margin: 0; } - img { - position: relative; - width: 55px; - height: 55px; - } + .address { - /* border: 1px solid black; */ display: flex; + justify-content: space-evenly; + align-items: center; height: 55px; + + img { + position: relative; + width: 55px; + height: 55px; + /* border: 1px solid red; */ + } + div { - width: 100%; - /* border: 1px solid black; */ - margin-left: 24px; + width: 80%; + > h3 { + text-align: center; + } } } button { - margin-top: 25px; + /* margin-top: 25px; */ width: 395px; height: 30px; font-family: "Montserrat", sans-serif; diff --git a/src/components/Map/index.js b/src/components/Map/index.js index 6afee76..c54ff12 100644 --- a/src/components/Map/index.js +++ b/src/components/Map/index.js @@ -149,6 +149,7 @@ const Map = ({ toggle, far, setLocEdit, updateLoc, startLoc, cart }) => { } })(); return () => controller.abort(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [end, start]); const startLayer = useMemo( @@ -319,13 +320,12 @@ const Map = ({ toggle, far, setLocEdit, updateLoc, startLoc, cart }) => { )} {loc && ( -

- {address?.display_name ? "Delivery location" : "Load location..."} -

+ {address?.display_name &&

Delivery location

}
onloc
+ {!address?.display_name &&

Load location...

}
{nameAddress ? nameAddress[0] : "not found"}

{address?.display_name}

@@ -335,7 +335,7 @@ const Map = ({ toggle, far, setLocEdit, updateLoc, startLoc, cart }) => { <> {cart ? ( <> - {otwOrder && ( + {!otwOrder && ( + ) : ( )} From 1126e1d332ade308bad6fe3a011530654ba4147d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=B4=B9=E1=B5=83=E1=B5=88=E1=B5=89=20=E1=B5=92=E2=81=BF?= =?UTF-8?q?=20=E1=B4=B1=E1=B5=83=CA=B3=E1=B5=97=CA=B0=20=E1=B5=87=CA=B8=20?= =?UTF-8?q?=CA=B0=E1=B5=98=E1=B5=90=E1=B5=83=E2=81=BF=CB=A2?= <39050604+EXPITC@users.noreply.github.com> Date: Thu, 22 Jun 2023 05:18:38 +0700 Subject: [PATCH 3/3] feat: add realtime data to order + src/components/ -|CartPage/index.js -|Map/index.js -|TransactionPage/index.js + Add realtime data for user while waiting order to accept order to finish. --- src/components/CartPage/index.js | 9 ++++++++- src/components/Map/index.js | 23 +++++++++++++++++++++-- src/components/TransactionPage/index.js | 5 ++++- 3 files changed, 33 insertions(+), 4 deletions(-) diff --git a/src/components/CartPage/index.js b/src/components/CartPage/index.js index 35cb830..85afeab 100644 --- a/src/components/CartPage/index.js +++ b/src/components/CartPage/index.js @@ -286,7 +286,14 @@ const CartPage = () => { {open && ( )} - {far && } + {far && ( + + )}
{isLoading ? (
diff --git a/src/components/Map/index.js b/src/components/Map/index.js index 152d53c..a9345ef 100644 --- a/src/components/Map/index.js +++ b/src/components/Map/index.js @@ -11,7 +11,15 @@ import socketIo from "../../utils/socket"; import toMinutes from "../../utils/toMinutes"; import axios from "axios"; -const Map = ({ toggle, far, setLocEdit, updateLoc, startLoc, cart }) => { +const Map = ({ + toggle, + far, + setLocEdit, + updateLoc, + startLoc, + cart, + transId, +}) => { const [viewState, setViewState] = useState(false); const { state } = useContext(UserContext); const { user } = state; @@ -222,14 +230,25 @@ const Map = ({ toggle, far, setLocEdit, updateLoc, startLoc, cart }) => { setOtwOrder(data); }); + if (transId) { + socket.emit("subTrans", transId); + socket.on("confirmTransaction", () => { + socket.emit("onTheWay", user.id); + socket.on("otwData", (data) => { + setOtwOrder(data); + }); + }); + } + socket.on("connect_error", (err) => { console.error(err.message); }); return () => { + if (transId) socket.emit("unsubTrans", transId); socket.disconnect(); }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [user?.id]); + }, [user?.id, transId]); return ( diff --git a/src/components/TransactionPage/index.js b/src/components/TransactionPage/index.js index 14e9682..cee14d0 100644 --- a/src/components/TransactionPage/index.js +++ b/src/components/TransactionPage/index.js @@ -61,8 +61,9 @@ const TransactionPage = () => { const handleApprove = (id) => { // socket.emit("otw"); + socket.on("subTrans", id); socket.emit("accept", id); - // setRefresh(!refresh); + socket.on("acceptData", (data) => { if (!data[1][0]) return; setTransactions((prev) => { @@ -72,6 +73,8 @@ const TransactionPage = () => { }); }); }); + + socket.on("unsubTrans", id); }; const handleCancel = (id) => { socket.emit("cancel", id);