Skip to content

Commit 2f13d6e

Browse files
yuto-trdyuto-trd
committed
chore: ナビゲーションコンポーネント分離
1 parent 6733845 commit 2f13d6e

File tree

2 files changed

+164
-144
lines changed

2 files changed

+164
-144
lines changed

‎task_yell/src/app/home/page.tsx

+3-144
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,9 @@ import {
88
DialogTitle,
99
} from "@/components/ui/dialog";
1010
import { Input } from "@/components/ui/input";
11-
import { Label } from "@/components/ui/label";
12-
import {
13-
Sheet,
14-
SheetContent,
15-
SheetHeader,
16-
SheetTitle,
17-
SheetTrigger,
18-
} from "@/components/ui/sheet";
19-
import { Switch } from "@/components/ui/switch";
20-
import { signOut } from "@/firebase/auth";
21-
import { auth, db } from "@/firebase/client-app";
11+
import { auth } from "@/firebase/client-app";
2212
import { createEvent, readEvents } from "@/lib/events";
2313
import { createNotification } from "@/lib/notifications";
24-
import { subscribeNotification } from "@/lib/push-notification";
2514
import {
2615
createWantTodo,
2716
deleteWantTodo,
@@ -41,29 +30,23 @@ import {
4130
subMonths,
4231
} from "date-fns";
4332
import { ja } from "date-fns/locale";
44-
import { doc, getDoc, setDoc, updateDoc } from "firebase/firestore";
4533
import { AnimatePresence, motion, useDragControls } from "framer-motion";
4634
import {
4735
ChevronLeft,
4836
ChevronRight,
4937
ChevronUp,
5038
Edit,
51-
Menu,
5239
Trash2,
5340
X,
54-
Bell,
55-
Users,
56-
Download,
57-
LogOut,
5841
Brain,
59-
PhoneCall,
6042
} from "lucide-react";
6143
import { useRouter } from "next/navigation";
6244
import { useEffect, useMemo, useRef, useState } from "react";
6345
import { generateStickyNoteServer } from "./actions";
6446
import { EventCreator } from "@/components/event-creator";
6547
import { Event, Todo, StickyNote } from "@/components/types";
6648
import { priorityColors } from "@/components/priority-colors";
49+
import { Navigation } from "@/components/navigation";
6750

6851
export default function Home() {
6952
const [todos] = useState<Todo[]>([]);
@@ -90,9 +73,6 @@ export default function Home() {
9073
);
9174
const dragControls = useDragControls();
9275
const modalRef = useRef<HTMLDivElement>(null);
93-
const [isOpen, setIsOpen] = useState(false);
94-
const [isNotificationsOpen, setIsNotificationsOpen] = useState(false);
95-
const [notificationsEnabled, setNotificationsEnabled] = useState(false);
9676
const router = useRouter();
9777

9878
useEffect(() => {
@@ -138,46 +118,6 @@ export default function Home() {
138118
}
139119
}, [isDarkMode]);
140120

141-
/**
142-
* ハンバーガーメニューの詳細
143-
*/
144-
const menuItems = [
145-
{
146-
icon: PhoneCall,
147-
label: "電話通知",
148-
onClick: () => {
149-
return setIsNotificationsOpen(!isNotificationsOpen);
150-
},
151-
},
152-
{
153-
icon: Bell,
154-
label: "プッシュ通知",
155-
onClick: async () => {
156-
await subscribeNotification();
157-
},
158-
},
159-
{ icon: Users, label: "友達", onClick: () => console.log("友達") },
160-
{
161-
icon: Download,
162-
label: "インポート",
163-
onClick: () => {
164-
if (auth.currentUser) {
165-
router.push(
166-
`/api/auth/google-cal?userId=${encodeURIComponent(auth.currentUser.uid)}`,
167-
);
168-
}
169-
},
170-
},
171-
{
172-
icon: LogOut,
173-
label: "ログアウト",
174-
onClick: async () => {
175-
await signOut();
176-
router.refresh();
177-
},
178-
},
179-
];
180-
181121
const addStickyNote = async () => {
182122
if (newStickyNote.trim()) {
183123
const newNote: StickyNote = { id: "", title: newStickyNote };
@@ -474,88 +414,7 @@ export default function Home() {
474414
<div
475415
className={`relative h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden ${isDarkMode ? "dark" : ""}`}
476416
>
477-
<Sheet open={isOpen} onOpenChange={setIsOpen}>
478-
<SheetTrigger asChild>
479-
<Button
480-
variant="ghost"
481-
size="icon"
482-
className="fixed top-4 left-4 z-50 w-12 h-12 bg-white dark:bg-gray-800 rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-700"
483-
>
484-
{/* CSS変更する必要あるかも */}
485-
<Menu className="h-6 w-6" />
486-
<span className="sr-only">メニューを開く</span>
487-
</Button>
488-
</SheetTrigger>
489-
<SheetContent side="left" className="w-[300px] sm:w-[400px]">
490-
<SheetHeader>
491-
<SheetTitle>設定</SheetTitle>
492-
</SheetHeader>
493-
<div className="mt-4 space-y-4">
494-
<div className="flex items-center space-x-2">
495-
<Switch
496-
id="dark-mode"
497-
checked={isDarkMode}
498-
onCheckedChange={setIsDarkMode}
499-
/>
500-
<Label htmlFor="dark-mode">ダークモード</Label>
501-
</div>
502-
</div>
503-
<nav className="mt-8">
504-
<ul className="space-y-4">
505-
{menuItems.map((item, index) => (
506-
<li key={index}>
507-
<Button
508-
variant="ghost"
509-
className="w-full justify-start"
510-
onClick={item.onClick}
511-
>
512-
<item.icon className="mr-2 h-5 w-5" />
513-
{item.label}
514-
</Button>
515-
{item.label === "電話通知" && isNotificationsOpen && (
516-
<form
517-
className="ml-7 mt-2 space-y-4"
518-
action={async (data) => {
519-
if (auth.currentUser) {
520-
const docRef = doc(db, "users", auth.currentUser.uid);
521-
const snapshot = await getDoc(docRef);
522-
if (snapshot.exists()) {
523-
await updateDoc(docRef, {
524-
phoneNumber: data.get("phoneNumber"),
525-
});
526-
} else {
527-
setDoc(docRef, {
528-
phoneNumber: data.get("phoneNumber"),
529-
});
530-
}
531-
}
532-
}}
533-
>
534-
<div className="space-y-2">
535-
<Label htmlFor="phone">電話番号</Label>
536-
<Input
537-
id="phone"
538-
name="phoneNumber"
539-
placeholder="+8190XXXXYYYY"
540-
/>
541-
</div>
542-
<div className="flex items-center space-x-2">
543-
<Switch
544-
id="notifications"
545-
checked={notificationsEnabled}
546-
onCheckedChange={setNotificationsEnabled}
547-
/>
548-
<Label htmlFor="notifications">通知を有効にする</Label>
549-
</div>
550-
<Button type="submit">保存</Button>
551-
</form>
552-
)}
553-
</li>
554-
))}
555-
</ul>
556-
</nav>
557-
</SheetContent>
558-
</Sheet>
417+
<Navigation isDarkMode={isDarkMode} setIsDarkMode={setIsDarkMode} />
559418

560419
<div className="flex flex-col lg:flex-row h-full pt-20 px-4">
561420
<div className="w-full lg:w-1/2 pr-2 overflow-auto">

‎task_yell/src/components/navigation.tsx

+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
"use client";
2+
3+
import { Button } from "@/components/ui/button";
4+
import { Input } from "@/components/ui/input";
5+
import { Label } from "@/components/ui/label";
6+
import {
7+
Sheet,
8+
SheetContent,
9+
SheetHeader,
10+
SheetTitle,
11+
SheetTrigger,
12+
} from "@/components/ui/sheet";
13+
import { Switch } from "@/components/ui/switch";
14+
import { signOut } from "@/firebase/auth";
15+
import { auth, db } from "@/firebase/client-app";
16+
import { subscribeNotification } from "@/lib/push-notification";
17+
import { doc, getDoc, setDoc, updateDoc } from "firebase/firestore";
18+
import {
19+
Menu,
20+
Bell,
21+
Users,
22+
Download,
23+
LogOut,
24+
PhoneCall,
25+
} from "lucide-react";
26+
import { useRouter } from "next/navigation";
27+
import { useMemo, useState } from "react";
28+
29+
type Props = {
30+
isDarkMode: boolean;
31+
setIsDarkMode: (isDarkMode: boolean) => void;
32+
}
33+
34+
export function Navigation({ isDarkMode, setIsDarkMode }: Props) {
35+
const [isOpen, setIsOpen] = useState(false);
36+
const [isNotificationsOpen, setIsNotificationsOpen] = useState(false);
37+
const [notificationsEnabled, setNotificationsEnabled] = useState(false);
38+
const router = useRouter();
39+
40+
const menuItems = useMemo(() => [
41+
{
42+
icon: PhoneCall,
43+
label: "電話通知",
44+
onClick: () => {
45+
return setIsNotificationsOpen(!isNotificationsOpen);
46+
},
47+
},
48+
{
49+
icon: Bell,
50+
label: "プッシュ通知",
51+
onClick: async () => {
52+
await subscribeNotification();
53+
},
54+
},
55+
{ icon: Users, label: "友達", onClick: () => console.log("友達") },
56+
{
57+
icon: Download,
58+
label: "インポート",
59+
onClick: () => {
60+
if (auth.currentUser) {
61+
router.push(
62+
`/api/auth/google-cal?userId=${encodeURIComponent(auth.currentUser.uid)}`,
63+
);
64+
}
65+
},
66+
},
67+
{
68+
icon: LogOut,
69+
label: "ログアウト",
70+
onClick: async () => {
71+
await signOut();
72+
router.refresh();
73+
},
74+
},
75+
], [isNotificationsOpen, router]);
76+
77+
return (
78+
<Sheet open={isOpen} onOpenChange={setIsOpen}>
79+
<SheetTrigger asChild>
80+
<Button
81+
variant="ghost"
82+
size="icon"
83+
className="fixed top-4 left-4 z-50 w-12 h-12 bg-white dark:bg-gray-800 rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-700"
84+
>
85+
{/* CSS変更する必要あるかも */}
86+
<Menu className="h-6 w-6" />
87+
<span className="sr-only">メニューを開く</span>
88+
</Button>
89+
</SheetTrigger>
90+
<SheetContent side="left" className="w-[300px] sm:w-[400px]">
91+
<SheetHeader>
92+
<SheetTitle>設定</SheetTitle>
93+
</SheetHeader>
94+
<div className="mt-4 space-y-4">
95+
<div className="flex items-center space-x-2">
96+
<Switch
97+
id="dark-mode"
98+
checked={isDarkMode}
99+
onCheckedChange={setIsDarkMode}
100+
/>
101+
<Label htmlFor="dark-mode">ダークモード</Label>
102+
</div>
103+
</div>
104+
<nav className="mt-8">
105+
<ul className="space-y-4">
106+
{menuItems.map((item, index) => (
107+
<li key={index}>
108+
<Button
109+
variant="ghost"
110+
className="w-full justify-start"
111+
onClick={item.onClick}
112+
>
113+
<item.icon className="mr-2 h-5 w-5" />
114+
{item.label}
115+
</Button>
116+
{item.label === "電話通知" && isNotificationsOpen && (
117+
<form
118+
className="ml-7 mt-2 space-y-4"
119+
action={async (data) => {
120+
if (auth.currentUser) {
121+
const docRef = doc(db, "users", auth.currentUser.uid);
122+
const snapshot = await getDoc(docRef);
123+
if (snapshot.exists()) {
124+
await updateDoc(docRef, {
125+
phoneNumber: data.get("phoneNumber"),
126+
});
127+
} else {
128+
setDoc(docRef, {
129+
phoneNumber: data.get("phoneNumber"),
130+
});
131+
}
132+
}
133+
}}
134+
>
135+
<div className="space-y-2">
136+
<Label htmlFor="phone">電話番号</Label>
137+
<Input
138+
id="phone"
139+
name="phoneNumber"
140+
placeholder="+8190XXXXYYYY"
141+
/>
142+
</div>
143+
<div className="flex items-center space-x-2">
144+
<Switch
145+
id="notifications"
146+
checked={notificationsEnabled}
147+
onCheckedChange={setNotificationsEnabled}
148+
/>
149+
<Label htmlFor="notifications">通知を有効にする</Label>
150+
</div>
151+
<Button type="submit">保存</Button>
152+
</form>
153+
)}
154+
</li>
155+
))}
156+
</ul>
157+
</nav>
158+
</SheetContent>
159+
</Sheet>
160+
)
161+
}

0 commit comments

Comments
 (0)