From 2a3415895be03647bc14dca57a8021325c470ca1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C4=B1rat=20Kaya?= <48600092+benfiratkaya@users.noreply.github.com> Date: Fri, 24 Sep 2021 14:29:40 +0300 Subject: [PATCH] API Integrating --- package.json | 2 + src/components/App/index.js | 36 +++++++++++++++-- src/components/DeliveryLoading/index.js | 12 ++++++ src/components/DeliveryLoading/style.scss | 40 +++++++++++++++++++ src/components/DeliveryNotFound/index.js | 16 ++++++++ src/components/DeliveryNotFound/style.scss | 13 ++++++ src/components/DeliveryOperations/index.js | 22 +++------- src/components/DeliveryQuery/index.js | 31 ++++++++++++++ .../DeliveryQuery/style.scss | 4 ++ .../DeliveryTable/TableItem/index.js | 30 ++++++++++++++ .../DeliveryMovements/DeliveryTable/index.js | 33 ++++++++------- .../DeliveryStatus/DeliveryMovements/index.js | 31 +++++++++----- .../DeliveryMovements/style.scss | 7 +--- .../DeliveryStatus/DeliveryQuery/index.js | 19 --------- .../DeliveryStatusTitle/index.js | 26 ++++++++++-- .../DeliveryStatus/DeliverySteps/index.js | 26 ++++++++---- .../DeliveryStatus/DeliverySteps/style.scss | 6 +-- src/components/DeliveryStatus/index.js | 4 +- src/components/Footer/index.js | 15 ++++++- src/components/ScrollUp/index.js | 2 +- src/helpers/getDate.js | 9 +++++ src/helpers/operationalStep.js | 6 +++ src/redux/actions/delivery.js | 6 +-- src/redux/reducers/delivery.js | 9 ++++- yarn.lock | 5 +++ 25 files changed, 319 insertions(+), 91 deletions(-) create mode 100644 src/components/DeliveryLoading/index.js create mode 100644 src/components/DeliveryLoading/style.scss create mode 100644 src/components/DeliveryNotFound/index.js create mode 100644 src/components/DeliveryNotFound/style.scss create mode 100644 src/components/DeliveryQuery/index.js rename src/components/{DeliveryStatus => }/DeliveryQuery/style.scss (85%) create mode 100644 src/components/DeliveryStatus/DeliveryMovements/DeliveryTable/TableItem/index.js delete mode 100644 src/components/DeliveryStatus/DeliveryQuery/index.js create mode 100644 src/helpers/getDate.js create mode 100644 src/helpers/operationalStep.js diff --git a/package.json b/package.json index fb9c0e2..0138b0a 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,8 @@ "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "axios": "^0.21.4", + "moment": "^2.29.1", + "prop-types": "^15.7.2", "react": "^17.0.2", "react-dom": "^17.0.2", "react-redux": "^7.2.5", diff --git a/src/components/App/index.js b/src/components/App/index.js index f0d6456..926988b 100644 --- a/src/components/App/index.js +++ b/src/components/App/index.js @@ -1,17 +1,47 @@ +import {useEffect} from "react"; +import {connect} from "react-redux"; + +import {fetchDelivery} from "../../redux/actions/delivery"; + import Logo from "../Logo"; import MainTab from "../MainTab"; import Footer from "../Footer"; import "./style.scss"; +import DeliveryLoading from "../DeliveryLoading"; +import DeliveryQuery from "../DeliveryQuery"; +import DeliveryNotFound from "../DeliveryNotFound"; + +const App = ({delivery, fetchDelivery}) => { + const deliveryToken = new URLSearchParams(window.location.search).get("token"); + const orderNumber = new URLSearchParams(window.location.search).get("orderNumber"); + + useEffect(() => { + if (deliveryToken) + fetchDelivery("token", deliveryToken); + else if (orderNumber) + fetchDelivery("orderNumber", orderNumber); + }, [deliveryToken, orderNumber, fetchDelivery]); -const App = () => { return (
- + {(deliveryToken || orderNumber) && (delivery.fetching ? : (delivery.error.status) ? + : )} +
); }; -export default App; \ No newline at end of file +const mapStateToProps = (state) => { + return { + delivery: state.delivery + }; +}; + +const mapDispatchToProps = { + fetchDelivery +}; + +export default connect(mapStateToProps, mapDispatchToProps)(App); \ No newline at end of file diff --git a/src/components/DeliveryLoading/index.js b/src/components/DeliveryLoading/index.js new file mode 100644 index 0000000..b02e203 --- /dev/null +++ b/src/components/DeliveryLoading/index.js @@ -0,0 +1,12 @@ +import "./style.scss"; + +const DeliveryLoading = () => { + return ( +
+
Gönderi Aranıyor...
+
+
+ ); +}; + +export default DeliveryLoading; diff --git a/src/components/DeliveryLoading/style.scss b/src/components/DeliveryLoading/style.scss new file mode 100644 index 0000000..5b2f07f --- /dev/null +++ b/src/components/DeliveryLoading/style.scss @@ -0,0 +1,40 @@ +.delivery-loading { + margin: 30px 0; + padding: 20px; + background-color: #fff; + text-align: center; + + .title { + color: #f16623; + font-size: 24px; + font-weight: 500; + margin-bottom: 16px; + } + + .spinner { + display: inline-block; + width: 60px; + height: 60px; + } + + .spinner:after { + content: " "; + display: block; + width: 40px; + height: 40px; + margin: 8px; + border-radius: 50%; + border: 6px solid #f16623; + border-color: #f16623 transparent #f16623 transparent; + animation: spinner 1.2s linear infinite; + } + + @keyframes spinner { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } +} \ No newline at end of file diff --git a/src/components/DeliveryNotFound/index.js b/src/components/DeliveryNotFound/index.js new file mode 100644 index 0000000..e136bec --- /dev/null +++ b/src/components/DeliveryNotFound/index.js @@ -0,0 +1,16 @@ +import "./style.scss"; + +const DeliveryNotFound = () => { + return ( +
+
+ Gönderi Bulunamadı! +
+
+ Verilen bilgiye ait gönderi bulunamamıştır. +
+
+ ); +}; + +export default DeliveryNotFound; diff --git a/src/components/DeliveryNotFound/style.scss b/src/components/DeliveryNotFound/style.scss new file mode 100644 index 0000000..2a3aac7 --- /dev/null +++ b/src/components/DeliveryNotFound/style.scss @@ -0,0 +1,13 @@ +.delivery-not-found { + margin-top: 30px; + padding: 20px; + background-color: #fff; + text-align: center; + + .title { + color: #f16623; + font-size: 24px; + font-weight: 500; + margin-bottom: 16px; + } +} \ No newline at end of file diff --git a/src/components/DeliveryOperations/index.js b/src/components/DeliveryOperations/index.js index 4448313..8d8cc16 100644 --- a/src/components/DeliveryOperations/index.js +++ b/src/components/DeliveryOperations/index.js @@ -30,8 +30,8 @@ const DeliveryOperations = () => {
- - + + @@ -47,33 +47,21 @@ const DeliveryOperations = () => {
- Teslimat Numaranızı Girin -
- - -
+ Komşuma Bırak
- Teslimat Numaranızı Girin -
- - -
+ Farklı Adrese Gelsin
- Teslimat Numaranızı Girin -
- - -
+ İstediğim Zaman Gelsin
diff --git a/src/components/DeliveryQuery/index.js b/src/components/DeliveryQuery/index.js new file mode 100644 index 0000000..b48fe71 --- /dev/null +++ b/src/components/DeliveryQuery/index.js @@ -0,0 +1,31 @@ +import {useState} from "react"; + +import "./style.scss"; + +const DeliveryQuery = () => { + const [deliveryNo, setDeliveryNo] = useState(""); + + return ( +
+
+
+ setDeliveryNo(e.target.value)} + /> + +
+
+
+ ); +}; + +export default DeliveryQuery; diff --git a/src/components/DeliveryStatus/DeliveryQuery/style.scss b/src/components/DeliveryQuery/style.scss similarity index 85% rename from src/components/DeliveryStatus/DeliveryQuery/style.scss rename to src/components/DeliveryQuery/style.scss index 312b410..2c4ddcc 100644 --- a/src/components/DeliveryStatus/DeliveryQuery/style.scss +++ b/src/components/DeliveryQuery/style.scss @@ -7,4 +7,8 @@ padding: 30px; background-color: #f4f7fa; border-radius: 20px; + + form { + width: 100%; + } } \ No newline at end of file diff --git a/src/components/DeliveryStatus/DeliveryMovements/DeliveryTable/TableItem/index.js b/src/components/DeliveryStatus/DeliveryMovements/DeliveryTable/TableItem/index.js new file mode 100644 index 0000000..86ed365 --- /dev/null +++ b/src/components/DeliveryStatus/DeliveryMovements/DeliveryTable/TableItem/index.js @@ -0,0 +1,30 @@ +import {getDateFromUnix} from "../../../../../helpers/getDate"; + +const TableItem = ({actionDate, operationalState, description, location}) => { + let operationalStateText = { + 0: "Gönderi Alındı", + 1: "Gönderi", + 2: "Transfer Merkezinde", + 3: "Gönderi Yola Çıktı (Teslimat şubesine)", + 4: "Teslimat Şubesine Ulaştı", + 5: "Teslimat Şubesine Ulaştı", + 6: "Kurye Dağıtımda", + 7: "Teslim Edildi", + 8: "Gönderi", + 9: "Gönderi", + 10: "Gönderi", + 11: "Gönderi Yola Çıktı (Transfer merkezine)" + }; + + + return ( + + ); +}; + +export default TableItem; diff --git a/src/components/DeliveryStatus/DeliveryMovements/DeliveryTable/index.js b/src/components/DeliveryStatus/DeliveryMovements/DeliveryTable/index.js index 77fe7be..89fabf4 100644 --- a/src/components/DeliveryStatus/DeliveryMovements/DeliveryTable/index.js +++ b/src/components/DeliveryStatus/DeliveryMovements/DeliveryTable/index.js @@ -1,8 +1,11 @@ +import {connect} from "react-redux"; + import ScrollUp from "../../../ScrollUp"; import "./style.scss"; +import TableItem from "./TableItem"; -const DeliveryTable = () => { +const DeliveryTable = ({trackingHistoryList}) => { return (
    @@ -11,21 +14,23 @@ const DeliveryTable = () => {
  • Açıklama
  • Lokasyon
-
    -
  • 22.09.2021 11:57
    • -
  • Teslim Edildi
    • -
  • fi** (KENDİSİ)
    • -
  • Toprak Şube
    • -
-
    -
  • 22.09.2021 11:57
    • -
  • Teslim Edildi
    • -
  • fi** (KENDİSİ)
    • -
  • Toprak Şube
    • -
+ {trackingHistoryList.map(item => ( + + ))}
); }; -export default DeliveryTable; +const mapStateToProps = (state) => { + return { + trackingHistoryList: state.delivery.data.trackingHistoryList + }; +}; + +export default connect(mapStateToProps)(DeliveryTable); diff --git a/src/components/DeliveryStatus/DeliveryMovements/index.js b/src/components/DeliveryStatus/DeliveryMovements/index.js index 088787a..1694716 100644 --- a/src/components/DeliveryStatus/DeliveryMovements/index.js +++ b/src/components/DeliveryStatus/DeliveryMovements/index.js @@ -1,8 +1,13 @@ -import "./style.scss"; import {useState} from "react"; +import {connect} from "react-redux"; + import DeliveryTable from "./DeliveryTable"; -const DeliveryMovements = () => { +import {formatDate, getDateFromUnix} from "../../../helpers/getDate"; + +import "./style.scss"; + +const DeliveryMovements = ({delivery}) => { const [showDetails, setShowDetails] = useState(false); return ( @@ -11,32 +16,32 @@ const DeliveryMovements = () => {
Teslimat Numarsı:
-
111111111
+
{delivery.orderNumber}
Teslim Alacak:
-
Me** Fı** ****
+
{delivery.targetCustomer}
Gönderi Numarası:
-
Me** Fı** ****
+
{delivery.deliveryNumber}
Son İşlem Tarihi:
-
Me** Fı** ****
+
{getDateFromUnix(delivery.trackingHistoryList?.[0].actionDate)}
Tahmini Teslim Tarihi:
-
Me** Fı** ****
+
{formatDate(delivery.estimatedDeliveryDate)}
Teslim Edilecek Şube:
-
Me** Fı** ****
+
{delivery.targetXDock}
Teslim Edilecek Adres:
-
Me** Fı** ****
+
{delivery.targetAddress}
@@ -49,4 +54,10 @@ const DeliveryMovements = () => { ); }; -export default DeliveryMovements; +const mapStateToProps = (state) => { + return { + delivery: state.delivery.data + }; +}; + +export default connect(mapStateToProps)(DeliveryMovements); diff --git a/src/components/DeliveryStatus/DeliveryMovements/style.scss b/src/components/DeliveryStatus/DeliveryMovements/style.scss index ffc5018..890a061 100644 --- a/src/components/DeliveryStatus/DeliveryMovements/style.scss +++ b/src/components/DeliveryStatus/DeliveryMovements/style.scss @@ -9,17 +9,14 @@ align-items: center; justify-content: center; width: 100%; - - @include lt-sm { - padding-left: 20px; - padding-right: 20px; - } + padding: 20px; } .delivery-info { width: 100%; background-color: #fff; padding: 30px; + border-radius: 10px; .delivery-no { width: 100%; diff --git a/src/components/DeliveryStatus/DeliveryQuery/index.js b/src/components/DeliveryStatus/DeliveryQuery/index.js deleted file mode 100644 index ca3a7c3..0000000 --- a/src/components/DeliveryStatus/DeliveryQuery/index.js +++ /dev/null @@ -1,19 +0,0 @@ -import {useState} from "react"; - -import "./style.scss"; - -const DeliveryQuery = () => { - const [deliveryNo, setDeliveryNo] = useState(""); - - return ( -
-
- setDeliveryNo(e.target.value)}/> - -
-
- ); -}; - -export default DeliveryQuery; diff --git a/src/components/DeliveryStatus/DeliveryStatusTitle/index.js b/src/components/DeliveryStatus/DeliveryStatusTitle/index.js index b3177a6..899e492 100644 --- a/src/components/DeliveryStatus/DeliveryStatusTitle/index.js +++ b/src/components/DeliveryStatus/DeliveryStatusTitle/index.js @@ -1,11 +1,31 @@ +import {connect} from "react-redux"; + +import {operationalStep} from "../../../helpers/operationalStep"; + import "./style.scss"; -const DeliveryStatusTitle = ({children}) => { +const DeliveryStatusTitle = ({operationalState}) => { + const OPERATION_STEP = operationalStep(operationalState); + + const title = { + 1: "Gönderiniz Alındı", + 2: "Gönderiniz Transfer Merkezi", + 3: "Gönderiniz Teslimat Şubesinde", + 4: "Gönderiniz Kurye Dağıtımında", + 5: "Gönderiniz Teslim Edildi" + } + return (
- {children} + {title[OPERATION_STEP]}
); }; -export default DeliveryStatusTitle; +const mapStateToProps = (state) => { + return { + operationalState: state.delivery.data.operationalState + }; +}; + +export default connect(mapStateToProps)(DeliveryStatusTitle); \ No newline at end of file diff --git a/src/components/DeliveryStatus/DeliverySteps/index.js b/src/components/DeliveryStatus/DeliverySteps/index.js index 825f979..cb909e5 100644 --- a/src/components/DeliveryStatus/DeliverySteps/index.js +++ b/src/components/DeliveryStatus/DeliverySteps/index.js @@ -1,9 +1,15 @@ +import {connect} from "react-redux"; + +import {operationalStep} from "../../../helpers/operationalStep"; + import "./style.scss"; -const DeliverySteps = () => { +const DeliverySteps = ({operationalState}) => { + const OPERATION_STEP = operationalStep(operationalState); + return (
-
+
= 1}>
{
1.Gönderi Alındı
-
+
= 2}>
{
2.Transfer Merkezinde
-
+
= 3}>
{
3.Teslimat Şubesinde
-
+
= 4}>
{
4.Kurye Dağıtımda
-
+
= 5}>
{ ); }; -export default DeliverySteps; +const mapStateToProps = (state) => { + return { + operationalState: state.delivery.data.operationalState + }; +}; + +export default connect(mapStateToProps)(DeliverySteps); diff --git a/src/components/DeliveryStatus/DeliverySteps/style.scss b/src/components/DeliveryStatus/DeliverySteps/style.scss index c7151df..27165ad 100644 --- a/src/components/DeliveryStatus/DeliverySteps/style.scss +++ b/src/components/DeliveryStatus/DeliverySteps/style.scss @@ -14,7 +14,7 @@ flex: 1 1; position: relative; - &.active { + &[data-active="true"] { .circle { background-color: #f16623; border-color: #f16623; @@ -42,13 +42,13 @@ } } - &.active:before { + &[data-active="true"]:before { background-color: #f16623; } } &:last-child { - &.active .circle { + &[data-active="true"] .circle { background-color: #0bc15c; border-color: #0bc15c; diff --git a/src/components/DeliveryStatus/index.js b/src/components/DeliveryStatus/index.js index b9b2200..f4a0c9f 100644 --- a/src/components/DeliveryStatus/index.js +++ b/src/components/DeliveryStatus/index.js @@ -1,4 +1,3 @@ -import DeliveryQuery from "./DeliveryQuery"; import DeliverySteps from "./DeliverySteps"; import DeliveryStatusTitle from "./DeliveryStatusTitle"; import DeliveryMovements from "./DeliveryMovements"; @@ -8,10 +7,9 @@ import "./style.scss"; const DeliveryStatus = () => { return (
- Gönderiniz Yolda + -
); }; diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index c4012b3..837074b 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -5,7 +5,20 @@ const Footer = () => {
- + + + + + + + + + +
diff --git a/src/components/ScrollUp/index.js b/src/components/ScrollUp/index.js index ef8dda8..6dda1da 100644 --- a/src/components/ScrollUp/index.js +++ b/src/components/ScrollUp/index.js @@ -9,7 +9,7 @@ const ScrollUp = () => { onClick={scrollUp} > -
diff --git a/src/helpers/getDate.js b/src/helpers/getDate.js new file mode 100644 index 0000000..350ae67 --- /dev/null +++ b/src/helpers/getDate.js @@ -0,0 +1,9 @@ +import moment from "moment"; + +export const getDateFromUnix = (unixTime) => { + return moment(unixTime).format("DD.MM.YYYY HH:MM"); +}; + +export const formatDate = (date) => { + return moment(date).format("DD.MM.YYYY"); +}; \ No newline at end of file diff --git a/src/helpers/operationalStep.js b/src/helpers/operationalStep.js new file mode 100644 index 0000000..e6e33c6 --- /dev/null +++ b/src/helpers/operationalStep.js @@ -0,0 +1,6 @@ +export const operationalStep = (operationalStateId) => { + if (operationalStateId === 0) + return 1; + if (operationalStateId === 7) + return 5; +}; \ No newline at end of file diff --git a/src/redux/actions/delivery.js b/src/redux/actions/delivery.js index 6a910e8..3e2e6fb 100644 --- a/src/redux/actions/delivery.js +++ b/src/redux/actions/delivery.js @@ -5,8 +5,8 @@ import * as t from "../types/delivery"; export const fetchDelivery = (type, key) => { return { type: t.FETCH_DELIVERY, - payload: axios.get(`https://api-logistics.trendyol.com/u/track/${type}=${key}`) - .then((response) => response.data.json()) - .catch((response) => response.json()), + payload: axios.get(`https://api-logistics.trendyol.com/u/track/?${type}=${key}`) + .then((response) => response.data) + .catch((response) => Promise.reject({response})), }; }; diff --git a/src/redux/reducers/delivery.js b/src/redux/reducers/delivery.js index 9f0e9bc..38f65e1 100644 --- a/src/redux/reducers/delivery.js +++ b/src/redux/reducers/delivery.js @@ -4,7 +4,9 @@ const initialState = { fetching: false, fetched: false, data: {}, - error: {}, + error: { + status: false + }, }; const deliveryReducer = (state = initialState, action) => { @@ -23,7 +25,10 @@ const deliveryReducer = (state = initialState, action) => { fetching: false, fetched: false, data: {}, - error: action.payload, + error: { + status: true, + ...action.payload + }, }; case t.FETCH_DELIVERY_FULFILLED: return { diff --git a/yarn.lock b/yarn.lock index f78b272..fd78716 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7374,6 +7374,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== +moment@^2.29.1: + version "2.29.1" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" + integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ== + move-concurrently@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"