From f73cb58d3428daa294ceeaf1477ebf4ad84d1f97 Mon Sep 17 00:00:00 2001
From: Takkun0310 <takkunsan0310@gmail.com>
Date: Mon, 13 May 2024 16:50:41 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20team=E3=82=92=E5=89=8A=E9=99=A4?=
 =?UTF-8?q?=E3=81=99=E3=82=8BButton=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/teams/teamDelete.tsx | 71 +++++++++++++++++++++++++++++++++
 components/teams/teamEditor.tsx |  7 ++--
 2 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 components/teams/teamDelete.tsx

diff --git a/components/teams/teamDelete.tsx b/components/teams/teamDelete.tsx
new file mode 100644
index 0000000..01f244a
--- /dev/null
+++ b/components/teams/teamDelete.tsx
@@ -0,0 +1,71 @@
+'use client'
+import {
+    Button,
+    Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControl
+} from "@mui/material";
+import React from "react";
+import { teamFactory } from "@/src/models/TeamModel";
+import { useRouter } from "next/navigation";
+import {HiTrash} from "react-icons/hi2";
+
+export type TeamDeleteProps = {
+    teamId: number;
+}
+
+export default function TeamDelete(props: TeamDeleteProps) {
+    const router = useRouter();
+    const [open, setOpen] = React.useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const handleDelete = async () => {
+        await teamFactory().delete(props.teamId);
+
+        router.push('/teams')
+        router.refresh()
+
+        handleClose();
+    };
+
+    return (
+        <FormControl>
+            <Button
+                variant="outlined"
+                color={"error"}
+                startIcon={<HiTrash/>}
+                onClick={handleOpen}
+            >
+                このチームを削除
+            </Button>
+            <Dialog
+                open={open}
+                onClose={handleClose}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+            >
+                <DialogTitle id="alert-dialog-title" color='s-darkest.main' fontWeight='bold'>
+                    {"チームを削除しますか?"}
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="alert-dialog-description"　color='black'>
+                        この操作は元に戻せません。チームを削除してもよろしいですか？
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleClose} color="primary" autoFocus>
+                        キャンセル
+                    </Button>
+                    <Button onClick={handleDelete} color="error" autoFocus>
+                        削除
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </FormControl>
+    );
+}
diff --git a/components/teams/teamEditor.tsx b/components/teams/teamEditor.tsx
index 942add0..18f0719 100644
--- a/components/teams/teamEditor.tsx
+++ b/components/teams/teamEditor.tsx
@@ -6,12 +6,13 @@ import {
     Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField,
     Typography
 } from "@mui/material";
-import {HiCheck, HiTrash} from "react-icons/hi2";
+import { HiCheck } from "react-icons/hi2";
 import React, {useState} from "react";
 import {useRouter} from "next/navigation";
 import {Team, teamFactory} from "@/src/models/TeamModel";
 import {Class} from "@/src/models/ClassModel";
 import {User} from "@/src/models/UserModel";
+import TeamDelete from "@/components/teams/teamDelete";
 
 type TeamEditorProps = {
     class : Class;
@@ -142,9 +143,7 @@ export default function TeamEditor(props: TeamEditorProps) {
                     justifyContent={"space-between"}
                     alignItems="center"
                 >
-                    <Button variant="outlined" color={"error"} startIcon={<HiTrash/>}>
-                        このチームを削除
-                    </Button>
+                    <TeamDelete teamId={props.team.id}/>
                     <Button
                         variant={"contained"}
                         color={"info"}