Skip to content

Commit 66dc881

Browse files
MussiDevMussiDev
committed
add: add new func to reset date on home click
1 parent a903c7c commit 66dc881

File tree

1 file changed

+154
-96
lines changed

1 file changed

+154
-96
lines changed

‎components/settings-menu.tsx‎

Lines changed: 154 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,162 @@
1-
'use client'
2-
import React, { useEffect, useState } from 'react';
3-
import { motion, AnimatePresence } from 'framer-motion';
4-
import { X, ChevronRight, User, Bell, Lock, HelpCircle, LogOut, Home, Bug, Lightbulb, Settings } from 'lucide-react';
5-
import { Button } from '@/components/ui/button';
6-
import { useRouter } from '@/i18n/routing';
7-
import { useModalContext } from '@/contexts/ModalContext';
8-
import { useSession } from './provider/session-provider';
9-
import { ModeToggle } from './theme-switcher';
10-
import { useTranslations } from 'next-intl';
1+
"use client";
112

3+
import { AnimatePresence, motion } from "framer-motion";
4+
import {
5+
Bell,
6+
Bug,
7+
ChevronRight,
8+
HelpCircle,
9+
Home,
10+
Lightbulb,
11+
Lock,
12+
LogOut,
13+
Settings,
14+
User,
15+
X,
16+
} from "lucide-react";
17+
import React, { useEffect, useState } from "react";
1218

