2022-02-19 03:49:51 +13:00
|
|
|
import * as React 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';
|
2022-02-19 09:47:25 +13:00
|
|
|
import {useEffect, useState} from "react";
|
2022-02-19 08:41:01 +13:00
|
|
|
import Subscription from './Subscription';
|
|
|
|
import WsConnection from './WsConnection';
|
2022-02-19 03:49:51 +13:00
|
|
|
|
2022-02-19 09:47:25 +13:00
|
|
|
const SubscriptionList = (props) => {
|
|
|
|
const subscriptions = props.subscriptions;
|
2022-02-19 03:49:51 +13:00
|
|
|
return (
|
|
|
|
<div className="subscriptionList">
|
2022-02-19 09:47:25 +13:00
|
|
|
{Object.keys(subscriptions).map(id =>
|
|
|
|
<SubscriptionItem
|
|
|
|
key={id}
|
|
|
|
subscription={subscriptions[id]}
|
|
|
|
selected={props.selectedSubscription === subscriptions[id]}
|
|
|
|
onClick={() => props.handleSubscriptionClick(id)}
|
|
|
|
/>)
|
|
|
|
}
|
2022-02-19 03:49:51 +13:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-02-19 09:47:25 +13:00
|
|
|
const SubscriptionItem = (props) => {
|
2022-02-19 08:41:01 +13:00
|
|
|
const subscription = props.subscription;
|
2022-02-19 03:49:51 +13:00
|
|
|
return (
|
2022-02-19 09:47:25 +13:00
|
|
|
<>
|
|
|
|
<div
|
|
|
|
onClick={props.onClick}
|
|
|
|
style={{ fontWeight: props.selected ? 'bold' : '' }}
|
|
|
|
>
|
|
|
|
{subscription.shortUrl()}
|
|
|
|
</div>
|
|
|
|
</>
|
2022-02-19 03:49:51 +13:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-02-19 09:47:25 +13:00
|
|
|
const NotificationList = (props) => {
|
2022-02-19 03:49:51 +13:00
|
|
|
return (
|
|
|
|
<div className="notificationList">
|
2022-02-19 09:47:25 +13:00
|
|
|
{props.notifications.map(notification =>
|
|
|
|
<NotificationItem key={notification.id} notification={notification}/>)}
|
2022-02-19 03:49:51 +13:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-02-19 08:41:01 +13:00
|
|
|
const NotificationItem = (props) => {
|
2022-02-19 09:47:25 +13:00
|
|
|
const notification = props.notification;
|
2022-02-19 03:49:51 +13:00
|
|
|
return (
|
2022-02-19 09:47:25 +13:00
|
|
|
<>
|
|
|
|
<div className="date">{notification.time}</div>
|
|
|
|
<div className="message">{notification.message}</div>
|
|
|
|
</>
|
2022-02-19 03:49:51 +13:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-02-19 08:41:01 +13:00
|
|
|
const defaultBaseUrl = "https://ntfy.sh"
|
|
|
|
|
|
|
|
const SubscriptionAddForm = (props) => {
|
2022-02-19 05:07:04 +13:00
|
|
|
const [topic, setTopic] = useState("");
|
|
|
|
const handleSubmit = (ev) => {
|
|
|
|
ev.preventDefault();
|
2022-02-19 08:41:01 +13:00
|
|
|
props.onSubmit(new Subscription(defaultBaseUrl, topic));
|
|
|
|
setTopic('');
|
2022-02-19 05:07:04 +13:00
|
|
|
}
|
|
|
|
return (
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
value={topic}
|
|
|
|
onChange={ev => setTopic(ev.target.value)}
|
|
|
|
placeholder="Topic name, e.g. phil_alerts"
|
|
|
|
required
|
|
|
|
/>
|
|
|
|
</form>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-02-19 08:41:01 +13:00
|
|
|
const App = () => {
|
2022-02-19 09:47:25 +13:00
|
|
|
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}));
|
2022-02-19 08:41:01 +13:00
|
|
|
connection.start();
|
2022-02-19 09:47:25 +13:00
|
|
|
};
|
|
|
|
const handleSubscriptionClick = (subscriptionId) => {
|
|
|
|
console.log(`handleSubscriptionClick ${subscriptionId}`)
|
|
|
|
setSelectedSubscription(subscriptions[subscriptionId]);
|
|
|
|
};
|
|
|
|
const notifications = (selectedSubscription !== null) ? selectedSubscription.notifications : [];
|
2022-02-19 03:49:51 +13:00
|
|
|
return (
|
|
|
|
<Container maxWidth="sm">
|
|
|
|
<Box sx={{my: 4}}>
|
|
|
|
<Typography variant="h4" component="h1" gutterBottom>
|
|
|
|
ntfy
|
|
|
|
</Typography>
|
2022-02-19 05:07:04 +13:00
|
|
|
<SubscriptionAddForm onSubmit={addSubscription}/>
|
2022-02-19 09:47:25 +13:00
|
|
|
<SubscriptionList
|
|
|
|
subscriptions={subscriptions}
|
|
|
|
selectedSubscription={selectedSubscription}
|
|
|
|
handleSubscriptionClick={handleSubscriptionClick}
|
|
|
|
/>
|
2022-02-19 03:49:51 +13:00
|
|
|
<NotificationList notifications={notifications}/>
|
|
|
|
</Box>
|
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
}
|
2022-02-19 08:41:01 +13:00
|
|
|
|
|
|
|
export default App;
|