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

package/dist/index.js

@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next';
 import '@babel/runtime/helpers/asyncToGenerator';
 import '@babel/runtime/regenerator';
 import '@bigbinary/neetoui/Toastr';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { prop, isEmpty, negate } from 'ramda';
@@ -94,9 +94,11 @@ var QUERY_KEYS = {
 };
 
 var useShowThemeEntity = function useShowThemeEntity(entityId) {
-  return useQuery([QUERY_KEYS.THEME_ENTITY_DETAILS, entityId], function () {
-    return entitiesApi.show(entityId);
-  }, {
+  return useQuery({
+    queryKey: [QUERY_KEYS.THEME_ENTITY_DETAILS, entityId],
+    queryFn: function queryFn() {
+      return entitiesApi.show(entityId);
+    },
     enabled: !!entityId
   });
 };
@@ -144,7 +146,10 @@ var themesApi = {
 };
 
 var useListThemes = function useListThemes() {
-  return useQuery(QUERY_KEYS.THEMES_LIST, themesApi.list);
+  return useQuery({
+    queryKey: [QUERY_KEYS.THEMES_LIST],
+    queryFn: themesApi.list
+  });
 };
 var useCreateTheme = function useCreateTheme() {
   return useMutationWithInvalidation(themesApi.create, {
@@ -158,12 +163,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 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() {
@@ -174,7 +179,7 @@ var useCloneTheme = function useCloneTheme() {
 var useApplyTheme = function useApplyTheme(_ref) {
   var onSuccess = _ref.onSuccess;
   return 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
   });
 };
@@ -216,10 +221,10 @@ var schemasApi = {
   list: list
 };
 
-var useListSchema = function useListSchema(_ref) {
-  var onSuccess = _ref.onSuccess;
-  return useQuery(QUERY_KEYS.SCHEMA_DETAILS, schemasApi.list, {
-    onSuccess: onSuccess
+var useListSchema = function useListSchema() {
+  return useQuery({
+    queryKey: [QUERY_KEYS.SCHEMA_DETAILS],
+    queryFn: schemasApi.list
   });
 };
 
@@ -233,25 +238,23 @@ var useThemeUtils = function useThemeUtils() {
     }, 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;
+  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]);
   useEffect(function () {
     return setConfigState({
       isFetchingSchema: isFetchingSchema
@@ -734,9 +737,7 @@ var Properties = function Properties() {
         }, key);
       }), 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;
@@ -832,10 +833,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;
@@ -1149,7 +1150,7 @@ var Themes = function Themes(_ref) {
       }
     }),
     applyTheme = _useApplyTheme.mutate,
-    isApplyingTheme = _useApplyTheme.isLoading;
+    isApplyingTheme = _useApplyTheme.isPending;
   useEffect(function () {
     if (didScrollActiveThemeIntoView.current || !(currentTheme !== null && currentTheme !== void 0 && currentTheme.id)) return;
     didScrollActiveThemeIntoView.current = true;
@@ -1370,7 +1371,7 @@ var Sidebar = function Sidebar(_ref) {
     isCurrentThemeLoading = _useShowThemeEntity.isLoading;
   var _useDeleteTheme = useDeleteTheme(),
     deleteTheme = _useDeleteTheme.mutate,
-    isDeleting = _useDeleteTheme.isLoading;
+    isDeleting = _useDeleteTheme.isPending;
   var themeToDelete = useRef(null);
   var themeToEdit = useRef(null);
   var handleEditTheme = function handleEditTheme(theme) {