Cleanup

Signed-off-by: Cédric Boirard <[email protected]>

examples/cms/src/App.css

@@ -132,6 +132,10 @@ form {
     cursor: pointer;
 }
 
+.mapping .source-field input[type="checkbox"]:focus {
+    box-shadow: none;
+}
+
 .mapping footer {
     position: sticky;
     bottom: 0;

examples/cms/src/App.tsx

@@ -1,64 +1,86 @@
 import "./App.css"
 
-import { framer, ManagedCollection, ManagedCollectionField } from "framer-plugin"
-import { useEffect, useLayoutEffect, useState } from "react"
-import { DataSource, getDataSource, getDataSourcesIds, syncCollection } from "./data"
+import { framer, ManagedCollection } from "framer-plugin"
+import { useEffect, useLayoutEffect, useState, useRef } from "react"
+import { DataSource, getDataSource, getDataSourcesIds } from "./data"
 import { FieldMapping } from "./FieldMapping"
 import { SelectDataSource } from "./SelectDataSource"
-import { UI_DEFAULTS } from "./constants"
+import { Spinner } from "./components/Spinner"
 
 interface AppProps {
     collection: ManagedCollection
-    dataSourceId: string | null
-    slugFieldId: string | null
+    previouslyConfiguredDataSourceId: string | null
+    previouslyConfiguredSlugFieldId: string | null
 }
 
-export function App({ collection, dataSourceId, slugFieldId }: AppProps) {
+export function App({ collection, previouslyConfiguredDataSourceId, previouslyConfiguredSlugFieldId }: AppProps) {
     const [dataSource, setDataSource] = useState<DataSource | null>(null)
-    const [existingFields, setExistingFields] = useState<ManagedCollectionField[]>([])
 
-    useLayoutEffect(() => {
-        if (!dataSource) {
-            framer.showUI({
-                width: UI_DEFAULTS.SETUP_WIDTH,
-                height: UI_DEFAULTS.SETUP_HEIGHT,
-                resizable: false,
-            })
-            return
-        }
+    const hasStartedLoadingDataSource = useRef(false)
+    const [isLoadingConfiguredDataSource, setIsLoadingConfiguredDataSource] = useState(
+        Boolean(previouslyConfiguredDataSourceId)
+    )
+    const hasDataSourceSelected = Boolean(isLoadingConfiguredDataSource || dataSource)
 
+    useLayoutEffect(() => {
         framer.showUI({
-            width: UI_DEFAULTS.MAPPING_WIDTH,
-            height: UI_DEFAULTS.MAPPING_HEIGHT,
-            minWidth: UI_DEFAULTS.MAPPING_WIDTH,
-            minHeight: UI_DEFAULTS.MAPPING_HEIGHT,
-            resizable: true,
+            width: hasDataSourceSelected ? 360 : 320,
+            height: hasDataSourceSelected ? 425 : 305,
+            minWidth: hasDataSourceSelected ? 360 : undefined,
+            minHeight: hasDataSourceSelected ? 425 : undefined,
+            resizable: dataSource !== null,
         })
-    }, [dataSource])
-
-    useEffect(() => {
-        collection.getFields().then(setExistingFields)
-    }, [collection])
+    }, [hasDataSourceSelected, dataSource])
 
     useEffect(() => {
-        if (!dataSourceId) {
+        if (!previouslyConfiguredDataSourceId || hasStartedLoadingDataSource.current) {
             return
         }
 
-        getDataSource(dataSourceId).then(setDataSource)
-    }, [dataSourceId])
+        hasStartedLoadingDataSource.current = true
+        getDataSource(previouslyConfiguredDataSourceId)
+            .then(setDataSource)
+            .catch(error => {
+                console.error(error)
+                framer.notify(
+                    `Error loading previously configured data source "${previouslyConfiguredDataSourceId}". Check the logs for more details.`,
+                    {
+                        variant: "error",
+                    }
+                )
+            })
+            .finally(() => {
+                setIsLoadingConfiguredDataSource(false)
+            })
+    }, [previouslyConfiguredDataSourceId])
+
+    if (!isLoadingConfiguredDataSource && !dataSource) {
+        return <SelectDataSource dataSourceIds={getDataSourcesIds()} onSelectDataSource={setDataSource} />
+    }
+
+    if (isLoadingConfiguredDataSource) {
+        return <Spinner />
+    }
 
-    if (!dataSource) {
-        return <SelectDataSource dataSources={getDataSourcesIds()} onSelectDataSource={setDataSource} />
-    } else {
+    if (dataSource) {
         return (
             <FieldMapping
                 collection={collection}
                 dataSource={dataSource}
-                existingFields={existingFields}
-                slugFieldId={slugFieldId}
-                onImport={syncCollection}
+                initialSlugFieldId={previouslyConfiguredSlugFieldId}
             />
         )
     }
+
+    assertNever(
+        `Invalid state: ${JSON.stringify({
+            previouslyConfiguredDataSourceId,
+            isLoadingConfiguredDataSource,
+            dataSource,
+        })}`
+    )
+}
+
+const assertNever = (message: string): never => {
+    throw new Error(message)
 }