import * as React from 'react';
import {useState} from 'react';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import Subscription from './Subscription';
import WsConnection from './WsConnection';
import {createTheme, styled, ThemeProvider} from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import MuiDrawer from '@mui/material/Drawer';
import MuiAppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
import List from '@mui/material/List';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import Badge from '@mui/material/Badge';
import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';
import MenuIcon from '@mui/icons-material/Menu';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import NotificationsIcon from '@mui/icons-material/Notifications';
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import ListItemButton from "@mui/material/ListItemButton";
import SettingsIcon from "@mui/icons-material/Settings";
import AddIcon from "@mui/icons-material/Add";
import Card from "@mui/material/Card";
import {Button, CardActions, CardContent, Stack} from "@mui/material";
function Copyright(props) {
return (
{'Copyright © '}
Your Website
{' '}
{new Date().getFullYear()}
{'.'}
);
}
const drawerWidth = 240;
const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== 'open',
})(({ theme, open }) => ({
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(open && {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
}),
}));
const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
({ theme, open }) => ({
'& .MuiDrawer-paper': {
position: 'relative',
whiteSpace: 'nowrap',
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
boxSizing: 'border-box',
...(!open && {
overflowX: 'hidden',
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
width: theme.spacing(7),
[theme.breakpoints.up('sm')]: {
width: theme.spacing(9),
},
}),
},
}),
);
const mdTheme = createTheme();
const SubscriptionNav = (props) => {
const subscriptions = props.subscriptions;
return (
{Object.keys(subscriptions).map(id =>
props.handleSubscriptionClick(id)}
/>)
}
);
}
const SubscriptionItem = (props) => {
const subscription = props.subscription;
return (
);
}
const NotificationList = (props) => {
return (
{props.notifications.map(notification =>
)}
);
}
const NotificationItem = (props) => {
const notification = props.notification;
return (
{notification.time}
{notification.title &&
title: {notification.title}
}
msg: {notification.message}
);
}
const defaultBaseUrl = "https://ntfy.sh"
const SubscriptionAddForm = (props) => {
const [topic, setTopic] = useState("");
const handleSubmit = (ev) => {
ev.preventDefault();
props.onSubmit(new Subscription(defaultBaseUrl, topic));
setTopic('');
}
return (
);
}
const App = () => {
const [open, setOpen] = React.useState(true);
const [subscriptions, setSubscriptions] = useState({});
const [selectedSubscription, setSelectedSubscription] = useState(null);
const [connections, setConnections] = useState({});
const subscriptionChanged = (subscription) => {
setSubscriptions(prev => ({...prev, [subscription.id]: subscription})); // Fake-replace
};
const addSubscription = (subscription) => {
const connection = new WsConnection(subscription, subscriptionChanged);
setSubscriptions(prev => ({...prev, [subscription.id]: subscription}));
setConnections(prev => ({...prev, [connection.id]: connection}));
connection.start();
};
const handleSubscriptionClick = (subscriptionId) => {
console.log(`handleSubscriptionClick ${subscriptionId}`)
setSelectedSubscription(subscriptions[subscriptionId]);
};
const notifications = (selectedSubscription !== null) ? selectedSubscription.notifications : [];
const toggleDrawer = () => {
setOpen(!open);
};
return (
ntfy
theme.palette.mode === 'light'
? theme.palette.grey[100]
: theme.palette.grey[900],
flexGrow: 1,
height: '100vh',
overflow: 'auto',
}}
>
{/* Recent Orders */}
);
}
export default App;