pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-22 09:51:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Visual edit in Lovable

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-28 20:18:13 +00:00
parent f904be9a8d
commit 8bd617ddcd
1 changed files with 55 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
src/components/settings/NotificationsTab.tsx
View File

@@ -9,7 +9,6 @@ import { useToast } from '@/hooks/use-toast';
import { useAuth } from '@/hooks/useAuth';
import { supabase } from '@/integrations/supabase/client';
import { Bell, Mail, Smartphone, Volume2 } from 'lucide-react';
interface EmailNotifications {
review_replies: boolean;
new_followers: boolean;
@@ -17,16 +16,18 @@ interface EmailNotifications {
weekly_digest: boolean;
monthly_digest: boolean;
}
interface PushNotifications {
browser_enabled: boolean;
new_content: boolean;
social_updates: boolean;
}
export function NotificationsTab() {
const { user } = useAuth();
const { toast } = useToast();
const {
user
} = useAuth();
const {
toast
} = useToast();
const [loading, setLoading] = useState(false);
const [emailNotifications, setEmailNotifications] = useState<EmailNotifications>({
review_replies: true,
@@ -40,26 +41,20 @@ export function NotificationsTab() {
new_content: true,
social_updates: true
});
useEffect(() => {
fetchNotificationPreferences();
}, [user]);
const fetchNotificationPreferences = async () => {
if (!user) return;
try {
const { data, error } = await supabase
.from('user_preferences')
.select('email_notifications, push_notifications')
.eq('user_id', user.id)
.maybeSingle();
const {
data,
error
} = await supabase.from('user_preferences').select('email_notifications, push_notifications').eq('user_id', user.id).maybeSingle();
if (error && error.code !== 'PGRST116') {
console.error('Error fetching notification preferences:', error);
return;
}
if (data) {
if (data.email_notifications) {
setEmailNotifications(data.email_notifications as unknown as EmailNotifications);
@@ -75,49 +70,46 @@ export function NotificationsTab() {
console.error('Error fetching notification preferences:', error);
}
};
const initializePreferences = async () => {
if (!user) return;
try {
const { error } = await supabase
.from('user_preferences')
.insert([{
user_id: user.id,
email_notifications: emailNotifications as any,
push_notifications: pushNotifications as any
}]);
const {
error
} = await supabase.from('user_preferences').insert([{
user_id: user.id,
email_notifications: emailNotifications as any,
push_notifications: pushNotifications as any
}]);
if (error) throw error;
} catch (error) {
console.error('Error initializing preferences:', error);
}
};
const updateEmailNotification = (key: keyof EmailNotifications, value: boolean) => {
setEmailNotifications(prev => ({ ...prev, [key]: value }));
setEmailNotifications(prev => ({
...prev,
[key]: value
}));
};
const updatePushNotification = (key: keyof PushNotifications, value: boolean) => {
setPushNotifications(prev => ({ ...prev, [key]: value }));
setPushNotifications(prev => ({
...prev,
[key]: value
}));
};
const saveNotificationPreferences = async () => {
if (!user) return;
setLoading(true);
try {
const { error } = await supabase
.from('user_preferences')
.upsert([{
user_id: user.id,
email_notifications: emailNotifications as any,
push_notifications: pushNotifications as any,
updated_at: new Date().toISOString()
}]);
const {
error
} = await supabase.from('user_preferences').upsert([{
user_id: user.id,
email_notifications: emailNotifications as any,
push_notifications: pushNotifications as any,
updated_at: new Date().toISOString()
}]);
if (error) throw error;
toast({
title: 'Preferences saved',
description: 'Your notification preferences have been updated.'
@@ -132,7 +124,6 @@ export function NotificationsTab() {
setLoading(false);
}
};
const requestPushPermission = async () => {
if ('Notification' in window) {
const permission = await Notification.requestPermission();
@@ -151,9 +142,7 @@ export function NotificationsTab() {
}
}
};
return (
<div className="space-y-8">
return <div className="space-y-8">
{/* Email Notifications */}
<div className="space-y-4">
<div className="flex items-center gap-2">
@@ -175,10 +164,7 @@ export function NotificationsTab() {
Get notified when someone replies to your reviews
</p>
</div>
<Switch
checked={emailNotifications.review_replies}
onCheckedChange={(checked) => updateEmailNotification('review_replies', checked)}
/>
<Switch checked={emailNotifications.review_replies} onCheckedChange={checked => updateEmailNotification('review_replies', checked)} />
</div>
<div className="flex items-center justify-between">
@@ -188,10 +174,7 @@ export function NotificationsTab() {
Get notified when someone follows you
</p>
</div>
<Switch
checked={emailNotifications.new_followers}
onCheckedChange={(checked) => updateEmailNotification('new_followers', checked)}
/>
<Switch checked={emailNotifications.new_followers} onCheckedChange={checked => updateEmailNotification('new_followers', checked)} />
</div>
<div className="flex items-center justify-between">
@@ -201,10 +184,7 @@ export function NotificationsTab() {
Important updates and announcements from ThrillWiki
</p>
</div>
<Switch
checked={emailNotifications.system_announcements}
onCheckedChange={(checked) => updateEmailNotification('system_announcements', checked)}
/>
<Switch checked={emailNotifications.system_announcements} onCheckedChange={checked => updateEmailNotification('system_announcements', checked)} />
</div>
<Separator />
@@ -216,10 +196,7 @@ export function NotificationsTab() {
Weekly summary of new parks, rides, and community activity
</p>
</div>
<Switch
checked={emailNotifications.weekly_digest}
onCheckedChange={(checked) => updateEmailNotification('weekly_digest', checked)}
/>
<Switch checked={emailNotifications.weekly_digest} onCheckedChange={checked => updateEmailNotification('weekly_digest', checked)} />
</div>
<div className="flex items-center justify-between">
@@ -229,10 +206,7 @@ export function NotificationsTab() {
Monthly roundup of popular content and your activity stats
</p>
</div>
<Switch
checked={emailNotifications.monthly_digest}
onCheckedChange={(checked) => updateEmailNotification('monthly_digest', checked)}
/>
<Switch checked={emailNotifications.monthly_digest} onCheckedChange={checked => updateEmailNotification('monthly_digest', checked)} />
</div>
</CardContent>
</Card>
@@ -262,30 +236,20 @@ export function NotificationsTab() {
</p>
</div>
<div className="flex items-center gap-2">
{!pushNotifications.browser_enabled && (
<Button
variant="outline"
size="sm"
onClick={requestPushPermission}
>
{!pushNotifications.browser_enabled && <Button variant="outline" size="sm" onClick={requestPushPermission}>
Enable
</Button>
)}
<Switch
checked={pushNotifications.browser_enabled}
onCheckedChange={(checked) => {
if (!checked) {
updatePushNotification('browser_enabled', false);
} else {
requestPushPermission();
}
}}
/>
</Button>}
<Switch checked={pushNotifications.browser_enabled} onCheckedChange={checked => {
if (!checked) {
updatePushNotification('browser_enabled', false);
} else {
requestPushPermission();
}
}} />
</div>
</div>
{pushNotifications.browser_enabled && (
<>
{pushNotifications.browser_enabled && <>
<div className="flex items-center justify-between">
<div className="space-y-1">
<Label>New Content</Label>
@@ -293,10 +257,7 @@ export function NotificationsTab() {
Notifications about new parks, rides, and reviews
</p>
</div>
<Switch
checked={pushNotifications.new_content}
onCheckedChange={(checked) => updatePushNotification('new_content', checked)}
/>
<Switch checked={pushNotifications.new_content} onCheckedChange={checked => updatePushNotification('new_content', checked)} />
</div>
<div className="flex items-center justify-between">
@@ -306,43 +267,17 @@ export function NotificationsTab() {
Notifications about followers, replies, and mentions
</p>
</div>
<Switch
checked={pushNotifications.social_updates}
onCheckedChange={(checked) => updatePushNotification('social_updates', checked)}
/>
<Switch checked={pushNotifications.social_updates} onCheckedChange={checked => updatePushNotification('social_updates', checked)} />
</div>
</>
)}
</>}
</CardContent>
</Card>
</div>
<Separator />
{/* Sound Settings */}
<div className="space-y-4">
<div className="flex items-center gap-2">
<Volume2 className="w-5 h-5" />
<h3 className="text-lg font-medium">Sound Settings</h3>
</div>
<Card>
<CardHeader>
<CardDescription>
Configure sound preferences for notifications and interactions.
</CardDescription>
</CardHeader>
<CardContent>
<div className="text-center p-4 text-muted-foreground">
<Volume2 className="w-8 h-8 mx-auto mb-2" />
<p className="text-sm">Sound settings coming soon</p>
<p className="text-xs mt-1">
Configure notification sounds and interaction feedback.
</p>
</div>
</CardContent>
</Card>
</div>
{/* Save Button */}
<div className="flex justify-end">
@@ -350,6 +285,5 @@ export function NotificationsTab() {
{loading ? 'Saving...' : 'Save Notification Preferences'}
</Button>
</div>
</div>
);
</div>;
}