Refactor CreateObjectForm to use unique keys for object types

anyproto · Feb 14, 2025 · 72b2056 · 72b2056
1 parent 3ca475e
commit 72b2056
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 42 deletions.
diff --git a/src/components/CreateObjectForm.tsx b/src/components/CreateObjectForm.tsx
@@ -35,6 +35,10 @@ export default function CreateObjectForm({
 }: CreateObjectFormProps) {
   const [loading, setLoading] = useState(false);
   const hasSelectedSpaceAndType = selectedSpace && selectedType;
+  const selectedTypeUniqueKey = objectTypes.reduce(
+    (acc, type) => (type.id === selectedType ? type.unique_key : acc),
+    "",
+  );
 
   const { handleSubmit, itemProps } = useForm<CreateObjectFormValues>({
     initialValues: draftValues,
@@ -50,7 +54,7 @@ export default function CreateObjectForm({
           body: values.body || "",
           source: values.source || "",
           template_id: "",
-          object_type_unique_key: selectedType,
+          object_type_unique_key: selectedTypeUniqueKey,
         });
 
         if (response.object?.id) {
@@ -72,7 +76,7 @@ export default function CreateObjectForm({
     },
     validation: {
       name: (value) => {
-        if (!["ot-bookmark", "ot-note"].includes(selectedType) && !value) {
+        if (!["ot-bookmark", "ot-note"].includes(selectedTypeUniqueKey) && !value) {
           return "Name is required";
         }
       },
@@ -82,7 +86,7 @@ export default function CreateObjectForm({
         }
       },
       source: (value) => {
-        if (selectedType === "ot-bookmark" && !value) {
+        if (selectedTypeUniqueKey === "ot-bookmark" && !value) {
           return "Source is required for Bookmarks";
         }
       },
@@ -106,7 +110,7 @@ export default function CreateObjectForm({
     };
 
     return {
-      name: `Create ${objectTypes.find((type) => type.unique_key === selectedType)?.name} in ${spaces.find((space) => space.id === selectedSpace)?.name}`,
+      name: `Create ${objectTypes.find((type) => type.unique_key === selectedTypeUniqueKey)?.name} in ${spaces.find((space) => space.id === selectedSpace)?.name}`,
       link: url + "?launchContext=" + encodeURIComponent(JSON.stringify(launchContext)),
     };
   }
@@ -120,7 +124,7 @@ export default function CreateObjectForm({
           <Action.SubmitForm title="Create Object" icon={Icon.Plus} onSubmit={handleSubmit} />
           {hasSelectedSpaceAndType && (
             <Action.CreateQuicklink
-              title={`Create Quicklink: ${objectTypes.find((type) => type.unique_key === selectedType)?.name}`}
+              title={`Create Quicklink: ${objectTypes.find((type) => type.unique_key === selectedTypeUniqueKey)?.name}`}
               quicklink={getQuicklink()}
             />
           )}
@@ -154,7 +158,7 @@ export default function CreateObjectForm({
         info="Select the type of object to create"
       >
         {objectTypes.map((type) => (
-          <Form.Dropdown.Item key={type.unique_key} value={type.unique_key} title={type.name} icon={type.icon} />
+          <Form.Dropdown.Item key={type.id} value={type.id} title={type.name} icon={type.icon} />
         ))}
       </Form.Dropdown>
 
@@ -176,7 +180,7 @@ export default function CreateObjectForm({
 
       {hasSelectedSpaceAndType && (
         <>
-          {selectedType === "ot-bookmark" ? (
+          {selectedTypeUniqueKey === "ot-bookmark" ? (
             <Form.TextField
               {...itemProps.source}
               title="URL"
@@ -185,15 +189,15 @@ export default function CreateObjectForm({
             />
           ) : (
             <>
-              {!["ot-note"].includes(selectedType) && (
+              {!["ot-note"].includes(selectedTypeUniqueKey) && (
                 <Form.TextField
                   {...itemProps.name}
                   title="Name"
                   placeholder="Add a name"
                   info="Enter the name of the object"
                 />
               )}
-              {!["ot-task", "ot-note", "ot-profile"].includes(selectedType) && (
+              {!["ot-task", "ot-note", "ot-profile"].includes(selectedTypeUniqueKey) && (
                 <Form.TextField
                   {...itemProps.icon}
                   title="Icon"
@@ -207,7 +211,7 @@ export default function CreateObjectForm({
                 placeholder="Add a description"
                 info="Provide a brief description of the object"
               />
-              {!["ot-set", "ot-collection"].includes(selectedType) && (
+              {!["ot-set", "ot-collection"].includes(selectedTypeUniqueKey) && (
                 <Form.TextArea
                   {...itemProps.body}
                   title="Body"

diff --git a/src/hooks/useCreateObjectData.ts b/src/hooks/useCreateObjectData.ts
@@ -1,7 +1,7 @@
 import { showToast, Toast } from "@raycast/api";
-import { useEffect, useState } from "react";
+import { useCachedPromise } from "@raycast/utils";
+import { useEffect, useMemo, useState } from "react";
 import { CreateObjectFormValues } from "../create-object";
-import { Type } from "../helpers/schemas";
 import { fetchAllTypesForSpace } from "../helpers/types";
 import { useSearch } from "./useSearch";
 import { useSpaces } from "./useSpaces";
@@ -10,8 +10,6 @@ export function useCreateObjectData(initialValues?: CreateObjectFormValues) {
   const [selectedSpace, setSelectedSpace] = useState(initialValues?.space || "");
   const [selectedType, setSelectedType] = useState(initialValues?.type || "");
   const [selectedList, setSelectedList] = useState(initialValues?.list || "");
-  const [filteredTypes, setFilteredTypes] = useState<Type[]>([]);
-  const [isLoadingTypes, setIsLoadingTypes] = useState(false);
   const { spaces, spacesError, isLoadingSpaces } = useSpaces();
   const {
     objects: lists,
@@ -37,47 +35,39 @@ export function useCreateObjectData(initialValues?: CreateObjectFormValues) {
     }
   }, [spaces]);
 
-  useEffect(() => {
-    const fetchAllTypes = async () => {
-      if (selectedSpace) {
-        setIsLoadingTypes(true);
-        try {
-          const allTypes = await fetchAllTypesForSpace(selectedSpace);
-          const validTypes = allTypes.filter((type) => !restrictedTypes.includes(type.unique_key));
-          setFilteredTypes(validTypes);
-        } catch (error) {
-          if (error instanceof Error) {
-            showToast(Toast.Style.Failure, "Failed to fetch types", error.message);
-          } else {
-            showToast(Toast.Style.Failure, "Failed to fetch types", "An unknown error occurred.");
-          }
-        } finally {
-          setIsLoadingTypes(false);
-        }
-      }
-    };
+  const {
+    data: allTypes,
+    error: typesError,
+    isLoading: isLoadingTypes,
+  } = useCachedPromise(fetchAllTypesForSpace, [selectedSpace], { execute: !!selectedSpace });
 
-    fetchAllTypes();
-  }, [selectedSpace]);
+  const objectTypes = useMemo(() => {
+    if (!allTypes) return [];
+    return allTypes.filter((type) => !restrictedTypes.includes(type.unique_key));
+  }, [allTypes, restrictedTypes]);
 
   useEffect(() => {
-    if (filteredTypes.length > 0 && !selectedType) {
-      setSelectedType(filteredTypes[0].unique_key);
+    if (objectTypes.length > 0 && !selectedType) {
+      setSelectedType(objectTypes[0].id);
     }
-  }, [filteredTypes]);
+  }, [objectTypes]);
 
   useEffect(() => {
-    if (spacesError || listsError) {
-      showToast(Toast.Style.Failure, "Failed to fetch latest data", spacesError?.message || listsError?.message);
+    if (spacesError || listsError || typesError) {
+      showToast(
+        Toast.Style.Failure,
+        "Failed to fetch latest data",
+        spacesError?.message || listsError?.message || typesError?.message,
+      );
     }
-  }, [spacesError, listsError]);
+  }, [spacesError, listsError, typesError]);
 
   const isLoading = isLoadingSpaces || isLoadingTypes || isLoadingLists;
 
   return {
     spaces,
     lists,
-    objectTypes: filteredTypes,
+    objectTypes,
     selectedSpace,
     setSelectedSpace,
     selectedType,