@bigbinary/neeto-themes-frontend 1.2.0 → 1.3.0-beta1

package/dist/index.cjs.js

@@ -15,7 +15,7 @@ var reactI18next = require('react-i18next');
 require('@babel/runtime/helpers/asyncToGenerator');
 require('@babel/runtime/regenerator');
 require('@bigbinary/neetoui/Toastr');
-var reactQuery = require('react-query');
+var reactQuery = require('@tanstack/react-query');
 var axios = require('axios');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var ramda = require('ramda');
@@ -137,9 +137,11 @@ var QUERY_KEYS = {
 };
 
 var useShowThemeEntity = function useShowThemeEntity(entityId) {
-  return reactQuery.useQuery([QUERY_KEYS.THEME_ENTITY_DETAILS, entityId], function () {
-    return entitiesApi.show(entityId);
-  }, {
+  return reactQuery.useQuery({
+    queryKey: [QUERY_KEYS.THEME_ENTITY_DETAILS, entityId],
+    queryFn: function queryFn() {
+      return entitiesApi.show(entityId);
+    },
     enabled: !!entityId
   });
 };
@@ -187,7 +189,10 @@ var themesApi = {
 };
 
 var useListThemes = function useListThemes() {
-  return reactQuery.useQuery(QUERY_KEYS.THEMES_LIST, themesApi.list);
+  return reactQuery.useQuery({
+    queryKey: [QUERY_KEYS.THEMES_LIST],
+    queryFn: themesApi.list
+  });
 };
 var useCreateTheme = function useCreateTheme() {
   return reactUtils.useMutationWithInvalidation(themesApi.create, {
@@ -201,12 +206,12 @@ var useUpdateTheme = function useUpdateTheme(themeId) {
       payload: payload
     });
   }, {
-    keysToInvalidate: [QUERY_KEYS.THEMES_LIST, QUERY_KEYS.THEME_ENTITY_DETAILS, [QUERY_KEYS.THEME_DETAILS, themeId]]
+    keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS], [QUERY_KEYS.THEME_DETAILS, themeId]]
   });
 };
 var useDeleteTheme = function useDeleteTheme() {
   return reactUtils.useMutationWithInvalidation(themesApi.destroy, {
-    keysToInvalidate: [QUERY_KEYS.THEMES_LIST, QUERY_KEYS.THEME_ENTITY_DETAILS]
+    keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS]]
   });
 };
 var useCloneTheme = function useCloneTheme() {
@@ -217,7 +222,7 @@ var useCloneTheme = function useCloneTheme() {
 var useApplyTheme = function useApplyTheme(_ref) {
   var onSuccess = _ref.onSuccess;
   return reactUtils.useMutationWithInvalidation(themesApi.apply, {
-    keysToInvalidate: [QUERY_KEYS.THEMES_LIST, QUERY_KEYS.THEME_ENTITY_DETAILS],
+    keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS]],
     onSuccess: onSuccess
   });
 };
@@ -259,10 +264,10 @@ var schemasApi = {
   list: list
 };
 
