Further cleanup of api usage

CLIMB-TRE · Jan 22, 2025 · 6381ffc · 6381ffc
1 parent 3d2d579
commit 6381ffc
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 43 deletions.
diff --git a/lib/Onyx.tsx b/lib/Onyx.tsx
@@ -27,7 +27,7 @@ import {
   TypeObject,
   LookupObject,
   ProjectPermissionType,
-  FieldsInfoDetailResponse,
+  FieldsResponse,
   ErrorResponse,
 } from "./types";
 import { OnyxProps } from "./interfaces";
@@ -58,9 +58,7 @@ function flattenFields(fields: Record<string, ProjectField>) {
   return flatFields;
 }
 
-const useFieldsInfo = (
-  fieldsResponse: FieldsInfoDetailResponse | ErrorResponse
-) => {
+const useFieldsInfo = (fieldsResponse: FieldsResponse | ErrorResponse) => {
   return useMemo(() => {
     if (fieldsResponse?.status !== "success") {
       return {

diff --git a/lib/components/Dropdowns.tsx b/lib/components/Dropdowns.tsx
@@ -3,7 +3,7 @@ import Select, { components, OptionProps } from "react-select";
 import { useChoicesQuery } from "../api";
 import selectStyles from "../utils/selectStyles";
 import { PageProps } from "../interfaces";
-import { ChoiceDescription, OptionType } from "../types";
+import { ErrorResponse, OptionType, ChoicesResponse } from "../types";
 
 interface GenericDropdownProps {
   options: string[];
@@ -121,36 +121,28 @@ function MultiDropdown(props: MultiDropdownProps) {
   );
 }
 
-function Choice(props: ChoiceProps) {
-  const { data: choicesResponse } = useChoicesQuery(props);
-
+const useChoiceDescriptions = (data: ChoicesResponse | ErrorResponse) => {
   // Get a map of choices to their descriptions
-  const choiceDescriptions = useMemo(() => {
-    if (choicesResponse?.status !== "success") return new Map<string, string>();
+  return useMemo(() => {
+    if (data?.status !== "success") return new Map<string, string>();
     return new Map(
-      Object.entries(choicesResponse.data).map(([choice, description]) => [
+      Object.entries(data.data).map(([choice, description]) => [
         choice,
-        (description as ChoiceDescription).description,
+        description.description,
       ])
     );
-  }, [choicesResponse]);
+  }, [data]);
+};
 
+function Choice(props: ChoiceProps) {
+  const { data } = useChoicesQuery(props);
+  const choiceDescriptions = useChoiceDescriptions(data);
   return <Dropdown {...props} titles={choiceDescriptions} />;
 }
 
 function MultiChoice(props: MultiChoiceProps) {
-  const { data: choicesResponse } = useChoicesQuery(props);
-
-  const choiceDescriptions = useMemo(() => {
-    if (choicesResponse?.status !== "success") return new Map<string, string>();
-    return new Map(
-      Object.entries(choicesResponse.data).map(([choice, description]) => [
-        choice,
-        (description as ChoiceDescription).description,
-      ])
-    );
-  }, [choicesResponse]);
-
+  const { data } = useChoicesQuery(props);
+  const choiceDescriptions = useChoiceDescriptions(data);
   return <MultiDropdown {...props} titles={choiceDescriptions} />;
 }
 

diff --git a/lib/components/Header.tsx b/lib/components/Header.tsx
@@ -50,24 +50,21 @@ function HeaderVersion({
 }
 
 function Header(props: HeaderProps) {
-  const {
-    isFetching: profilePending,
-    error: profileError,
-    data: profileResponse,
-  } = useProfileQuery(props);
+  const { isFetching, error, data } = useProfileQuery(props);
 
-  const { username, site } = useMemo(() => {
-    if (profileResponse?.status !== "success")
+  // Get the user profile
+  const profile = useMemo(() => {
+    if (data?.status !== "success")
       return {
         username: "None",
         site: "None",
       };
 
     return {
-      username: profileResponse.data.username,
-      site: profileResponse.data.site,
+      username: data.data.username,
+      site: data.data.site,
     };
-  }, [profileResponse]);
+  }, [data]);
 
   return (
     <Navbar
@@ -108,11 +105,11 @@ function Header(props: HeaderProps) {
                       <HeaderText
                         label="User"
                         value={
-                          profilePending
+                          isFetching
                             ? "Loading..."
-                            : profileError
+                            : error
                             ? "Failed to load"
-                            : username
+                            : profile.username
                         }
                       />
                     </Nav.Link>
@@ -122,11 +119,11 @@ function Header(props: HeaderProps) {
                       <HeaderText
                         label="Site"
                         value={
-                          profilePending
+                          isFetching
                             ? "Loading..."
-                            : profileError
+                            : error
                             ? "Failed to load"
-                            : site
+                            : profile.site
                         }
                       />
                     </Nav.Link>

diff --git a/lib/types.ts b/lib/types.ts
@@ -115,13 +115,17 @@ type RecordDetailResponse = SuccessResponse & {
   data: RecordType;
 };
 
-type FieldsInfoDetailResponse = SuccessResponse & {
+type FieldsResponse = SuccessResponse & {
   data: {
     name: string;
     fields: Record<string, ProjectField>;
   };
 };
 
+type ChoicesResponse = SuccessResponse & {
+  data: Record<string, ChoiceDescription>;
+};
+
 // TODO: Use a generic response type
 // type Response<T> =
 //   | ErrorResponse
@@ -149,7 +153,8 @@ export type {
   SuccessResponse,
   RecordListResponse,
   RecordDetailResponse,
-  FieldsInfoDetailResponse,
+  FieldsResponse,
+  ChoicesResponse,
 };
 
 export { ExportStatus };