@@ -26,33 +109,43 @@ const SubscriptionList = (props) => {
const SubscriptionItem = (props) => {
const subscription = props.subscription;
return (
- <>
-
- {subscription.shortUrl()}
-
-
+
+
+
+
+
+
);
}
const NotificationList = (props) => {
return (
-
+
{props.notifications.map(notification =>
)}
-
+
);
}
const NotificationItem = (props) => {
const notification = props.notification;
return (
- <>
-
{notification.time}
-
{notification.message}
-
+
+
+
+ {notification.time}
+
+ {notification.title &&
+ title: {notification.title}
+ }
+
+ msg: {notification.message}
+
+
+
+
+
+
);
}
@@ -79,6 +172,7 @@ const SubscriptionAddForm = (props) => {
}
const App = () => {
+ const [open, setOpen] = React.useState(true);
const [subscriptions, setSubscriptions] = useState({});
const [selectedSubscription, setSelectedSubscription] = useState(null);
const [connections, setConnections] = useState({});
@@ -96,21 +190,113 @@ const App = () => {
setSelectedSubscription(subscriptions[subscriptionId]);
};
const notifications = (selectedSubscription !== null) ? selectedSubscription.notifications : [];
+ const toggleDrawer = () => {
+ setOpen(!open);
+ };
return (
-
-
-
- ntfy
-
-
-
-
+
+
+
+
+
+
+
+
+
+ ntfy
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ theme.palette.mode === 'light'
+ ? theme.palette.grey[100]
+ : theme.palette.grey[900],
+ flexGrow: 1,
+ height: '100vh',
+ overflow: 'auto',
+ }}
+ >
+
+
+
+
+
+
+ {/* Recent Orders */}
+
+
+
+
+
+
+
+
+
-
+
);
}
diff --git a/web/src/Chart.js b/web/src/Chart.js
deleted file mode 100644
index 8da7f2d9..00000000
--- a/web/src/Chart.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import { LineChart, Line, XAxis, YAxis, Label, ResponsiveContainer } from 'recharts';
-import Title from './Title';
-
-// Generate Sales Data
-function createData(time, amount) {
- return { time, amount };
-}
-
-const data = [
- createData('00:00', 0),
- createData('03:00', 300),
- createData('06:00', 600),
- createData('09:00', 800),
- createData('12:00', 1500),
- createData('15:00', 2000),
- createData('18:00', 2400),
- createData('21:00', 2400),
- createData('24:00', undefined),
-];
-
-export default function Chart() {
- const theme = useTheme();
-
- return (
-
- Today
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/web/src/Dashboard.js b/web/src/Dashboard.js
deleted file mode 100644
index 0c5028c5..00000000
--- a/web/src/Dashboard.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import * as React from 'react';
-import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import MuiDrawer from '@mui/material/Drawer';
-import Box from '@mui/material/Box';
-import MuiAppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import List from '@mui/material/List';
-import Typography from '@mui/material/Typography';
-import Divider from '@mui/material/Divider';
-import IconButton from '@mui/material/IconButton';
-import Badge from '@mui/material/Badge';
-import Container from '@mui/material/Container';
-import Grid from '@mui/material/Grid';
-import Paper from '@mui/material/Paper';
-import Link from '@mui/material/Link';
-import MenuIcon from '@mui/icons-material/Menu';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import NotificationsIcon from '@mui/icons-material/Notifications';
-import { mainListItems, secondaryListItems } from './listItems';
-import Chart from './Chart';
-import Deposits from './Deposits';
-import Orders from './Orders';
-
-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();
-
-function DashboardContent() {
- const [open, setOpen] = React.useState(true);
- const toggleDrawer = () => {
- setOpen(!open);
- };
-
- return (
-
-
-
-
-
-
-
-
-
- Dashboard
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {mainListItems}
-
- {secondaryListItems}
-
-
-
- theme.palette.mode === 'light'
- ? theme.palette.grey[100]
- : theme.palette.grey[900],
- flexGrow: 1,
- height: '100vh',
- overflow: 'auto',
- }}
- >
-
-
-
- {/* Chart */}
-
-
-
-
-
- {/* Recent Deposits */}
-
-
-
-
-
- {/* Recent Orders */}
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default function Dashboard() {
- return
;
-}
diff --git a/web/src/Deposits.js b/web/src/Deposits.js
deleted file mode 100644
index d99bf6eb..00000000
--- a/web/src/Deposits.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import Link from '@mui/material/Link';
-import Typography from '@mui/material/Typography';
-import Title from './Title';
-
-function preventDefault(event) {
- event.preventDefault();
-}
-
-export default function Deposits() {
- return (
-
- Recent Deposits
-
- $3,024.00
-
-
- on 15 March, 2019
-
-
-
- View balance
-
-
-
- );
-}
diff --git a/web/src/Orders.js b/web/src/Orders.js
deleted file mode 100644
index ef989959..00000000
--- a/web/src/Orders.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import * as React from 'react';
-import Link from '@mui/material/Link';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Title from './Title';
-
-// Generate Order Data
-function createData(id, date, name, shipTo, paymentMethod, amount) {
- return { id, date, name, shipTo, paymentMethod, amount };
-}
-
-const rows = [
- createData(
- 0,
- '16 Mar, 2019',
- 'Elvis Presley',
- 'Tupelo, MS',
- 'VISA ⠀•••• 3719',
- 312.44,
- ),
- createData(
- 1,
- '16 Mar, 2019',
- 'Paul McCartney',
- 'London, UK',
- 'VISA ⠀•••• 2574',
- 866.99,
- ),
- createData(2, '16 Mar, 2019', 'Tom Scholz', 'Boston, MA', 'MC ⠀•••• 1253', 100.81),
- createData(
- 3,
- '16 Mar, 2019',
- 'Michael Jackson',
- 'Gary, IN',
- 'AMEX ⠀•••• 2000',
- 654.39,
- ),
- createData(
- 4,
- '15 Mar, 2019',
- 'Bruce Springsteen',
- 'Long Branch, NJ',
- 'VISA ⠀•••• 5919',
- 212.79,
- ),
-];
-
-function preventDefault(event) {
- event.preventDefault();
-}
-
-export default function Orders() {
- return (
-
- Recent Orders
-
-
-
- Date
- Name
- Ship To
- Payment Method
- Sale Amount
-
-
-
- {rows.map((row) => (
-
- {row.date}
- {row.name}
- {row.shipTo}
- {row.paymentMethod}
- {`$${row.amount}`}
-
- ))}
-
-
-
- See more orders
-
-
- );
-}
diff --git a/web/src/index.js b/web/src/index.js
index cbb61b8b..2e62b5fe 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -4,11 +4,9 @@ import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider } from '@mui/material/styles';
import App from './App';
import theme from './theme';
-import Dashboard from "./Dashboard";
ReactDOM.render(
- {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
,
diff --git a/web/src/listItems.js b/web/src/listItems.js
deleted file mode 100644
index 7d4090b3..00000000
--- a/web/src/listItems.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import ListSubheader from '@mui/material/ListSubheader';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-import PeopleIcon from '@mui/icons-material/People';
-import BarChartIcon from '@mui/icons-material/BarChart';
-import LayersIcon from '@mui/icons-material/Layers';
-import AssignmentIcon from '@mui/icons-material/Assignment';
-
-export const mainListItems = (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-
-export const secondaryListItems = (
-
-
- Saved reports
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
diff --git a/web/src/theme.js b/web/src/theme.js
index 981cae51..4b65d130 100644
--- a/web/src/theme.js
+++ b/web/src/theme.js
@@ -5,10 +5,10 @@ import { createTheme } from '@mui/material/styles';
const theme = createTheme({
palette: {
primary: {
- main: '#556cd6',
+ main: '#338574',
},
secondary: {
- main: '#19857b',
+ main: '#338574',
},
error: {
main: red.A400,