a bit of cleanup

loculus-project · Sep 30, 2024 · 9ba53e3 · 9ba53e3
1 parent bbc2bf1
commit 9ba53e3
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 45 deletions.
diff --git a/website/src/components/Group/GroupForm.tsx b/website/src/components/Group/GroupForm.tsx
@@ -1,15 +1,25 @@
-import { useState, type FC, type FormEvent } from "react";
-import type { NewGroup } from "../../types/backend";
+import { useState, type FC, type FormEvent } from 'react';
+
+import {
+    AddressLineOneInput,
+    AddressLineTwoInput,
+    CityInput,
+    CountryInput,
+    EmailContactInput,
+    GroupNameInput,
+    InstitutionNameInput,
+    PostalCodeInput,
+    StateInput,
+} from './Inputs';
+import useClientFlag from '../../hooks/isClient';
+import type { NewGroup } from '../../types/backend';
 import { ErrorFeedback } from '../ErrorFeedback.tsx';
-import { AddressLineOneInput, AddressLineTwoInput, CityInput, CountryInput, EmailContactInput, GroupNameInput, InstitutionNameInput, PostalCodeInput, StateInput } from "./Inputs";
-import useClientFlag from "../../hooks/isClient";
 
 interface GroupFormProps {
     title: string;
     buttonText: string;
     defaultGroupData?: NewGroup;
     onSubmit: (group: NewGroup) => Promise<GroupSubmitResult>;
-
 }
 
 export type GroupSubmitSuccess = {
@@ -24,7 +34,7 @@ export type GroupSubmitResult = GroupSubmitSuccess | GroupSubmitError;
 
 const chooseCountry = 'Choose a country...';
 
-export const GroupForm: FC<GroupFormProps> = ({title, buttonText, defaultGroupData, onSubmit}) => {
+export const GroupForm: FC<GroupFormProps> = ({ title, buttonText, defaultGroupData, onSubmit }) => {
     const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
 
     const internalOnSubmit = async (e: FormEvent<HTMLFormElement>) => {
@@ -80,15 +90,15 @@ export const GroupForm: FC<GroupFormProps> = ({title, buttonText, defaultGroupDa
                     </p>
 
                     <div className='mt-5 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-6'>
-                        <GroupNameInput defaultValue={defaultGroupData?.groupName}/>
+                        <GroupNameInput defaultValue={defaultGroupData?.groupName} />
                         <EmailContactInput defaultValue={defaultGroupData?.contactEmail} />
                         <InstitutionNameInput defaultValue={defaultGroupData?.institution} />
                         <AddressLineOneInput defaultValue={defaultGroupData?.address.line1} />
                         <AddressLineTwoInput defaultValue={defaultGroupData?.address.line2} />
                         <CityInput defaultValue={defaultGroupData?.address.city} />
                         <StateInput defaultValue={defaultGroupData?.address.state} />
                         <PostalCodeInput defaultValue={defaultGroupData?.address.postalCode} />
-                        <CountryInput  defaultValue={defaultGroupData?.address.country} />
+                        <CountryInput defaultValue={defaultGroupData?.address.country} />
                     </div>
 
                     <div className='flex justify-end py-8 gap-4 '>
@@ -104,7 +114,7 @@ export const GroupForm: FC<GroupFormProps> = ({title, buttonText, defaultGroupDa
             </form>
         </div>
     );
-}
+};
 
 const fieldMapping = {
     groupName: {

diff --git a/website/src/components/Group/Inputs.tsx b/website/src/components/Group/Inputs.tsx
@@ -1,4 +1,4 @@
-import { type ComponentProps, type FC, type FormEvent, type PropsWithChildren, useState } from 'react';
+import { type ComponentProps, type FC, type PropsWithChildren } from 'react';
 
 import { listOfCountries } from './listOfCountries.ts';
 
@@ -220,7 +220,6 @@ export const StateInput: FC<StateInputProps> = ({ defaultValue }) => (
     />
 );
 
-
 type PostalCodeInputProps = {
     defaultValue?: string;
 };

diff --git a/website/src/components/User/GroupCreationForm.tsx b/website/src/components/User/GroupCreationForm.tsx
@@ -2,10 +2,10 @@ import { type FC } from 'react';
 
 import { useGroupCreation } from '../../hooks/useGroupOperations.ts';
 import { routes } from '../../routes/routes.ts';
+import type { NewGroup } from '../../types/backend.ts';
 import { type ClientConfig } from '../../types/runtimeConfig.ts';
-import { withQueryProvider } from '../common/withQueryProvider.tsx';
 import { GroupForm, type GroupSubmitError, type GroupSubmitSuccess } from '../Group/GroupForm.tsx';
-import type { NewGroup } from '../../types/backend.ts';
+import { withQueryProvider } from '../common/withQueryProvider.tsx';
 
 interface GroupManagerProps {
     clientConfig: ClientConfig;
@@ -25,22 +25,16 @@ const InnerGroupCreationForm: FC<GroupManagerProps> = ({ clientConfig, accessTok
             return {
                 succeeded: true,
                 nextPageHref: routes.groupOverviewPage(result.group.groupId),
-            } as GroupSubmitSuccess
+            } as GroupSubmitSuccess;
         } else {
             return {
                 succeeded: false,
                 errorMessage: result.errorMessage,
-            } as GroupSubmitError
+            } as GroupSubmitError;
         }
     };
 
-    return (
-        <GroupForm
-            title='Create a new submitting group'
-            buttonText='Create group'
-            onSubmit={handleCreateGroup}
-        />
-    );
+    return <GroupForm title='Create a new submitting group' buttonText='Create group' onSubmit={handleCreateGroup} />;
 };
 
 export const GroupCreationForm = withQueryProvider(InnerGroupCreationForm);
diff --git a/website/src/components/User/GroupEditForm.tsx b/website/src/components/User/GroupEditForm.tsx
@@ -1,11 +1,11 @@
 import { type FC } from 'react';
 
-import { useGroupCreation, useGroupEdit } from '../../hooks/useGroupOperations.ts';
+import { useGroupEdit } from '../../hooks/useGroupOperations.ts';
 import { routes } from '../../routes/routes.ts';
+import type { GroupDetails, NewGroup } from '../../types/backend.ts';
 import { type ClientConfig } from '../../types/runtimeConfig.ts';
-import { withQueryProvider } from '../common/withQueryProvider.tsx';
 import { GroupForm, type GroupSubmitError, type GroupSubmitSuccess } from '../Group/GroupForm.tsx';
-import type { Group, GroupDetails, NewGroup } from '../../types/backend.ts';
+import { withQueryProvider } from '../common/withQueryProvider.tsx';
 
 interface GroupEditFormProps {
     prefetchedGroupDetails: GroupDetails;
@@ -14,7 +14,7 @@ interface GroupEditFormProps {
 }
 
 const InnerGroupEditForm: FC<GroupEditFormProps> = ({ prefetchedGroupDetails, clientConfig, accessToken }) => {
-    const {groupId, ...groupInfo} = prefetchedGroupDetails.group;
+    const { groupId, ...groupInfo } = prefetchedGroupDetails.group;
 
     const { editGroup } = useGroupEdit({
         clientConfig,
@@ -28,12 +28,12 @@ const InnerGroupEditForm: FC<GroupEditFormProps> = ({ prefetchedGroupDetails, cl
             return {
                 succeeded: true,
                 nextPageHref: routes.groupOverviewPage(result.group.groupId),
-            } as GroupSubmitSuccess
+            } as GroupSubmitSuccess;
         } else {
             return {
                 succeeded: false,
                 errorMessage: result.errorMessage,
-            } as GroupSubmitError
+            } as GroupSubmitError;
         }
     };
 

diff --git a/website/src/hooks/useGroupOperations.ts b/website/src/hooks/useGroupOperations.ts
@@ -76,13 +76,7 @@ export const useGroupCreation = ({
     };
 };
 
-export const useGroupEdit = ({
-    clientConfig,
-    accessToken,
-}: {
-    clientConfig: ClientConfig;
-    accessToken: string;
-}) => {
+export const useGroupEdit = ({ clientConfig, accessToken }: { clientConfig: ClientConfig; accessToken: string }) => {
     const { zodios } = useGroupManagementClient(clientConfig);
 
     const editGroup = useCallback(
@@ -141,13 +135,13 @@ function callEditGroup(accessToken: string, zodios: ZodiosInstance<typeof groupM
             const groupResult = await zodios.editGroup(group, {
                 headers: createAuthorizationHeader(accessToken),
                 params: {
-                    groupId
-                }
+                    groupId,
+                },
             });
             return {
                 succeeded: true,
                 group: groupResult,
-            } as CreateGroupSuccess;  // TODO change type 
+            } as CreateGroupSuccess; // TODO change type
         } catch (error) {
             const message = `Failed to create group: ${stringifyMaybeAxiosError(error)}`;
             return {

diff --git a/website/src/pages/group/[groupId]/edit.astro b/website/src/pages/group/[groupId]/edit.astro
@@ -7,7 +7,6 @@ import BaseLayout from '../../../layouts/BaseLayout.astro';
 import { GroupManagementClient } from '../../../services/groupManagementClient';
 import { getAccessToken } from '../../../utils/getAccessToken';
 
-
 const session = Astro.locals.session!;
 const accessToken = getAccessToken(session)!;
 const groupId = parseInt(Astro.params.groupId!, 10);
@@ -23,12 +22,7 @@ const groupManagementClient = GroupManagementClient.create();
 const groupDetailsResult = await groupManagementClient.getGroupDetails(accessToken, groupId);
 ---
 
-<BaseLayout
-    title={groupDetailsResult.match(
-        (groupDetails) => 'Edit group',
-        () => 'Group error',
-    )}
->
+<BaseLayout title='Edit group'>
     {
         !accessToken ? (
             <NeedToLogin message='You need to be logged in to edit this group.' />