feat(user-interface): introduce user interface page (#1226)

2023-08-22 00:11:25 +03:00
parent 9f9ee0bb58
commit da5d594428
10 changed files with 294 additions and 42 deletions
--- a/packages/web/src/pages/UserInterface/index.tsx
+++ b/packages/web/src/pages/UserInterface/index.tsx
@@ -0,0 +1,130 @@
+import * as React from 'react';
+import { useMutation } from '@apollo/client';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import LoadingButton from '@mui/lab/LoadingButton';
+import { useSnackbar } from 'notistack';
+
+import { UPDATE_CONFIG } from 'graphql/mutations/update-config.ee';
+import useConfig from 'hooks/useConfig';
+import PageTitle from 'components/PageTitle';
+import Form from 'components/Form';
+import TextField from 'components/TextField';
+import useFormatMessage from 'hooks/useFormatMessage';
+import ColorInput from 'components/ColorInput';
+import nestObject from 'helpers/nestObject';
+import { Skeleton } from '@mui/material';
+
+type UserInterface = {
+  palette: {
+    primary: {
+      dark: string;
+      light: string;
+      main: string;
+    };
+  };
+  logo: {
+    svgData: string;
+  };
+};
+
+export default function UserInterface(): React.ReactElement {
+  const formatMessage = useFormatMessage();
+  const [updateConfig, { loading }] = useMutation(UPDATE_CONFIG, {
+    refetchQueries: ['GetConfig'],
+  });
+  const { config, loading: configLoading } = useConfig([
+    'palette.primary.main',
+    'palette.primary.light',
+    'palette.primary.dark',
+    'logo.svgData',
+  ]);
+  const { enqueueSnackbar } = useSnackbar();
+
+  const handleUserInterfaceUpdate = async (uiData: Partial<UserInterface>) => {
+    try {
+      await updateConfig({
+        variables: {
+          input: {
+            'palette.primary.main': uiData?.palette?.primary.main,
+            'palette.primary.dark': uiData?.palette?.primary.dark,
+            'palette.primary.light': uiData?.palette?.primary.light,
+            'logo.svgData': uiData?.logo?.svgData,
+          },
+        },
+      });
+
+      enqueueSnackbar(formatMessage('userInterfacePage.successfullyUpdated'), {
+        variant: 'success',
+      });
+    } catch (error) {
+      throw new Error('Failed while updating!');
+    }
+  };
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={9} md={8} lg={6}>
+        <Grid item xs={12} sx={{ mb: [2, 5] }}>
+          <PageTitle>{formatMessage('userInterfacePage.title')}</PageTitle>
+        </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
+          {configLoading && (
+            <Stack direction="column" gap={2}>
+              <Skeleton variant="rounded" height={55} />
+              <Skeleton variant="rounded" height={55} />
+              <Skeleton variant="rounded" height={55} />
+              <Skeleton variant="rounded" height={85} />
+              <Skeleton variant="rounded" height={45} />
+            </Stack>
+          )}
+          {!configLoading && (
+            <Form
+              onSubmit={handleUserInterfaceUpdate}
+              defaultValues={nestObject<UserInterface>(config)}
+            >
+              <Stack direction="column" gap={2}>
+                <ColorInput
+                  name="palette.primary.main"
+                  label={formatMessage('userInterfacePage.mainColor')}
+                  fullWidth
+                />
+
+                <ColorInput
+                  name="palette.primary.dark"
+                  label={formatMessage('userInterfacePage.darkColor')}
+                  fullWidth
+                />
+
+                <ColorInput
+                  name="palette.primary.light"
+                  label={formatMessage('userInterfacePage.lightColor')}
+                  fullWidth
+                />
+
+                <TextField
+                  name="logo.svgData"
+                  label={formatMessage('userInterfacePage.svgData')}
+                  multiline
+                  fullWidth
+                />
+
+                <LoadingButton
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  sx={{ boxShadow: 2 }}
+                  loading={loading}
+                >
+                  {formatMessage('userInterfacePage.submit')}
+                </LoadingButton>
+              </Stack>
+            </Form>
+          )}
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}