API Integrating

benfiratkaya · Sep 24, 2021 · 2a34158 · 2a34158
1 parent db029b9
commit 2a34158
Show file tree

Hide file tree

Showing 25 changed files with 319 additions and 91 deletions.
diff --git 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
@@ -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 (
     <div className="app">
       <Logo/>
-      <MainTab/>
+      {(deliveryToken || orderNumber) && (delivery.fetching ? <DeliveryLoading/> : (delivery.error.status) ?
+        <DeliveryNotFound/> : <MainTab/>)}
+      <DeliveryQuery/>
       <Footer/>
     </div>
   );
 };
 
-export default App;
+const mapStateToProps = (state) => {
+  return {
+    delivery: state.delivery
+  };
+};
+
+const mapDispatchToProps = {
+  fetchDelivery
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);
diff --git a/src/components/DeliveryLoading/index.js b/src/components/DeliveryLoading/index.js
@@ -0,0 +1,12 @@
+import "./style.scss";
+
+const DeliveryLoading = () => {
+  return (
+    <div className="delivery-loading">
+      <div className="title">Gönderi Aranıyor...</div>
+      <div className="spinner"></div>
+    </div>
+  );
+};
+
+export default DeliveryLoading;
diff --git a/src/components/DeliveryLoading/style.scss 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);
+    }
+  }
+}
diff --git a/src/components/DeliveryNotFound/index.js b/src/components/DeliveryNotFound/index.js
@@ -0,0 +1,16 @@
+import "./style.scss";
+
+const DeliveryNotFound = () => {
+  return (
+    <div className="delivery-not-found">
+      <div className="title">
+        Gönderi Bulunamadı!
+      </div>
+      <div className="content">
+        Verilen bilgiye ait gönderi bulunamamıştır.
+      </div>
+    </div>
+  );
+};
+
+export default DeliveryNotFound;
diff --git a/src/components/DeliveryNotFound/style.scss 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;
+  }
+}
diff --git a/src/components/DeliveryOperations/index.js b/src/components/DeliveryOperations/index.js
@@ -30,8 +30,8 @@ const DeliveryOperations = () => {
           <Tab>
             <div className="icon">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21">
-                <g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-                  <g stroke="#AFBBCA" stroke-width="2">
+                <g fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
+                  <g stroke="#AFBBCA" strokeWidth="2">
                     <g transform="translate(-764 -275) translate(765 276)">
                       <rect width="18" height="17" y="2" rx="2"></rect>
                       <path d="M13 0L13 4M5 0L5 4M0 8L18 8"></path>
@@ -47,33 +47,21 @@ const DeliveryOperations = () => {
         <TabPanel>
           <div className="form">
             <div className="form-group">
-              <span className="title">Teslimat Numaranızı Girin</span>
-              <div className="search-input">
-                <input type="text" placeholder="Teslimat Numarası"/>
-                <button disabled={true}>Ara</button>
-              </div>
+              Komşuma Bırak
             </div>
           </div>
         </TabPanel>
         <TabPanel>
           <div className="form">
             <div className="form-group">
-              <span className="title">Teslimat Numaranızı Girin</span>
-              <div className="search-input">
-                <input type="text" placeholder="Teslimat Numarası"/>
-                <button disabled={true}>Ara</button>
-              </div>
+              Farklı Adrese Gelsin
             </div>
           </div>
         </TabPanel>
         <TabPanel>
           <div className="form">
             <div className="form-group">
-              <span className="title">Teslimat Numaranızı Girin</span>
-              <div className="search-input">
-                <input type="text" placeholder="Teslimat Numarası"/>
-                <button disabled={true}>Ara</button>
-              </div>
+              İstediğim Zaman Gelsin
             </div>
           </div>
         </TabPanel>

diff --git a/src/components/DeliveryQuery/index.js b/src/components/DeliveryQuery/index.js
@@ -0,0 +1,31 @@
+import {useState} from "react";
+
+import "./style.scss";
+
+const DeliveryQuery = () => {
+  const [deliveryNo, setDeliveryNo] = useState("");
+
+  return (
+    <div className="delivery-query">
+      <form action="/" method="GET">
+        <div className="search-input">
+          <input
+            type="text"
+            name="orderNumber"
+            placeholder="Teslimat Numarası Ile Sorgula"
+            value={deliveryNo}
+            onChange={(e) => setDeliveryNo(e.target.value)}
+          />
+          <button
+            type="submit"
+            disabled={deliveryNo.length < 8 || isNaN(deliveryNo)}
+          >
+            Sorgula
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default DeliveryQuery;
diff --git a/...s/DeliveryStatus/DeliveryQuery/style.scss → src/components/DeliveryQuery/style.scss b/...s/DeliveryStatus/DeliveryQuery/style.scss → src/components/DeliveryQuery/style.scss
@@ -7,4 +7,8 @@
   padding: 30px;
   background-color: #f4f7fa;
   border-radius: 20px;
+
+  form {
+    width: 100%;
+  }
 }
diff --git a/src/components/DeliveryStatus/DeliveryMovements/DeliveryTable/TableItem/index.js 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 (
+    <ul className="table-body">
+      <li>{getDateFromUnix(actionDate)}</li>
+      <li>{operationalStateText[operationalState]}</li>
+      <li>{description}</li>
+      <li>{location}</li>
+    </ul>
+  );
+};
+
+export default TableItem;
diff --git 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 (
     <div className="delivery-table">
       <ul className="table-head">
@@ -11,21 +14,23 @@ const DeliveryTable = () => {
         <li>Açıklama</li>
         <li>Lokasyon</li>
       </ul>
-      <ul className="table-body">
-        <li>22.09.2021 11:57</li>
-        <li>Teslim Edildi</li>
-        <li>fi** (KENDİSİ)</li>
-        <li>Toprak Şube</li>
-      </ul>
-      <ul className="table-body">
-        <li>22.09.2021 11:57</li>
-        <li>Teslim Edildi</li>
-        <li>fi** (KENDİSİ)</li>
-        <li>Toprak Şube</li>
-      </ul>
+      {trackingHistoryList.map(item => (
+        <TableItem
+          actionDate={item.actionDate}
+          operationalState={item.operationalState}
+          description={item.description}
+          location={item.location}
+        />
+      ))}
       <ScrollUp/>
     </div>
   );
 };
 
-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
@@ -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 = () => {
         <div className="delivery-info">
           <div className="delivery-no">
             <div className="title">Teslimat Numarsı:</div>
-            <div className="content">111111111</div>
+            <div className="content">{delivery.orderNumber}</div>
           </div>
           <div className="delivery-detail">
             <div className="detail">
               <div className="title">Teslim Alacak:</div>
-              <div className="content">Me** Fı** ****</div>
+              <div className="content">{delivery.targetCustomer}</div>
             </div>
             <div className="detail">
               <div className="title">Gönderi Numarası:</div>
-              <div className="content">Me** Fı** ****</div>
+              <div className="content">{delivery.deliveryNumber}</div>
             </div>
             <div className="detail">
               <div className="title">Son İşlem Tarihi:</div>
-              <div className="content">Me** Fı** ****</div>
+              <div className="content">{getDateFromUnix(delivery.trackingHistoryList?.[0].actionDate)}</div>
             </div>
             <div className="detail">
               <div className="title">Tahmini Teslim Tarihi:</div>
-              <div className="content">Me** Fı** ****</div>
+              <div className="content">{formatDate(delivery.estimatedDeliveryDate)}</div>
             </div>
             <div className="detail">
               <div className="title">Teslim Edilecek Şube:</div>
-              <div className="content">Me** Fı** ****</div>
+              <div className="content">{delivery.targetXDock}</div>
             </div>
             <div className="detail">
               <div className="title">Teslim Edilecek Adres:</div>
-              <div className="content">Me** Fı** ****</div>
+              <div className="content">{delivery.targetAddress}</div>
             </div>
           </div>
         </div>
@@ -49,4 +54,10 @@ const DeliveryMovements = () => {
   );
 };
 
-export default DeliveryMovements;
+const mapStateToProps = (state) => {
+  return {
+    delivery: state.delivery.data
+  };
+};
+
+export default connect(mapStateToProps)(DeliveryMovements);