Skip to content

Commit accad7d

Browse files
nakatermnakaterm
committed
追加・削除時の挙動を修正
1 parent 2a675f7 commit accad7d

File tree

3 files changed

+72
-128
lines changed

3 files changed

+72
-128
lines changed

‎web/components/course/components/CourseDeleteConfirmDialog.tsx‎

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎web/components/course/components/CourseRegisterConfirmDialog.tsx‎

Lines changed: 60 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,108 @@
11
import type { Course } from "common/types";
22
import { useEffect, useState } from "react";
3-
import { addMyCourse, getMyCoursesOverlapWith } from "~/api/course";
3+
import { MdAddCircleOutline } from "react-icons/md";
4+
import { MdRemoveCircleOutline } from "react-icons/md";
5+
import {
6+
addMyCourse,
7+
deleteMyCourse,
8+
getMyCoursesOverlapWith,
9+
} from "~/api/course";
410

511
export default function CourseRegisterConfirmDialog({
612
open,
713
onClose,
8-
course,
14+
mode,
15+
courseToAddOrDelete,
916
handleSelectDialogClose,
1017
handleCoursesUpdate,
1118
}: {
1219
open: boolean;
1320
onClose: () => void;
14-
course: Course | null;
21+
mode: "add" | "delete";
22+
courseToAddOrDelete: Course;
1523
handleSelectDialogClose: () => void;
1624
handleCoursesUpdate: (courses: Course[]) => void;
1725
}) {
1826
const [overlapCourses, setOverlapCourses] = useState<Course[]>([]);
1927
const [isLoading, setIsLoading] = useState(false);
2028

2129
useEffect(() => {
22-
if (!course) return;
23-
30+
if (!courseToAddOrDelete) return;
2431
setIsLoading(true);
2532
setOverlapCourses([]);
26-
2733
(async () => {
28-
const courses = await getMyCoursesOverlapWith(course.id);
34+
const courses = await getMyCoursesOverlapWith(courseToAddOrDelete.id);
2935
setOverlapCourses(courses);
3036
setIsLoading(false);
3137
})();
32-
}, [course]);
38+
}, [courseToAddOrDelete]);
39+
40+
const coursesToBeDeletedString = overlapCourses
41+
.map((overlapCourse) => `${overlapCourse.name} (${overlapCourse.teacher})`)
42+
.join("・");
3343

