@opengeoweb/taf 2.6.0 → 2.9.0

package/index.esm.js

@@ -4,13 +4,13 @@ import { TextField, SvgIcon, Grid, Box, Button, IconButton, Tooltip, Chip, Typog
 import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
 import { ReactSortable, Sortable } from 'react-sortablejs';
 import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
-import { useApiContext, useApi, createApiInstance, ApiProvider } from '@opengeoweb/api';
-import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, ToolButton, ToolHeader, getAxiosErrorMessage, AlertBanner, ConfirmationServiceProvider, usePoller, ErrorBoundary } from '@opengeoweb/shared';
-import moment from 'moment';
+import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, ToolButton, ToolHeader, isAxiosError, getAxiosErrorMessage, AlertBanner, ConfirmationServiceProvider, usePoller, ErrorBoundary } from '@opengeoweb/shared';
 import { isEqual } from 'lodash';
+import moment from 'moment';
 import makeStyles from '@mui/styles/makeStyles';
 import { DragIndicator, Schedule, CheckCircle } from '@mui/icons-material';
 import ReactDOM from 'react-dom';
+import { useApiContext, useApi, createApiInstance, ApiProvider } from '@opengeoweb/api';
 import LinearProgress from '@mui/material/LinearProgress';
 import DoDisturbIcon from '@mui/icons-material/DoDisturb';
 import Box$1 from '@mui/material/Box';