13-
export function SettingsMenu({ onLogout}) {
14-
const t = useTranslations('navigation');
15-
const router = useRouter();
16-
const session = useSession();
17-
const { isModalOpen, openModal, closeModal } = useModalContext();
18-
const [menuItems, setMenuItems] = useState([]);
19+
import { Button } from "@/components/ui/button";
20+
import { ModeToggle } from "./theme-switcher";
21+
import { isSameDay } from "date-fns";
22+
import { useModalContext } from "@/contexts/ModalContext";
23+
import { useRouter } from "@/i18n/routing";
24+
import { useSession } from "./provider/session-provider";
25+
import { useSettingsContext } from "@/contexts/SettingsContext";
26+
import { useTranslations } from "next-intl";
1927

28+
export function SettingsMenu({ onLogout }) {
29+
const t = useTranslations("navigation");
30+
const router = useRouter();
31+
const session = useSession();
32+
const { isModalOpen, openModal, closeModal } = useModalContext();
33+
const [menuItems, setMenuItems] = useState([]);
34+
const { setDate, date } = useSettingsContext();
2035

21-
useEffect(() => {
36+
const handleClickOnHome = () => {
37+
if (!isSameDay(date, new Date())) {
38+
setDate(new Date());
39+
}
40+
return router.push("/");
41+
};
2242

23-
const items = [
24-
{ icon: Home, label: t('home'), action: () => router.push('/') },
25-
...(session && session.user && session.user.username
26-
? [{
27-
icon: User,
28-
label: t('yourProfile'),
29-
action: () => router.push(`/profile/${session.user.username}`)
30-
}]
31-
: []
32-
),
33-
{ icon: Bell, label: t('notifications'), action: () => router.push('/notifications') },
34-
{ icon: Lock, label: t('privacy'), action: () => console.log('Privacy') },
35-
{ icon: HelpCircle, label: t('helpSupport'), action: () => console.log('Help & Support') },
36-
{ icon: Bug, label: t('reportBugs'), action: async () => router.push('/report-bugs') },
37-
{ icon: Lightbulb, label: t('suggestFeatures'), action: async () => router.push('/suggest-features') },
38-
{ icon: Settings, label: t('settings'), action: async () => router.push('/settings/general') },
39-
{ icon: LogOut, label: t('logout'), action: async () => await onLogout() },
40-
];
43+
useEffect(() => {
44+
const items = [
45+
{
46+
icon: Home,
47+
label: t("home"),
48+
action: () => handleClickOnHome(),
49+
},
50+
...(session && session.user && session.user.username
51+
? [
52+
{
53+
icon: User,
54+
label: t("yourProfile"),
55+
action: () => router.push(`/profile/${session.user.username}`),
56+
},
57+
]
58+
: []),
59+
{
60+
icon: Bell,
61+
label: t("notifications"),
62+
action: () => router.push("/notifications"),
63+
},
64+
{ icon: Lock, label: t("privacy"), action: () => console.log("Privacy") },
65+
{
66+
icon: HelpCircle,
67+
label: t("helpSupport"),
68+
action: () => console.log("Help & Support"),
69+
},
70+
{
71+
icon: Bug,
72+
label: t("reportBugs"),
73+
action: async () => router.push("/report-bugs"),
74+
},
75+
{
76+
icon: Lightbulb,
77+
label: t("suggestFeatures"),
78+
action: async () => router.push("/suggest-features"),
79+
},
80+
{
81+
icon: Settings,
82+
label: t("settings"),
83+
action: async () => router.push("/settings/general"),
84+
},
85+
{
86+
icon: LogOut,
87+
label: t("logout"),
88+
action: async () => await onLogout(),
89+
},
90+
];
4191

42-
setMenuItems(items);
43-
}, [session?.user?.username, router, onLogout, t]);
92+
setMenuItems(items);
93+
}, [session?.user?.username, router, onLogout, t, date]);
4494

45-
46-
return (
47-
<AnimatePresence>
48-
{isModalOpen('settingsModal') && (
49-
<>
50-
<motion.div
51-
initial={{ opacity: 0 }}
52-
animate={{ opacity: 1 }}
53-
exit={{ opacity: 0 }}
54-
className="fixed inset-0 bg-black bg-opacity-50 z-50"
55-
onClick={() => openModal('settingsModal')}
56-
/>
57-
<motion.div
58-
initial={{ x: '100%' }}
59-
animate={{ x: 0 }}
60-
exit={{ x: '100%' }}
61-
transition={{ type: 'spring', damping: 30, stiffness: 300 }}
62-
className="fixed inset-y-0 right-0 w-full max-w-sm bg-white shadow-lg z-50 overflow-y-auto dark:bg-gray-900 dark:backdrop-blur-xl "
63-
>
64-
<div className="flex flex-col h-full">
65-
<div className="flex justify-between items-center p-6 border-b border-gray-200 dark:border-b-slate-500/20">
66-
<h2 className={`text-2xl font-semibold text-green-600 dark:text-gray-100`}>{t('settings')}</h2>
67-
<Button variant="ghost" size="icon" onClick={() => closeModal('settingsModal')} className="rounded-full">
68-
<X className="h-6 w-6" />
69-
</Button>
70-
</div>
71-
<div className="flex-grow overflow-y-auto">
72-
<nav className="px-4 py-6">
73-
<ul className="space-y-2">
74-
{menuItems.map((item, index) => (
75-
<li key={index}>
76-
<Button
77-
variant="ghost"
78-
className={`w-full justify-between text-green-600 hover:bg-green-50 dark:hover:bg-slate-800 rounded-lg py-3 px-4 dark:text-gray-100`}
79-
onClick={() => {
80-
item.action();
81-
closeModal('settingsModal');
82-
}}
83-
>
84-
<span className="flex items-center">
85-
<item.icon className="mr-3 h-5 w-5" />
86-
{item.label}
87-
</span>
88-
<ChevronRight className="h-5 w-5" />
89-
</Button>
90-
</li>
91-
))}
92-
</ul>
93-
</nav>
94-
</div>
95-
<div className="p-6 border-t border-gray-200 dark:border-slate-700/20">
96-
<ModeToggle />
97-
</div>
98-
</div>
99-
</motion.div>
100-
</>
101-
)}
102-
</AnimatePresence>
103-
);
95+
return (
96+
<AnimatePresence>
97+
{isModalOpen("settingsModal") && (
98+
<>
99+
<motion.div
100+
initial={{ opacity: 0 }}
101+
animate={{ opacity: 1 }}
102+
exit={{ opacity: 0 }}
103+
className='fixed inset-0 bg-black bg-opacity-50 z-50'
104+
onClick={() => openModal("settingsModal")}
105+
/>
106+
<motion.div
107+
initial={{ x: "100%" }}
108+
animate={{ x: 0 }}
109+
exit={{ x: "100%" }}
110+
transition={{ type: "spring", damping: 30, stiffness: 300 }}
111+
className='fixed inset-y-0 right-0 w-full max-w-sm bg-white shadow-lg z-50 overflow-y-auto dark:bg-gray-900 dark:backdrop-blur-xl '
112+
>
113+
<div className='flex flex-col h-full'>
114+
<div className='flex justify-between items-center p-6 border-b border-gray-200 dark:border-b-slate-500/20'>
115+
<h2
116+
className={`text-2xl font-semibold text-green-600 dark:text-gray-100`}
117+
>
118+
{t("settings")}
119+
</h2>
120+
<Button
121+
variant='ghost'
122+
size='icon'
123+
onClick={() => closeModal("settingsModal")}
124+
className='rounded-full'
125+
>
126+
<X className='h-6 w-6' />
127+
</Button>
128+
</div>
129+
<div className='flex-grow overflow-y-auto'>
130+
<nav className='px-4 py-6'>
131+
<ul className='space-y-2'>
132+
{menuItems.map((item, index) => (
133+
<li key={index}>
134+
<Button
135+
variant='ghost'
136+
className={`w-full justify-between text-green-600 hover:bg-green-50 dark:hover:bg-slate-800 rounded-lg py-3 px-4 dark:text-gray-100`}
137+
onClick={() => {
138+
item.action();
139+
closeModal("settingsModal");
140+
}}
141+
>
142+
<span className='flex items-center'>
143+
<item.icon className='mr-3 h-5 w-5' />
144+
{item.label}
145+
</span>
146+
<ChevronRight className='h-5 w-5' />
147+
</Button>
148+
</li>
149+
))}
150+
</ul>
151+
</nav>
152+
</div>
153+
<div className='p-6 border-t border-gray-200 dark:border-slate-700/20'>
154+
<ModeToggle />
155+
</div>
156+
</div>
157+
</motion.div>
158+
</>
159+
)}
160+
</AnimatePresence>
161+
);
104162
}

0 commit comments

Comments
 (0)