Fakultas Ilmu Komputer UI

EditProgram.jsx 2.82 KB
Newer Older
1
import React from "react";
2
3
4
5
import useFetchSingleData from "../../utils/useFetchSingleData";
import { css } from "@emotion/core";
import { ErrorDiv } from "../../component/html/html";
import FormProgram from "./FormProgram";
Michael Wiryadinata Halim's avatar
Michael Wiryadinata Halim committed
6
7
import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
8
import { navigate } from "@reach/router";
9
import useSendData from "../../utils/useSendData";
10
11
12
13

const EditProgram = ({ idProgram }) => {
  const url = `${process.env.REACT_APP_BASE_URL}/programs/${idProgram}/`;
  const [initialData, errorState] = useFetchSingleData(url);
14
  const [send, error] = useSendData({ url, method: "PATCH", redirect: -1 });
15
16
17
18
19
20
21
22
  const onSubmit = (data) => {
    const formData = new FormData();
    formData.append("name", data["name"]);
    formData.append("description", data["description"]);
    formData.append("start_date_time", data["start_date_time"]);
    formData.append("end_date_time", data["end_date_time"]);
    formData.append("location", data["location"]);
    formData.append("speaker", data["speaker"]);
23
24
25
    if (data["poster_image"].length !== 0)
      formData.append("poster_image", data["poster_image"][0]);
    send(formData);
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
  };
  if (errorState || Object.keys(initialData).length === 0)
    return (
      <div
        data-testid="waiting-edit-program"
        css={css`
          display: flex;
          margin: 2rem 3rem 3rem 3rem;
          flex-direction: column;
          font-size: 25px;
        `}
      >
        Fetching data..
      </div>
    );
  return (
    <div
      data-testid="edit-program"
      css={css`
        display: flex;
        margin: 2rem 3rem 3rem 3rem;
        flex-direction: column;
      `}
    >
      {error && <ErrorDiv>Error !, Data tidak dapat disimpan</ErrorDiv>}
      <div
        css={css`
          display: flex;
          flex-direction: row;
        `}
      >
        <button
          css={css`
            background-color: Transparent;
            background-repeat: no-repeat;
            border: none;
            cursor: pointer;
            overflow: hidden;
            outline: none;
          `}
          onClick={() => navigate(-1)}
        >
Michael Wiryadinata Halim's avatar
Michael Wiryadinata Halim committed
68
          <ArrowBackIcon fontSize="large" />
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
        </button>
        <div
          css={css`
            font-size: 36px;
          `}
        >
          Edit {initialData.name}
        </div>
      </div>
      <div
        css={css`
          margin-top: 2.5rem;
          display: flex;
        `}
      >
Michael Wiryadinata Halim's avatar
Michael Wiryadinata Halim committed
84
        <ErrorOutlineIcon style={{ fontSize: 28, color: "FFC80A" }} />
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
        <div
          css={css`
            font-weight: 600;
            font-size: 24px;
            line-height: 29px;
          `}
        >
          Informasi Program
        </div>
      </div>
      <FormProgram {...{ onSubmit, initialData }} />
    </div>
  );
};

export default EditProgram;