Fakultas Ilmu Komputer UI

ListBatch.jsx 1.9 KB
Newer Older
1
2
3
4
import React from "react";
import TableComponent from "../../component/TableComponent";
import { css } from "@emotion/core";
import LinkYellow from "../../component/LinkYellow";
5
6
import useFetchSingleData from "../../utils/useFetchSingleData";
import { stringToCurrency }from "../../component/TableUtils";
7
8
9
10
11
12

const ListBatch = () =>{
  let totalCost = "Loading..."
  const [batches, error] = useFetchSingleData(`${process.env.REACT_APP_BASE_URL}/batch/`);
  if (!error && batches.results !== undefined){
    const shippingCosts = batches.results.map( (batch) => batch.shipping_cost);
13
    if (shippingCosts.length){
14
      const cost = shippingCosts.reduce( (acc, curr) => acc + curr);
15
      totalCost = stringToCurrency(cost.toString()); 
16
    }else{
17
      totalCost = stringToCurrency("0");
18
19
20
    }
    
    
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
  }
  const data = {
    url: `${process.env.REACT_APP_BASE_URL}/batch/`,
    pageDefault: 1,
    title: "",
    keyValuePairs: [
      ["id", "id"],
      ["batch_name", "Nama"],
      ["start_date", "Tanggal Dimulai"],
      ["end_date", "Tanggal Berakhir"],
    ],
    link: "",
  };
  
  return (
    <div
    
      css={css`
        display: flex;
        flex-direction: column;
        margin: 2rem 3rem 3rem 3rem;
        
      `}
    >
      <div
        css={css`
          font-size: 35px;
        `}
      >
        ADMIN - KELOLA BATCH
      </div>
      <div
        css={css`
          width: 35%;
          display: flex;
          flex-direction: row;
          margin-bottom: 2rem;
          margin-top: 1rem;
        
        `}
      >
        <LinkYellow to="/batch/tambah">TAMBAH</LinkYellow>
        <LinkYellow to="/batch">LIHAT</LinkYellow>
      </div>
      <TableComponent {...data} />

      <div
      data-testid="totalongkos"
        css={css`
          font-size: 20px;
        `}
      >
        Total Ongkos Kirim: {totalCost}
        
      </div>
       

    </div>

  );
};

export default ListBatch;