From 04b0e3f6e91e0c476a78bcbf330a114469c122d1 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Wed, 20 Mar 2024 07:57:54 +0100
Subject: [PATCH 1/5] fix: wip

---
 package.json                           |  1 +
 src/components/APIChecker.tsx          | 48 ++++++++++++++++++++++++++
 src/components/FullscreenContainer.tsx | 12 ++++---
 src/components/SignIn.tsx              |  2 +-
 src/config/queryClient.ts              |  2 ++
 src/langs/constants.ts                 |  4 +++
 src/langs/en.json                      |  6 +++-
 yarn.lock                              | 19 ++++++++++
 8 files changed, 87 insertions(+), 7 deletions(-)
 create mode 100644 src/components/APIChecker.tsx

diff --git a/package.json b/package.json
index 8e8a24f3..d9965c3a 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@mui/lab": "5.0.0-alpha.169",
     "@mui/material": "5.15.14",
     "@sentry/react": "7.108.0",
+    "@tanstack/react-query": "5.28.4",
     "http-status-codes": "2.3.0",
     "i18next": "23.10.1",
     "react": "18.2.0",
diff --git a/src/components/APIChecker.tsx b/src/components/APIChecker.tsx
new file mode 100644
index 00000000..3e9d163f
--- /dev/null
+++ b/src/components/APIChecker.tsx
@@ -0,0 +1,48 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { Replay } from '@mui/icons-material';
+import {
+  Alert,
+  AlertTitle,
+  Box,
+  Button,
+  Stack,
+  Typography,
+} from '@mui/material';
+
+import { API_HOST } from '../config/env';
+import { useAuthTranslation } from '../config/i18n';
+import { axios } from '../config/queryClient';
+import { AUTH } from '../langs/constants';
+
+const APIChecker = (): JSX.Element | null => {
+  const { t } = useAuthTranslation();
+
+  const { isError, isSuccess } = useQuery({
+    queryKey: ['apiStatus'],
+    queryFn: () => axios.get(`${API_HOST}/status`).then(({ data }) => data),
+  });
+
+  if (isSuccess) {
+    return null;
+  }
+
+  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>
+            <Button sx={{ maxWidth: 'min-content' }} endIcon={<Replay />}>
+              {t(AUTH.API_UNAVAILABLE_BUTTON)}
+            </Button>
+          </Stack>
+        </Alert>
+      </Box>
+    );
+  }
+  return null;
+};
+export default APIChecker;
diff --git a/src/components/FullscreenContainer.tsx b/src/components/FullscreenContainer.tsx
index 5640ead7..b7135998 100644
--- a/src/components/FullscreenContainer.tsx
+++ b/src/components/FullscreenContainer.tsx
@@ -1,5 +1,6 @@
-import { Box } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 
+import APIChecker from './APIChecker';
 import Footer from './Footer';
 
 type Props = {
@@ -7,10 +8,9 @@ type Props = {
 };
 
 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;
diff --git a/src/components/SignIn.tsx b/src/components/SignIn.tsx
index 554a1c0c..94b90a3f 100644
--- a/src/components/SignIn.tsx
+++ b/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>
diff --git a/src/config/queryClient.ts b/src/config/queryClient.ts
index f1bff733..0b6446b0 100644
--- a/src/config/queryClient.ts
+++ b/src/config/queryClient.ts
@@ -9,6 +9,7 @@ const {
   hooks,
   ReactQueryDevtools,
   mutations,
+  axios,
 } = configureQueryClient({
   API_HOST,
   defaultQueryOptions: {
@@ -24,4 +25,5 @@ export {
   QueryClientProvider,
   hooks,
   ReactQueryDevtools,
+  axios,
 };
diff --git a/src/langs/constants.ts b/src/langs/constants.ts
index 4f8615ad..a07d67bd 100644
--- a/src/langs/constants.ts
+++ b/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',
 };
diff --git a/src/langs/en.json b/src/langs/en.json
index a911b39d..7de5c540 100644
--- a/src/langs/en.json
+++ b/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 connection with the Graasp server seems to be broken.",
+  "API_UNAVAILABLE_INSTRUCTIONS": "Please try again later, or when this message disappears",
+  "API_UNAVAILABLE_BUTTON": "Retry"
 }
diff --git a/yarn.lock b/yarn.lock
index a82bb22a..fee0ee85 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4182,6 +4182,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/query-core@npm:5.28.4":
+  version: 5.28.4
+  resolution: "@tanstack/query-core@npm:5.28.4"
+  checksum: 10/ad457f4a4954f40fd83a53c3492b7d85f752a0bfb3f0935f3f3a156acd1a2d34cecc897b910902fa15c52527c3662186476298b4427ae39f646c047de93c3b53
+  languageName: node
+  linkType: hard
+
 "@tanstack/react-query-devtools@npm:4.36.1":
   version: 4.36.1
   resolution: "@tanstack/react-query-devtools@npm:4.36.1"
@@ -4216,6 +4223,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/react-query@npm:5.28.4":
+  version: 5.28.4
+  resolution: "@tanstack/react-query@npm:5.28.4"
+  dependencies:
+    "@tanstack/query-core": "npm:5.28.4"
+  peerDependencies:
+    react: ^18.0.0
+  checksum: 10/59e799038f96596d695810e2fcdbf79db0aa672802bd7791cc7a575207818adbdbb0f5cc38a70b4c30a2fc71f66dce45179178ef7875c0e5011884055e4d508d
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^9.0.0":
   version: 9.3.3
   resolution: "@testing-library/dom@npm:9.3.3"
@@ -8937,6 +8955,7 @@ __metadata:
     "@mui/lab": "npm:5.0.0-alpha.169"
     "@mui/material": "npm:5.15.14"
     "@sentry/react": "npm:7.108.0"
+    "@tanstack/react-query": "npm:5.28.4"
     "@testing-library/jest-dom": "npm:6.4.2"
     "@testing-library/react": "npm:14.2.2"
     "@testing-library/user-event": "npm:14.5.2"

From c1457bf27b0fd1a09bc151fc36c3485c570020b4 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Fri, 22 Mar 2024 16:54:07 +0100
Subject: [PATCH 2/5] fix: add connection status

---
 package.json                  |  1 -
 src/components/APIChecker.tsx | 57 ++++++++++++++++++++++++-----------
 src/config/queryClient.ts     |  4 +++
 yarn.lock                     | 19 ------------
 4 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/package.json b/package.json
index d9965c3a..8e8a24f3 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,6 @@
     "@mui/lab": "5.0.0-alpha.169",
     "@mui/material": "5.15.14",
     "@sentry/react": "7.108.0",
-    "@tanstack/react-query": "5.28.4",
     "http-status-codes": "2.3.0",
     "i18next": "23.10.1",
     "react": "18.2.0",
diff --git a/src/components/APIChecker.tsx b/src/components/APIChecker.tsx
index 3e9d163f..da1cab8d 100644
--- a/src/components/APIChecker.tsx
+++ b/src/components/APIChecker.tsx
@@ -1,33 +1,50 @@
-import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
 
 import { Replay } from '@mui/icons-material';
-import {
-  Alert,
-  AlertTitle,
-  Box,
-  Button,
-  Stack,
-  Typography,
-} from '@mui/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 } from '../config/queryClient';
+import { axios, useQuery } from '../config/queryClient';
 import { AUTH } from '../langs/constants';
 
 const APIChecker = (): JSX.Element | null => {
   const { t } = useAuthTranslation();
-
-  const { isError, isSuccess } = useQuery({
+  const [noConnection, setNoConnection] = useState(false);
+  const { isSuccess, isLoading, refetch } = useQuery({
     queryKey: ['apiStatus'],
-    queryFn: () => axios.get(`${API_HOST}/status`).then(({ data }) => data),
+    queryFn: () =>
+      axios
+        .get(`${API_HOST}/status`, { withCredentials: false })
+        .then(({ data }) => data)
+        .catch(() => setNoConnection(true)),
+    retry: 1,
   });
 
   if (isSuccess) {
-    return null;
+    return (
+      <Stack direction="row" alignItems="center" color="success.light">
+        <svg viewBox="0 0 10 10" width="20px" height="20px">
+          <circle
+            fill="currentColor"
+            style={{ filter: 'drop-shadow(0px 0px 2px currentColor)' }}
+            r="1.3px"
+            cx="5px"
+            cy="4.8px"
+          />
+        </svg>
+        <Typography
+          sx={{ textShadow: 'currentColor 1px 0px 10px' }}
+          variant="caption"
+        >
+          Connected to Graasp backend
+        </Typography>
+      </Stack>
+    );
   }
 
-  if (isError) {
+  if (noConnection) {
     return (
       <Box maxWidth="48ch">
         <Alert severity="error">
@@ -35,14 +52,20 @@ const APIChecker = (): JSX.Element | null => {
           <Stack direction="column" alignItems="center" spacing={1}>
             <Typography>{t(AUTH.API_UNAVAILABLE_EXPLANATION)}</Typography>
             <Typography>{t(AUTH.API_UNAVAILABLE_INSTRUCTIONS)}</Typography>
-            <Button sx={{ maxWidth: 'min-content' }} endIcon={<Replay />}>
+            <LoadingButton
+              loading={isLoading}
+              sx={{ maxWidth: 'min-content' }}
+              endIcon={<Replay />}
+              onClick={() => refetch()}
+            >
               {t(AUTH.API_UNAVAILABLE_BUTTON)}
-            </Button>
+            </LoadingButton>
           </Stack>
         </Alert>
       </Box>
     );
   }
+
   return null;
 };
 export default APIChecker;
diff --git a/src/config/queryClient.ts b/src/config/queryClient.ts
index 0b6446b0..37bcca8a 100644
--- a/src/config/queryClient.ts
+++ b/src/config/queryClient.ts
@@ -10,6 +10,8 @@ const {
   ReactQueryDevtools,
   mutations,
   axios,
+  useQuery,
+  useQueryClient,
 } = configureQueryClient({
   API_HOST,
   defaultQueryOptions: {
@@ -22,7 +24,9 @@ const {
 export {
   queryClient,
   mutations,
+  useQuery,
   QueryClientProvider,
+  useQueryClient,
   hooks,
   ReactQueryDevtools,
   axios,
diff --git a/yarn.lock b/yarn.lock
index fee0ee85..a82bb22a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4182,13 +4182,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/query-core@npm:5.28.4":
-  version: 5.28.4
-  resolution: "@tanstack/query-core@npm:5.28.4"
-  checksum: 10/ad457f4a4954f40fd83a53c3492b7d85f752a0bfb3f0935f3f3a156acd1a2d34cecc897b910902fa15c52527c3662186476298b4427ae39f646c047de93c3b53
-  languageName: node
-  linkType: hard
-
 "@tanstack/react-query-devtools@npm:4.36.1":
   version: 4.36.1
   resolution: "@tanstack/react-query-devtools@npm:4.36.1"
@@ -4223,17 +4216,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/react-query@npm:5.28.4":
-  version: 5.28.4
-  resolution: "@tanstack/react-query@npm:5.28.4"
-  dependencies:
-    "@tanstack/query-core": "npm:5.28.4"
-  peerDependencies:
-    react: ^18.0.0
-  checksum: 10/59e799038f96596d695810e2fcdbf79db0aa672802bd7791cc7a575207818adbdbb0f5cc38a70b4c30a2fc71f66dce45179178ef7875c0e5011884055e4d508d
-  languageName: node
-  linkType: hard
-
 "@testing-library/dom@npm:^9.0.0":
   version: 9.3.3
   resolution: "@testing-library/dom@npm:9.3.3"
@@ -8955,7 +8937,6 @@ __metadata:
     "@mui/lab": "npm:5.0.0-alpha.169"
     "@mui/material": "npm:5.15.14"
     "@sentry/react": "npm:7.108.0"
-    "@tanstack/react-query": "npm:5.28.4"
     "@testing-library/jest-dom": "npm:6.4.2"
     "@testing-library/react": "npm:14.2.2"
     "@testing-library/user-event": "npm:14.5.2"

From 0f7f0f81ce760b280424ff346cb65bbe54da7018 Mon Sep 17 00:00:00 2001
From: Basile Spaenlehauer <spaenleh@gmail.com>
Date: Mon, 25 Mar 2024 11:44:44 +0100
Subject: [PATCH 3/5] chore: update translation text

Co-authored-by: Kim Lan Phan Hoang <pyphilia@gmail.com>
---
 src/langs/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/langs/en.json b/src/langs/en.json
index 7de5c540..ca4d128d 100644
--- a/src/langs/en.json
+++ b/src/langs/en.json
@@ -25,7 +25,7 @@
   "SIGN_UP_SUCCESS_TITLE": "Welcome!",
   "SWITCH_ACCOUNT_TEXT": "Switch to another account",
   "API_UNAVAILABLE_TITLE": "Server Connection Error",
-  "API_UNAVAILABLE_EXPLANATION": "The connection with the Graasp server seems to be broken.",
+  "API_UNAVAILABLE_EXPLANATION": "The Graasp server seems unreachable for the moment.",
   "API_UNAVAILABLE_INSTRUCTIONS": "Please try again later, or when this message disappears",
   "API_UNAVAILABLE_BUTTON": "Retry"
 }

From 3138b514428972703d7160ea83ea118506bfcf1a Mon Sep 17 00:00:00 2001
From: Basile Spaenlehauer <spaenleh@gmail.com>
Date: Mon, 25 Mar 2024 11:45:05 +0100
Subject: [PATCH 4/5] chore: update message

Co-authored-by: Kim Lan Phan Hoang <pyphilia@gmail.com>
---
 src/langs/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/langs/en.json b/src/langs/en.json
index ca4d128d..36f0bc12 100644
--- a/src/langs/en.json
+++ b/src/langs/en.json
@@ -26,6 +26,6 @@
   "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, or when this message disappears",
+  "API_UNAVAILABLE_INSTRUCTIONS": "Please try again later.",
   "API_UNAVAILABLE_BUTTON": "Retry"
 }

From ea7d1e5eb6e66301467d1281908520716a5d56c7 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Mon, 25 Mar 2024 11:55:58 +0100
Subject: [PATCH 5/5] fix: make PR changes

---
 src/components/APIChecker.tsx | 36 +++++++----------------------------
 1 file changed, 7 insertions(+), 29 deletions(-)

diff --git a/src/components/APIChecker.tsx b/src/components/APIChecker.tsx
index da1cab8d..59719041 100644
--- a/src/components/APIChecker.tsx
+++ b/src/components/APIChecker.tsx
@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import { Replay } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
 import { Alert, AlertTitle, Box, Stack, Typography } from '@mui/material';
@@ -9,42 +7,22 @@ import { useAuthTranslation } from '../config/i18n';
 import { axios, useQuery } from '../config/queryClient';
 import { AUTH } from '../langs/constants';
 
-const APIChecker = (): JSX.Element | null => {
+const APIChecker = (): JSX.Element | false => {
   const { t } = useAuthTranslation();
-  const [noConnection, setNoConnection] = useState(false);
-  const { isSuccess, isLoading, refetch } = useQuery({
+  const { isSuccess, isLoading, refetch, isError } = useQuery({
     queryKey: ['apiStatus'],
     queryFn: () =>
       axios
         .get(`${API_HOST}/status`, { withCredentials: false })
-        .then(({ data }) => data)
-        .catch(() => setNoConnection(true)),
-    retry: 1,
+        .then(({ data }) => data),
+    retry: 0,
   });
 
   if (isSuccess) {
-    return (
-      <Stack direction="row" alignItems="center" color="success.light">
-        <svg viewBox="0 0 10 10" width="20px" height="20px">
-          <circle
-            fill="currentColor"
-            style={{ filter: 'drop-shadow(0px 0px 2px currentColor)' }}
-            r="1.3px"
-            cx="5px"
-            cy="4.8px"
-          />
-        </svg>
-        <Typography
-          sx={{ textShadow: 'currentColor 1px 0px 10px' }}
-          variant="caption"
-        >
-          Connected to Graasp backend
-        </Typography>
-      </Stack>
-    );
+    return false;
   }
 
-  if (noConnection) {
+  if (isError) {
     return (
       <Box maxWidth="48ch">
         <Alert severity="error">
@@ -66,6 +44,6 @@ const APIChecker = (): JSX.Element | null => {
     );
   }
 
-  return null;
+  return false;
 };
 export default APIChecker;