2026_team3/Frontend/src/Pages/Create/Create.tsx at c87e45aaaf3e46ce8dd98e3b2b847ffd41ab4680 · kc3hack/2026_team3 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
import "./Create.css";
import toast from "react-hot-toast";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import InputField from "../../Components/InputField/InputField";
import ConfirmButton from "../../Components/ConfirmButton/ConfirmButton";
import image from "../../Components/Elements/image.png";

function Create() {
    const navigate = useNavigate();
    const [RoomName, setRoomName] = useState("");
    const [TokenName, setTokenName] = useState("");
    const [RoomIcon, setRoomIcon] = useState<File | null>(null);
    const [TokenIcon, setTokenIcon] = useState<File | null>(null);
    const [TextError, setTextError] = useState("");
    const [RoomIconError, setRoomIconError] = useState("");
    const [TokenIconError, setTokenIconError] = useState("");

    async function HandleCreate() {
        const formData = new FormData();
        formData.append("RoomName", RoomName);
        formData.append("MosaicName", TokenName);
        if (RoomIcon) formData.append("RoomIcon", RoomIcon);
        if (TokenIcon) formData.append("MosaicIcon", TokenIcon);

        try {
            const res = await fetch('/CreateRoom', {
                method: 'POST',
                credentials: "include",
                body: formData,
            });

            if (!res.ok) {
                const data = await res.json();
                toast.error("ルーム作成に失敗しました");
                console.log("Faild: Create room", data);
                return;
            } else {
                toast.success("ルームを作成しました");
                console.log("Success: Cerate room");
                navigate("/Home");
            }
        } catch (err) {
            toast.error('通信エラーが発生しました');
            console.log("Faild: Communication");
        }
    }

    return (
        <form action="" method="POST">
            <div className="CreateBackground">
                <div className="CreateTab">
                    <div className="CreateLeft">
                        <button type="button" onClick={() => { navigate("/Home"); }} className="CreateButton">
                            <h1>ルーム作成</h1>
                        </button>
                    </div>
                </div>
                <div className="CreateBox">
                    <div className="CreateRegister">
                        <div className="CreateInput">
                            <div className="CreateOneset">
                                <p>ルームアイコン</p>
                                <label htmlFor="RoomIcon" className="CreateFile">
                                    <img
                                        src={RoomIcon ? URL.createObjectURL(RoomIcon) : image}
                                        className="CreateImage"
                                        alt="ルームアイコン"
                                    />
                                    <p>画像を選択</p>
                                </label>
                                <input id="RoomIcon" type="file" accept="image/*;capture=camera" style={{ display: "none" }}
                                    onChange={(e) => {
                                        setTextError("");
                                        setRoomIconError("");
                                        setTokenIconError("");
                                        const file = e.target.files?.[0] || null;
                                        setRoomIcon(file);
                                    }}
                                />
                                {RoomIconError && <p className="CreateError">{RoomIconError}</p>}
                            </div>
                            <div className="CreateOneset">
                                <p>ルーム名</p>
                                <InputField name="ルーム名" type="text"
                                    onChange={(e) => {
                                        setRoomName(e.target.value);
                                        setTextError("");
                                    }}
                                    placeholder="" />
                                {TextError && <p className="CreateError">{TextError}</p>}
                            </div>
                        </div>
                        <div className="CreateInput">
                            <div className="CreateOneset">
                                <p>トークンアイコン</p>
                                <label htmlFor="TokenIcon" className="CreateFile">
                                    <img
                                        src={TokenIcon ? URL.createObjectURL(TokenIcon) : image}
                                        className="CreateImage"
                                        alt="トークンアイコン"
                                    />
                                    <p>画像を選択</p>
                                </label>
                                <input id="TokenIcon" type="file" accept="image/*;capture=camera" style={{ display: "none" }}
                                    onChange={(e) => {
                                        setTextError("");
                                        setRoomIconError("");
                                        setTokenIconError("");
                                        const file = e.target.files?.[0] || null;
                                        setTokenIcon(file);
                                    }}
                                />
                                {TokenIconError && <p className="CreateError">{TokenIconError}</p>}
                            </div>
                            <div className="CreateOneset">
                                <p>トークン名</p>
                                <InputField name="トークン名" type="text"
                                    onChange={(e) => {
                                        setTokenName(e.target.value);
                                        setTextError("");
                                    }}
                                    placeholder="" />
                                {TextError && <p className="CreateError">{TextError}</p>}
                            </div>
                        </div>
                        <ConfirmButton label="作成" onClick={() => {
                            if (!RoomName || !TokenName || !RoomIcon || !TokenIcon) {
                                if (!RoomName || !TokenName) setTextError("入力が必要です");
                                if (!RoomIcon) setRoomIconError("画像が必要です");
                                if (!TokenIcon) setTokenIconError("画像が必要です");
                                return;
                            } else {
                                HandleCreate();
                            }
                        }}
                            type="button" />
                    </div>
                </div>
            </div>
        </form>
    )
}

export default Create;