Fix issue where redirect still happened after failed group creation (#…

…1314) * Fix issue when redirect still happened after failed group creation * unrelatedly stop the button going grey on hover
loculus-project · Mar 10, 2024 · 838aad2 · 838aad2
1 parent b6454ae
commit 838aad2
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/website/src/components/User/GroupCreationForm.tsx b/website/src/components/User/GroupCreationForm.tsx
@@ -20,7 +20,6 @@ const InnerGroupCreationForm: FC<GroupManagerProps> = ({ clientConfig, accessTok
     const { createGroup } = useGroupCreation({
         clientConfig,
         accessToken,
-        setErrorMessage,
     });
 
     const handleCreateGroup = async (e: FormEvent<HTMLFormElement>) => {
@@ -43,15 +42,17 @@ const InnerGroupCreationForm: FC<GroupManagerProps> = ({ clientConfig, accessTok
             return false;
         }
 
-        await createGroup({
+        const result = await createGroup({
             groupName,
             institution,
             contactEmail,
             address: { line1, line2, city, postalCode, state, country },
         });
 
-        if (errorMessage === undefined) {
+        if (result.succeeded) {
             window.location.href = routes.groupOverviewPage(groupName);
+        } else {
+            setErrorMessage(result.errorMessage);
         }
     };
 
@@ -212,7 +213,7 @@ const CountryInput = () => (
             autoComplete='country-name'
             className='block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:max-w-xs sm:text-sm sm:leading-6'
         >
-            <option>Choose a country...</option>
+            <option>{chooseCountry}</option>
             {listOfCountries.map((country) => (
                 <option key={country}>{country}</option>
             ))}

diff --git a/website/src/hooks/useGroupOperations.ts b/website/src/hooks/useGroupOperations.ts
@@ -56,14 +56,21 @@ export const useGroupPageHooks = ({
     };
 };
 
-export const useGroupCreation = ({ clientConfig, accessToken, setErrorMessage }: UseGroupOperationsProps) => {
+export const useGroupCreation = ({
+    clientConfig,
+    accessToken,
+}: {
+    clientConfig: ClientConfig;
+    accessToken: string;
+}) => {
     const { zodios } = useGroupManagementClient(clientConfig);
 
     const createGroup = useCallback(
         async (group: Group) => {
-            await callCreateGroup(accessToken, setErrorMessage, zodios)(group);
+            const result = await callCreateGroup(accessToken, zodios)(group);
+            return result;
         },
-        [accessToken, setErrorMessage, zodios],
+        [accessToken, zodios],
     );
 
     return {
@@ -98,19 +105,21 @@ export const useGroupManagementClient = (clientConfig: ClientConfig) => {
     };
 };
 
-function callCreateGroup(
-    accessToken: string,
-    openErrorFeedback: (message: string | undefined) => void,
-    zodios: ZodiosInstance<typeof groupManagementApi>,
-) {
+function callCreateGroup(accessToken: string, zodios: ZodiosInstance<typeof groupManagementApi>) {
     return async (group: Group) => {
         try {
             await zodios.createGroup(group, {
                 headers: createAuthorizationHeader(accessToken),
             });
+            return {
+                succeeded: true,
+            };
         } catch (error) {
             const message = `Failed to create group: ${stringifyMaybeAxiosError(error)}`;
-            openErrorFeedback(message);
+            return {
+                succeeded: false,
+                errorMessage: message,
+            };
         }
     };
 }

diff --git a/website/src/styles/base.scss b/website/src/styles/base.scss
@@ -43,6 +43,9 @@ a {
 
 .loculusColor{
   background: theme('colors.main');
+  &:hover {
+    background: theme('colors.primary.700');
+  }
 }
 
 .offCanvasTransform {