3444
return (
3545
<div className={`modal ${open ? "modal-open" : ""}`}>
3646
<div className="modal-box">
37-
<h3 className="font-bold text-lg">変更の確認</h3>
38-
<p className="py-4">次のように変更します。よろしいですか？</p>
47+
<h3 className="font-bold text-lg">
48+
{mode === "add" ? "変更" : "削除"}の確認
49+
</h3>
50+
<p className="py-4">
51+
{mode === "add" ? "次のように変更" : "次の授業を削除"}
52+
します。よろしいですか？
53+
</p>
3954
<div className="mt-2 space-y-2">
40-
{course && (
41-
<div className="alert alert-success">
42-
{`追加: ${course.name} (${course.teacher})`}
55+
{courseToAddOrDelete && mode === "add" ? (
56+
<div className="bg-green-100 px-4 py-2">
57+
<div className="flex items-center text-gray-500">
58+
<MdAddCircleOutline />
59+
<span>追加</span>
60+
</div>
61+
<p className="text-md">{`${courseToAddOrDelete.name} (${courseToAddOrDelete.teacher})`}</p>
62+
</div>
63+
) : (
64+
<div className="bg-red-100 px-4 py-2">
65+
<div className="flex items-center text-gray-500">
66+
<MdRemoveCircleOutline />
67+
<span>削除</span>
68+
</div>
69+
<p className="text-md">{`${courseToAddOrDelete.name} (${courseToAddOrDelete.teacher})`}</p>
4370
</div>
4471
)}
4572
{isLoading ? (
4673
<div className="alert alert-info">読み込み中...</div>
4774
) : (
48-
<div className="alert alert-error">
49-
{`削除: ${
50-
overlapCourses
51-
.map(
52-
(overlapCourse) =>
53-
`${overlapCourse.name} (${overlapCourse.teacher})`,
54-
)
55-
.join("・") || "なし"
56-
}`}
57-
</div>
75+
mode === "add" &&
76+
coursesToBeDeletedString && (
77+
<div className="bg-red-100 px-4 py-2">
78+
<div className="flex items-center text-gray-500">
79+
<MdRemoveCircleOutline />
80+
<span>削除</span>
81+
</div>
82+
<p className="text-md">{coursesToBeDeletedString}</p>
83+
</div>
84+
)
5885
)}
5986
</div>
6087
<div className="modal-action">
6188
{/* biome-ignore lint/a11y/useButtonType: <explanation> */}
6289
<button className="btn btn-ghost" onClick={onClose}>
6390
キャンセル
6491
</button>
65-
{course && (
92+
{courseToAddOrDelete && (
6693
// biome-ignore lint/a11y/useButtonType: <explanation>
6794
<button
6895
className="btn btn-primary"
6996
onClick={async () => {
70-
const newCourses = await addMyCourse(course.id);
71-
handleCoursesUpdate(newCourses);
97+
if (mode === "add") {
98+
const newCourses = await addMyCourse(courseToAddOrDelete.id);
99+
handleCoursesUpdate(newCourses);
100+
} else {
101+
const newCourses = await deleteMyCourse(
102+
courseToAddOrDelete.id,
103+
);
104+
handleCoursesUpdate(newCourses);
105+
}
72106
onClose();
73107
handleSelectDialogClose();
74108
}}

‎web/components/course/components/SelectCourseDialog.tsx‎

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { DAY_TO_JAPANESE_MAP } from "common/consts";
22
import type { Course, Day } from "common/types";
33
import { useEffect, useState } from "react";
44
import courseApi from "~/api/course";
5-
import CourseDeleteConfirmDialog from "./CourseDeleteConfirmDialog";
65
import CourseRegisterConfirmDialog from "./CourseRegisterConfirmDialog";
76

87
export default function SelectCourseDialog({
@@ -25,9 +24,9 @@ export default function SelectCourseDialog({
2524
Course[]
2625
>([]);
2726
const [newCourse, setNewCourse] = useState<Course | null>(null);
28-
const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
29-
const [isDeleteConfirmDialogOpen, setIsDeleteConfirmDialogOpen] =
30-
useState(false);
27+
const [confirmDialogStatus, setConfirmDialogStatus] = useState<
28+
"closed" | "add" | "delete"
29+
>("closed");
3130

3231
useEffect(() => {
3332
(async () => {
@@ -69,14 +68,13 @@ export default function SelectCourseDialog({
6968
currentEdit?.course?.teacher ?? "-"
7069
} / ${currentEdit?.course?.id ?? "-"}`}</p>
7170
</div>
72-
{/* biome-ignore lint/a11y/useButtonType: <explanation> */}
7371
<button
74-
className="btn btn-sm btn-error"
72+
type="button"
73+
className="btn btn-sm"
7574
onClick={async () => {
7675
if (!currentEdit?.course?.id) return;
77-
7876
setNewCourse(currentEdit.course);
79-
setIsDeleteConfirmDialogOpen(true);
77+
setConfirmDialogStatus("delete");
8078
}}
8179
>
8280
削除
@@ -111,7 +109,7 @@ export default function SelectCourseDialog({
111109
className="cursor-pointer rounded-lg border p-2 hover:bg-gray-100"
112110
onClick={() => {
113111
setNewCourse(course);
114-
setIsConfirmDialogOpen(true);
112+
setConfirmDialogStatus("add");
115113
}}
116114
>
117115
<p>{course.name}</p>
@@ -123,26 +121,17 @@ export default function SelectCourseDialog({
123121
</div>
124122

125123
<div className="modal-action">
126-
{/* biome-ignore lint/a11y/useButtonType: <explanation> */}
127-
<button className="btn btn-primary" onClick={onClose}>
124+
<button type="button" className="btn btn-primary" onClick={onClose}>
128125
閉じる
129126
</button>
130127
</div>
131128

132129
{newCourse && (
133130
<CourseRegisterConfirmDialog
134-
open={isConfirmDialogOpen}
135-
onClose={() => setIsConfirmDialogOpen(false)}
136-
course={newCourse}
137-
handleSelectDialogClose={onClose}
138-
handleCoursesUpdate={handleCoursesUpdate}
139-
/>
140-
)}
141-
{newCourse && (
142-
<CourseDeleteConfirmDialog
143-
open={isDeleteConfirmDialogOpen}
144-
onClose={() => setIsDeleteConfirmDialogOpen(false)}
145-
course={newCourse}
131+
open={confirmDialogStatus !== "closed"}
132+
onClose={() => setConfirmDialogStatus("closed")}
133+
courseToAddOrDelete={newCourse}
134+
mode={confirmDialogStatus === "delete" ? "delete" : "add"}
146135
handleSelectDialogClose={onClose}
147136
handleCoursesUpdate={handleCoursesUpdate}
148137
/>

0 commit comments

Comments
 (0)