@webiny/app-headless-cms 6.0.0-beta.0 → 6.0.0-rc.1

package/admin/plugins/fieldRenderers/ref/components/useReference.js

@@ -1,98 +1,73 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useReference = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _hooks = require("../../../../hooks");
-var _graphql = require("./graphql");
-var _helpers = require("./helpers");
-var _utils = require("@webiny/utils");
-var getValueHash = function getValueHash(value) {
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useApolloClient, useModelFieldGraphqlContext } from "../../../../hooks/index.js";
+import { SEARCH_CONTENT_ENTRIES, GET_CONTENT_ENTRY } from "./graphql.js";
+import { convertReferenceEntriesToOptionCollection, convertReferenceEntryToOption } from "./helpers.js";
+import { parseIdentifier } from "@webiny/utils";
+const getValueHash = value => {
   if (!value || !value.id && !value.entryId) {
     return null;
   } else if (value.entryId) {
     return value.entryId;
   }
-  var _parseIdentifier = (0, _utils.parseIdentifier)(value.id),
-    id = _parseIdentifier.id;
+  const {
+    id
+  } = parseIdentifier(value.id);
   return id;
 };
-var useReference = exports.useReference = function useReference(_ref) {
-  var bind = _ref.bind,
-    field = _ref.field;
-  var allEntries = (0, _react.useRef)({});
-  var client = (0, _hooks.useApolloClient)();
-  var _useState = (0, _react.useState)(""),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    search = _useState2[0],
-    setSearch = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    loading = _useState4[0],
-    setLoading = _useState4[1];
-  var _useState5 = (0, _react.useState)({}),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    entries = _useState6[0],
-    setEntries = _useState6[1];
-  var _useState7 = (0, _react.useState)({}),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    latestEntries = _useState8[0],
-    setLatestEntries = _useState8[1];
-  var _useState9 = (0, _react.useState)(null),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    valueEntry = _useState10[0],
-    setValueEntry = _useState10[1];
-  var requestContext = (0, _hooks.useModelFieldGraphqlContext)();
-  var models = field.settings ? field.settings.models || [] : [];
-  var modelsHash = models.map(function (model) {
-    return model.modelId;
-  }).join(",");
-  var value = bind.value;
-  var valueHash = getValueHash(value);
-  var searchEntries = async function searchEntries() {
+export const useReference = ({
+  bind,
+  field
+}) => {
+  const allEntries = useRef({});
+  const client = useApolloClient();
+  const [search, setSearch] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [entries, setEntries] = useState({});
+  const [latestEntries, setLatestEntries] = useState({});
+  const [valueEntry, setValueEntry] = useState(null);
+  const requestContext = useModelFieldGraphqlContext();
+  const models = field.settings ? field.settings.models || [] : [];
+  const modelsHash = models.map(model => model.modelId).join(",");
+  const value = bind.value;
+  const valueHash = getValueHash(value);
+  const searchEntries = async () => {
     if (!search) {
       return;
     }
     setLoading(true);
-    var _await$client$query = await client.query({
-        query: _graphql.SEARCH_CONTENT_ENTRIES,
-        variables: {
-          modelIds: models.map(function (m) {
-            return m.modelId;
-          }),
-          query: search,
-          limit: 10
-        },
-        context: requestContext
-      }),
-      data = _await$client$query.data;
+    const {
+      data
+    } = await client.query({
+      query: SEARCH_CONTENT_ENTRIES,
+      variables: {
+        modelIds: models.map(m => m.modelId),
+        query: search,
+        limit: 10
+      },
+      context: requestContext
+    });
     setLoading(false);
-    var collection = (0, _helpers.convertReferenceEntriesToOptionCollection)(data.content.data);
+    const collection = convertReferenceEntriesToOptionCollection(data.content.data);
     if (valueEntry) {
       collection[valueEntry.entryId] = valueEntry;
     }
-    allEntries.current = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, allEntries.current), collection);
+    allEntries.current = {
+      ...allEntries.current,
+      ...collection
+    };
     setEntries(collection);
   };
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     searchEntries();
   }, [search]);
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (models.length === 0) {
       return;
     }
     client.query({
-      query: _graphql.SEARCH_CONTENT_ENTRIES,
+      query: SEARCH_CONTENT_ENTRIES,
       variables: {
-        modelIds: models.map(function (m) {
-          return m.modelId;
-        }),
+        modelIds: models.map(m => m.modelId),
         limit: 10
       },
       /**
@@ -101,29 +76,31 @@ var useReference = exports.useReference = function useReference(_ref) {
        */
       fetchPolicy: "network-only",
       context: requestContext
-    }).then(function (_ref2) {
-      var data = _ref2.data;
-      var latestEntryData = (0, _helpers.convertReferenceEntriesToOptionCollection)(data.content.data);
+    }).then(({
+      data
+    }) => {
+      const latestEntryData = convertReferenceEntriesToOptionCollection(data.content.data);
       if (valueEntry) {
         latestEntryData[valueEntry.entryId] = valueEntry;
       }
       setLatestEntries(latestEntryData);
-      allEntries.current = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, allEntries.current), latestEntryData);
+      allEntries.current = {
+        ...allEntries.current,
+        ...latestEntryData
+      };
     });
   }, [modelsHash]);
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (!value || !models) {
-      setValueEntry(function () {
-        return null;
-      });
+      setValueEntry(() => null);
       return;
     }
