refactor(web): remove typescript

2024-02-27 15:23:23 +00:00
parent 636870a075
commit b3ae2d2748
337 changed files with 2067 additions and 4997 deletions
--- a/packages/web/src/components/Layout/index.jsx
+++ b/packages/web/src/components/Layout/index.jsx
@@ -0,0 +1,120 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Stack from '@mui/material/Stack';
+import AppsIcon from '@mui/icons-material/Apps';
+import SwapCallsIcon from '@mui/icons-material/SwapCalls';
+import HistoryIcon from '@mui/icons-material/History';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import ArrowBackIosNew from '@mui/icons-material/ArrowBackIosNew';
+import * as URLS from 'config/urls';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useVersion from 'hooks/useVersion';
+import AppBar from 'components/AppBar';
+import Drawer from 'components/Drawer';
+import useConfig from 'hooks/useConfig';
+const drawerLinks = [
+  {
+    Icon: SwapCallsIcon,
+    primary: 'drawer.flows',
+    to: URLS.FLOWS,
+    dataTest: 'flows-page-drawer-link',
+  },
+  {
+    Icon: AppsIcon,
+    primary: 'drawer.apps',
+    to: URLS.APPS,
+    dataTest: 'apps-page-drawer-link',
+  },
+  {
+    Icon: HistoryIcon,
+    primary: 'drawer.executions',
+    to: URLS.EXECUTIONS,
+    dataTest: 'executions-page-drawer-link',
+  },
+];
+const generateDrawerBottomLinks = async ({
+  disableNotificationsPage,
+  notificationBadgeContent = 0,
+  additionalDrawerLink,
+  additionalDrawerLinkText,
+  formatMessage,
+}) => {
+  const notificationsPageLinkObject = {
+    Icon: NotificationsIcon,
+    primary: formatMessage('settingsDrawer.notifications'),
+    to: URLS.UPDATES,
+    badgeContent: notificationBadgeContent,
+  };
+  const hasAdditionalDrawerLink =
+    additionalDrawerLink && additionalDrawerLinkText;
+  const additionalDrawerLinkObject = {
+    Icon: ArrowBackIosNew,
+    primary: additionalDrawerLinkText || '',
+    to: additionalDrawerLink || '',
+    target: '_blank',
+  };
+  const links = [];
+  if (!disableNotificationsPage) {
+    links.push(notificationsPageLinkObject);
+  }
+  if (hasAdditionalDrawerLink) {
+    links.push(additionalDrawerLinkObject);
+  }
+  return links;
+};
+export default function PublicLayout({ children }) {
+  const version = useVersion();
+  const { config, loading } = useConfig([
+    'disableNotificationsPage',
+    'additionalDrawerLink',
+    'additionalDrawerLinkText',
+  ]);
+  const theme = useTheme();
+  const formatMessage = useFormatMessage();
+  const [bottomLinks, setBottomLinks] = React.useState([]);
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
+  const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
+  const openDrawer = () => setDrawerOpen(true);
+  const closeDrawer = () => setDrawerOpen(false);
+  React.useEffect(() => {
+    async function perform() {
+      const newBottomLinks = await generateDrawerBottomLinks({
+        notificationBadgeContent: version.newVersionCount,
+        disableNotificationsPage: config?.disableNotificationsPage,
+        additionalDrawerLink: config?.additionalDrawerLink,
+        additionalDrawerLinkText: config?.additionalDrawerLinkText,
+        formatMessage,
+      });
+      setBottomLinks(newBottomLinks);
+    }
+    if (loading) return;
+    perform();
+  }, [config, loading, version.newVersionCount]);
+  return (
+    <>
+      <AppBar
+        drawerOpen={isDrawerOpen}
+        onDrawerOpen={openDrawer}
+        onDrawerClose={closeDrawer}
+      />
+
+      <Box sx={{ display: 'flex', height: '100%' }}>
+        <Drawer
+          links={drawerLinks}
+          bottomLinks={bottomLinks}
+          open={isDrawerOpen}
+          onOpen={openDrawer}
+          onClose={closeDrawer}
+        />
+
+        <Stack flex={1}>
+          <Toolbar />
+          {children}
+        </Stack>
+      </Box>
+    </>
+  );
+}