From 6733845b87347b2bc71626fdfbabdda983a9dfa3 Mon Sep 17 00:00:00 2001 From: Yuto Terada Date: Sat, 23 Nov 2024 17:46:09 +0900 Subject: [PATCH 1/8] =?UTF-8?q?chore:=20EventCreator=E3=82=92=E3=83=95?= =?UTF-8?q?=E3=82=A1=E3=82=A4=E3=83=AB=E3=81=AB=E5=88=86=E5=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- task_yell/src/app/home/page.tsx | 344 +------------------- task_yell/src/components/event-creator.tsx | 317 ++++++++++++++++++ task_yell/src/components/priority-colors.ts | 7 + task_yell/src/components/types.ts | 29 ++ 4 files changed, 358 insertions(+), 339 deletions(-) create mode 100644 task_yell/src/components/event-creator.tsx create mode 100644 task_yell/src/components/priority-colors.ts create mode 100644 task_yell/src/components/types.ts diff --git a/task_yell/src/app/home/page.tsx b/task_yell/src/app/home/page.tsx index bdb98ea..e18606f 100644 --- a/task_yell/src/app/home/page.tsx +++ b/task_yell/src/app/home/page.tsx @@ -1,8 +1,6 @@ "use client"; -import { DateTimeInput } from "@/components/date-time-input"; import { Button } from "@/components/ui/button"; -import { Checkbox } from "@/components/ui/checkbox"; import { Dialog, DialogContent, @@ -11,13 +9,6 @@ import { } from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; import { Sheet, SheetContent, @@ -26,32 +17,23 @@ import { SheetTrigger, } from "@/components/ui/sheet"; import { Switch } from "@/components/ui/switch"; -import { Textarea } from "@/components/ui/textarea"; import { signOut } from "@/firebase/auth"; import { auth, db } from "@/firebase/client-app"; import { createEvent, readEvents } from "@/lib/events"; import { createNotification } from "@/lib/notifications"; import { subscribeNotification } from "@/lib/push-notification"; -import { Category, Priority } from "@/lib/types"; import { createWantTodo, deleteWantTodo, readWantTodos, updateWantTodo, } from "@/lib/want-todo"; -import { - AngleIcon, - ListBulletIcon, - Pencil1Icon, - ViewGridIcon, -} from "@radix-ui/react-icons"; import { addMonths, eachDayOfInterval, endOfMonth, endOfWeek, format, - getHours, isSameDay, isSameMonth, startOfMonth, @@ -66,10 +48,8 @@ import { ChevronRight, ChevronUp, Edit, - MapPinIcon, Menu, Trash2, - UserPlusIcon, X, Bell, Users, @@ -81,322 +61,9 @@ import { import { useRouter } from "next/navigation"; import { useEffect, useMemo, useRef, useState } from "react"; import { generateStickyNoteServer } from "./actions"; - -type Todo = { - id: string; - text: string; - completed: boolean; - date: Date; - priority: Priority; - category: Category; -}; - -type Event = { - id: string; - title: string; - start: Date | null; - end: Date | null; - description: string; - category: Category; - priority: Priority; - location: string | null; - invitees: string; - isTask: boolean; - isLocked: boolean; -}; - -type StickyNote = { - id: string; - title: string; -}; - -const priorityColors: Record = { - low: "bg-blue-100 dark:bg-blue-900", - medium: "bg-yellow-100 dark:bg-yellow-900", - high: "bg-red-100 dark:bg-red-900", -}; - -function EventCreator({ - onSave, - onCancel, - initialTitle = "", - targetDate, - events, -}: { - onSave: ( - event: Event, - notification: { date: Date | null; type: "call" | "push" }, - ) => void; - onCancel: () => void; - initialTitle?: string; - targetDate: Date; - events: Event[]; -}) { - const [title, setTitle] = useState(initialTitle); - const [description, setDescription] = useState(""); - const [startTime, setStartTime] = useState(targetDate); - const [endTime, setEndTime] = useState(targetDate); - const [location, setLocation] = useState(""); - const [invitees, setInvitees] = useState(""); - const [category, setCategory] = useState("other"); - const [priority, setPriority] = useState("medium"); - const [isTask, setIsTask] = useState(false); - const [isLocked, setIsLocked] = useState(false); - const [notificationDate, setNotificationDate] = useState(null); - const [notificationType, setNotificationType] = useState<"call" | "push">( - "call", - ); - - const handleSave = () => { - if (targetDate) { - const newEvent: Event = { - id: "", - title, - start: startTime, - end: endTime, - description, - category, - priority, - location, - invitees, - isTask, - isLocked, - }; - onSave(newEvent, { date: notificationDate, type: notificationType }); - } - }; - - // 選択された日のスケジュールを描画する関数 - const renderDaySchedule = () => { - // 選択された日のイベントをフィルタリング - const dayEvents = events.filter( - (event) => event.start && isSameDay(event.start, startTime), - ); - const hours = Array.from({ length: 24 }, (_, i) => i); - - const sortedEvents = dayEvents.sort((a, b) => - a.start && b.start ? a.start.getTime() - b.start.getTime() : 0, - ); - - return ( -
-

- {format(startTime, "yyyy年MM月dd日 (E)", { locale: ja })} - のスケジュール -

-
- {hours.map((hour) => ( -
- {`${hour.toString().padStart(2, "0")}:00`} -
- {sortedEvents - .filter( - (event) => event.start && getHours(event.start) === hour, - ) - .map((event, index) => { - if (!event.start || !event.end) { - return <>; - } - const startMinutes = event.start.getMinutes(); - const duration = - (event.end.getTime() - event.start.getTime()) / - (1000 * 60); - const height = `${duration}px`; - const top = `${startMinutes}px`; - const width = index === 0 ? "200%" : "150%"; - const left = - index === 0 ? "0%" : `${50 * Math.min(index, 3)}%`; - const zIndex = index + 1; - - return ( -
-
- {event.title} -
-
{`${format(event.start, "HH:mm")} - ${format(event.end, "HH:mm")}`}
-
- ); - })} -
-
- ))} -
-
- ); - }; - - return ( -
-
{renderDaySchedule()}
-
-
- setIsTask(checked as boolean)} - /> - -
-
- - setTitle(e.target.value)} - /> -
- - {isTask ? ( - setStartTime(date)} - /> - ) : ( -
- setStartTime(date)} - /> - setEndTime(date)} - /> -
- )} - -
- -