-    var entry = valueHash ? allEntries.current[valueHash] : null;
+    const entry = valueHash ? allEntries.current[valueHash] : null;
     if (entry) {
       /**
        * if entry exists set valueEntry to that one so we do not load new one
        */
-      setValueEntry(function () {
+      setValueEntry(() => {
         return entry;
       });
       return;
@@ -134,7 +111,7 @@ var useReference = exports.useReference = function useReference(_ref) {
      * We do this in a single query because there might not be a published entry so we can use the latest one.
      */
     client.query({
-      query: _graphql.GET_CONTENT_ENTRY,
+      query: GET_CONTENT_ENTRY,
       variables: {
         entry: {
           modelId: value.modelId,
@@ -142,32 +119,38 @@ var useReference = exports.useReference = function useReference(_ref) {
         }
       },
       context: requestContext
-    }).then(function (res) {
+    }).then(res => {
       setLoading(false);
-      var dataEntry = res.data.latest.data;
+      const dataEntry = res.data.latest.data;
       if (!dataEntry) {
         return;
       }
-      var option = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, (0, _helpers.convertReferenceEntryToOption)(dataEntry)), {}, {
+      const option = {
+        ...convertReferenceEntryToOption(dataEntry),
         latest: dataEntry.id,
         published: res.data.published.data ? res.data.published.data.id : null
-      });
+      };
       allEntries.current[option.entryId] = option;
-      setLatestEntries(function (prev) {
-        return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prev), {}, (0, _defineProperty2.default)({}, option.entryId, (0, _objectSpread3.default)({}, option)));
+      setLatestEntries(prev => {
+        return {
+          ...prev,
+          [option.entryId]: {
+            ...option
+          }
+        };
       });
       /**
        * Calculate a couple of props for the Autocomplete component.
        */
-      setValueEntry(function () {
+      setValueEntry(() => {
         return option;
       });
     });
   }, [valueHash, modelsHash]);
-  var onChange = (0, _react.useCallback)(function (value, entry) {
+  const onChange = useCallback((value, entry) => {
     if (value !== null) {
       setSearch("");
-      setValueEntry(function () {
+      setValueEntry(() => {
         return entry;
       });
       bind.onChange({
@@ -176,36 +159,30 @@ var useReference = exports.useReference = function useReference(_ref) {
       });
       return;
     }
-    setValueEntry(function () {
-      return null;
-    });
+    setValueEntry(() => null);
     bind.onChange(null);
   }, []);
 
   /**
    * Format options for the Autocomplete component.
    */
-  var options = (0, _react.useMemo)(function () {
-    return Object.values(entries);
-  }, [valueHash, entries]);
+  const options = useMemo(() => Object.values(entries), [valueHash, entries]);
 
   /**
    * Format default options for the Autocomplete component.
    */
-  var defaultOptions = (0, _react.useMemo)(function () {
+  const defaultOptions = useMemo(() => {
     return Object.values(latestEntries);
   }, [valueHash, latestEntries]);
-  var outputOptions = (search && options ? options : defaultOptions) || [];
-  if (valueEntry && outputOptions.some(function (opt) {
-    return opt.entryId === valueEntry.entryId;
-  }) === false) {
+  const outputOptions = (search && options ? options : defaultOptions) || [];
+  if (valueEntry && outputOptions.some(opt => opt.entryId === valueEntry.entryId) === false) {
     outputOptions.push(valueEntry);
   }
   return {
-    onChange: onChange,
-    setSearch: setSearch,
+    onChange,
+    setSearch,
     value: valueEntry,
-    loading: loading,
+    loading,
     options: outputOptions
   };
 };

package/admin/plugins/fieldRenderers/ref/components/useReference.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_hooks","_graphql","_helpers","_utils","getValueHash","value","id","entryId","_parseIdentifier","parseIdentifier","useReference","exports","_ref","bind","field","allEntries","useRef","client","useApolloClient","_useState","useState","_useState2","_slicedToArray2","default","search","setSearch","_useState3","_useState4","loading","setLoading","_useState5","_useState6","entries","setEntries","_useState7","_useState8","latestEntries","setLatestEntries","_useState9","_useState10","valueEntry","setValueEntry","requestContext","useModelFieldGraphqlContext","models","settings","modelsHash","map","model","modelId","join","valueHash","searchEntries","_await$client$query","query","SEARCH_CONTENT_ENTRIES","variables","modelIds","m","limit","context","data","collection","convertReferenceEntriesToOptionCollection","content","current","_objectSpread3","useEffect","length","fetchPolicy","then","_ref2","latestEntryData","entry","GET_CONTENT_ENTRY","res","dataEntry","latest","option","convertReferenceEntryToOption","published","prev","_defineProperty2","onChange","useCallback","options","useMemo","Object","values","defaultOptions","outputOptions","some","opt","push"],"sources":["useReference.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useApolloClient, useModelFieldGraphqlContext } from \"~/admin/hooks\";\nimport {\n    SEARCH_CONTENT_ENTRIES,\n    GET_CONTENT_ENTRY,\n    CmsEntryGetQueryResponse,\n    CmsEntryGetQueryVariables,\n    CmsEntrySearchQueryResponse,\n    CmsEntrySearchQueryVariables\n} from \"./graphql\";\nimport { CmsModelField, CmsModel } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { OptionItem, OptionItemCollection } from \"./types\";\nimport {\n    convertReferenceEntriesToOptionCollection,\n    convertReferenceEntryToOption\n} from \"./helpers\";\nimport { parseIdentifier } from \"@webiny/utils\";\n\ninterface UseReferenceHookArgs {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n}\n\ninterface UseReferenceHookValue {\n    onChange: (value: any, entry: OptionItem) => void;\n    setSearch: (value: string) => void;\n    value: OptionItem | null;\n    loading: boolean;\n    options: OptionItem[];\n}\n\ntype UseReferenceHook = (args: UseReferenceHookArgs) => UseReferenceHookValue;\n\nconst getValueHash = (value: any): string | null => {\n    if (!value || (!value.id && !value.entryId)) {\n        return null;\n    } else if (value.entryId) {\n        return value.entryId;\n    }\n    const { id } = parseIdentifier(value.id);\n    return id;\n};\n\nexport const useReference: UseReferenceHook = ({ bind, field }) => {\n    const allEntries = useRef<OptionItemCollection>({});\n    const client = useApolloClient();\n    const [search, setSearch] = useState<string>(\"\");\n    const [loading, setLoading] = useState<boolean>(false);\n    const [entries, setEntries] = useState<OptionItemCollection>({});\n    const [latestEntries, setLatestEntries] = useState<OptionItemCollection>({});\n    const [valueEntry, setValueEntry] = useState<OptionItem | null>(null);\n    const requestContext = useModelFieldGraphqlContext();\n\n    const models = (field.settings ? field.settings.models || [] : []) as Pick<\n        CmsModel,\n        \"modelId\" | \"name\"\n    >[];\n    const modelsHash = models.map(model => model.modelId).join(\",\");\n\n    const value = bind.value;\n    const valueHash = getValueHash(value);\n\n    const searchEntries = async () => {\n        if (!search) {\n            return;\n        }\n\n        setLoading(true);\n        const { data } = await client.query<\n            CmsEntrySearchQueryResponse,\n            CmsEntrySearchQueryVariables\n        >({\n            query: SEARCH_CONTENT_ENTRIES,\n            variables: {\n                modelIds: models.map(m => m.modelId),\n                query: search,\n                limit: 10\n            },\n            context: requestContext\n        });\n        setLoading(false);\n\n        const collection = convertReferenceEntriesToOptionCollection(data.content.data);\n        if (valueEntry) {\n            collection[valueEntry.entryId] = valueEntry;\n        }\n        allEntries.current = {\n            ...allEntries.current,\n            ...collection\n        };\n\n        setEntries(collection);\n    };\n\n    useEffect(() => {\n        searchEntries();\n    }, [search]);\n\n    useEffect(() => {\n        if (models.length === 0) {\n            return;\n        }\n        client\n            .query<CmsEntrySearchQueryResponse, CmsEntrySearchQueryVariables>({\n                query: SEARCH_CONTENT_ENTRIES,\n                variables: {\n                    modelIds: models.map(m => m.modelId),\n                    limit: 10\n                },\n                /**\n                 * We cannot update this query response in cache after a reference entry being created/deleted,\n                 * which result in cached response being stale, therefore, we're setting the fetchPolicy to \"network-only\" to by passing cache.\n                 */\n                fetchPolicy: \"network-only\",\n                context: requestContext\n            })\n            .then(({ data }) => {\n                const latestEntryData = convertReferenceEntriesToOptionCollection(\n                    data.content.data\n                );\n                if (valueEntry) {\n                    latestEntryData[valueEntry.entryId] = valueEntry;\n                }\n\n                setLatestEntries(latestEntryData);\n                allEntries.current = {\n                    ...allEntries.current,\n                    ...latestEntryData\n                };\n            });\n    }, [modelsHash]);\n\n    useEffect(() => {\n        if (!value || !models) {\n            setValueEntry(() => null);\n            return;\n        }\n\n        const entry = valueHash ? allEntries.current[valueHash] : null;\n        if (entry) {\n            /**\n             * if entry exists set valueEntry to that one so we do not load new one\n             */\n            setValueEntry(() => {\n                return entry;\n            });\n            return;\n        }\n\n        setLoading(true);\n        /**\n         * Query loads both latest and published entries.\n         * We do this in a single query because there might not be a published entry so we can use the latest one.\n         */\n        client\n            .query<CmsEntryGetQueryResponse, CmsEntryGetQueryVariables>({\n                query: GET_CONTENT_ENTRY,\n                variables: {\n                    entry: {\n                        modelId: value.modelId,\n                        id: value.id\n                    }\n                },\n                context: requestContext\n            })\n            .then(res => {\n                setLoading(false);\n                const dataEntry = res.data.latest.data;\n                if (!dataEntry) {\n                    return;\n                }\n                const option: OptionItem = {\n                    ...convertReferenceEntryToOption(dataEntry),\n                    latest: dataEntry.id,\n                    published: res.data.published.data ? res.data.published.data.id : null\n                };\n                allEntries.current[option.entryId] = option;\n                setLatestEntries(prev => {\n                    return {\n                        ...prev,\n                        [option.entryId]: {\n                            ...option\n                        }\n                    };\n                });\n                /**\n                 * Calculate a couple of props for the Autocomplete component.\n                 */\n                setValueEntry(() => {\n                    return option;\n                });\n            });\n    }, [valueHash, modelsHash]);\n\n    const onChange = useCallback((value: string, entry: OptionItem) => {\n        if (value !== null) {\n            setSearch(\"\");\n\n            setValueEntry(() => {\n                return entry;\n            });\n\n            bind.onChange({\n                modelId: entry.modelId,\n                id: entry.id\n            });\n            return;\n        }\n\n        setValueEntry(() => null);\n        bind.onChange(null);\n    }, []);\n\n    /**\n     * Format options for the Autocomplete component.\n     */\n    const options = useMemo(() => Object.values(entries), [valueHash, entries]);\n\n    /**\n     * Format default options for the Autocomplete component.\n     */\n    const defaultOptions = useMemo(() => {\n        return Object.values(latestEntries);\n    }, [valueHash, latestEntries]);\n\n    const outputOptions: OptionItem[] = (search && options ? options : defaultOptions) || [];\n\n    if (valueEntry && outputOptions.some(opt => opt.entryId === valueEntry.entryId) === false) {\n        outputOptions.push(valueEntry);\n    }\n\n    return {\n        onChange,\n        setSearch,\n        value: valueEntry,\n        loading,\n        options: outputOptions\n    };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useCallback","useEffect","useMemo","useRef","useState","useApolloClient","useModelFieldGraphqlContext","SEARCH_CONTENT_ENTRIES","GET_CONTENT_ENTRY","convertReferenceEntriesToOptionCollection","convertReferenceEntryToOption","parseIdentifier","getValueHash","value","id","entryId","useReference","bind","field","allEntries","client","search","setSearch","loading","setLoading","entries","setEntries","latestEntries","setLatestEntries","valueEntry","setValueEntry","requestContext","models","settings","modelsHash","map","model","modelId","join","valueHash","searchEntries","data","query","variables","modelIds","m","limit","context","collection","content","current","length","fetchPolicy","then","latestEntryData","entry","res","dataEntry","latest","option","published","prev","onChange","options","Object","values","defaultOptions","outputOptions","some","opt","push"],"sources":["useReference.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useApolloClient, useModelFieldGraphqlContext } from \"~/admin/hooks/index.js\";\nimport type {\n    CmsEntryGetQueryResponse,\n    CmsEntryGetQueryVariables,\n    CmsEntrySearchQueryResponse,\n    CmsEntrySearchQueryVariables\n} from \"./graphql.js\";\nimport { SEARCH_CONTENT_ENTRIES, GET_CONTENT_ENTRY } from \"./graphql.js\";\nimport type { CmsModelField, CmsModel } from \"~/types.js\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport type { OptionItem, OptionItemCollection } from \"./types.js\";\nimport {\n    convertReferenceEntriesToOptionCollection,\n    convertReferenceEntryToOption\n} from \"./helpers.js\";\nimport { parseIdentifier } from \"@webiny/utils\";\n\ninterface UseReferenceHookArgs {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n}\n\ninterface UseReferenceHookValue {\n    onChange: (value: any, entry: OptionItem) => void;\n    setSearch: (value: string) => void;\n    value: OptionItem | null;\n    loading: boolean;\n    options: OptionItem[];\n}\n\ntype UseReferenceHook = (args: UseReferenceHookArgs) => UseReferenceHookValue;\n\nconst getValueHash = (value: any): string | null => {\n    if (!value || (!value.id && !value.entryId)) {\n        return null;\n    } else if (value.entryId) {\n        return value.entryId;\n    }\n    const { id } = parseIdentifier(value.id);\n    return id;\n};\n\nexport const useReference: UseReferenceHook = ({ bind, field }) => {\n    const allEntries = useRef<OptionItemCollection>({});\n    const client = useApolloClient();\n    const [search, setSearch] = useState<string>(\"\");\n    const [loading, setLoading] = useState<boolean>(false);\n    const [entries, setEntries] = useState<OptionItemCollection>({});\n    const [latestEntries, setLatestEntries] = useState<OptionItemCollection>({});\n    const [valueEntry, setValueEntry] = useState<OptionItem | null>(null);\n    const requestContext = useModelFieldGraphqlContext();\n\n    const models = (field.settings ? field.settings.models || [] : []) as Pick<\n        CmsModel,\n        \"modelId\" | \"name\"\n    >[];\n    const modelsHash = models.map(model => model.modelId).join(\",\");\n\n    const value = bind.value;\n    const valueHash = getValueHash(value);\n\n    const searchEntries = async () => {\n        if (!search) {\n            return;\n        }\n\n        setLoading(true);\n        const { data } = await client.query<\n            CmsEntrySearchQueryResponse,\n            CmsEntrySearchQueryVariables\n        >({\n            query: SEARCH_CONTENT_ENTRIES,\n            variables: {\n                modelIds: models.map(m => m.modelId),\n                query: search,\n                limit: 10\n            },\n            context: requestContext\n        });\n        setLoading(false);\n\n        const collection = convertReferenceEntriesToOptionCollection(data.content.data);\n        if (valueEntry) {\n            collection[valueEntry.entryId] = valueEntry;\n        }\n        allEntries.current = {\n            ...allEntries.current,\n            ...collection\n        };\n\n        setEntries(collection);\n    };\n\n    useEffect(() => {\n        searchEntries();\n    }, [search]);\n\n    useEffect(() => {\n        if (models.length === 0) {\n            return;\n        }\n        client\n            .query<CmsEntrySearchQueryResponse, CmsEntrySearchQueryVariables>({\n                query: SEARCH_CONTENT_ENTRIES,\n                variables: {\n                    modelIds: models.map(m => m.modelId),\n                    limit: 10\n                },\n                /**\n                 * We cannot update this query response in cache after a reference entry being created/deleted,\n                 * which result in cached response being stale, therefore, we're setting the fetchPolicy to \"network-only\" to by passing cache.\n                 */\n                fetchPolicy: \"network-only\",\n                context: requestContext\n            })\n            .then(({ data }) => {\n                const latestEntryData = convertReferenceEntriesToOptionCollection(\n                    data.content.data\n                );\n                if (valueEntry) {\n                    latestEntryData[valueEntry.entryId] = valueEntry;\n                }\n\n                setLatestEntries(latestEntryData);\n                allEntries.current = {\n                    ...allEntries.current,\n                    ...latestEntryData\n                };\n            });\n    }, [modelsHash]);\n\n    useEffect(() => {\n        if (!value || !models) {\n            setValueEntry(() => null);\n            return;\n        }\n\n        const entry = valueHash ? allEntries.current[valueHash] : null;\n        if (entry) {\n            /**\n             * if entry exists set valueEntry to that one so we do not load new one\n             */\n            setValueEntry(() => {\n                return entry;\n            });\n            return;\n        }\n\n        setLoading(true);\n        /**\n         * Query loads both latest and published entries.\n         * We do this in a single query because there might not be a published entry so we can use the latest one.\n         */\n        client\n            .query<CmsEntryGetQueryResponse, CmsEntryGetQueryVariables>({\n                query: GET_CONTENT_ENTRY,\n                variables: {\n                    entry: {\n                        modelId: value.modelId,\n                        id: value.id\n                    }\n                },\n                context: requestContext\n            })\n            .then(res => {\n                setLoading(false);\n                const dataEntry = res.data.latest.data;\n                if (!dataEntry) {\n                    return;\n                }\n                const option: OptionItem = {\n                    ...convertReferenceEntryToOption(dataEntry),\n                    latest: dataEntry.id,\n                    published: res.data.published.data ? res.data.published.data.id : null\n                };\n                allEntries.current[option.entryId] = option;\n                setLatestEntries(prev => {\n                    return {\n                        ...prev,\n                        [option.entryId]: {\n                            ...option\n                        }\n                    };\n                });\n                /**\n                 * Calculate a couple of props for the Autocomplete component.\n                 */\n                setValueEntry(() => {\n                    return option;\n                });\n            });\n    }, [valueHash, modelsHash]);\n\n    const onChange = useCallback((value: string, entry: OptionItem) => {\n        if (value !== null) {\n            setSearch(\"\");\n\n            setValueEntry(() => {\n                return entry;\n            });\n\n            bind.onChange({\n                modelId: entry.modelId,\n                id: entry.id\n            });\n            return;\n        }\n\n        setValueEntry(() => null);\n        bind.onChange(null);\n    }, []);\n\n    /**\n     * Format options for the Autocomplete component.\n     */\n    const options = useMemo(() => Object.values(entries), [valueHash, entries]);\n\n    /**\n     * Format default options for the Autocomplete component.\n     */\n    const defaultOptions = useMemo(() => {\n        return Object.values(latestEntries);\n    }, [valueHash, latestEntries]);\n\n    const outputOptions: OptionItem[] = (search && options ? options : defaultOptions) || [];\n\n    if (valueEntry && outputOptions.some(opt => opt.entryId === valueEntry.entryId) === false) {\n        outputOptions.push(valueEntry);\n    }\n\n    return {\n        onChange,\n        setSearch,\n        value: valueEntry,\n        loading,\n        options: outputOptions\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/ref/components/useReferences.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { CmsModelField } from "../../../../../types";
-import { BindComponentRenderProp } from "@webiny/form";
-import { OptionItem } from "./types";
+import type { CmsModelField } from "../../../../../types.js";
+import type { BindComponentRenderProp } from "@webiny/form";
+import type { OptionItem } from "./types.js";
 interface UseReferencesParams {
     bind: BindComponentRenderProp;
     field: CmsModelField;

package/admin/plugins/fieldRenderers/ref/components/useReferences.js

@@ -1,82 +1,59 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useReferences = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _hooks = require("../../../../hooks");
-var _graphql = require("./graphql");
-var _helpers = require("./helpers");
-var useReferences = exports.useReferences = function useReferences(_ref) {
-  var bind = _ref.bind,
-    field = _ref.field;
-  var isMounted = (0, _react.useRef)(true);
-  var allEntries = (0, _react.useRef)({});
-  var client = (0, _hooks.useApolloClient)();
-  var _useState = (0, _react.useState)(""),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    search = _useState2[0],
-    setSearch = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    loading = _useState4[0],
-    setLoading = _useState4[1];
-  var _useState5 = (0, _react.useState)({}),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    entries = _useState6[0],
-    setEntries = _useState6[1];
-  var _useState7 = (0, _react.useState)([]),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    latestEntries = _useState8[0],
-    setLatestEntries = _useState8[1];
-  var _useState9 = (0, _react.useState)([]),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    valueEntries = _useState10[0],
-    setValueEntries = _useState10[1];
-  var requestContext = (0, _hooks.useModelFieldGraphqlContext)();
-  var models = field.settings ? field.settings.models || [] : [];
-  var modelsHash = models.join(",");
-  var values = bind.value ? bind.value : [];
-  var searchEntries = async function searchEntries() {
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useApolloClient, useModelFieldGraphqlContext } from "../../../../hooks/index.js";
+import { SEARCH_CONTENT_ENTRIES, GET_CONTENT_ENTRIES } from "./graphql.js";
+import { convertReferenceEntriesToOptionCollection, convertReferenceEntryToOption } from "./helpers.js";
+export const useReferences = ({
+  bind,
+  field
+}) => {
+  const isMounted = useRef(true);
+  const allEntries = useRef({});
+  const client = useApolloClient();
+  const [search, setSearch] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [entries, setEntries] = useState({});
+  const [latestEntries, setLatestEntries] = useState([]);
+  const [valueEntries, setValueEntries] = useState([]);
+  const requestContext = useModelFieldGraphqlContext();
+  const models = field.settings ? field.settings.models || [] : [];
+  const modelsHash = models.join(",");
+  const values = bind.value ? bind.value : [];
+  const searchEntries = async () => {
     if (!search) {
       return;
     }
     setLoading(true);
-    var _await$client$query = await client.query({
-        query: _graphql.SEARCH_CONTENT_ENTRIES,
-        variables: {
-          modelIds: models.map(function (m) {
-            return m.modelId;
-          }),
-          query: search
-        },
-        context: requestContext
-      }),
-      data = _await$client$query.data;
+    const {
+      data
+    } = await client.query({
+      query: SEARCH_CONTENT_ENTRIES,
+      variables: {
+        modelIds: models.map(m => m.modelId),
+        query: search
+      },
+      context: requestContext
+    });
     setLoading(false);
-    var collection = (0, _helpers.convertReferenceEntriesToOptionCollection)(data.content.data);
-    allEntries.current = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, allEntries.current), collection);
+    const collection = convertReferenceEntriesToOptionCollection(data.content.data);
+    allEntries.current = {
+      ...allEntries.current,
+      ...collection
+    };
     setEntries(collection);
   };
-  (0, _react.useEffect)(function () {
-    return function () {
+  useEffect(() => {
+    return () => {
       isMounted.current = false;
     };
   }, []);
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     searchEntries();
   }, [search]);
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     client.query({
-      query: _graphql.SEARCH_CONTENT_ENTRIES,
+      query: SEARCH_CONTENT_ENTRIES,
       variables: {
-        modelIds: models.map(function (m) {
-          return m.modelId;
-        }),
+        modelIds: models.map(m => m.modelId),
         limit: 10
       },
       /**
@@ -85,28 +62,31 @@ var useReferences = exports.useReferences = function useReferences(_ref) {
        */
       fetchPolicy: "network-only",
       context: requestContext
-    }).then(function (_ref2) {
-      var data = _ref2.data;
+    }).then(({
+      data
+    }) => {
       if (!isMounted.current) {
         return;
       }
-      var collection = (0, _helpers.convertReferenceEntriesToOptionCollection)(data.content.data);
+      const collection = convertReferenceEntriesToOptionCollection(data.content.data);
       setLatestEntries(Object.values(collection));
-      allEntries.current = (0, _objectSpread2.default)({}, collection);
+      allEntries.current = {
+        ...collection
+      };
     });
   }, [modelsHash]);
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (!values || values.length == 0) {
       return;
     }
     setLoading(true);
     client.query({
-      query: _graphql.GET_CONTENT_ENTRIES,
+      query: GET_CONTENT_ENTRIES,
       variables: {
         /**
          * We need make sure nothing else other than modelId and id is passed to entries variable.
          */
-        entries: values.map(function (value) {
+        entries: values.map(value => {
           return {
             modelId: value.modelId,
             id: value.id
@@ -114,26 +94,27 @@ var useReferences = exports.useReferences = function useReferences(_ref) {
         })
       },
       context: requestContext
-    }).then(function (res) {
+    }).then(res => {
       if (!isMounted.current) {
         return;
       }
       setLoading(false);
-      var latest = (res.data.latest.data || []).reduce(function (collection, item) {
+      const latest = (res.data.latest.data || []).reduce((collection, item) => {
         collection[item.entryId] = item;
         return collection;
       }, {});
-      var entries = (res.data.published.data || []).reduce(function (collection, item) {
-        var entryId = item.entryId;
-        var existingItem = latest[entryId];
+      const entries = (res.data.published.data || []).reduce((collection, item) => {
+        const entryId = item.entryId;
+        const existingItem = latest[entryId];
         if (existingItem) {
-          collection[entryId] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, existingItem), {}, {
+          collection[entryId] = {
+            ...existingItem,
             published: {
               id: item.id,
               entryId: item.entryId,
               title: item.title
             }
-          });
+          };
           return collection;
         }
         collection[entryId] = item;
@@ -141,7 +122,7 @@ var useReferences = exports.useReferences = function useReferences(_ref) {
       }, latest);
 
       // Calculate a couple of props for the Autocomplete component.
-      setValueEntries(Object.values(entries).map(_helpers.convertReferenceEntryToOption));
+      setValueEntries(Object.values(entries).map(convertReferenceEntryToOption));
     });
   }, []);
 
@@ -149,32 +130,26 @@ var useReferences = exports.useReferences = function useReferences(_ref) {
    * onChange callback will update internal component state using the previously loaded entries by IDs.
    * It will also format the value to store to the DB.
    */
-  var onChange = (0, _react.useCallback)(function (values) {
+  const onChange = useCallback(values => {
     setSearch("");
     setValueEntries(values);
 
     // Update parent form
-    bind.onChange(values.map(function (item) {
-      return {
-        modelId: item.modelId,
-        id: item.id
-      };
-    }));
+    bind.onChange(values.map(item => ({
+      modelId: item.modelId,
+      id: item.id
+    })));
   }, []);
 
   // Format options for the Autocomplete component.
-  var options = (0, _react.useMemo)(function () {
-    return Object.values(entries);
-  }, [entries]);
+  const options = useMemo(() => Object.values(entries), [entries]);
 
   // Format default options for the Autocomplete component.
-  var defaultOptions = (0, _react.useMemo)(function () {
-    return Object.values(latestEntries);
-  }, [latestEntries]);
+  const defaultOptions = useMemo(() => Object.values(latestEntries), [latestEntries]);
   return {
-    onChange: onChange,
-    loading: loading,
-    setSearch: setSearch,
+    onChange,
+    loading,
+    setSearch,
     // Selected entries
     entries: valueEntries,
     // Options to show when the autocomplete dropdown is visible