Merge pull request #28 from badsyntax/mobile-support

Add more mobile support
badsyntax · Aug 8, 2020 · beeaf51 · beeaf51
2 parents 15aae74 + 96afeea
commit beeaf51
Show file tree

Hide file tree

Showing 48 changed files with 1,198 additions and 1,145 deletions.
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -62,18 +62,15 @@ export async function handleRequestError(
   dispatch: AppDispatch,
   onErrorAction: ActionCreatorWithPayload<unknown>
 ): Promise<void> {
-  if (!(response instanceof Error)) {
-    const { status } = response;
-    if (status === 403) {
-      dispatch(
-        updateAuth({
-          username: '',
-          password: '',
-          isAuthenticated: false,
-          error: 'Your token is no longer valid.',
-        })
-      );
-    }
+  if (!(response instanceof Error) && response.status === 403) {
+    dispatch(
+      updateAuth({
+        username: '',
+        password: '',
+        isAuthenticated: false,
+        error: 'Your token is no longer valid.',
+      })
+    );
   } else {
     dispatch(onErrorAction(await getRequestFailMessage(response)));
   }

diff --git a/src/components/routes/MainRoute/WebRoute/WebSections.tsx b/src/components/routes/MainRoute/WebRoute/WebSections.tsx
@@ -1,6 +1,4 @@
-import { PivotItem, PivotLinkSize, ScreenWidthMinLarge } from '@fluentui/react';
 import React, { useState } from 'react';
-import { useMediaQuery } from 'react-responsive';
 import { Route, Switch, useRouteMatch } from 'react-router-dom';
 import { PivotRoutes } from '../../../ui/PivotRoutes/PivotRoutes';
 import { WebDomainsList } from '../../../ui/WebDomainsList/WebDomainsList';
@@ -9,21 +7,19 @@ import { WebInstructions } from '../../../ui/WebInstructions/WebInstructions';
 export const WebSections: React.FunctionComponent = () => {
   const { path, url } = useRouteMatch();
   const openedGroupsState = useState<string[]>([]);
-  const isMinLargeScreen = useMediaQuery({
-    minWidth: ScreenWidthMinLarge,
-  });
-  const pivotProps = {
-    linkSize: isMinLargeScreen ? PivotLinkSize.large : PivotLinkSize.normal,
-  };
+  const pivotItems = [
+    {
+      itemKey: url,
+      headerText: 'Domains',
+    },
+    {
+      itemKey: `${url}/instructions`,
+      headerText: 'Uploading Instructions',
+    },
+  ];
   return (
     <>
-      <PivotRoutes {...pivotProps}>
-        <PivotItem itemKey={url} headerText="Domains" />
-        <PivotItem
-          itemKey={`${url}/instructions`}
-          headerText="Uploading Instructions"
-        />
-      </PivotRoutes>
+      <PivotRoutes items={pivotItems} />
       <Switch>
         <Route exact path={path}>
           <WebDomainsList openedGroupsState={openedGroupsState} />

diff --git a/src/components/routes/MainRoute/mail/MailUsersRoute/MailUsersSections.tsx b/src/components/routes/MainRoute/mail/MailUsersRoute/MailUsersSections.tsx
@@ -1,13 +1,6 @@
-import {
-  MessageBar,
-  MessageBarType,
-  PivotItem,
-  PivotLinkSize,
-  ScreenWidthMinLarge,
-} from '@fluentui/react';
+import { MessageBar, MessageBarType } from '@fluentui/react';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useMediaQuery } from 'react-responsive';
 import { Route, Switch, useRouteMatch } from 'react-router-dom';
 import { getUsers } from '../../../../../features/usersSlice';
 import { RootState } from '../../../../../store';
@@ -26,13 +19,16 @@ export const MailUsersSections: React.FunctionComponent = () => {
 
   const dispatch = useDispatch();
 
-  const isMinLargeScreen = useMediaQuery({
-    minWidth: ScreenWidthMinLarge,
-  });
-
-  const pivotProps = {
-    linkSize: isMinLargeScreen ? PivotLinkSize.large : PivotLinkSize.normal,
-  };
+  const pivotItems = [
+    {
+      itemKey: url,
+      headerText: 'Mail Users',
+    },
+    {
+      itemKey: `${url}/add`,
+      headerText: 'Add a Mail User',
+    },
+  ];
 
   useEffect(() => {
     if (!users.length) {
@@ -41,10 +37,7 @@ export const MailUsersSections: React.FunctionComponent = () => {
   }, [dispatch, users.length]);
   return (
     <>
-      <PivotRoutes {...pivotProps}>
-        <PivotItem itemKey={url} headerText="Mail Users" />
-        <PivotItem itemKey={`${url}/add`} headerText="Add a Mail User" />
-      </PivotRoutes>
+      <PivotRoutes items={pivotItems} />
       <Switch>
         <Route exact path={path}>
           <LoadingOverlayContainer>

diff --git a/src/components/routes/MainRoute/system/BackupsRoute/BackupsRoute.tsx b/src/components/routes/MainRoute/system/BackupsRoute/BackupsRoute.tsx
@@ -4,13 +4,13 @@ import {
   DialogFooter,
   DialogType,
   MessageBarType,
-  PivotItem,
   PrimaryButton,
   ProgressIndicator,
   Stack,
   Text,
 } from '@fluentui/react';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useConstCallback } from '@uifabric/react-hooks';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Route, Switch, useRouteMatch } from 'react-router-dom';
 import {
@@ -32,13 +32,23 @@ const BackupSections: React.FunctionComponent = () => {
   const [isDialogHidden, setIsDialogHidden] = useState<boolean>(true);
   const { backups, unmatchedFileSize, error } = status;
 
-  const onDialogClose = useCallback(
+  const onDialogClose = useConstCallback(
     (_event: React.MouseEvent<BaseButton, MouseEvent>): void => {
       setIsDialogHidden(true);
-    },
-    []
+    }
   );
 
+  const pivotItems = [
+    {
+      itemKey: url,
+      headerText: 'Backup Status',
+    },
+    {
+      itemKey: `${url}/config`,
+      headerText: 'Backup Configuration',
+    },
+  ];
+
   useEffect(() => {
     if (error) {
       setIsDialogHidden(false);
@@ -68,13 +78,7 @@ const BackupSections: React.FunctionComponent = () => {
           <PrimaryButton text="OK" onClick={onDialogClose} />
         </DialogFooter>
       </Dialog>
-      <PivotRoutes>
-        <PivotItem itemKey={url} headerText="Backup Status" />
-        <PivotItem
-          itemKey={`${url}/config`}
-          headerText="Backup Configuration"
-        />
-      </PivotRoutes>
+      <PivotRoutes items={pivotItems} />
       <Switch>
         <Route exact path={path}>
           {backups && backups.length > 0 && (
@@ -142,22 +146,24 @@ export const BackupsRoute: React.FunctionComponent & {
           ]}
         />
       </Stack>
-      <BodyPanel>
-        <Text>
-          The box makes an incremental backup each night. By default the backup
-          is stored on the machine itself, but you can also have it stored on
-          Amazon S3.
-        </Text>
-      </BodyPanel>
-      <BodyPanel>
-        {error && (
-          <MessageBar messageBarType={MessageBarType.error} isMultiline>
-            {error}
-          </MessageBar>
-        )}
-        {isLoading && <ProgressIndicator label="Checking backup status..." />}
-        {!isLoading && !error && <BackupSections />}
-      </BodyPanel>
+      <Stack gap="l1">
+        <BodyPanel>
+          <Text>
+            The box makes an incremental backup each night. By default the
+            backup is stored on the machine itself, but you can also have it
+            stored on Amazon S3.
+          </Text>
+        </BodyPanel>
+        <BodyPanel>
+          {error && (
+            <MessageBar messageBarType={MessageBarType.error} isMultiline>
+              {error}
+            </MessageBar>
+          )}
+          {isLoading && <ProgressIndicator label="Checking backup status..." />}
+          {!isLoading && !error && <BackupSections />}
+        </BodyPanel>
+      </Stack>
     </Body>
   );
 };

diff --git a/src/components/routes/MainRoute/system/CertificatesRoute/CertificatesRoute.tsx b/src/components/routes/MainRoute/system/CertificatesRoute/CertificatesRoute.tsx
@@ -1,16 +1,12 @@
 import {
   MessageBar,
   MessageBarType,
-  PivotItem,
-  PivotLinkSize,
   ProgressIndicator,
-  ScreenWidthMinLarge,
   Stack,
   Text,
 } from '@fluentui/react';
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useMediaQuery } from 'react-responsive';
 import {
   Route,
   Switch,
@@ -45,12 +41,16 @@ const CertificateSections: React.FunctionComponent = () => {
   const history = useHistory();
   const { path, url } = useRouteMatch();
 
-  const isMinLargeScreen = useMediaQuery({
-    minWidth: ScreenWidthMinLarge,
-  });
-  const pivotProps = {
-    linkSize: isMinLargeScreen ? PivotLinkSize.large : PivotLinkSize.normal,
-  };
+  const pivotRoutes = [
+    {
+      itemKey: url,
+      headerText: 'Certificate Status',
+    },
+    {
+      itemKey: `${url}${SectionKeys.install}`,
+      headerText: 'Install Custom Certificate',
+    },
+  ];
 
   useEffect(() => {
     if (sslAction?.type === SSLActionType.install) {
@@ -66,13 +66,7 @@ const CertificateSections: React.FunctionComponent = () => {
 
   return (
     <>
-      <PivotRoutes {...pivotProps}>
-        <PivotItem itemKey={url} headerText="Certificate Status" />
-        <PivotItem
-          itemKey={`${url}${SectionKeys.install}`}
-          headerText="Install Custom Certificate"
-        />
-      </PivotRoutes>
+      <PivotRoutes items={pivotRoutes} />
       <Switch>
         <Route exact path={path}>
           <CertificatesList items={items} />

diff --git a/src/components/routes/MainRoute/system/CustomDnsRoute/CustomDnsRoute.tsx b/src/components/routes/MainRoute/system/CustomDnsRoute/CustomDnsRoute.tsx
@@ -1,7 +1,6 @@
 import {
   MessageBar,
   MessageBarType,
-  PivotItem,
   ProgressIndicator,
   Stack,
   Text,
@@ -40,6 +39,21 @@ const CustomDnsSections: React.FunctionComponent = () => {
   const { path, url } = useRouteMatch();
   const openedGroupsState = useState<string[]>([]);
 
+  const pivotItems = [
+    {
+      itemKey: url,
+      headerText: 'DNS Records',
+    },
+    {
+      itemKey: `${url}/add`,
+      headerText: 'Add Custom Record',
+    },
+    {
+      itemKey: `${url}/nameserver`,
+      headerText: 'Secondary Nameserver',
+    },
+  ];
+
   useEffect(() => {
     if (!zones.length) {
       dispatch(getZones());
@@ -57,14 +71,7 @@ const CustomDnsSections: React.FunctionComponent = () => {
   }, [dispatch]);
   return (
     <>
-      <PivotRoutes>
-        <PivotItem itemKey={url} headerText="DNS Records" />
-        <PivotItem itemKey={`${url}/add`} headerText="Add Custom Record" />
-        <PivotItem
-          itemKey={`${url}/nameserver`}
-          headerText="Secondary Nameserver"
-        />
-      </PivotRoutes>
+      <PivotRoutes items={pivotItems} />
       <Switch>
         <Route exact path={path}>
           <LoadingOverlayContainer>
@@ -131,17 +138,19 @@ export const CustomDnsRoute: React.FunctionComponent & {
           ]}
         />
       </Stack>
-      <MessageBar messageBarType={MessageBarType.warning} isMultiline>
-        This is an advanced configuration page.
-      </MessageBar>
-      <BodyPanel>
-        <Text>
-          It is possible to set custom DNS records on domains hosted here.
-        </Text>
-      </BodyPanel>
-      <BodyPanel>
-        <CustomDnsSections />
-      </BodyPanel>
+      <Stack gap="l1">
+        <MessageBar messageBarType={MessageBarType.warning} isMultiline>
+          This is an advanced configuration page.
+        </MessageBar>
+        <BodyPanel>
+          <Text>
+            It is possible to set custom DNS records on domains hosted here.
+          </Text>
+        </BodyPanel>
+        <BodyPanel>
+          <CustomDnsSections />
+        </BodyPanel>
+      </Stack>
     </Body>
   );
 };