-var useListSchema = function useListSchema(_ref) {
-  var onSuccess = _ref.onSuccess;
-  return reactQuery.useQuery(QUERY_KEYS.SCHEMA_DETAILS, schemasApi.list, {
-    onSuccess: onSuccess
+var useListSchema = function useListSchema() {
+  return reactQuery.useQuery({
+    queryKey: [QUERY_KEYS.SCHEMA_DETAILS],
+    queryFn: schemasApi.list
   });
 };
 
@@ -276,25 +281,23 @@ var useThemeUtils = function useThemeUtils() {
     }, shallow.shallow),
     previewingTheme = _useThemeStore.previewingTheme,
     currentTheme = _useThemeStore.currentTheme;
-  var _useListSchema = useListSchema({
-      onSuccess: function onSuccess(_ref) {
-        var _ref$schema = _ref.schema,
-          themePropertiesSchema = _ref$schema === void 0 ? [] : _ref$schema,
-          _ref$variableNamesMap = _ref.variableNamesMap,
-          variableNamesMap = _ref$variableNamesMap === void 0 ? {} : _ref$variableNamesMap;
-        return setConfigState({
-          themePropertiesSchema: themePropertiesSchema,
-          variableNamesMap: variableNamesMap
-        });
-      }
-    }),
+  var _useListSchema = useListSchema(),
     isFetchingSchema = _useListSchema.isLoading,
-    _useListSchema$data = _useListSchema.data,
-    _useListSchema$data2 = _useListSchema$data === void 0 ? {} : _useListSchema$data,
-    _useListSchema$data2$ = _useListSchema$data2.schema,
-    themePropertiesSchema = _useListSchema$data2$ === void 0 ? [] : _useListSchema$data2$,
-    _useListSchema$data2$2 = _useListSchema$data2.variableNamesMap,
-    variableNamesMap = _useListSchema$data2$2 === void 0 ? {} : _useListSchema$data2$2;
+    data = _useListSchema.data,
+    status = _useListSchema.status;
+  var _ref = data || {},
+    _ref$schema = _ref.schema,
+    themePropertiesSchema = _ref$schema === void 0 ? [] : _ref$schema,
+    _ref$variableNamesMap = _ref.variableNamesMap,
+    variableNamesMap = _ref$variableNamesMap === void 0 ? {} : _ref$variableNamesMap;
+  react.useEffect(function () {
+    if (status === "success") {
+      setConfigState({
+        themePropertiesSchema: data === null || data === void 0 ? void 0 : data.schema,
+        variableNamesMap: data === null || data === void 0 ? void 0 : data.variableNamesMap
+      });
+    }
+  }, [data, status]);
   react.useEffect(function () {
     return setConfigState({
       isFetchingSchema: isFetchingSchema
@@ -777,9 +780,7 @@ var Properties = function Properties() {
         }, key);
       }), neetoCist.filterBy({
         kind: "color"
-      }, values.properties).sort(function (colorObject1, colorObject2) {
-        return colorObject1.key.localeCompare(colorObject2.key);
-      }).map(function (_ref4) {
+      }, values.properties).map(function (_ref4) {
         var key = _ref4.key,
           value = _ref4.value,
           kind = _ref4.kind;
@@ -875,10 +876,10 @@ var Customize = function Customize(_ref) {
     themePropertiesSchema = _useConfigStore.themePropertiesSchema;
   var _useCreateTheme = useCreateTheme(),
     createTheme = _useCreateTheme.mutate,
-    isCreating = _useCreateTheme.isLoading;
+    isCreating = _useCreateTheme.isPending;
   var _useUpdateTheme = useUpdateTheme(themeId),
     updateTheme = _useUpdateTheme.mutate,
-    isUpdating = _useUpdateTheme.isLoading;
+    isUpdating = _useUpdateTheme.isPending;
   var isSubmitting = isCreating || isUpdating;
   var onSubmit = function onSubmit(values, _ref2) {
     var resetForm = _ref2.resetForm;
@@ -1192,7 +1193,7 @@ var Themes = function Themes(_ref) {
       }
     }),
     applyTheme = _useApplyTheme.mutate,
-    isApplyingTheme = _useApplyTheme.isLoading;
+    isApplyingTheme = _useApplyTheme.isPending;
   react.useEffect(function () {
     if (didScrollActiveThemeIntoView.current || !(currentTheme !== null && currentTheme !== void 0 && currentTheme.id)) return;
     didScrollActiveThemeIntoView.current = true;
@@ -1413,7 +1414,7 @@ var Sidebar = function Sidebar(_ref) {
     isCurrentThemeLoading = _useShowThemeEntity.isLoading;
   var _useDeleteTheme = useDeleteTheme(),
     deleteTheme = _useDeleteTheme.mutate,
-    isDeleting = _useDeleteTheme.isLoading;
+    isDeleting = _useDeleteTheme.isPending;
   var themeToDelete = react.useRef(null);
   var themeToEdit = react.useRef(null);
   var handleEditTheme = function handleEditTheme(theme) {