@@ -2315,7 +2315,7 @@ var tacHasError = function tacHasError(tac) {
   return tac === TAC_MISSING_DATA || tac === TAC_NOT_AVAILABLE || tac === TAC_RETRIEVING_DATA || tac === TAC_FAILED;
 };
 var useTACGenerator = function useTACGenerator(taf, requestTAC) {
-  var _React$useState = React__default.useState(taf.status === 'NEW' ? TAC_NOT_AVAILABLE : TAC_RETRIEVING_DATA),
+  var _React$useState = React__default.useState(!taf || taf.status === 'NEW' ? TAC_NOT_AVAILABLE : TAC_RETRIEVING_DATA),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       TAC = _React$useState2[0],
       setTAC = _React$useState2[1];
@@ -2323,14 +2323,30 @@ var useTACGenerator = function useTACGenerator(taf, requestTAC) {
   var _useIsMounted = useIsMounted(),
       isMounted = _useIsMounted.isMounted;
 
+  var controller = React__default.useRef(null);
+
+  var onSetTac = function onSetTac(newTAC) {
+    if (controller.current) {
+      controller.current.abort();
+    }
+
+    setTAC(newTAC);
+  };
+
   var retrieveTAC = React__default.useCallback(function (tafToPost) {
     if (shouldRetrieveTAC(tafToPost)) {
-      requestTAC(tafToPost).then(function (result) {
+      if (controller.current) {
+        controller.current.abort();
+      }
+
+      controller.current = new AbortController();
+      setTAC(TAC_RETRIEVING_DATA);
+      requestTAC(tafToPost, controller.current.signal).then(function (result) {
         if (isMounted.current) {
           setTAC(result.data);
         }
-      })["catch"](function () {
-        if (isMounted.current) {
+      })["catch"](function (error) {
+        if (isMounted && error.message !== 'canceled') {
           setTAC(TAC_FAILED);
         }
       });
@@ -2339,12 +2355,12 @@ var useTACGenerator = function useTACGenerator(taf, requestTAC) {
     }
   }, [isMounted, requestTAC]);
   React__default.useEffect(function () {
-    if (taf.status !== 'NEW') {
+    if (taf && taf.status !== 'NEW') {
       retrieveTAC(taf);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
-  return [TAC, retrieveTAC];
+  return [TAC, retrieveTAC, onSetTac];
 };
 var useDragOrder = function useDragOrder(trigger, move, onFormBlur) {
   var _React$useState3 = React__default.useState(null),
@@ -2533,9 +2549,14 @@ var prepareTafValues = function prepareTafValues(_taf, tafAction) {
   // If action is AMEND/CORRECT/DRAFT_AMEND/DRAFT_CORRECTION - add previous valid start and end
   // If action is AMEND/DRAFT_AMEND - update validity start time to current time
   var taf = tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND' || tafAction === 'CORRECT' || tafAction === 'DRAFT_CORRECT' ? getAmendedCorrectedTafTimes(_taf, tafAction) : _taf;
+  var formattedBaseForecast = formatFormValues(taf.baseForecast);
+  var baseForecast = Object.assign(Object.assign(Object.assign({}, emptyBaseForecast), formattedBaseForecast), {
+    weather: Object.assign(Object.assign({}, emptyBaseForecast.weather), formattedBaseForecast.weather),
+    cloud: Object.assign(Object.assign({}, emptyBaseForecast.cloud), formattedBaseForecast.cloud)
+  });
   return Object.assign(Object.assign(Object.assign(Object.assign({}, taf), {
     messageType: getMessageType(taf, tafAction),
-    baseForecast: Object.assign(Object.assign({}, emptyBaseForecast), formatFormValues(taf.baseForecast))
+    baseForecast: baseForecast
   }), taf.changeGroups && {
     changeGroups: taf.changeGroups.map(formatFormValues)
   }), addEmptyChangeGroup && {
@@ -3883,6 +3904,9 @@ var useTafModuleContext = function useTafModuleContext() {
 var useTafModuleState = function useTafModuleState(_ref) {
   var onPreventCloseView = _ref.onPreventCloseView;
 
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
+
   var _React$useState = React.useState(function () {
     return new Promise(function () {
       return true;
@@ -3902,6 +3926,12 @@ var useTafModuleState = function useTafModuleState(_ref) {
       isFormDirty = _React$useState6[0],
       setIsFormDirty = _React$useState6[1];
 
+  var _useTACGenerator = useTACGenerator(undefined, api.getTAC),
+      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 3),
+      TAC = _useTACGenerator2[0],
+      updateTAC = _useTACGenerator2[1],
+      setTAC = _useTACGenerator2[2];
+
   var onRegisterValidateForm = function onRegisterValidateForm(promiseToRegister) {
     registerValidateForm(function () {
       return promiseToRegister;
@@ -3920,6 +3950,9 @@ var useTafModuleState = function useTafModuleState(_ref) {
     registerValidateForm: onRegisterValidateForm,
     tafAction: tafAction,
     setTafAction: setTafAction,
+    TAC: TAC,
+    updateTAC: updateTAC,
+    setTAC: setTAC,
     isFormDirty: isFormDirty,
     setIsFormDirty: onChangeFormDirty
   };
@@ -3967,11 +4000,11 @@ var TafForm = function TafForm(_ref) {
   var _useTafModuleContext = useTafModuleContext(),
       registerValidateForm = _useTafModuleContext.registerValidateForm,
       tafAction = _useTafModuleContext.tafAction,
+      setIsFormDirty = _useTafModuleContext.setIsFormDirty,
       setTafAction = _useTafModuleContext.setTafAction,
-      setIsFormDirty = _useTafModuleContext.setIsFormDirty;
-
-  var _useApiContext = useApiContext(),
-      api = _useApiContext.api;
+      TAC = _useTafModuleContext.TAC,
+      updateTAC = _useTafModuleContext.updateTAC,
+      setTAC = _useTafModuleContext.setTAC;
 
   var _useIsMounted = useIsMounted(),
       isMounted = _useIsMounted.isMounted;
@@ -3995,15 +4028,20 @@ var TafForm = function TafForm(_ref) {
       delayedFormValues = _React$useState2[0],
       setDelayedFormValues = _React$useState2[1];
 
-  var _useTACGenerator = useTACGenerator(tafFromBackend.taf, api.getTAC),
-      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
-      TAC = _useTACGenerator2[0],
-      updateTAC = _useTACGenerator2[1];
-
   var hasErrors = Object.keys(errors).length;
 
   var onFormBlur = function onFormBlur() {
-    setDelayedFormValues(getValues());
+    if (!isEqual(getValues(), delayedFormValues)) {
+      setDelayedFormValues(getValues());
+    }
+  };
+
+  var resetTAC = function resetTAC() {
+    if (originalTaf.status !== 'NEW') {
+      updateTAC(originalTaf);
+    } else {
+      setTAC(TAC_NOT_AVAILABLE);
+    }
   };
 
   React__default.useEffect(function () {
@@ -4072,6 +4110,7 @@ var TafForm = function TafForm(_ref) {
         if (isFormDirty) {
           showConfirmDialog(action).then(function () {
             resetForm(undefined, isDefaultDisabled);
+            resetTAC();
           });
         } else {
           resetForm(undefined, isDefaultDisabled);
@@ -4248,6 +4287,7 @@ var TafForm = function TafForm(_ref) {
     registerValidateForm(onValidateFormPromise); // set default taf action
 
     setTafAction(fromStatusToAction(originalTaf.status));
+    resetTAC();
     return function () {
       reset({});
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -4550,7 +4590,7 @@ var prepareTafExportValues = function prepareTafExportValues(tafToCopy, currentT
       _convertedCopy$change = convertedCopy.changeGroups,
       changeGroups = _convertedCopy$change === void 0 ? [] : _convertedCopy$change;
   return Object.assign(Object.assign({}, currentTaf), {
-    baseForecast: Object.assign(Object.assign(Object.assign({}, emptyBaseForecast), baseForecast), {
+    baseForecast: Object.assign(Object.assign({}, baseForecast), {
       valid: (_a = currentTaf === null || currentTaf === void 0 ? void 0 : currentTaf.baseForecast) === null || _a === void 0 ? void 0 : _a.valid
     }),
     changeGroups: changeGroups
@@ -4704,6 +4744,9 @@ var TacContainer = function TacContainer(_ref) {
       trigger = _useFormContext.trigger,
       setValue = _useFormContext.setValue;
 
+  var _useTafModuleContext = useTafModuleContext(),
+      updateTAC = _useTafModuleContext.updateTAC;
+
   var handleExport = function handleExport() {
     var currentTaf = getValues();
     var newTaf = prepareTafExportValues(taf, currentTaf);
@@ -4716,6 +4759,7 @@ var TacContainer = function TacContainer(_ref) {
     setTimeout(function () {
       trigger(); // trigger all fields validation
     }, 0);
+    updateTAC(convertTafValuesToObject(newTaf));
   };
 
   React__default.useEffect(function () {
@@ -5190,7 +5234,7 @@ var parseErrorMessage = function parseErrorMessage(error, params) {
   } : {
     type: 'SERVER',
     title: 'An error has occurred while saving, please try again',
-    message: getAxiosErrorMessage(error)
+    message: isAxiosError(error) ? getAxiosErrorMessage(error) : error.message
   };
 };
 
@@ -5561,7 +5605,9 @@ var TafLayout = function TafLayout(_ref) {
     setLocations(updatedLocations); // update active index
 
     var newActiveIndex = updatedLocations.findIndex(function (location) {
-      return location.taf.previousId === locations[activeTafIndex].taf.uuid;
+      var _a, _b, _c;
+
+      return ((_a = location === null || location === void 0 ? void 0 : location.taf) === null || _a === void 0 ? void 0 : _a.previousId) === ((_c = (_b = locations[activeTafIndex]) === null || _b === void 0 ? void 0 : _b.taf) === null || _c === void 0 ? void 0 : _c.uuid);
     });
     var newIndex = newActiveIndex !== -1 ? newActiveIndex : activeTafIndex;
     setActiveTafIndex(newIndex); // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -5651,7 +5697,8 @@ var TafLayout = function TafLayout(_ref) {
     variant: "outlined",
     sx: {
       marginBottom: '12px',
-      position: 'relative'
+      position: 'relative',
+      minHeight: locations.length * 62 + 32
     }
   }, /*#__PURE__*/React__default.createElement(TacOverviewMobile, {
     upcomingTafs: upcoming,
@@ -5710,18 +5757,30 @@ var TafWrapper = function TafWrapper(_a) {
   }, children)));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
 var TafModule = function TafModule() {
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
 
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isLoading = _React$useState2[0],
-      setLoading = _React$useState2[1];
-
   var _useApi = useApi(api.getTafList),
       getTafListError = _useApi.error,
-      isFetchingInitial = _useApi.isLoading,
+      isLoading = _useApi.isLoading,
       tafList = _useApi.result,
       fetchNewTafList = _useApi.fetchApiData;
 
@@ -5729,45 +5788,11 @@ var TafModule = function TafModule() {
     return fetchNewTafList({});
   });
 
-  var reFetchNewTafList = function reFetchNewTafList() {
-    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              setLoading(true);
-              _context.next = 4;
-              return fetchNewTafList({});
-
-            case 4:
-              setLoading(false);
-              _context.next = 10;
-              break;
-
-            case 7:
-              _context.prev = 7;
-              _context.t0 = _context["catch"](0);
-              setLoading(false);
-
-            case 10:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[0, 7]]);
-    }));
+  var onPostTaf = function onPostTaf() {
+    fetchNewTafList({});
   };
 
   var hasTafListError = getTafListError !== null;
-
-  if (isFetchingInitial) {
-    return /*#__PURE__*/React.createElement(LinearProgress, {
-      color: "secondary",
-      "data-testid": "loading-bar"
-    });
-  }
-
   return /*#__PURE__*/React.createElement(Box, {
     component: "div",
     id: "tafmodule",
@@ -5785,10 +5810,13 @@ var TafModule = function TafModule() {
     title: "An error has occurred while retrieving the list",
     info: getTafListError.message,
     dataTestId: "taf-list-error",
-    shouldClose: true
+    actionButtonProps: {
+      title: 'Try again',
+      onClick: fetchNewTafList
+    }
   }), /*#__PURE__*/React.createElement(TafLayout, {
     tafList: tafList,
-    onPostTaf: reFetchNewTafList
+    onPostTaf: onPostTaf
   }));
 };
 
@@ -5796,22 +5824,6 @@ var Wrapper = function Wrapper(props) {
   return /*#__PURE__*/React.createElement(TafWrapper, Object.assign({}, props), /*#__PURE__*/React.createElement(TafModule, null));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
 var createApi$1 = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
   var axiosInstance = createApiInstance(url, appUrl, auth, setAuth, authTokenUrl, authClientId);
   return {
@@ -5822,8 +5834,10 @@ var createApi$1 = function createApi(url, appUrl, auth, setAuth, authTokenUrl, a
     postTaf: function postTaf(formData) {
       return axiosInstance.post('/taf', Object.assign({}, formData));
     },
-    getTAC: function getTAC(tafData) {
-      return axiosInstance.post('/taf2tac', Object.assign({}, tafData));
+    getTAC: function getTAC(tafData, signal) {
+      return axiosInstance.post.apply(axiosInstance, ['/taf2tac'].concat([Object.assign({}, tafData)].concat(_toConsumableArray(signal ? [{
+        signal: signal
+      }] : []))));
     }
   };
 };
@@ -6747,12 +6761,17 @@ var fakeAmendmentTaf = {
 var fakeTafTac = 'TAF EHAM 0812/0918 20020G35KT 0500 SN BKN040\nBECMG 0814/0816 0700 BKN001=';
 
 var fakePromise = function fakePromise(withRandomError) {
+  var signal = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   return new Promise(function (resolve, reject) {
-    setTimeout(function () {
+    var timer = setTimeout(function () {
       if (!withRandomError) return resolve();
       var randomError = Math.floor(Math.random() * 4) + 1;
       return randomError === 4 ? reject(new Error('something went wrong')) : resolve();
     }, 300);
+    signal === null || signal === void 0 ? void 0 : signal.signal.addEventListener('abort', function () {
+      clearTimeout(timer);
+      reject(new Error('canceled'));
+    });
   });
 };
 
@@ -6762,8 +6781,8 @@ var fakeAxiosInstance = {
     return fakePromise(false);
   },
   // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-module-boundary-types
-  post: function post(_url, _params) {
-    return fakePromise(false);
+  post: function post(_url, _params, _signal) {
+    return fakePromise(false, _signal);
   }
 };
 var createApi = function createApi() {
@@ -6777,20 +6796,21 @@ var createApi = function createApi() {
         };
       });
     },
-    getTAC: function getTAC() {
-      // eslint-disable-next-line no-console
-      return fakeAxiosInstance.post('/taf2tac').then(function () {
-        return {
-          data: fakeTafTac
-        };
-      });
-    },
     postTaf: function postTaf(_postTaf) {
       // eslint-disable-next-line no-console
       console.log("The new status of the taf will be ".concat(_postTaf.changeStatusTo)); // eslint-disable-next-line no-console
 
       console.log('form has been posted with following values:', _postTaf.taf);
       return fakeAxiosInstance.post('/taf', _postTaf);
+    },
+    getTAC: function getTAC(tafData, signal) {
+      return fakeAxiosInstance.post.apply(fakeAxiosInstance, ['/taf2tac'].concat([Object.assign({}, tafData)].concat(_toConsumableArray(signal ? [{
+        signal: signal
+      }] : [])))).then(function () {
+        return {
+          data: fakeTafTac
+        };
+      });
     }
   };
 };

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('react-hook-form'), require('react-sortablejs'), require('@opengeoweb/form-fields'), require('@opengeoweb/api'), require('@opengeoweb/shared'), require('moment'), require('lodash'), require('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-dom'), require('@mui/material/LinearProgress'), require('@mui/icons-material/DoDisturb'), require('@mui/material/Box')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', 'react-sortablejs', '@opengeoweb/form-fields', '@opengeoweb/api', '@opengeoweb/shared', 'moment', 'lodash', '@mui/styles/makeStyles', '@mui/icons-material', 'react-dom', '@mui/material/LinearProgress', '@mui/icons-material/DoDisturb', '@mui/material/Box'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.material, global.reactHookForm, global.reactSortablejs, global.formFields, global.api, global.shared, global.moment, global.lodash, global.makeStyles, global.iconsMaterial, global.ReactDOM, global.LinearProgress, global.DoDisturbIcon, global.Box));
-})(this, (function (exports, React, material, reactHookForm, reactSortablejs, formFields, api, shared, moment, lodash, makeStyles, iconsMaterial, ReactDOM, LinearProgress, DoDisturbIcon, Box) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('react-hook-form'), require('react-sortablejs'), require('@opengeoweb/form-fields'), require('@opengeoweb/shared'), require('lodash'), require('moment'), require('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-dom'), require('@opengeoweb/api'), require('@mui/material/LinearProgress'), require('@mui/icons-material/DoDisturb'), require('@mui/material/Box')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', 'react-sortablejs', '@opengeoweb/form-fields', '@opengeoweb/shared', 'lodash', 'moment', '@mui/styles/makeStyles', '@mui/icons-material', 'react-dom', '@opengeoweb/api', '@mui/material/LinearProgress', '@mui/icons-material/DoDisturb', '@mui/material/Box'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.material, global.reactHookForm, global.reactSortablejs, global.formFields, global.shared, global.lodash, global.moment, global.makeStyles, global.iconsMaterial, global.ReactDOM, global.api, global.LinearProgress, global.DoDisturbIcon, global.Box));
+})(this, (function (exports, React, material, reactHookForm, reactSortablejs, formFields, shared, lodash, moment, makeStyles, iconsMaterial, ReactDOM, api, LinearProgress, DoDisturbIcon, Box) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -2319,19 +2319,35 @@
       return tac === TAC_MISSING_DATA || tac === TAC_NOT_AVAILABLE || tac === TAC_RETRIEVING_DATA || tac === TAC_FAILED;
     };
     var useTACGenerator = function useTACGenerator(taf, requestTAC) {
-      var _a = __read(React__default["default"].useState(taf.status === 'NEW' ? TAC_NOT_AVAILABLE : TAC_RETRIEVING_DATA), 2),
+      var _a = __read(React__default["default"].useState(!taf || taf.status === 'NEW' ? TAC_NOT_AVAILABLE : TAC_RETRIEVING_DATA), 2),
           TAC = _a[0],
           setTAC = _a[1];
 
       var isMounted = shared.useIsMounted().isMounted;
+      var controller = React__default["default"].useRef(null);
+
+      var onSetTac = function onSetTac(newTAC) {
+        if (controller.current) {
+          controller.current.abort();
+        }
+
+        setTAC(newTAC);
+      };
+
       var retrieveTAC = React__default["default"].useCallback(function (tafToPost) {
         if (shouldRetrieveTAC(tafToPost)) {
-          requestTAC(tafToPost).then(function (result) {
+          if (controller.current) {
+            controller.current.abort();
+          }
+
+          controller.current = new AbortController();
+          setTAC(TAC_RETRIEVING_DATA);
+          requestTAC(tafToPost, controller.current.signal).then(function (result) {
             if (isMounted.current) {
               setTAC(result.data);
             }
-          })["catch"](function () {
-            if (isMounted.current) {
+          })["catch"](function (error) {
+            if (isMounted && error.message !== 'canceled') {
               setTAC(TAC_FAILED);
             }
           });
@@ -2340,12 +2356,12 @@
         }
       }, [isMounted, requestTAC]);
       React__default["default"].useEffect(function () {
-        if (taf.status !== 'NEW') {
+        if (taf && taf.status !== 'NEW') {
           retrieveTAC(taf);
         } // eslint-disable-next-line react-hooks/exhaustive-deps
 
       }, []);
-      return [TAC, retrieveTAC];
+      return [TAC, retrieveTAC, onSetTac];
     };
     var useDragOrder = function useDragOrder(trigger, move, onFormBlur) {
       var _a = __read(React__default["default"].useState(null), 2),
@@ -2535,9 +2551,16 @@
 
 
       var taf = tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND' || tafAction === 'CORRECT' || tafAction === 'DRAFT_CORRECT' ? getAmendedCorrectedTafTimes(_taf, tafAction) : _taf;
+      var formattedBaseForecast = formatFormValues(taf.baseForecast);
+
+      var baseForecast = __assign(__assign(__assign({}, emptyBaseForecast), formattedBaseForecast), {
+        weather: __assign(__assign({}, emptyBaseForecast.weather), formattedBaseForecast.weather),
+        cloud: __assign(__assign({}, emptyBaseForecast.cloud), formattedBaseForecast.cloud)
+      });
+
       return __assign(__assign(__assign(__assign({}, taf), {
         messageType: getMessageType(taf, tafAction),
-        baseForecast: __assign(__assign({}, emptyBaseForecast), formatFormValues(taf.baseForecast))
+        baseForecast: baseForecast
       }), taf.changeGroups && {
         changeGroups: taf.changeGroups.map(formatFormValues)
       }), addEmptyChangeGroup && {
@@ -3857,6 +3880,7 @@
     };
     var useTafModuleState = function useTafModuleState(_a) {
       var onPreventCloseView = _a.onPreventCloseView;
+      var api$1 = api.useApiContext().api;
 
       var _b = __read(React__namespace.useState(function () {
         return new Promise(function () {
@@ -3874,6 +3898,11 @@
           isFormDirty = _d[0],
           setIsFormDirty = _d[1];
 
+      var _e = __read(useTACGenerator(undefined, api$1.getTAC), 3),
+          TAC = _e[0],
+          updateTAC = _e[1],
+          setTAC = _e[2];
+
       var onRegisterValidateForm = function onRegisterValidateForm(promiseToRegister) {
         registerValidateForm(function () {
           return promiseToRegister;
@@ -3892,6 +3921,9 @@
         registerValidateForm: onRegisterValidateForm,
         tafAction: tafAction,
         setTafAction: setTafAction,
+        TAC: TAC,
+        updateTAC: updateTAC,
+        setTAC: setTAC,
         isFormDirty: isFormDirty,
         setIsFormDirty: onChangeFormDirty
       };
@@ -3939,10 +3971,12 @@
       var _h = useTafModuleContext(),
           registerValidateForm = _h.registerValidateForm,
           tafAction = _h.tafAction,
+          setIsFormDirty = _h.setIsFormDirty,
           setTafAction = _h.setTafAction,
-          setIsFormDirty = _h.setIsFormDirty;
+          TAC = _h.TAC,
+          updateTAC = _h.updateTAC,
+          setTAC = _h.setTAC;
 
-      var api$1 = api.useApiContext().api;
       var isMounted = shared.useIsMounted().isMounted;
 
       var _j = reactHookForm.useFormContext(),
@@ -3963,14 +3997,20 @@
           delayedFormValues = _k[0],
           setDelayedFormValues = _k[1];
 
-      var _l = __read(useTACGenerator(tafFromBackend.taf, api$1.getTAC), 2),
-          TAC = _l[0],
-          updateTAC = _l[1];
-
       var hasErrors = Object.keys(errors).length;
 
       var onFormBlur = function onFormBlur() {
-        setDelayedFormValues(getValues());
+        if (!lodash.isEqual(getValues(), delayedFormValues)) {
+          setDelayedFormValues(getValues());
+        }
+      };
+
+      var resetTAC = function resetTAC() {
+        if (originalTaf.status !== 'NEW') {
+          updateTAC(originalTaf);
+        } else {
+          setTAC(TAC_NOT_AVAILABLE);
+        }
       };
 
       React__default["default"].useEffect(function () {
@@ -4043,6 +4083,7 @@
             if (isFormDirty) {
               showConfirmDialog(action).then(function () {
                 resetForm(undefined, isDefaultDisabled);
+                resetTAC();
               });
             } else {
               resetForm(undefined, isDefaultDisabled);
@@ -4109,19 +4150,19 @@
         }
       };
 
-      var _m = reactHookForm.useFieldArray({
+      var _l = reactHookForm.useFieldArray({
         control: control,
         name: 'changeGroups'
       }),
-          fields = _m.fields,
-          insert = _m.insert,
-          remove = _m.remove,
-          move = _m.move;
+          fields = _l.fields,
+          insert = _l.insert,
+          remove = _l.remove,
+          move = _l.move;
 
-      var _o = useDragOrder(trigger, move, onFormBlur),
-          onChangeOrder = _o.onChangeOrder,
-          onStartDrag = _o.onStartDrag,
-          activeDraggingIndex = _o.activeDraggingIndex;
+      var _m = useDragOrder(trigger, move, onFormBlur),
+          onChangeOrder = _m.onChangeOrder,
+          onStartDrag = _m.onStartDrag,
+          activeDraggingIndex = _m.activeDraggingIndex;
 
       var onRemoverow = function onRemoverow(index) {
         confirmDialog({
@@ -4202,9 +4243,9 @@
         });
       };
 
-      var _p = __read(React__default["default"].useState(false), 2),
-          shouldValidate = _p[0],
-          setShouldValidate = _p[1];
+      var _o = __read(React__default["default"].useState(false), 2),
+          shouldValidate = _o[0],
+          setShouldValidate = _o[1];
 
       React__default["default"].useEffect(function () {
         setIsDisabled(isDefaultDisabled);
@@ -4232,6 +4273,7 @@
         registerValidateForm(onValidateFormPromise); // set default taf action
 
         setTafAction(fromStatusToAction(originalTaf.status));
+        resetTAC();
         return function () {
           reset({});
         }; // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -4540,7 +4582,7 @@
           _b = convertedCopy.changeGroups,
           changeGroups = _b === void 0 ? [] : _b;
       return __assign(__assign({}, currentTaf), {
-        baseForecast: __assign(__assign(__assign({}, emptyBaseForecast), baseForecast), {
+        baseForecast: __assign(__assign({}, baseForecast), {
           valid: (_a = currentTaf === null || currentTaf === void 0 ? void 0 : currentTaf.baseForecast) === null || _a === void 0 ? void 0 : _a.valid
         }),
         changeGroups: changeGroups
@@ -4708,6 +4750,8 @@
           trigger = _e.trigger,
           setValue = _e.setValue;
 
+      var updateTAC = useTafModuleContext().updateTAC;
+
       var handleExport = function handleExport() {
         var currentTaf = getValues();
         var newTaf = prepareTafExportValues(taf, currentTaf);
@@ -4720,6 +4764,7 @@
         setTimeout(function () {
           trigger(); // trigger all fields validation
         }, 0);
+        updateTAC(convertTafValuesToObject(newTaf));
       };
 
       React__default["default"].useEffect(function () {
@@ -5158,7 +5203,7 @@
       } : {
         type: 'SERVER',
         title: 'An error has occurred while saving, please try again',
-        message: shared.getAxiosErrorMessage(error)
+        message: shared.isAxiosError(error) ? shared.getAxiosErrorMessage(error) : error.message
       };
     };
 
@@ -5557,7 +5602,9 @@
         setLocations(updatedLocations); // update active index
 
         var newActiveIndex = updatedLocations.findIndex(function (location) {
-          return location.taf.previousId === locations[activeTafIndex].taf.uuid;
+          var _a, _b, _c;
+
+          return ((_a = location === null || location === void 0 ? void 0 : location.taf) === null || _a === void 0 ? void 0 : _a.previousId) === ((_c = (_b = locations[activeTafIndex]) === null || _b === void 0 ? void 0 : _b.taf) === null || _c === void 0 ? void 0 : _c.uuid);
         });
         var newIndex = newActiveIndex !== -1 ? newActiveIndex : activeTafIndex;
         setActiveTafIndex(newIndex); // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -5647,7 +5694,8 @@
         variant: "outlined",
         sx: {
           marginBottom: '12px',
-          position: 'relative'
+          position: 'relative',
+          minHeight: locations.length * 62 + 32
         }
       }, /*#__PURE__*/React__default["default"].createElement(TacOverviewMobile, {
         upcomingTafs: upcoming,
@@ -5709,65 +5757,21 @@
     var TafModule = function TafModule() {
       var api$1 = api.useApiContext().api;
 
-      var _a = __read(React__namespace.useState(false), 2),
-          isLoading = _a[0],
-          setLoading = _a[1];
-
-      var _b = api.useApi(api$1.getTafList),
-          getTafListError = _b.error,
-          isFetchingInitial = _b.isLoading,
-          tafList = _b.result,
-          fetchNewTafList = _b.fetchApiData;
+      var _a = api.useApi(api$1.getTafList),
+          getTafListError = _a.error,
+          isLoading = _a.isLoading,
+          tafList = _a.result,
+          fetchNewTafList = _a.fetchApiData;
 
       shared.usePoller([tafList, getTafListError], function () {
         return fetchNewTafList({});
       });
 
-      var reFetchNewTafList = function reFetchNewTafList() {
-        return __awaiter(void 0, void 0, void 0, function () {
-          return __generator(this, function (_a) {
-            switch (_a.label) {
-              case 0:
-                _a.trys.push([0, 2,, 3]);
-
-                setLoading(true);
-                return [4
-                /*yield*/
-                , fetchNewTafList({})];
-
-              case 1:
-                _a.sent();
-
-                setLoading(false);
-                return [3
-                /*break*/
-                , 3];
-
-              case 2:
-                _a.sent();
-                setLoading(false);
-                return [3
-                /*break*/
-                , 3];
-
-              case 3:
-                return [2
-                /*return*/
-                ];
-            }
-          });
-        });
+      var onPostTaf = function onPostTaf() {
+        fetchNewTafList({});
       };
 
       var hasTafListError = getTafListError !== null;
-
-      if (isFetchingInitial) {
-        return /*#__PURE__*/React__namespace.createElement(LinearProgress__default["default"], {
-          color: "secondary",
-          "data-testid": "loading-bar"
-        });
-      }
-
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         component: "div",
         id: "tafmodule",
@@ -5785,10 +5789,13 @@
         title: "An error has occurred while retrieving the list",
         info: getTafListError.message,
         dataTestId: "taf-list-error",
-        shouldClose: true
+        actionButtonProps: {
+          title: 'Try again',
+          onClick: fetchNewTafList
+        }
       }), /*#__PURE__*/React__namespace.createElement(TafLayout, {
         tafList: tafList,
-        onPostTaf: reFetchNewTafList
+        onPostTaf: onPostTaf
       }));
     };
 
@@ -5806,8 +5813,10 @@
         postTaf: function postTaf(formData) {
           return axiosInstance.post('/taf', __assign({}, formData));
         },
-        getTAC: function getTAC(tafData) {
-          return axiosInstance.post('/taf2tac', __assign({}, tafData));
+        getTAC: function getTAC(tafData, signal) {
+          return axiosInstance.post.apply(axiosInstance, __spreadArray(['/taf2tac'], __read(__spreadArray([__assign({}, tafData)], __read(signal ? [{
+            signal: signal
+          }] : [])))));
         }
       };
     };
@@ -6727,13 +6736,21 @@
 
     var fakeTafTac = 'TAF EHAM 0812/0918 20020G35KT 0500 SN BKN040\nBECMG 0814/0816 0700 BKN001=';
 
-    var fakePromise = function fakePromise(withRandomError) {
+    var fakePromise = function fakePromise(withRandomError, signal) {
+      if (signal === void 0) {
+        signal = null;
+      }
+
       return new Promise(function (resolve, reject) {
-        setTimeout(function () {
+        var timer = setTimeout(function () {
           if (!withRandomError) return resolve();
           var randomError = Math.floor(Math.random() * 4) + 1;
           return randomError === 4 ? reject(new Error('something went wrong')) : resolve();
         }, 300);
+        signal === null || signal === void 0 ? void 0 : signal.signal.addEventListener('abort', function () {
+          clearTimeout(timer);
+          reject(new Error('canceled'));
+        });
       });
     };
 
@@ -6743,8 +6760,8 @@
         return fakePromise(false);
       },
       // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-module-boundary-types
-      post: function post(_url, _params) {
-        return fakePromise(false);
+      post: function post(_url, _params, _signal) {
+        return fakePromise(false, _signal);
       }
     };
     var createApi = function createApi() {
@@ -6758,20 +6775,21 @@
             };
           });
         },
-        getTAC: function getTAC() {
-          // eslint-disable-next-line no-console
-          return fakeAxiosInstance.post('/taf2tac').then(function () {
-            return {
-              data: fakeTafTac
-            };
-          });
-        },
         postTaf: function postTaf(_postTaf) {
           // eslint-disable-next-line no-console
           console.log("The new status of the taf will be " + _postTaf.changeStatusTo); // eslint-disable-next-line no-console
 
           console.log('form has been posted with following values:', _postTaf.taf);
           return fakeAxiosInstance.post('/taf', _postTaf);
+        },
+        getTAC: function getTAC(tafData, signal) {
+          return fakeAxiosInstance.post.apply(fakeAxiosInstance, __spreadArray(['/taf2tac'], __read(__spreadArray([__assign({}, tafData)], __read(signal ? [{
+            signal: signal
+          }] : []))))).then(function () {
+            return {
+              data: fakeTafTac
+            };
+          });
         }
       };
     };

package/lib/components/Providers/Providers.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { UseFormOptions } from 'react-hook-form';
+import { Theme } from '@mui/material';
+export interface TafThemeApiProviderProps {
+    createApiFunc?: any;
+    children: React.ReactNode;
+    theme?: Theme;
+}
+export declare const TafThemeApiProvider: React.FC<TafThemeApiProviderProps>;
+interface TafThemeFormProviderProps {
+    children: React.ReactNode;
+    options?: UseFormOptions;
+    theme?: Theme;
+}
+export declare const TafThemeFormProvider: React.FC<TafThemeFormProviderProps>;
+export {};

package/lib/components/Providers/index.d.ts

@@ -0,0 +1 @@
+export * from './Providers';

package/lib/components/TafForm/utils.d.ts

@@ -29,9 +29,9 @@ export declare const TAC_NOT_AVAILABLE = "No TAC available";
 export declare const TAC_RETRIEVING_DATA = "Retrieving TAC";
 export declare const TAC_FAILED = "Failed to retrieve TAC";
 export declare const tacHasError: (tac: string) => boolean;
-export declare const useTACGenerator: (taf: Taf, requestTAC: (postTaf: unknown) => Promise<{
+export declare const useTACGenerator: (taf: Taf, requestTAC: (postTaf: unknown, abortSignal?: AbortSignal) => Promise<{
     data: string;
-}>) => [string, (tafToPost: any) => void];
+}>) => [string, (tafToPost: any) => void, (newTAC: string) => void];
 export declare type SortableField = {
     id: string;
     chosen: boolean;

package/lib/components/TafLayout/LocationTabs/LocationTabs.stories.d.ts

@@ -3,11 +3,11 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const TafLayoutLightTheme: {
+export declare const LocationTabsLightTheme: {
     (): React.ReactElement;
     storyName: string;
 };
-export declare const TafLayoutDarkTheme: {
+export declare const LocationTabsDarkTheme: {
     (): React.ReactElement;
     storyName: string;
 };

package/lib/components/TafLayout/TacOverview/ExportButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface ExportButtonProps {
-    onClick: any;
+    onClick: () => void;
     isHidden: boolean;
 }
 declare const ExportButton: React.FC<ExportButtonProps>;

package/lib/components/TafLayout/TafPanel/TafPanel.d.ts

@@ -21,7 +21,7 @@ interface TafPanelProps {
     setIsFormDisabled?: (isDisabled: boolean) => void;
     error?: TafError;
 }
-export declare const usePostTafRequest: (request: (params?: unknown) => Promise<void>, errorParser?: (error: AxiosError, params: TafFromFrontEnd) => TafError) => {
+export declare const usePostTafRequest: (request: (params?: unknown) => Promise<void>, errorParser?: (error: AxiosError | Error, params: TafFromFrontEnd) => TafError) => {
     isLoading: boolean;
     error: TafError;
     setError: (newError: AxiosError) => void;

package/lib/components/TafModule/TafModuleProvider.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseTaf, TafActions } from '../../types';
+import { BaseTaf, Taf, TafActions } from '../../types';
 declare type ValidateFormPromise = () => Promise<void | BaseTaf>;
 interface TafModuleMethods {
     onPreventCloseView?: (shouldPreventClose: boolean) => void;
@@ -9,6 +9,9 @@ interface TafModuleContextState {
     registerValidateForm: (promiseToRegister: ValidateFormPromise) => void;
     tafAction: TafActions;
     setTafAction: (action: TafActions) => void;
+    TAC: string;
+    updateTAC: (taf: Taf) => void;
+    setTAC: (tac: string) => void;
     isFormDirty: boolean;
     setIsFormDirty: (isDirty: boolean) => void;
 }

package/lib/utils/fakeApi.d.ts

@@ -1,6 +1,6 @@
 export declare const fakeTafTac = "TAF EHAM 0812/0918 20020G35KT 0500 SN BKN040\nBECMG 0814/0816 0700 BKN001=";
 export declare const fakeAxiosInstance: {
     get: (_url: any, _params?: any) => Promise<void>;
-    post: (_url: any, _params?: any) => Promise<void>;
+    post: (_url: any, _params?: any, _signal?: any) => Promise<void>;
 };
 export declare const createApi: () => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/taf",
-  "version": "2.6.0",
+  "version": "2.9.0",
   "description": "GeoWeb TAF library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,16 +14,16 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "@mui/material": "^5.2.8",
-    "@opengeoweb/api": "2.6.0",
+    "@opengeoweb/api": "2.9.0",
     "axios": "^0.25.0",
-    "@opengeoweb/shared": "2.6.0",
-    "@opengeoweb/theme": "2.6.0",
+    "@opengeoweb/shared": "2.9.0",
+    "@opengeoweb/theme": "2.9.0",
     "@mui/styles": "^5.2.3",
     "@mui/icons-material": "^5.2.5",
     "react-draggable": "^4.4.3",
     "re-resizable": "^6.9.0",
     "lodash": "^4.17.20",
-    "@opengeoweb/form-fields": "2.6.0",
+    "@opengeoweb/form-fields": "2.9.0",
     "react-hook-form": "^6.12.1",
     "moment": "^2.29.0",
     "moment-timezone": "^0.5.31",

package/lib/utils/testUtils.d.ts

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { UseFormOptions } from 'react-hook-form';
-import { Theme } from '@mui/material';
-interface WrapperProps {
-    children: React.ReactNode;
-    theme?: Theme;
-}
-export interface TestWrapperProps extends WrapperProps {
-    createApiFunc?: () => void;
-}
-export declare const TestWrapper: React.FC<TestWrapperProps>;
-interface ApiTestWrapperProps extends WrapperProps {
-    postTaf?: unknown;
-    getTafList?: unknown;
-    getTAC?: unknown;
-}
-export declare const ApiTestWrapper: React.FC<ApiTestWrapperProps>;
-interface TestFormWrapperProps {
-    children: React.ReactNode;
-    options?: UseFormOptions;
-    theme?: Theme;
-}
-export declare const TestFormWrapper: React.FC<TestFormWrapperProps>;
-export declare const StoryWrapper: React.FC<WrapperProps>;
-export {};