Fakultas Ilmu Komputer UI

CreateThread.jsx 3.45 KB
Newer Older
1
2
3
import axios from 'axios';
import React, { useState, useEffect } from 'react';
import { useInput } from '../../helpers/hooks/input-hook';
FadhilP's avatar
FadhilP committed
4
import { authHeader } from '../../helpers/services/auth.service';
5
import { API_URL } from '../../config/keys';
6
import '../../styles/thread/Form.css';
jonathanchandra15's avatar
jonathanchandra15 committed
7

FadhilP's avatar
FadhilP committed
8
export default function ListThreads(props) {
FadhilP's avatar
FadhilP committed
9
  const { history } = props;
FadhilP's avatar
FadhilP committed
10

FadhilP's avatar
FadhilP committed
11
12
13
  const back = () => {
    history.goBack();
  };
14

FadhilP's avatar
FadhilP committed
15
16
17
  const redirect = (path) => {
    history.push(path);
  };
18

19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
  const { value: title, bind: bindTitle, reset: resetTitle } = useInput('');
  const { value: body, bind: bindBody, reset: resetBody } = useInput('');
  const { value: topicId, bind: bindTopicId, reset: resetTopicId } = useInput(
    0
  );

  const [listTopic, setlistTopic] = useState([]);
  const [message, setMessage] = useState('');

  useEffect(() => {
    async function getListTopic() {
      const allTopic = await (await axios.get(`${API_URL}/topics`))?.data?.data;
      setlistTopic(allTopic);
    }
    getListTopic();
  }, []);

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
39
      console.log(body);
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
      const thisThread = await axios.post(
        `${API_URL}/threads`,
        {
          thread: {
            content: body,
            points: 0,
            title: title,
            topic_id: topicId,
          },
        },
        {
          headers: authHeader(),
        }
      );
      const { data } = thisThread?.data;
      redirect(`/topic/${data?.topic_name}/${data?.id}/page/1`);
    } catch (error) {
      setMessage('Thread title already exist in the selected topic');
    }
    resetBody();
    resetTitle();
    resetTopicId();
  };

FadhilP's avatar
FadhilP committed
64
  return (
65
    <div className="formContainer">
FadhilP's avatar
FadhilP committed
66
      <div className="back" onClick={back}>
67
        <i className="fas fa-angle-left"></i>
FadhilP's avatar
FadhilP committed
68
69
70
71
72
73
74
75
        <h5>Back</h5>
      </div>
      <div className="header">
        <h1>
          <b>Create a Thread</b>
        </h1>
      </div>
      <div className="form_section">
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
        <div>
          {message && (
            <div>
              <div className="alert alert-danger" role="alert">
                {message}
              </div>
            </div>
          )}
          <form onSubmit={handleSubmit}>
            <div className="form_container">
              <label for="title">Title</label>
              <input
                type="text"
                className="title"
                name="title"
Jonathan Chandra's avatar
Jonathan Chandra committed
91
                placeholder="Your thread's title"
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
                required="false"
                {...bindTitle}
              />
              <label>Topic</label>
              <select
                className="topic"
                name="topic"
                required="false"
                {...bindTopicId}
              >
                <option value="" />
                {listTopic.map((topic) => (
                  <option value={topic.id}>{topic.name}</option>
                ))}
              </select>
              <label for="body">Body</label>
              <textarea
                className="body"
                name="body"
Jonathan Chandra's avatar
Jonathan Chandra committed
111
                placeholder="Your thread's body"
112
113
114
115
116
117
118
119
120
121
122
123
124
                required="false"
                {...bindBody}
              />
              <div className="buttonContainer">
                <input
                  type="submit"
                  className="buttonSubmit"
                  value="Create Thread"
                />
              </div>
            </div>
          </form>
        </div>
FadhilP's avatar
FadhilP committed
125
126
127
      </div>
    </div>
  );
jonathanchandra15's avatar
jonathanchandra15 committed
128
}