mirror of
https://github.com/narrrl/holy-flavor-rater.git
synced 2026-11-04 08:57:01 +01:00
584 lines
21 KiB
TypeScript
584 lines
21 KiB
TypeScript
import React, { Suspense, lazy, useEffect, useState } from 'react';
|
|
import { Routes, Route, Link, useNavigate } from 'react-router-dom';
|
|
import {
|
|
Typography,
|
|
Button,
|
|
Box,
|
|
IconButton,
|
|
Avatar,
|
|
Menu,
|
|
MenuItem,
|
|
Drawer,
|
|
Divider,
|
|
List,
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemText,
|
|
Collapse,
|
|
CircularProgress,
|
|
ListItemAvatar,
|
|
ListSubheader,
|
|
Badge,
|
|
alpha,
|
|
useMediaQuery,
|
|
useTheme as useMuiTheme,
|
|
} from '@mui/material';
|
|
import { GlassAppBar } from './components/ui';
|
|
import MenuIcon from '@mui/icons-material/Menu';
|
|
import NotificationsIcon from '@mui/icons-material/Notifications';
|
|
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
|
|
import ExpandLess from '@mui/icons-material/ExpandLess';
|
|
import ExpandMore from '@mui/icons-material/ExpandMore';
|
|
import { useTranslation } from 'react-i18next';
|
|
import api from './lib/api';
|
|
import Footer from './components/Footer';
|
|
import CookieBanner from './components/CookieBanner';
|
|
import { formatDate } from './utils/date';
|
|
import { GlobalSearch } from './app/GlobalSearch';
|
|
import { useAuth } from './hooks/useAuth';
|
|
import { useTheme } from './hooks/useTheme';
|
|
import { useNotifications } from './hooks/useNotifications';
|
|
import type { Notification } from './contexts/NotificationContext';
|
|
import type { CatppuccinTheme } from './theme';
|
|
|
|
const MainPage = lazy(() => import('./pages/MainPage'));
|
|
const CategoryFlavors = lazy(() => import('./pages/categories/CategoryFlavors'));
|
|
const FlavorDetail = lazy(() => import('./pages/flavors/FlavorDetail'));
|
|
const Dashboard = lazy(() => import('./pages/Dashboard'));
|
|
const PublicProfile = lazy(() => import('./pages/PublicProfile'));
|
|
const CommunityFeed = lazy(() => import('./pages/CommunityFeed'));
|
|
const About = lazy(() => import('./pages/About'));
|
|
const Privacy = lazy(() => import('./pages/Privacy'));
|
|
const Login = lazy(() => import('./pages/Login'));
|
|
const Settings = lazy(() => import('./pages/Settings'));
|
|
const Support = lazy(() => import('./pages/Support'));
|
|
const VerifyEmail = lazy(() => import('./pages/VerifyEmail'));
|
|
const AdminDashboard = lazy(() => import('./pages/AdminDashboard'));
|
|
const AdminUserDetail = lazy(() => import('./pages/AdminUserDetail'));
|
|
const AdminRatingDetail = lazy(() => import('./pages/AdminRatingDetail'));
|
|
const AdminReplyDetail = lazy(() => import('./pages/AdminReplyDetail'));
|
|
|
|
const App: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const muiTheme = useMuiTheme();
|
|
const { user, following, loadingUser, logout } = useAuth();
|
|
const { themeName, handleThemeChange } = useTheme();
|
|
const { notifications, markAllRead, markRead } = useNotifications();
|
|
|
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
|
const [notifAnchorEl, setNotifAnchorEl] = useState<null | HTMLElement>(null);
|
|
const [catAnchorEl, setCatAnchorEl] = useState<null | HTMLElement>(null);
|
|
const [categories, setCategories] = useState<{ name: string; slug: string }[]>([]);
|
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
const [catOpen, setCatOpen] = useState(false);
|
|
const [adminMode, setAdminMode] = useState(localStorage.getItem('admin-mode') === 'true');
|
|
const isMobile = useMediaQuery('(max-width:1150px)');
|
|
|
|
useEffect(() => {
|
|
api
|
|
.get('categories/')
|
|
.then((res) => {
|
|
const data = Array.isArray(res.data) ? res.data : res.data.results || [];
|
|
setCategories(data);
|
|
})
|
|
.catch(() => setCategories([]));
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
document.body.style.backgroundColor = muiTheme.palette.background.default;
|
|
document.body.style.color = muiTheme.palette.text.primary;
|
|
}, [muiTheme]);
|
|
|
|
const toggleAdminMode = () => {
|
|
const newVal = !adminMode;
|
|
setAdminMode(newVal);
|
|
localStorage.setItem('admin-mode', String(newVal));
|
|
};
|
|
|
|
const onThemeChange = async (name: CatppuccinTheme) => {
|
|
await handleThemeChange(name, !!user);
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
const handleNotificationClick = async (notif: Notification) => {
|
|
if (!notif.is_read) await markRead(notif.id);
|
|
setNotifAnchorEl(null);
|
|
if (notif.notification_type.startsWith('ticket')) {
|
|
navigate('/support');
|
|
} else if (notif.notification_type === 'profile_comment') {
|
|
navigate(`/profile/${user?.username}`);
|
|
} else if (notif.notification_type === 'follow') {
|
|
navigate(`/profile/${notif.actor_username}`);
|
|
} else if (notif.flavor_id) {
|
|
window.location.href = `/flavor/${notif.flavor_id}`;
|
|
}
|
|
};
|
|
|
|
const drawer = (
|
|
<Box sx={{ width: 280 }} role="presentation">
|
|
<Box sx={{ p: 2, display: 'flex', alignItems: 'center' }}>
|
|
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>
|
|
<Link
|
|
to="/"
|
|
onClick={() => setDrawerOpen(false)}
|
|
style={{ color: 'inherit', textDecoration: 'none' }}
|
|
>
|
|
Holy Flavors Archive
|
|
</Link>
|
|
</Typography>
|
|
</Box>
|
|
<Divider />
|
|
<List>
|
|
<ListItem disablePadding>
|
|
<ListItemButton component={Link} to="/" onClick={() => setDrawerOpen(false)}>
|
|
<ListItemText primary={t('nav.home')} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
|
|
{user && (
|
|
<ListItem disablePadding>
|
|
<ListItemButton component={Link} to="/community" onClick={() => setDrawerOpen(false)}>
|
|
<ListItemText primary={t('nav.community')} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
)}
|
|
|
|
<ListItemButton onClick={() => setCatOpen(!catOpen)}>
|
|
<ListItemText primary={t('nav.categories')} />
|
|
{catOpen ? <ExpandLess /> : <ExpandMore />}
|
|
</ListItemButton>
|
|
<Collapse in={catOpen} timeout="auto" unmountOnExit>
|
|
<List component="div" disablePadding>
|
|
{categories.map((cat) => (
|
|
<ListItemButton
|
|
key={cat.slug}
|
|
component={Link}
|
|
to={`/category/${cat.slug}`}
|
|
onClick={() => setDrawerOpen(false)}
|
|
sx={{ pl: 4 }}
|
|
>
|
|
<ListItemText primary={t(`categories.${cat.slug}`, { defaultValue: cat.name })} />
|
|
</ListItemButton>
|
|
))}
|
|
</List>
|
|
</Collapse>
|
|
|
|
<Divider sx={{ my: 1 }} />
|
|
|
|
{user ? (
|
|
<>
|
|
<ListItem disablePadding>
|
|
<ListItemButton
|
|
component={Link}
|
|
to={`/profile/${user.username}`}
|
|
onClick={() => setDrawerOpen(false)}
|
|
>
|
|
<ListItemText
|
|
primary={t('nav.profile')}
|
|
secondary={
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }}>
|
|
<Avatar src={user.avatar || undefined} sx={{ width: 20, height: 20 }}>
|
|
{user.username.charAt(0).toUpperCase()}
|
|
</Avatar>
|
|
<Typography variant="caption" color="text.secondary">
|
|
{user.username}
|
|
</Typography>
|
|
</Box>
|
|
}
|
|
/>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
<ListItem disablePadding>
|
|
<ListItemButton component={Link} to="/dashboard" onClick={() => setDrawerOpen(false)}>
|
|
<ListItemText primary={t('nav.dashboard')} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
<ListItem disablePadding>
|
|
<ListItemButton component={Link} to="/settings" onClick={() => setDrawerOpen(false)}>
|
|
<ListItemText primary={t('nav.settings')} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
<ListItem disablePadding>
|
|
<ListItemButton component={Link} to="/support" onClick={() => setDrawerOpen(false)}>
|
|
<ListItemText primary={t('support.title')} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
|
|
{user.is_superuser && (
|
|
<ListItem disablePadding>
|
|
<ListItemButton onClick={toggleAdminMode}>
|
|
<ListItemText
|
|
primary={t('admin.adminMode')}
|
|
secondary={adminMode ? 'ON' : 'OFF'}
|
|
sx={{ color: adminMode ? 'primary.main' : 'inherit' }}
|
|
/>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
)}
|
|
|
|
{user.is_superuser && (
|
|
<ListItem disablePadding>
|
|
<ListItemButton
|
|
component={Link}
|
|
to="/admin-panel"
|
|
onClick={() => setDrawerOpen(false)}
|
|
>
|
|
<ListItemText
|
|
primary="Admin Panel"
|
|
sx={{ color: 'primary.main', fontWeight: 'bold' }}
|
|
/>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
)}
|
|
|
|
{following.length > 0 && (
|
|
<>
|
|
<Divider sx={{ my: 1 }} />
|
|
<ListSubheader
|
|
sx={{ bgcolor: 'transparent', fontWeight: 'bold', lineHeight: '32px' }}
|
|
>
|
|
{t('nav.following')}
|
|
</ListSubheader>
|
|
{following.map((f) => (
|
|
<ListItem key={f.id} disablePadding>
|
|
<ListItemButton
|
|
component={Link}
|
|
to={`/profile/${f.username}`}
|
|
onClick={() => setDrawerOpen(false)}
|
|
>
|
|
<ListItemAvatar>
|
|
<Avatar src={f.avatar || undefined} sx={{ width: 32, height: 32 }}>
|
|
{!f.avatar && f.username.charAt(0).toUpperCase()}
|
|
</Avatar>
|
|
</ListItemAvatar>
|
|
<ListItemText
|
|
primary={f.username}
|
|
primaryTypographyProps={{ variant: 'body2' }}
|
|
/>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
))}
|
|
</>
|
|
)}
|
|
|
|
<ListItem disablePadding>
|
|
<ListItemButton onClick={logout}>
|
|
<ListItemText primary={t('nav.logout')} sx={{ color: 'error.main' }} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
</>
|
|
) : (
|
|
<ListItem disablePadding>
|
|
<ListItemButton component={Link} to="/login" onClick={() => setDrawerOpen(false)}>
|
|
<ListItemText primary={t('nav.login')} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
)}
|
|
</List>
|
|
</Box>
|
|
);
|
|
|
|
const notificationsMenu = (
|
|
<>
|
|
<IconButton color="inherit" onClick={(e) => setNotifAnchorEl(e.currentTarget)} sx={{ ml: 1 }}>
|
|
<Badge badgeContent={user?.unread_notifications_count || 0} color="error">
|
|
<NotificationsIcon />
|
|
</Badge>
|
|
</IconButton>
|
|
<Menu
|
|
anchorEl={notifAnchorEl}
|
|
open={Boolean(notifAnchorEl)}
|
|
onClose={() => setNotifAnchorEl(null)}
|
|
elevation={3}
|
|
sx={{ mt: 1 }}
|
|
PaperProps={{ sx: { width: 320, maxHeight: 400, borderRadius: 1 } }}
|
|
>
|
|
<Box
|
|
sx={{
|
|
p: 1.5,
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
borderBottom: '1px solid',
|
|
borderColor: 'divider',
|
|
}}
|
|
>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 'bold' }}>
|
|
Notifications
|
|
</Typography>
|
|
{(user?.unread_notifications_count || 0) > 0 && (
|
|
<Button size="small" onClick={markAllRead}>
|
|
Mark all read
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
{notifications.length === 0 ? (
|
|
<Box sx={{ p: 4, textAlign: 'center' }}>
|
|
<Typography variant="body2" color="text.secondary">
|
|
No notifications yet
|
|
</Typography>
|
|
</Box>
|
|
) : (
|
|
notifications.map((n) => (
|
|
<MenuItem
|
|
key={n.id}
|
|
onClick={() => handleNotificationClick(n)}
|
|
sx={{
|
|
py: 1.5,
|
|
px: 2,
|
|
borderBottom: '1px solid',
|
|
borderColor: 'divider',
|
|
bgcolor: n.is_read ? 'transparent' : alpha(muiTheme.palette.primary.main, 0.05),
|
|
whiteSpace: 'normal',
|
|
display: 'flex',
|
|
gap: 2,
|
|
alignItems: 'flex-start',
|
|
}}
|
|
>
|
|
<Avatar src={n.actor_avatar || undefined} sx={{ width: 32, height: 32 }}>
|
|
{n.actor_username.charAt(0).toUpperCase()}
|
|
</Avatar>
|
|
<Box sx={{ flex: 1 }}>
|
|
<Typography variant="body2" sx={{ lineHeight: 1.4 }}>
|
|
<strong>{n.actor_username}</strong>{' '}
|
|
{n.notification_type === 'reply'
|
|
? `replied to your review on ${n.flavor_name}`
|
|
: n.notification_type === 'mention'
|
|
? `mentioned you on ${n.flavor_name}`
|
|
: n.notification_type === 'follow'
|
|
? t('community.notifFollow')
|
|
: n.notification_type === 'profile_comment'
|
|
? `left a message on your guestbook`
|
|
: n.notification_type === 'ticket_new'
|
|
? t('community.notifTicketNew')
|
|
: user?.is_superuser
|
|
? t('community.notifTicketReplyAdmin')
|
|
: t('community.notifTicketReply')}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary">
|
|
{formatDate(n.created_at)}
|
|
</Typography>
|
|
</Box>
|
|
</MenuItem>
|
|
))
|
|
)}
|
|
</Menu>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
minHeight: '100vh',
|
|
width: '100%',
|
|
overflowX: 'hidden',
|
|
}}
|
|
>
|
|
<GlassAppBar>
|
|
<Typography
|
|
variant="h6"
|
|
component="div"
|
|
sx={{
|
|
fontWeight: 'bold',
|
|
mr: { xs: 0, sm: 2 },
|
|
display: { xs: 'none', sm: 'block' },
|
|
}}
|
|
>
|
|
<Link to="/" style={{ color: 'inherit', textDecoration: 'none' }}>
|
|
<Box component="span" sx={{ display: { xs: 'none', sm: 'inline' } }}>
|
|
Holy Flavors Archive
|
|
</Box>
|
|
<Box component="span" sx={{ display: { xs: 'inline', sm: 'none' } }}>
|
|
HFA
|
|
</Box>
|
|
</Link>
|
|
</Typography>
|
|
|
|
<Box sx={{ display: isMobile ? 'none' : 'flex', ml: 2 }}>
|
|
{user && (
|
|
<Button
|
|
color="inherit"
|
|
component={Link}
|
|
to="/community"
|
|
sx={{
|
|
fontWeight: 'bold',
|
|
textTransform: 'none',
|
|
fontSize: '1rem',
|
|
mr: 2,
|
|
}}
|
|
>
|
|
{t('nav.community')}
|
|
</Button>
|
|
)}
|
|
<Button
|
|
color="inherit"
|
|
endIcon={<ArrowDropDownIcon />}
|
|
onClick={(e) => setCatAnchorEl(e.currentTarget)}
|
|
sx={{ fontWeight: 'bold', textTransform: 'none', fontSize: '1rem' }}
|
|
>
|
|
{t('nav.categories')}
|
|
</Button>
|
|
<Menu
|
|
anchorEl={catAnchorEl}
|
|
open={Boolean(catAnchorEl)}
|
|
onClose={() => setCatAnchorEl(null)}
|
|
elevation={3}
|
|
sx={{ mt: 1 }}
|
|
>
|
|
{categories.map((cat) => (
|
|
<MenuItem
|
|
key={cat.slug}
|
|
component={Link}
|
|
to={`/category/${cat.slug}`}
|
|
onClick={() => setCatAnchorEl(null)}
|
|
>
|
|
{t(`categories.${cat.slug}`, { defaultValue: cat.name })}
|
|
</MenuItem>
|
|
))}
|
|
</Menu>
|
|
</Box>
|
|
|
|
<GlobalSearch />
|
|
|
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
|
{!loadingUser && (
|
|
<>
|
|
{user && notificationsMenu}
|
|
|
|
{user ? (
|
|
<Box sx={{ display: isMobile ? 'none' : 'flex', ml: 1 }}>
|
|
<IconButton color="inherit" onClick={(e) => setAnchorEl(e.currentTarget)}>
|
|
<Avatar
|
|
src={user.avatar || undefined}
|
|
sx={{
|
|
width: 36,
|
|
height: 36,
|
|
border: '2px solid',
|
|
borderColor: 'primary.main',
|
|
}}
|
|
>
|
|
{user.username.charAt(0).toUpperCase()}
|
|
</Avatar>
|
|
</IconButton>
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
open={Boolean(anchorEl)}
|
|
onClose={() => setAnchorEl(null)}
|
|
elevation={3}
|
|
sx={{ mt: 1 }}
|
|
>
|
|
<MenuItem
|
|
component={Link}
|
|
to={`/profile/${user.username}`}
|
|
onClick={() => setAnchorEl(null)}
|
|
>
|
|
{t('nav.profile')}
|
|
</MenuItem>
|
|
<MenuItem component={Link} to="/dashboard" onClick={() => setAnchorEl(null)}>
|
|
{t('nav.dashboard')}
|
|
</MenuItem>
|
|
<MenuItem component={Link} to="/settings" onClick={() => setAnchorEl(null)}>
|
|
{t('nav.settings')}
|
|
</MenuItem>
|
|
<MenuItem component={Link} to="/support" onClick={() => setAnchorEl(null)}>
|
|
{t('support.title')}
|
|
</MenuItem>
|
|
{user.is_superuser && (
|
|
<MenuItem
|
|
onClick={toggleAdminMode}
|
|
sx={{ color: adminMode ? 'primary.main' : 'inherit' }}
|
|
>
|
|
{t('admin.adminMode')}: {adminMode ? 'ON' : 'OFF'}
|
|
</MenuItem>
|
|
)}
|
|
{user.is_superuser && (
|
|
<MenuItem
|
|
component={Link}
|
|
to="/admin-panel"
|
|
onClick={() => setAnchorEl(null)}
|
|
sx={{ fontWeight: 'bold', color: 'primary.main' }}
|
|
>
|
|
Admin Panel
|
|
</MenuItem>
|
|
)}
|
|
<Divider />
|
|
<MenuItem onClick={logout} sx={{ color: 'error.main' }}>
|
|
{t('nav.logout')}
|
|
</MenuItem>
|
|
</Menu>
|
|
</Box>
|
|
) : (
|
|
<Box sx={{ display: isMobile ? 'none' : 'block' }}>
|
|
<Button variant="contained" component={Link} to="/login" sx={{ borderRadius: 2 }}>
|
|
Login
|
|
</Button>
|
|
</Box>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{isMobile && (
|
|
<IconButton color="inherit" onClick={() => setDrawerOpen(true)} sx={{ ml: 1 }}>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
)}
|
|
</Box>
|
|
</GlassAppBar>
|
|
|
|
<Drawer anchor="right" open={drawerOpen} onClose={() => setDrawerOpen(false)}>
|
|
{drawer}
|
|
</Drawer>
|
|
|
|
<Box sx={{ flexGrow: 1, width: '100%' }}>
|
|
<Suspense
|
|
fallback={
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 8 }}>
|
|
<CircularProgress />
|
|
</Box>
|
|
}
|
|
>
|
|
<Routes>
|
|
<Route path="/" element={<MainPage adminMode={adminMode} />} />
|
|
<Route path="/category/:slug" element={<CategoryFlavors />} />
|
|
<Route path="/flavor/:id" element={<FlavorDetail adminMode={adminMode} />} />
|
|
<Route path="/profile/:username" element={<PublicProfile adminMode={adminMode} />} />
|
|
<Route path="/community" element={<CommunityFeed adminMode={adminMode} />} />
|
|
<Route path="/about" element={<About />} />
|
|
<Route path="/privacy" element={<Privacy />} />
|
|
<Route path="/dashboard" element={<Dashboard />} />
|
|
<Route
|
|
path="/settings"
|
|
element={<Settings themeName={themeName} onThemeChange={onThemeChange} />}
|
|
/>
|
|
<Route path="/support" element={<Support />} />
|
|
<Route path="/verify-email" element={<VerifyEmail />} />
|
|
<Route path="/admin-panel" element={<AdminDashboard />} />
|
|
<Route path="/admin-panel/user/:id" element={<AdminUserDetail />} />
|
|
<Route path="/admin-panel/rating/:id" element={<AdminRatingDetail />} />
|
|
<Route path="/admin-panel/reply/:id" element={<AdminReplyDetail />} />
|
|
<Route path="/login" element={<Login />} />
|
|
<Route
|
|
path="*"
|
|
element={
|
|
<Box sx={{ p: 4, textAlign: 'center' }}>
|
|
<Typography variant="h5">404 - Page Not Found</Typography>
|
|
<Button component={Link} to="/" sx={{ mt: 2 }}>
|
|
Back to Home
|
|
</Button>
|
|
</Box>
|
|
}
|
|
/>
|
|
</Routes>
|
|
</Suspense>
|
|
</Box>
|
|
<Footer />
|
|
<CookieBanner onThemeChange={(name) => onThemeChange(name)} currentTheme={themeName} />
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default App;
|