Subscription form

This commit is contained in:
Philipp Heckel 2022-02-18 11:07:04 -05:00
parent 4c4e689af4
commit 31e7aa24bc

View file

@ -4,6 +4,7 @@ import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import Link from '@mui/material/Link'; import Link from '@mui/material/Link';
import ProTip from './ProTip'; import ProTip from './ProTip';
import {useState} from "react";
function Copyright() { function Copyright() {
return ( return (
@ -57,22 +58,53 @@ function NotificationItem(props) {
); );
} }
function SubscriptionAddForm(props) {
const [topic, setTopic] = useState("");
const handleSubmit = (ev) => {
ev.preventDefault();
props.onSubmit({
base_url: "https://ntfy.sh",
topic: topic,
});
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={topic}
onChange={ev => setTopic(ev.target.value)}
placeholder="Topic name, e.g. phil_alerts"
required
/>
</form>
);
}
export default function App() { export default function App() {
const subscriptions = [ const [state, setState] = useState({
subscriptions: [],
});
/*const subscriptions = [
{base_url: "https://ntfy.sh", topic: "mytopic"}, {base_url: "https://ntfy.sh", topic: "mytopic"},
{base_url: "https://ntfy.sh", topic: "phils_alerts"}, {base_url: "https://ntfy.sh", topic: "phils_alerts"},
]; ];*/
const notifications = [ const notifications = [
{id: "qGrfmhp3vK", times: 1645193395, message: "Message 1"}, {id: "qGrfmhp3vK", times: 1645193395, message: "Message 1"},
{id: "m4YYjfxwyT", times: 1645193428, message: "Message 2"} {id: "m4YYjfxwyT", times: 1645193428, message: "Message 2"}
]; ];
const addSubscription = (newSubscription) => {
setState(prevState => ({
subscriptions: [...prevState.subscriptions, newSubscription],
}));
}
return ( return (
<Container maxWidth="sm"> <Container maxWidth="sm">
<Box sx={{my: 4}}> <Box sx={{my: 4}}>
<Typography variant="h4" component="h1" gutterBottom> <Typography variant="h4" component="h1" gutterBottom>
ntfy ntfy
</Typography> </Typography>
<SubscriptionList subscriptions={subscriptions}/> <SubscriptionAddForm onSubmit={addSubscription}/>
<SubscriptionList subscriptions={state.subscriptions}/>
<NotificationList notifications={notifications}/> <NotificationList notifications={notifications}/>
<ProTip/> <ProTip/>
<Copyright/> <Copyright/>