Split stuff

web/src/App.js

@@ -3,38 +3,24 @@ 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))
+import Subscription from './Subscription';
+import WsConnection from './WsConnection';
 
 function SubscriptionList(props) {
     return (
         <div className="subscriptionList">
-            {props.subscriptions.map(subscription => <SubscriptionItem key={topicUrl(subscription.base_url, subscription.topic)} {...subscription}/>)}
+            {props.subscriptions.map(subscription =>
+                <SubscriptionItem key={subscription.url} subscription={subscription}/>)}
         </div>
     );
 }
 
 function SubscriptionItem(props) {
+    const subscription = props.subscription;
     return (
         <div>
-            <div>{shortTopicUrl(props.base_url, props.topic)}</div>
+            <div>{subscription.shortUrl()}</div>
         </div>
     );
 }
@@ -49,7 +35,7 @@ function NotificationList(props) {
     );
 }
 
-function NotificationItem(props) {
+const NotificationItem = (props) => {
     return (
         <div>
             <div className="date">{props.time}</div>
@@ -58,14 +44,14 @@ function NotificationItem(props) {
     );
 }
 
-function SubscriptionAddForm(props) {
+const defaultBaseUrl = "https://ntfy.sh"
+
+const SubscriptionAddForm = (props) => {
     const [topic, setTopic] = useState("");
     const handleSubmit = (ev) => {
         ev.preventDefault();
-        props.onSubmit({
-            base_url: "https://ntfy.sh",
-            topic: topic,
-        });
+        props.onSubmit(new Subscription(defaultBaseUrl, topic));
+        setTopic('');
     }
     return (
         <form onSubmit={handleSubmit}>
@@ -80,19 +66,17 @@ function SubscriptionAddForm(props) {
     );
 }
 
-export default function App() {
+const 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) => {
+        const connection = new WsConnection(newSubscription.wsUrl());
+        connection.start();
         setState(prevState => ({
             subscriptions: [...prevState.subscriptions, newSubscription],
         }));
@@ -106,9 +90,9 @@ export default function App() {
                 <SubscriptionAddForm onSubmit={addSubscription}/>
                 <SubscriptionList subscriptions={state.subscriptions}/>
                 <NotificationList notifications={notifications}/>
-                <ProTip/>
-                <Copyright/>
             </Box>
         </Container>
     );
 }
+
+export default App;