diff --git a/packages/web/src/components/Layout/index.tsx b/packages/web/src/components/Layout/index.tsx index 67404800..c4f0cb8f 100644 --- a/packages/web/src/components/Layout/index.tsx +++ b/packages/web/src/components/Layout/index.tsx @@ -7,6 +7,7 @@ import AppsIcon from '@mui/icons-material/Apps'; import SwapCallsIcon from '@mui/icons-material/SwapCalls'; import HistoryIcon from '@mui/icons-material/History'; import ExploreIcon from '@mui/icons-material/Explore'; +import NotificationsIcon from '@mui/icons-material/Notifications'; import * as URLS from 'config/urls'; import AppBar from 'components/AppBar'; @@ -39,6 +40,14 @@ const drawerLinks = [ }, ]; +const drawerBottomLinks = [ + { + Icon: NotificationsIcon, + primary: 'settingsDrawer.notifications', + to: URLS.UPDATES, + }, +] + export default function PublicLayout({ children }: PublicLayoutProps): React.ReactElement { const theme = useTheme(); const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'), { noSsr: true }); @@ -54,6 +63,7 @@ export default function PublicLayout({ children }: PublicLayoutProps): React.Rea DateTime.fromMillis(timestamp).toRelative(); + +export default function NotificationCard(props: NotificationCardProps) { + const { + name, + createdAt, + documentationUrl, + description, + } = props; + + const formatMessage = useFormatMessage(); + const relativeCreatedAt = getHumanlyDate((new Date(createdAt)).getTime()); + const subheader = formatMessage('notification.releasedAt', { relativeDate: relativeCreatedAt }); + + return ( + + + + + + + + + + ); +} diff --git a/packages/web/src/components/PageTitle/index.tsx b/packages/web/src/components/PageTitle/index.tsx index be33eec6..ca9eb530 100644 --- a/packages/web/src/components/PageTitle/index.tsx +++ b/packages/web/src/components/PageTitle/index.tsx @@ -1,16 +1,10 @@ import * as React from 'react'; -import Typography from '@mui/material/Typography'; +import Typography, { TypographyProps } from '@mui/material/Typography'; -type PageTitleProps = { - children: React.ReactNode; -}; +type PageTitleProps = TypographyProps; export default function PageTitle(props: PageTitleProps): React.ReactElement { - const { children } = props; - return ( - - {children} - + ); } \ No newline at end of file diff --git a/packages/web/src/config/app.ts b/packages/web/src/config/app.ts index 7a18be9a..ee9ca9ce 100644 --- a/packages/web/src/config/app.ts +++ b/packages/web/src/config/app.ts @@ -5,6 +5,7 @@ type Config = { const config: Config = { baseUrl: process.env.REACT_APP_BASE_URL as string, graphqlUrl: process.env.REACT_APP_GRAPHQL_URL as string, + notificationsUrl: process.env.REACT_APP_NOTIFICATIONS_URL as string, }; export default config; diff --git a/packages/web/src/config/urls.ts b/packages/web/src/config/urls.ts index 89c0e63b..81da6409 100644 --- a/packages/web/src/config/urls.ts +++ b/packages/web/src/config/urls.ts @@ -31,8 +31,8 @@ export const FLOW_PATTERN = '/flows/:flowId'; export const SETTINGS = '/settings'; export const SETTINGS_DASHBOARD = SETTINGS; -export const SETTINGS_PROFILE = '/settings/profile'; export const PROFILE = 'profile'; - +export const UPDATES = '/updates'; +export const SETTINGS_PROFILE = `${SETTINGS}/${PROFILE}`; export const DASHBOARD = FLOWS; diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index 6b86a817..8bc5fb99 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -10,6 +10,7 @@ "drawer.explore": "Explore", "settingsDrawer.myProfile": "My Profile", "settingsDrawer.goBack": "Go to the dashboard", + "settingsDrawer.notifications": "Notifications", "app.connectionCount": "{count} connections", "app.flowCount": "{count} flows", "app.addConnection": "Add connection", @@ -49,5 +50,7 @@ "profileSettings.confirmNewPassword": "Confirm new password", "profileSettings.updatedEmail": "Your email has been updated.", "profileSettings.updatedPassword": "Your password has been updated.", - "profileSettings.updatePassword": "Update password" + "profileSettings.updatePassword": "Update password", + "notifications.title": "Notifications", + "notification.releasedAt": "Released {relativeDate}" } diff --git a/packages/web/src/pages/Editor/create.tsx b/packages/web/src/pages/Editor/create.tsx index 57555d02..b723122c 100644 --- a/packages/web/src/pages/Editor/create.tsx +++ b/packages/web/src/pages/Editor/create.tsx @@ -29,7 +29,7 @@ export default function CreateFlow(): React.ReactElement { }); const flowId = response.data?.createFlow?.id; - navigate(URLS.FLOW_EDITOR(flowId)); + navigate(URLS.FLOW_EDITOR(flowId), { replace: true }); } initiate(); diff --git a/packages/web/src/pages/Notifications/index.tsx b/packages/web/src/pages/Notifications/index.tsx new file mode 100644 index 00000000..d451681b --- /dev/null +++ b/packages/web/src/pages/Notifications/index.tsx @@ -0,0 +1,56 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; + +import appConfig from 'config/app'; +import Container from 'components/Container'; +import NotificationCard from 'components/NotificationCard'; +import PageTitle from 'components/PageTitle'; +import useFormatMessage from 'hooks/useFormatMessage'; + +interface IUpdate { + name: string; + createdAt: string; + documentationUrl: string; + description: string; +} + +export default function Updates(): React.ReactElement { + const formatMessage = useFormatMessage(); + const [updates, setUpdates] = React.useState([]); + + React.useEffect(() => { + fetch(`${appConfig.notificationsUrl}/notifications.json`) + .then((response) => response.json()) + .then((updates) => { + if (Array.isArray(updates) && updates.length) { + setUpdates(updates); + } + }) + .catch(console.error); + }, []); + + return ( + + + + {formatMessage('notifications.title')} + + + + {updates.map((update: IUpdate) => ( + + ))} + + + + ); +}; diff --git a/packages/web/src/routes.tsx b/packages/web/src/routes.tsx index 2154662e..e4d76522 100644 --- a/packages/web/src/routes.tsx +++ b/packages/web/src/routes.tsx @@ -12,6 +12,8 @@ import Login from 'pages/Login'; import EditorRoutes from 'pages/Editor/routes'; import * as URLS from 'config/urls'; import settingsRoutes from './settingsRoutes'; +import Notifications from 'pages/Notifications'; + export default ( @@ -33,6 +35,8 @@ export default ( } /> + } /> + } />