feat: add connection indicator

src/components/APIChecker.tsx

@@ -0,0 +1,49 @@
+import { Replay } from '@mui/icons-material';
+import { LoadingButton } from '@mui/lab';
+import { Alert, AlertTitle, Box, Stack, Typography } from '@mui/material';
+
+import { API_HOST } from '../config/env';
+import { useAuthTranslation } from '../config/i18n';
+import { axios, useQuery } from '../config/queryClient';
+import { AUTH } from '../langs/constants';
+
+const APIChecker = (): JSX.Element | false => {
+  const { t } = useAuthTranslation();
+  const { isSuccess, isLoading, refetch, isError } = useQuery({
+    queryKey: ['apiStatus'],
+    queryFn: () =>
+      axios
+        .get(`${API_HOST}/status`, { withCredentials: false })
+        .then(({ data }) => data),
+    retry: 0,
+  });
+
+  if (isSuccess) {
+    return false;
+  }
+
+  if (isError) {
+    return (
+      <Box maxWidth="48ch">
+        <Alert severity="error">
+          <AlertTitle>{t(AUTH.API_UNAVAILABLE_TITLE)}</AlertTitle>
+          <Stack direction="column" alignItems="center" spacing={1}>
+            <Typography>{t(AUTH.API_UNAVAILABLE_EXPLANATION)}</Typography>
+            <Typography>{t(AUTH.API_UNAVAILABLE_INSTRUCTIONS)}</Typography>
+            <LoadingButton
+              loading={isLoading}
+              sx={{ maxWidth: 'min-content' }}
+              endIcon={<Replay />}
+              onClick={() => refetch()}
+            >
+              {t(AUTH.API_UNAVAILABLE_BUTTON)}
+            </LoadingButton>
+          </Stack>
+        </Alert>
+      </Box>
+    );
+  }
+
+  return false;
+};
+export default APIChecker;

src/components/FullscreenContainer.tsx

@@ -1,16 +1,16 @@
-import { Box } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 
+import APIChecker from './APIChecker';
 import Footer from './Footer';
 
 type Props = {
   children: JSX.Element | JSX.Element[];
 };
 
 const FullscreenContainer = ({ children }: Props): JSX.Element => (
-  <Box
+  <Stack
+    direction="column"
     margin="auto"
-    textAlign="center"
-    display="flex"
     alignItems="center"
     justifyContent="center"
     bgcolor="#f6f7fb"
@@ -19,7 +19,9 @@ const FullscreenContainer = ({ children }: Props): JSX.Element => (
       backgroundImage: `url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23f2f2ff' fill-opacity='0.82' fill-rule='evenodd'/%3E%3C/svg%3E")`,
     }}
   >
+    <APIChecker />
     <Box
+      alignItems="center"
       bgcolor="white"
       border="1px solid #eaeaf7"
       borderRadius={3}
@@ -31,7 +33,7 @@ const FullscreenContainer = ({ children }: Props): JSX.Element => (
       {children}
     </Box>
     <Footer />
-  </Box>
+  </Stack>
 );
 
 export default FullscreenContainer;

src/components/SignIn.tsx

@@ -237,7 +237,7 @@ const SignIn: FC = () => {
             handleBackButtonClick={handleBackButtonClick}
           />
         ) : (
-          <Stack direction="column" spacing={2}>
+          <Stack direction="column" alignItems="center" spacing={2}>
             <Typography variant="h2" component="h2" id={SIGN_IN_HEADER_ID}>
               {t(SIGN_IN_HEADER)}
             </Typography>

src/config/queryClient.ts

@@ -9,6 +9,9 @@ const {
   hooks,
   ReactQueryDevtools,
   mutations,
+  axios,
+  useQuery,
+  useQueryClient,
 } = configureQueryClient({
   API_HOST,
   defaultQueryOptions: {
@@ -21,7 +24,10 @@ const {
 export {
   queryClient,
   mutations,
+  useQuery,
   QueryClientProvider,
+  useQueryClient,
   hooks,
   ReactQueryDevtools,
+  axios,
 };

src/langs/constants.ts

@@ -25,4 +25,8 @@ export const AUTH = {
   SIGN_UP_SAVE_ACTIONS_TOOLTIP: 'SIGN_UP_SAVE_ACTIONS_TOOLTIP',
   SIGN_UP_SUCCESS_TITLE: 'SIGN_UP_SUCCESS_TITLE',
   SWITCH_ACCOUNT_TEXT: 'SWITCH_ACCOUNT_TEXT',
+  API_UNAVAILABLE_TITLE: 'API_UNAVAILABLE_TITLE',
+  API_UNAVAILABLE_EXPLANATION: 'API_UNAVAILABLE_EXPLANATION',
+  API_UNAVAILABLE_INSTRUCTIONS: 'API_UNAVAILABLE_INSTRUCTIONS',
+  API_UNAVAILABLE_BUTTON: 'API_UNAVAILABLE_BUTTON',
 };

src/langs/en.json

@@ -23,5 +23,9 @@
   "SIGN_UP_SAVE_ACTIONS_LABEL": "Enable Analytics",
   "SIGN_UP_SAVE_ACTIONS_TOOLTIP": "Coming Soon!",
   "SIGN_UP_SUCCESS_TITLE": "Welcome!",
-  "SWITCH_ACCOUNT_TEXT": "Switch to another account"
+  "SWITCH_ACCOUNT_TEXT": "Switch to another account",
+  "API_UNAVAILABLE_TITLE": "Server Connection Error",
+  "API_UNAVAILABLE_EXPLANATION": "The Graasp server seems unreachable for the moment.",
+  "API_UNAVAILABLE_INSTRUCTIONS": "Please try again later.",
+  "API_UNAVAILABLE_BUTTON": "Retry"
 }