@webiny/app-headless-cms 6.3.0-beta.4 → 6.4.0-beta.0

package/admin/views/contentModels/importing/ImportContext.js

@@ -1,407 +1,360 @@
-import React, { useCallback, useState } from "react";
+import react, { useCallback, useState } from "react";
 import { useApolloClient } from "../../../hooks/index.js";
 import { IMPORT_STRUCTURE, VALIDATE_IMPORT_STRUCTURE } from "./graphql.js";
 import { ImportAction } from "./types.js";
 import { useSnackbar } from "@webiny/app-admin";
-const parseFileData = input => {
-  let data = {};
-  try {
-    data = JSON.parse(input);
-  } catch {
-    throw new Error(`Could not parse the uploaded file. Make sure it's a valid JSON file.`);
-  }
-  if (!data.groups?.length && !data.models?.length) {
-    throw new Error(`No groups and models in the uploaded file.`);
-  } else if (data.groups.length === 0) {
-    throw new Error(`No groups in the uploaded file. There must be at least one group.`);
-  }
-  return {
-    groups: data.groups,
-    models: data.models
-  };
+const parseFileData = (input)=>{
+    let data = {};
+    try {
+        data = JSON.parse(input);
+    } catch  {
+        throw new Error("Could not parse the uploaded file. Make sure it's a valid JSON file.");
+    }
+    if (data.groups?.length || data.models?.length) {
+        if (0 === data.groups.length) throw new Error("No groups in the uploaded file. There must be at least one group.");
+    } else throw new Error("No groups and models in the uploaded file.");
+    return {
+        groups: data.groups,
+        models: data.models
+    };
 };
-const parseFileContent = content => {
-  if (!content) {
-    throw new Error(`Missing data in uploaded file.`);
-  } else if (content instanceof ArrayBuffer) {
-    const data = Buffer.from(content).toString("utf8");
-    return parseFileData(data);
-  }
-  return parseFileData(content);
+const parseFileContent = (content)=>{
+    if (content) {
+        if (content instanceof ArrayBuffer) {
+            const data = Buffer.from(content).toString("utf8");
+            return parseFileData(data);
+        }
+    } else throw new Error("Missing data in uploaded file.");
+    return parseFileData(content);
 };
-const createSelected = params => {
-  const {
-    previous,
-    models,
-    item
-  } = params;
-  let selected = new Map(previous);
-  selected.set(item.id, item.related);
-  for (const id of item.related) {
-    const model = models.find(model => model.id === id);
-    if (!model) {
-      continue;
-    } else if (selected.has(model.id) || model.imported) {
-      continue;
+const createSelected = (params)=>{
+    const { previous, models, item } = params;
+    let selected = new Map(previous);
+    selected.set(item.id, item.related);
+    for (const id of item.related){
+        const model = models.find((model)=>model.id === id);
+        if (!model) continue;
+        if (selected.has(model.id) || model.imported) continue;
+        const related = createSelected({
+            previous: selected,
+            models,
+            item: model
+        });
+        selected = new Map([
+            ...selected,
+            ...related
+        ]);
     }
-    const related = createSelected({
-      previous: selected,
-      models,
-      item: model
-    });
-    selected = new Map([...selected, ...related]);
-  }
-  return selected;
+    return selected;
 };
-const getDataToImport = state => {
-  const selected = Array.from(state.selected.keys());
-  const groups = new Map();
-  const models = new Map();
-  const noAction = [ImportAction.CODE, ImportAction.NONE];
-  for (const id of selected) {
-    const validatedModel = state.models?.find(model => model.id === id);
-    if (!validatedModel?.action || validatedModel.error || noAction.includes(validatedModel.action)) {
-      continue;
-    }
-    const validatedGroup = state.groups?.find(group => group.slug === validatedModel.group);
-    if (!validatedGroup?.action || validatedGroup.error) {
-      continue;
-    }
-    const model = state.data?.models?.find(model => model.modelId === id);
-    if (!model) {
-      continue;
-    }
-    models.set(id, {
-      ...model,
-      layout: model.layout || [],
-      titleFieldId: model.titleFieldId || "id",
-      descriptionFieldId: model.descriptionFieldId || "",
-      imageFieldId: model.imageFieldId || "",
-      group: validatedModel.group
-    });
-    if (noAction.includes(validatedGroup.action)) {
-      continue;
-    }
-    const group = state.data?.groups?.find(group => group.slug === validatedModel.group);
-    if (!group) {
-      continue;
+const getDataToImport = (state)=>{
+    const selected = Array.from(state.selected.keys());
+    const groups = new Map();
+    const models = new Map();
+    const noAction = [
+        ImportAction.CODE,
+        ImportAction.NONE
+    ];
+    for (const id of selected){
+        const validatedModel = state.models?.find((model)=>model.id === id);
+        if (!validatedModel?.action || validatedModel.error || noAction.includes(validatedModel.action)) continue;
+        const validatedGroup = state.groups?.find((group)=>group.slug === validatedModel.group);
+        if (!validatedGroup?.action || validatedGroup.error) continue;
+        const model = state.data?.models?.find((model)=>model.modelId === id);
+        if (!model) continue;
+        models.set(id, {
+            ...model,
+            layout: model.layout || [],
+            titleFieldId: model.titleFieldId || "id",
+            descriptionFieldId: model.descriptionFieldId || "",
+            imageFieldId: model.imageFieldId || "",
+            group: validatedModel.group
+        });
+        if (noAction.includes(validatedGroup.action)) continue;
+        const group = state.data?.groups?.find((group)=>group.slug === validatedModel.group);
+        if (group) groups.set(group.id, group);
     }
-    groups.set(group.id, group);
-  }
-  return {
-    groups: Array.from(groups.values()),
-    models: Array.from(models.values())
-  };
+    return {
+        groups: Array.from(groups.values()),
+        models: Array.from(models.values())
+    };
 };
-export const ImportContext = /*#__PURE__*/React.createContext(undefined);
-export const ImportContextProvider = ({
-  children
-}) => {
-  const client = useApolloClient();
-  const {
-    showSnackbar
-  } = useSnackbar();
-  const [state, setState] = useState({
-    data: null,
-    file: null,
-    loading: false,
-    validated: false,
-    selected: new Map()
-  });
-  const hasSelected = useCallback(() => {
-    return Array.from(state.selected.keys()).length > 0;
-  }, [state.selected]);
-  const handleModelsValidation = useCallback(async () => {
-    if (!state.data) {
-      console.error("Cannot import models without any data.");
-      return;
-    }
-    setState(prev => {
-      return {
-        ...prev,
-        loading: true
-      };
-    });
-    let result;
-    try {
-      result = await client.mutate({
-        mutation: VALIDATE_IMPORT_STRUCTURE,
-        variables: {
-          data: state.data
-        }
-      });
-    } catch (ex) {
-      setState(prev => {
-        return {
-          ...prev,
-          loading: false,
-          errors: [ex.message]
-        };
-      });
-      return;
-    }
-    const {
-      data,
-      error
-    } = result.data?.validateImportStructure || {};
-    if (error) {
-      setState(prev => {
-        return {
-          ...prev,
-          loading: false,
-          errors: [error.message]
-        };
-      });
-      return;
-    } else if (!data) {
-      setState(prev => {
-        return {
-          ...prev,
-          loading: false,
-          errors: ["No validation data received."]
-        };
-      });
-      return;
-    }
-    setState(prev => {
-      const next = {
-        ...prev,
-        loading: false,
-        groups: data.groups.map(group => {
-          return {
-            id: group.group.id,
-            name: group.group.name,
-            slug: group.group.slug,
-            error: group.error,
-            action: group.action
-          };
-        }),
-        models: data.models.map(model => {
-          return {
-            id: model.model.modelId,
-            name: model.model.name,
-            group: model.model.group,
-            related: model.related || [],
-            error: model.error,
-            action: model.action
-          };
-        }),
-        validated: true
-      };
-      return next;
-    });
-  }, [state.data, setState]);
-  const handleModelsImport = useCallback(async () => {
-    if (!state.data) {
-      console.error("Cannot import models without any data.");
-      return;
-    } else if (!state.groups?.length) {
-      console.error("Cannot import models without any groups.");
-      return;
-    } else if (!state.models?.length) {
-      console.error("Cannot import models because none are selected.");
-      return;
-    } else if (Array.from(state.selected.keys()).length === 0) {
-      console.error("Cannot import models because none are selected.");
-      return;
-    }
-    setState(prev => {
-      return {
-        ...prev,
-        loading: true
-      };
-    });
-    const dataToImport = getDataToImport(state);
-    let result;
-    try {
-      result = await client.mutate({
-        mutation: IMPORT_STRUCTURE,
-        variables: {
-          data: dataToImport
-        },
-        errorPolicy: "all"
-      });
-    } catch (ex) {
-      setState(prev => {
-        return {
-          ...prev,
-          loading: false,
-          errors: [ex.message]
-        };
-      });
-      return;
-    }
-    const {
-      data,
-      error
-    } = result.data?.importStructure || {};
-    if (error) {
-      setState(prev => {
-        return {
-          ...prev,
-          loading: false,
-          errors: [error.message]
-        };
-      });
-      return;
-    } else if (!data) {
-      setState(prev => {
-        return {
-          ...prev,
-          loading: false,
-          validated: false,
-          errors: ["No structure import data received."]
-        };
-      });
-      return;
-    }
-    setState(prev => {
-      return {
-        ...prev,
+const ImportContext = /*#__PURE__*/ react.createContext(void 0);
+const ImportContextProvider = ({ children })=>{
+    const client = useApolloClient();
+    const { showSnackbar } = useSnackbar();
+    const [state, setState] = useState({
+        data: null,
+        file: null,
         loading: false,
-        selected: new Map(),
-        groups: state.groups.map(group => {
-          const result = data.groups.find(item => item.group.id === group.id);
-          return {
-            id: result?.group.id || group.id,
-            name: result?.group.name || group.name,
-            slug: result?.group.slug || group.slug,
-            error: result?.error || group.error,
-            imported: result ? result.imported : group.imported
-          };
-        }),
-        models: state.models.map(model => {
-          const result = data.models.find(item => item.model.modelId === model.id);
-          return {
-            id: result?.model.modelId || model.id,
-            name: result?.model.name || model.name,
-            group: result?.model.group || model.group,
-            related: result?.related || model.related || [],
-            action: result?.action || model.action,
-            error: result?.error || model.error,
-            imported: result ? result.imported : model.imported
-          };
-        }),
-        validated: true
-      };
+        validated: false,
+        selected: new Map()
     });
-  }, [state.selected, state.data, setState]);
-  const onFile = useCallback(file => {
-    const reader = new FileReader();
-    reader.addEventListener("load", event => {
-      try {
-        const data = parseFileContent(event.target?.result);
-        setState(prev => {
-          return {
-            ...prev,
-            models: undefined,
-            groups: undefined,
-            selected: new Map(),
-            errors: null,
-            validated: false,
-            file,
-            data
-          };
+    const hasSelected = useCallback(()=>Array.from(state.selected.keys()).length > 0, [
+        state.selected
+    ]);
+    const handleModelsValidation = useCallback(async ()=>{
+        if (!state.data) return void console.error("Cannot import models without any data.");
+        setState((prev)=>({
+                ...prev,
+                loading: true
+            }));
+        let result;
+        try {
+            result = await client.mutate({
+                mutation: VALIDATE_IMPORT_STRUCTURE,
+                variables: {
+                    data: state.data
+                }
+            });
+        } catch (ex) {
+            setState((prev)=>({
+                    ...prev,
+                    loading: false,
+                    errors: [
+                        ex.message
+                    ]
+                }));
+            return;
+        }
+        const { data, error } = result.data?.validateImportStructure || {};
+        if (error) return void setState((prev)=>({
+                ...prev,
+                loading: false,
+                errors: [
+                    error.message
+                ]
+            }));
+        if (!data) return void setState((prev)=>({
+                ...prev,
+                loading: false,
+                errors: [
+                    "No validation data received."
+                ]
+            }));
+        setState((prev)=>{
+            const next = {
+                ...prev,
+                loading: false,
+                groups: data.groups.map((group)=>({
+                        id: group.group.id,
+                        name: group.group.name,
+                        slug: group.group.slug,
+                        error: group.error,
+                        action: group.action
+                    })),
+                models: data.models.map((model)=>({
+                        id: model.model.modelId,
+                        name: model.model.name,
+                        group: model.model.group,
+                        related: model.related || [],
+                        error: model.error,
+                        action: model.action
+                    })),
+                validated: true
+            };
+            return next;
         });
-      } catch (ex) {
-        setState(prev => {
-          return {
-            ...prev,
-            file,
-            selected: new Map(),
-            validated: false,
-            groups: undefined,
-            models: undefined,
-            data: null,
-            errors: [ex.message]
-          };
+    }, [
+        state.data,
+        setState
+    ]);
+    const handleModelsImport = useCallback(async ()=>{
+        if (!state.data) return void console.error("Cannot import models without any data.");
+        if (!state.groups?.length) return void console.error("Cannot import models without any groups.");
+        if (!state.models?.length) return void console.error("Cannot import models because none are selected.");
+        if (0 === Array.from(state.selected.keys()).length) return void console.error("Cannot import models because none are selected.");
+        setState((prev)=>({
+                ...prev,
+                loading: true
+            }));
+        const dataToImport = getDataToImport(state);
+        let result;
+        try {
+            result = await client.mutate({
+                mutation: IMPORT_STRUCTURE,
+                variables: {
+                    data: dataToImport
+                },
+                errorPolicy: "all"
+            });
+        } catch (ex) {
+            setState((prev)=>({
+                    ...prev,
+                    loading: false,
+                    errors: [
+                        ex.message
+                    ]
+                }));
+            return;
+        }
+        const { data, error } = result.data?.importStructure || {};
+        if (error) return void setState((prev)=>({
+                ...prev,
+                loading: false,
+                errors: [
+                    error.message
+                ]
+            }));
+        if (!data) return void setState((prev)=>({
+                ...prev,
+                loading: false,
+                validated: false,
+                errors: [
+                    "No structure import data received."
+                ]
+            }));
+        setState((prev)=>({
+                ...prev,
+                loading: false,
+                selected: new Map(),
+                groups: state.groups.map((group)=>{
+                    const result = data.groups.find((item)=>item.group.id === group.id);
+                    return {
+                        id: result?.group.id || group.id,
+                        name: result?.group.name || group.name,
+                        slug: result?.group.slug || group.slug,
+                        error: result?.error || group.error,
+                        imported: result ? result.imported : group.imported
+                    };
+                }),
+                models: state.models.map((model)=>{
+                    const result = data.models.find((item)=>item.model.modelId === model.id);
+                    return {
+                        id: result?.model.modelId || model.id,
+                        name: result?.model.name || model.name,
+                        group: result?.model.group || model.group,
+                        related: result?.related || model.related || [],
+                        action: result?.action || model.action,
+                        error: result?.error || model.error,
+                        imported: result ? result.imported : model.imported
+                    };
+                }),
+                validated: true
+            }));
+    }, [
+        state.selected,
+        state.data,
+        setState
+    ]);
+    const onFile = useCallback((file)=>{
+        const reader = new FileReader();
+        reader.addEventListener("load", (event)=>{
+            try {
+                const data = parseFileContent(event.target?.result);
+                setState((prev)=>({
+                        ...prev,
+                        models: void 0,
+                        groups: void 0,
+                        selected: new Map(),
+                        errors: null,
+                        validated: false,
+                        file,
+                        data
+                    }));
+            } catch (ex) {
+                setState((prev)=>({
+                        ...prev,
+                        file,
+                        selected: new Map(),
+                        validated: false,
+                        groups: void 0,
+                        models: void 0,
+                        data: null,
+                        errors: [
+                            ex.message
+                        ]
+                    }));
+            }
         });
-      }
-    });
-    reader.readAsText(file);
-  }, [state.data, setState]);
-  const onFileError = useCallback(error => {
-    setState(prev => {
-      return {
-        ...prev,
-        file: null,
-        errors: [error]
-      };
-    });
-  }, [state, setState]);
-  const isModelSelected = useCallback(item => {
-    return state.selected.has(item.id);
-  }, [state.selected]);
-  const isModelRelated = useCallback(({
-    id: target
-  }) => {
-    for (const id of state.selected.keys()) {
-      if (id === target) {
-        continue;
-      }
-      const related = state.selected.get(id);
-      if (related?.includes(id)) {
-        return true;
-      }
-    }
-    return false;
-  }, [state.selected]);
-  const addModel = useCallback(item => {
-    if (isModelSelected(item)) {
-      return;
-    }
-    setState(prev => {
-      return {
-        ...prev,
-        selected: createSelected({
-          previous: prev.selected,
-          models: state.models || [],
-          item
-        })
-      };
-    });
-  }, [isModelSelected, state.models, state.selected]);
-  const removeModel = useCallback(item => {
-    if (isModelRelated(item)) {
-      showSnackbar(`Model "${item.name}" is required due to another model having a relation to it.`);
-      return;
-    }
-    setState(prev => {
-      const selected = prev.selected;
-      selected.delete(item.id);
-      return {
-        ...prev,
-        selected
-      };
-    });
-  }, [state, setState]);
-  const toggleModel = useCallback(item => {
-    if (isModelSelected(item)) {
-      removeModel(item);
-      return;
-    }
-    addModel(item);
-  }, [isModelSelected, addModel, removeModel]);
-  const value = {
-    data: state.data || null,
-    loading: state.loading || false,
-    groups: state.groups || [],
-    models: state.models || [],
-    errors: state.errors || [],
-    validated: state.validated || false,
-    hasSelected,
-    isModelRelated,
-    file: state.file,
-    onFile,
-    onFileError,
-    handleModelsValidation,
-    handleModelsImport,
-    toggleModel,
-    isModelSelected
-  };
-  return /*#__PURE__*/React.createElement(ImportContext.Provider, {
-    value: value
-  }, children(value));
+        reader.readAsText(file);
+    }, [
+        state.data,
+        setState
+    ]);
+    const onFileError = useCallback((error)=>{
+        setState((prev)=>({
+                ...prev,
+                file: null,
+                errors: [
+                    error
+                ]
+            }));
+    }, [
+        state,
+        setState
+    ]);
+    const isModelSelected = useCallback((item)=>state.selected.has(item.id), [
+        state.selected
+    ]);
+    const isModelRelated = useCallback(({ id: target })=>{
+        for (const id of state.selected.keys()){
+            if (id === target) continue;
+            const related = state.selected.get(id);
+            if (related?.includes(id)) return true;
+        }
+        return false;
+    }, [
+        state.selected
+    ]);
+    const addModel = useCallback((item)=>{
+        if (isModelSelected(item)) return;
+        setState((prev)=>({
+                ...prev,
+                selected: createSelected({
+                    previous: prev.selected,
+                    models: state.models || [],
+                    item
+                })
+            }));
+    }, [
+        isModelSelected,
+        state.models,
+        state.selected
+    ]);
+    const removeModel = useCallback((item)=>{
+        if (isModelRelated(item)) return void showSnackbar(`Model "${item.name}" is required due to another model having a relation to it.`);
+        setState((prev)=>{
+            const selected = prev.selected;
+            selected.delete(item.id);
+            return {
+                ...prev,
+                selected
+            };
+        });
+    }, [
+        state,
+        setState
+    ]);
+    const toggleModel = useCallback((item)=>{
+        if (isModelSelected(item)) return void removeModel(item);
+        addModel(item);
+    }, [
+        isModelSelected,
+        addModel,
+        removeModel
+    ]);
+    const value = {
+        data: state.data || null,
+        loading: state.loading || false,
+        groups: state.groups || [],
+        models: state.models || [],
+        errors: state.errors || [],
+        validated: state.validated || false,
+        hasSelected,
+        isModelRelated,
+        file: state.file,
+        onFile,
+        onFileError,
+        handleModelsValidation,
+        handleModelsImport,
+        toggleModel,
+        isModelSelected
+    };
+    return /*#__PURE__*/ react.createElement(ImportContext.Provider, {
+        value: value
+    }, children(value));
 };
+export { ImportContext, ImportContextProvider };
 
 //# sourceMappingURL=ImportContext.js.map