FieldList fix

moonwalker · Sep 1, 2023 · 7a3ca38 · 7a3ca38
1 parent 45566bc
commit 7a3ca38
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/apps/web/src/components/editorial/fields.jsx b/apps/web/src/components/editorial/fields.jsx
@@ -73,7 +73,7 @@ const Field = ({ field, value, ...rest }) => {
 }
 
 
-const FieldList = ({ field, value, onChange, locale }) => {
+const FieldList = ({ field, value, onChange, locale, ...rest }) => {
     const [list, setList] = useState(value)
 
     const onListChange = (idx) => (value) => {
@@ -111,8 +111,8 @@ const FieldList = ({ field, value, onChange, locale }) => {
                     </svg>
                 </div>
                 {!field.reference ?
-                    <FieldInput className="border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:border-zinc-400" value={e} onChange={onListChange(i)} field={field} id={`${field.id}_${locale}-${i}`} /> :
-                    <ReferenceField className="border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:border-zinc-400" value={e} onChange={onListChange(i)} field={field} id={`${field.id}_${locale}-${i}`} disabled={i < list.length - 1 || !!e} />}
+                    <FieldInput {...rest} className="border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:border-zinc-400" value={e} onChange={onListChange(i)} field={field} id={`${field.id}_${locale}-${i}`} locale={locale}/> :
+                    <ReferenceField  {...rest} className="border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:border-zinc-400" value={e} onChange={onListChange(i)} field={field} id={`${field.id}_${locale}-${i}`} disabled={i < list.length - 1 || !!e} locale={locale}/>}
             </div>
             <div className="flex-auto ml-2">
                 <button className="border-2 border-gray-200 hover:bg-blue-200 text-gray font-bold py-2 px-3 rounded" onClick={onListDelete} id={`${field.id}_${locale}-${i}-delete`} data-idx={i}>

diff --git a/apps/web/src/components/editorial/reference-field.jsx b/apps/web/src/components/editorial/reference-field.jsx
@@ -6,27 +6,31 @@ import { useClient, endpoints, isSchema } from '../../lib/moonbase'
 export default function ReferenceField({ field, value, onSelect, owner, repo, branch, locale, disabled, onChange, ...rest }) {
     const client = useClient()
     const [reference, setReference] = useState(null)
-    const [loaded, setLoaded] = useState(false)
+    const [loaded, setLoaded] = useState(!value)
     const [showSelector, setShowSelector] = useState(false)
 
     useEffect(() => {
-        client.get(endpoints.reference(owner, repo, branch, field.type, value, locale)).then(data => {
-            if (data.error) {
-                return setReference(data.error)
-            }
-            setReference(data.schema.displayField && data.content.fields[data.schema.displayField] || value)
-        }).catch(err => setReference(err.message))
-            .finally(() => setLoaded(true))
-    }, [value])
+        if (!!value) {
+            client.get(endpoints.reference(owner, repo, branch, field.type, value, locale)).then(data => {
+                if (data.error) {
+                    return setReference(data.error)
+                }
+                setReference(data.schema.displayField && data.content.fields[data.schema.displayField] || value)
+            }).catch(err => setReference(err.message))
+                .finally(() => setLoaded(true))
+        }
+    }, [ owner, repo, branch, field, value])
 
     const selectReference = (name) => {
-        client.get(endpoints.entry(owner, repo, branch, field.type, name)).then(data => {
-            if (data.error) {
-                return setReference(data.error)
-            }
-            onChange(data.content.id || value, field.id, locale)
-            setShowSelector(false)
-        }).catch(err => setReference(err.message))
+        if (!!name) {
+            client.get(endpoints.entry(owner, repo, branch, field.type, name)).then(data => {
+                if (data.error) {
+                    return setReference(data.error)
+                }
+                onChange(data.content.id || value, field.id, locale)
+                setShowSelector(false)
+            }).catch(err => setReference(err.message))
+        }
     }
 
     return (<div className="md:flex md:items-center w-full">
@@ -66,7 +70,7 @@ const ReferenceSelector = ({ collection, shown, onSelect, owner, repo, branch })
             }
             setEntries(data.filter(e => !isSchema(e.name)))
         }).catch(err => setError(err.message))
-    }, [collection])
+    }, [owner, repo, branch, collection])
 
     const cancelButtonRef = useRef(null)