103 lines
2.9 KiB
JavaScript
103 lines
2.9 KiB
JavaScript
import React, { useState, useContext, useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Avatar, Menu, MenuItem, Button, Typography } from '@mui/material';
|
|
import { UserContext } from '../contexts/UserContext';
|
|
import { ThemeContext } from '../contexts/ThemeContext';
|
|
|
|
const UserSettings = () => {
|
|
const { user, setUser } = useContext(UserContext);
|
|
const { themeName, changeTheme } = useContext(ThemeContext);
|
|
const navigate = useNavigate();
|
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
const [themeMenuAnchorEl, setThemeMenuAnchorEl] = useState(null);
|
|
|
|
useEffect(() => {
|
|
const storedUser = localStorage.getItem('user');
|
|
if (storedUser) {
|
|
try {
|
|
setUser(JSON.parse(storedUser));
|
|
} catch (error) {
|
|
console.error("Failed to parse user from localStorage", error);
|
|
}
|
|
}
|
|
}, [setUser]);
|
|
|
|
const handleMenu = (event) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
const handleThemeMenu = (event) => {
|
|
setThemeMenuAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleThemeMenuClose = () => {
|
|
setThemeMenuAnchorEl(null);
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem('user');
|
|
localStorage.removeItem('guilds');
|
|
setUser(null);
|
|
navigate('/');
|
|
};
|
|
|
|
const handleThemeChange = (name) => {
|
|
changeTheme(name);
|
|
handleThemeMenuClose();
|
|
};
|
|
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Button onClick={handleMenu}>
|
|
<Avatar sx={{ width: 48, height: 48 }} src={`https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`} />
|
|
</Button>
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'right',
|
|
}}
|
|
keepMounted
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'right',
|
|
}}
|
|
open={Boolean(anchorEl)}
|
|
onClose={handleClose}
|
|
>
|
|
<MenuItem disabled>
|
|
<Typography>{user.username}</Typography>
|
|
</MenuItem>
|
|
<MenuItem onClick={handleThemeMenu}>Themes</MenuItem>
|
|
<MenuItem onClick={handleLogout}>Logout</MenuItem>
|
|
</Menu>
|
|
<Menu
|
|
anchorEl={themeMenuAnchorEl}
|
|
open={Boolean(themeMenuAnchorEl)}
|
|
onClose={handleThemeMenuClose}
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'left',
|
|
}}
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'right',
|
|
}}
|
|
>
|
|
<MenuItem onClick={() => handleThemeChange('light')} disabled={themeName === 'light'}>Light</MenuItem>
|
|
<MenuItem onClick={() => handleThemeChange('dark')} disabled={themeName === 'dark'}>Dark</MenuItem>
|
|
<MenuItem onClick={() => handleThemeChange('discord')} disabled={themeName === 'discord'}>Discord</MenuItem>
|
|
</Menu>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserSettings; |