diff --git a/task_yell/src/app/home/page.tsx b/task_yell/src/app/home/page.tsx index bdb98ea..45e8d40 100644 --- a/task_yell/src/app/home/page.tsx +++ b/task_yell/src/app/home/page.tsx @@ -1,402 +1,34 @@ "use client"; -import { DateTimeInput } from "@/components/date-time-input"; import { Button } from "@/components/ui/button"; -import { Checkbox } from "@/components/ui/checkbox"; -import { - Dialog, - DialogContent, - DialogHeader, - DialogTitle, -} 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, - SheetHeader, - SheetTitle, - 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 { auth } 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, - startOfWeek, subMonths, } from "date-fns"; import { ja } from "date-fns/locale"; -import { doc, getDoc, setDoc, updateDoc } from "firebase/firestore"; -import { AnimatePresence, motion, useDragControls } from "framer-motion"; import { ChevronLeft, ChevronRight, - ChevronUp, - Edit, - MapPinIcon, - Menu, - Trash2, - UserPlusIcon, - X, - Bell, - Users, - Download, - LogOut, - Brain, - PhoneCall, } from "lucide-react"; import { useRouter } from "next/navigation"; -import { useEffect, useMemo, useRef, useState } from "react"; +import { useEffect, useMemo, 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)} - /> -
- )} - -
- -