ntfy/web/src/App.js

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';
import ProTip from './ProTip';
import {useState} from "react";

function Copyright() {
    return (
        <Typography variant="body2" color="text.secondary" align="center">
            {'Copyright © '}
            <Link color="inherit" href="https://mui.com/">
                Your Website
            </Link>{' '}
            {new Date().getFullYear()}
            {'.'}
        </Typography>
    );
}

const topicUrl = (baseUrl, topic) => `${baseUrl}/${topic}`;
const shortUrl = (url) => url.replaceAll(/https?:\/\//g, "");
const shortTopicUrl = (baseUrl, topic) => shortUrl(topicUrl(baseUrl, topic))

function SubscriptionList(props) {
    return (
        <div className="subscriptionList">
            {props.subscriptions.map(subscription => <SubscriptionItem key={topicUrl(subscription.base_url, subscription.topic)} {...subscription}/>)}
        </div>
    );
}

function SubscriptionItem(props) {
    return (
        <div>
            <div>{shortTopicUrl(props.base_url, props.topic)}</div>
        </div>
    );
}

function NotificationList(props) {
    return (
        <div className="notificationList">
            {props.notifications.map(notification => <NotificationItem key={notification.id} {...notification}/>)}
            <div className="date">{props.timestamp}</div>
            <div className="message">{props.message}</div>
        </div>
    );
}

function NotificationItem(props) {
    return (
        <div>
            <div className="date">{props.time}</div>
            <div className="message">{props.message}</div>
        </div>
    );
}

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() {
    const [state, setState] = useState({
        subscriptions: [],
    });
    /*const subscriptions = [
        {base_url: "https://ntfy.sh", topic: "mytopic"},
        {base_url: "https://ntfy.sh", topic: "phils_alerts"},
    ];*/
    const notifications = [
        {id: "qGrfmhp3vK", times: 1645193395, message: "Message 1"},
        {id: "m4YYjfxwyT", times: 1645193428, message: "Message 2"}
    ];
    const addSubscription = (newSubscription) => {
        setState(prevState => ({
            subscriptions: [...prevState.subscriptions, newSubscription],
        }));
    }
    return (
        <Container maxWidth="sm">
            <Box sx={{my: 4}}>
                <Typography variant="h4" component="h1" gutterBottom>
                    ntfy
                </Typography>
                <SubscriptionAddForm onSubmit={addSubscription}/>
                <SubscriptionList subscriptions={state.subscriptions}/>
                <NotificationList notifications={notifications}/>
                <ProTip/>
                <Copyright/>
            </Box>
        </Container>
    );
}