feat: Add dummy pages

packages/web/src/components/App/index.tsx

@@ -1,10 +0,0 @@
-import { FormattedMessage } from 'react-intl';
-import Layout from 'components/Layout';
-
-export default function App() {
-  return (
-    <Layout>
-      <FormattedMessage id="welcomeText" />
-    </Layout>
-  );
-}

packages/web/src/components/AppRow/index.tsx

@@ -0,0 +1,28 @@
+import Card from '@mui/material/Card';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+
+type AppRowProps = {
+  icon?: React.ReactNode;
+  name: string;
+  connectionNumber?: number;
+  flowNumber?: number;
+}
+
+export default function AppRow(props: AppRowProps) {
+  const { name } = props;
+
+  return (
+    <Card sx={{ my: 1 }}>
+      <CardActionArea>
+
+       <CardContent>
+          <Typography gutterBottom variant="h6" component="div">
+            {name}
+          </Typography>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+}

packages/web/src/components/Container/index.tsx

@@ -0,0 +1,11 @@
+import MuiContainer, { ContainerProps } from '@mui/material/Container';
+
+export default function Container(props: ContainerProps) {
+  return (
+    <MuiContainer {...props} />
+  );
+};
+
+Container.defaultProps = {
+  maxWidth: 'lg'
+};

packages/web/src/components/Layout/index.tsx

@@ -19,7 +19,7 @@ export default function Layout({ children }: LayoutProps) {
       <Box sx={{ display: 'flex', }}>
         <Drawer open={isDrawerOpen} />
 
-        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <Box sx={{ flex: 1 }}>
           <Toolbar />
 
           {children}

packages/web/src/components/PageTitle/index.tsx

@@ -0,0 +1,15 @@
+import Typography from '@mui/material/Typography';
+
+type PageTitleProps = {
+  children: React.ReactNode;
+};
+
+export default function PageTitle(props: PageTitleProps) {
+  const { children } = props;
+
+  return (
+    <Typography variant="h4">
+      {children}
+    </Typography>
+  );
+}

packages/web/src/index.tsx

@@ -1,18 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from 'components/App';
-import reportWebVitals from './reportWebVitals';
+import Layout from 'components/Layout';
 import ThemeProvider from 'components/ThemeProvider';
 import IntlProvider from 'components/IntlProvider';
 import ApolloProvider from 'components/ApolloProvider';
 import Router from 'components/Router';
+import routes from 'routes';
+import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <ApolloProvider>
     <IntlProvider>
       <ThemeProvider>
         <Router>
-          <App />
+          <Layout>
+            {routes}
+          </Layout>
         </Router>
       </ThemeProvider>
     </IntlProvider>
@@ -20,7 +23,6 @@ ReactDOM.render(
   document.getElementById('root')
 )
 
-
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

packages/web/src/locales/en.json

@@ -4,6 +4,6 @@
   "welcomeText": "Here comes the dashboard homepage.",
   "drawer.dashboard": "Dashboard",
   "drawer.flows": "Flows",
-  "drawer.apps": "Apps",
+  "drawer.apps": "My Apps",
   "drawer.explore": "Explore"
 }

packages/web/src/pages/Applications/index.tsx

@@ -0,0 +1,19 @@
+import Box from '@mui/material/Box';
+import Container from 'components/Container';
+import PageTitle from 'components/PageTitle';
+import AppRow from 'components/AppRow';
+
+export default function Applications() {
+  return (
+    <Box sx={{ py: 3 }}>
+      <Container>
+        <PageTitle>Applications</PageTitle>
+
+        <AppRow name="Google Calendar" />
+        <AppRow name="Slack" />
+        <AppRow name="Twitch" />
+        <AppRow name="Twitter" />
+      </Container>
+    </Box>
+  );
+};

packages/web/src/pages/Dashboard/index.tsx

@@ -0,0 +1,3 @@
+export default function Dashboard() {
+  return (<>Dashboard</>);
+};

packages/web/src/pages/Explore/index.tsx

@@ -0,0 +1,3 @@
+export default function Explore() {
+  return (<>Explore</>);
+};

packages/web/src/pages/Flows/index.tsx

@@ -0,0 +1,3 @@
+export default function Flows() {
+  return (<>Flows</>);
+};

packages/web/src/routes.tsx

@@ -0,0 +1,34 @@
+import { Route, Switch, Redirect } from "react-router";
+import Dashboard from 'pages/Dashboard';
+import Applications from 'pages/Applications';
+import Flows from 'pages/Flows';
+import Explore from 'pages/Explore';
+import * as URLS from 'config/urls';
+
+export default (
+  <Switch>
+    <Route path={URLS.DASHBOARD}>
+      <Dashboard />
+    </Route>
+
+    <Route path={URLS.FLOWS}>
+      <Flows />
+    </Route>
+
+    <Route path={URLS.APPS}>
+      <Applications />
+    </Route>
+
+    <Route path={URLS.EXPLORE}>
+      <Explore />
+    </Route>
+
+    <Route exact path="/">
+      <Redirect to={URLS.DASHBOARD} />
+    </Route>
+
+    <Route>
+      404
+    </Route>
+  </Switch>
+);