@opengeoweb/taf 3.0.0 → 4.1.0

package/index.esm.js

@@ -2,16 +2,17 @@ import * as React from 'react';
 import React__default from 'react';
 import { TextField, Grid, Box, Button, IconButton, Tooltip, Chip, Typography, FormLabel, Switch, Card, Tabs, Tab, Dialog, MenuList, MenuItem, Backdrop, CircularProgress } from '@mui/material';
 import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
+import { useDispatch } from 'react-redux';
 import { ReactSortable, Sortable } from 'react-sortablejs';
 import { isEqual } from 'lodash';
 import { useAuthenticationContext } from '@opengeoweb/authentication';
 import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
 import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, Avatar, getInitials, useConfirmationDialog, usePreventBrowserClose, ToolButton, ToolHeader, AlertBanner, getErrorMessage as getErrorMessage$1, getWarningMessage, ConfirmationServiceProvider, usePoller, ErrorBoundary } from '@opengeoweb/shared';
+import { snackbarActions } from '@opengeoweb/core';
 import moment from 'moment';
 import { Add, Delete, Close, DragHandle as DragHandle$1, ThumbsUp, Clock, Cancel, Edit, Success, Export, ListItem, Cached } from '@opengeoweb/theme';
-import makeStyles from '@mui/styles/makeStyles';
 import ReactDOM from 'react-dom';
-import { useApiContext, createApiInstance, ApiProvider } from '@opengeoweb/api';
+import { useApiContext, createApiInstance, createFakeApiInstance, ApiProvider } from '@opengeoweb/api';
 import LinearProgress from '@mui/material/LinearProgress';
 import Box$1 from '@mui/material/Box';
 
@@ -2315,6 +2316,8 @@ 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 getJSON = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
   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],
@@ -2341,7 +2344,7 @@ var useTACGenerator = function useTACGenerator(taf, requestTAC) {
 
       controller.current = new AbortController();
       setTAC(TAC_RETRIEVING_DATA);
-      requestTAC(tafToPost, controller.current.signal).then(function (result) {
+      requestTAC(tafToPost, getJSON, controller.current.signal).then(function (result) {
         if (isMounted.current) {
           setTAC(result.data);
         }
@@ -2353,7 +2356,7 @@ var useTACGenerator = function useTACGenerator(taf, requestTAC) {
     } else {
       setTAC(TAC_MISSING_DATA);
     }
-  }, [isMounted, requestTAC]);
+  }, [isMounted, requestTAC, getJSON]);
   React__default.useEffect(function () {
     if (taf && taf.status !== 'NEW') {
       retrieveTAC(taf);
@@ -3518,19 +3521,6 @@ var TafFormButtons = function TafFormButtons(_ref2) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles = makeStyles(function () {
-  return {
-    dragHandle: {
-      backgroundColor: 'transparent',
-      '&:hover': {
-        backgroundColor: 'transparent'
-      },
-      cursor: function cursor(isSorting) {
-        return isSorting ? 'grabbing' : 'grab';
-      }
-    }
-  };
-});
 
 var DragHandle = function DragHandle(_ref) {
   var _ref$isSorting = _ref.isSorting,
@@ -3538,13 +3528,21 @@ var DragHandle = function DragHandle(_ref) {
       _ref$isDisabled = _ref.isDisabled,
       isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
       index = _ref.index;
-  var classes = useStyles(isSorting);
   return /*#__PURE__*/React__default.createElement(IconButton, {
-    className: "".concat(classes.dragHandle, " handle"),
+    className: "handle",
     "data-testid": "dragHandle-".concat(index),
     disableRipple: true,
     disabled: isDisabled,
-    size: "large"
+    size: "large",
+    sx: {
+      backgroundColor: 'transparent',
+      '&:hover': {
+        backgroundColor: 'transparent'
+      },
+      cursor: function cursor() {
+        return isSorting ? 'grabbing' : 'grab';
+      }
+    }
   }, /*#__PURE__*/React__default.createElement(DragHandle$1, null));
 };
 
@@ -3996,6 +3994,9 @@ var TafAvatar = function TafAvatar(_ref) {
 
 var noop = function noop() {};
 
+var getSnackbarMessage$2 = function getSnackbarMessage(isChecked, location) {
+  return "You are now ".concat(isChecked ? '' : 'no longer ', "the editor for TAF ").concat(location);
+};
 var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
   var tafFromBackend = _ref.tafFromBackend,
       _ref$onFormAction = _ref.onFormAction,
@@ -4024,6 +4025,7 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
   var _useAuthenticationCon = useAuthenticationContext(),
       auth = _useAuthenticationCon.auth;
 
+  var dispatch = useDispatch();
   var isEditor = editor === (auth === null || auth === void 0 ? void 0 : auth.username) || false;
   var isDefaultDisabled = getIsFormDefaultDisabled(originalTaf.status);
   var confirmDialog = useConfirmationDialog();
@@ -4129,6 +4131,12 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
     setTafAction(action);
   };
 
+  var showSnackbar = React__default.useCallback(function (message) {
+    dispatch(snackbarActions.openSnackbar({
+      message: message
+    }));
+  }, [dispatch]);
+
   var setIsEditor = function setIsEditor(checked) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
       var editor, didSucceed;
@@ -4166,9 +4174,14 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
 
             case 8:
               didSucceed = _context.sent;
+
+              if (didSucceed) {
+                showSnackbar(getSnackbarMessage$2(checked, originalTaf.location));
+              }
+
               return _context.abrupt("return", didSucceed);
 
-            case 10:
+            case 11:
             case "end":
               return _context.stop();
           }
@@ -4458,8 +4471,8 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
       alignItems: 'center',
       position: 'absolute',
       top: {
-        xs: '20px',
-        sm: '0px'
+        xs: '34px',
+        sm: '-3px'
       },
       right: {
         xs: 'calc(50% -  70px)',
@@ -4484,11 +4497,15 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
     sx: {
       fontSize: '20px',
       fontWeight: 500,
-      height: '24px'
+      height: '24px',
+      display: 'flex',
+      alignItems: 'center'
     }
   }, "TAC"), /*#__PURE__*/React__default.createElement(Typography, {
     sx: {
-      fontSize: '14px',
+      fontSize: '12px',
+      lineHeight: 1.67,
+      letterSpacing: '0.21px',
       margin: '8px 0px'
     },
     "data-testid": "form-tac-message"
@@ -4631,7 +4648,7 @@ var TafHeader = function TafHeader(_ref) {
     sx: Object.assign({
       textAlign: 'center',
       fontWeight: 500,
-      paddingTop: '6px',
+      paddingTop: '4px',
       textTransform: 'capitalize'
     }, sx)
   }, title);
@@ -4693,15 +4710,24 @@ var getLocationSetting = function getLocationSetting(location) {
   var locationSettings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : tafSettings.locations;
   return locationSettings[location];
 };
-var sortTafsOnLocation = function sortTafsOnLocation(tafList) {
+var sortTafsOnLocation = function sortTafsOnLocation() {
+  var tafList = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var locationOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : tafSettings.locationOrder;
-  if (!tafList) return [];
   return _toConsumableArray(tafList).sort(function (_ref, _ref2) {
     var tafA = _ref.taf;
     var tafB = _ref2.taf;
     return locationOrder.indexOf(tafA.location) < locationOrder.indexOf(tafB.location) ? -1 : 1;
   });
 };
+var sortTafsOnIssueDate = function sortTafsOnIssueDate() {
+  var tafList = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return _toConsumableArray(tafList).sort(function (_ref3, _ref4) {
+    var tafA = _ref3.taf;
+    var tafB = _ref4.taf;
+    if (tafA.issueDate < tafB.issueDate || tafA.issueDate && !tafB.issueDate) return -1;
+    return 1;
+  });
+};
 var getBaseTime = function getBaseTime(baseTime, location) {
   var currentBaseTime = moment.utc(baseTime);
   var activityPeriod = getLocationSetting(location).activity_period;
@@ -4729,7 +4755,8 @@ var getTafTimeSlot = function getTafTimeSlot(baseTime, location, status) {
   return 'UPCOMING';
 };
 var sortTafTimeSlots = function sortTafTimeSlots(tafList) {
-  var sortedListOnLocation = sortTafsOnLocation(tafList);
+  var sortedListOnIssueDate = sortTafsOnIssueDate(tafList);
+  var sortedListOnLocation = sortTafsOnLocation(sortedListOnIssueDate);
   return sortedListOnLocation.reduce(function (sortedTafList, tafFromBackend) {
     var taf = tafFromBackend.taf;
     var timeSlot = getTafTimeSlot(taf.baseTime, taf.location, taf.status);
@@ -4769,6 +4796,29 @@ var prepareTafExportValues = function prepareTafExportValues(tafToCopy, currentT
     changeGroups: changeGroups
   });
 };
+var getNewTafLocationIndex = function getNewTafLocationIndex(tafLocations, previousTafLocationUUID) {
+  var newActiveIndexForDraft = tafLocations.findIndex(function (location) {
+    var _a;
+
+    return ((_a = location === null || location === void 0 ? void 0 : location.taf) === null || _a === void 0 ? void 0 : _a.previousId) === previousTafLocationUUID;
+  });
+
+  if (newActiveIndexForDraft !== -1) {
+    return newActiveIndexForDraft;
+  }
+
+  var newActiveIndexForPublished = tafLocations.findIndex(function (location) {
+    var _a;
+
+    return ((_a = location === null || location === void 0 ? void 0 : location.taf) === null || _a === void 0 ? void 0 : _a.uuid) === previousTafLocationUUID;
+  });
+
+  if (newActiveIndexForPublished !== -1) {
+    return newActiveIndexForPublished;
+  }
+
+  return 0;
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4873,17 +4923,74 @@ var StatusIcon = function StatusIcon(_ref2) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
+var TOOLTIP_TITLE = 'Import TAC';
 
 var ExportButton = function ExportButton(_ref) {
   var onClick = _ref.onClick,
       isHidden = _ref.isHidden;
   return isHidden ? null : /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: "Import TAC",
+    title: TOOLTIP_TITLE,
     placement: "left"
-  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(ToolButton, {
+  }, /*#__PURE__*/React__default.createElement(ToolButton, {
     onClick: onClick,
     "data-testid": "export-tac-button"
-  }, /*#__PURE__*/React__default.createElement(Export, null))));
+  }, /*#__PURE__*/React__default.createElement(Export, 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var AdverseWeatherTACMessage = function AdverseWeatherTACMessage(_ref) {
+  var TAC = _ref.TAC,
+      isActive = _ref.isActive;
+  return /*#__PURE__*/React__default.createElement(Box$1, {
+    "data-testid": "adverse-weather-tac",
+    sx: {
+      fontSize: '12px',
+      lineHeight: '16px',
+      letterSpacing: '0.4px',
+      color: 'geowebColors.captions.captionStatus.rgba'
+    }
+  }, TAC.tac.map(function (line, index) {
+    return /*#__PURE__*/React__default.createElement(Box$1, {
+      key: line.toString() + index.toString(),
+      component: "span",
+      sx: {
+        display: 'inline-block'
+      }
+    }, line.map(function (word, index) {
+      return /*#__PURE__*/React__default.createElement(Box$1, {
+        key: word.text + index.toString(),
+        component: "span",
+        sx: Object.assign(Object.assign({
+          display: 'inline',
+          boxDecorationBreak: 'clone',
+          WebkitBoxDecorationBreak: 'clone'
+        }, isActive && {
+          backgroundColor: 'geowebColors.functional.warningHighlight.rgba'
+        }), word.type === 'adverse' && {
+          color: 'geowebColors.captions.captionError.rgba'
+        })
+      }, word.text === '=' ? "".concat(word.text) : " ".concat(word.text));
+    }));
+  }));
+};
+
+var getSnackbarMessage$1 = function getSnackbarMessage(location, locationLabel) {
+  return "TAF ".concat(location, " ").concat(locationLabel, " was imported successfully");
 };
 
 var TacContainer = function TacContainer(_ref) {
@@ -4896,7 +5003,9 @@ var TacContainer = function TacContainer(_ref) {
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
 
-  var _useTACGenerator = useTACGenerator(taf, api.getTAC),
+  var dispatch = useDispatch();
+
+  var _useTACGenerator = useTACGenerator(taf, api.getTAC, true),
       _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
       TAC = _useTACGenerator2[0],
       retrieveTAC = _useTACGenerator2[1];
@@ -4915,6 +5024,12 @@ var TacContainer = function TacContainer(_ref) {
   var _useTafModuleContext = useTafModuleContext(),
       updateTAC = _useTafModuleContext.updateTAC;
 
+  var showSnackbar = React__default.useCallback(function (message) {
+    dispatch(snackbarActions.openSnackbar({
+      message: message
+    }));
+  }, [dispatch]);
+
   var handleExport = function handleExport() {
     var currentTaf = getValues();
     var newTaf = prepareTafExportValues(taf, currentTaf);
@@ -4928,6 +5043,7 @@ var TacContainer = function TacContainer(_ref) {
       trigger(); // trigger all fields validation
     }, 0);
     updateTAC(convertTafValuesToObject(newTaf));
+    showSnackbar(getSnackbarMessage$1(location, locationLabel));
   };
 
   React__default.useEffect(function () {
@@ -4997,23 +5113,18 @@ var TacContainer = function TacContainer(_ref) {
       letterSpacing: '0.4px',
       color: 'geowebColors.captions.captionStatus.rgba'
     }
-  }, TAC.split('\n').map(function (line) {
-    return /*#__PURE__*/React__default.createElement(Box, {
-      component: "span",
-      key: line,
-      sx: {
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React__default.createElement(Box, {
-      component: "span",
-      sx: Object.assign({
-        display: 'inline',
-        boxDecorationBreak: 'clone',
-        WebkitBoxDecorationBreak: 'clone'
-      }, isActive && {
-        backgroundColor: 'geowebColors.functional.warningHighlight.rgba'
-      })
-    }, line));
+  }, typeof TAC === 'string' ? /*#__PURE__*/React__default.createElement(Box, {
+    component: "span",
+    sx: Object.assign({
+      display: 'inline',
+      boxDecorationBreak: 'clone',
+      WebkitBoxDecorationBreak: 'clone'
+    }, isActive && {
+      backgroundColor: 'geowebColors.functional.warningHighlight.rgba'
+    })
+  }, TAC) : /*#__PURE__*/React__default.createElement(AdverseWeatherTACMessage, {
+    TAC: TAC,
+    isActive: isActive
   })));
 };
 
@@ -5162,8 +5273,8 @@ var TacOverviewMobile = function TacOverviewMobile(_ref) {
         sm: 'none'
       },
       position: 'absolute',
-      right: '8px',
-      top: '48px'
+      right: '4px',
+      top: '82px'
     }
   }, /*#__PURE__*/React.createElement(ListItem, null)), /*#__PURE__*/React.createElement(Dialog, {
     open: isOpen,
@@ -5206,7 +5317,6 @@ var TacOverviewMobile = function TacOverviewMobile(_ref) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-
 var formatBaseTime = function formatBaseTime(time) {
   return time.format('HH:mm DD MMM');
 };
@@ -5602,7 +5712,10 @@ var TafPanel = function TafPanel(_ref) {
     shouldClose: true
   }), /*#__PURE__*/React__default.createElement(Box, {
     sx: {
-      marginTop: '10px',
+      marginTop: {
+        xs: '44px',
+        sm: '10px'
+      },
       padding: 1
     }
   }, /*#__PURE__*/React__default.createElement(TafForm, {
@@ -5688,7 +5801,10 @@ var LastUpdateTime = function LastUpdateTime(_ref) {
     "data-testid": "updateTafBtn",
     onClick: onUpdateTaf,
     sx: {
-      marginRight: 1,
+      marginRight: {
+        xs: 2,
+        sm: 1
+      },
       marginLeft: 1
     }
   }, /*#__PURE__*/React__default.createElement(Cached, null))));
@@ -5699,17 +5815,60 @@ var CONFIRM_DIALOG_OPTIONS = {
   description: "It's not possible to autosave this TAF due to the presence of issue(s). Are you sure you want to close this TAF? Any changes made will be lost.",
   confirmLabel: 'Exit without saving'
 };
+var getTafMessagePrefix = function getTafMessagePrefix(_ref, newStatus) {
+  var location = _ref.location,
+      validDateStart = _ref.validDateStart,
+      messageType = _ref.messageType;
+  var formattedDate = formatBaseTime(moment.utc(validDateStart));
+  return "TAF ".concat(location, " ").concat(formattedDate, " ").concat(messageType, " was ").concat(newStatus, " successfully");
+};
+var getSnackbarMessage = function getSnackbarMessage(tafFromFrontEnd) {
+  var isAutoSaved = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var changeStatusTo = tafFromFrontEnd.changeStatusTo,
+      taf = tafFromFrontEnd.taf;
 
-var TafLayout = function TafLayout(_ref) {
-  var _ref$tafList = _ref.tafList,
-      tafList = _ref$tafList === void 0 ? [] : _ref$tafList,
-      _ref$onUpdateTaf = _ref.onUpdateTaf,
-      onUpdateTaf = _ref$onUpdateTaf === void 0 ? function () {} : _ref$onUpdateTaf,
-      lastUpdateTime = _ref.lastUpdateTime;
+  if (isAutoSaved) {
+    return 'All changes have been saved automatically';
+  }
+
+  switch (changeStatusTo) {
+    case 'DRAFT':
+      return 'Saved as draft';
+
+    case 'DRAFT_AMENDED':
+      return 'Saved as draft amended';
+
+    case 'DRAFT_CORRECTED':
+      return 'Saved as draft correction';
+
+    case 'PUBLISHED':
+      return getTafMessagePrefix(taf, 'published');
+
+    case 'CANCELLED':
+      return getTafMessagePrefix(taf, 'cancelled');
+
+    case 'CORRECTED':
+      return getTafMessagePrefix(taf, 'corrected');
+
+    case 'AMENDED':
+      return getTafMessagePrefix(taf, 'amended');
+
+    default:
+      return getTafMessagePrefix(taf, 'saved');
+  }
+};
+
+var TafLayout = function TafLayout(_ref2) {
+  var _ref2$tafList = _ref2.tafList,
+      tafList = _ref2$tafList === void 0 ? [] : _ref2$tafList,
+      _ref2$onUpdateTaf = _ref2.onUpdateTaf,
+      onUpdateTaf = _ref2$onUpdateTaf === void 0 ? function () {} : _ref2$onUpdateTaf,
+      lastUpdateTime = _ref2.lastUpdateTime;
 
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
 
+  var dispatch = useDispatch();
   var confirmDialog = useConfirmationDialog();
 
   var _useIssuesPane = useIssuesPane(),
@@ -5769,7 +5928,14 @@ var TafLayout = function TafLayout(_ref) {
       error = _React$useState12[0],
       setError = _React$useState12[1];
 
+  var showSnackbar = React__default.useCallback(function (message) {
+    dispatch(snackbarActions.openSnackbar({
+      message: message
+    }));
+  }, [dispatch]);
+
   var postTaf = function postTaf(data) {
+    var isAutoSaved = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -5781,13 +5947,14 @@ var TafLayout = function TafLayout(_ref) {
               return postTafRequest(data);
 
             case 4:
-              // callback
+              showSnackbar(getSnackbarMessage(data, isAutoSaved)); // callback
+
               onUpdateTaf();
-              _context.next = 11;
+              _context.next = 12;
               break;
 
-            case 7:
-              _context.prev = 7;
+            case 8:
+              _context.prev = 8;
               _context.t0 = _context["catch"](0);
 
               if (isWarning(_context.t0)) {
@@ -5796,12 +5963,12 @@ var TafLayout = function TafLayout(_ref) {
 
               throw _context.t0;
 
-            case 11:
+            case 12:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 7]]);
+      }, _callee, null, [[0, 8]]);
     }));
   };
 
@@ -5857,7 +6024,7 @@ var TafLayout = function TafLayout(_ref) {
               return postTaf({
                 taf: taf,
                 changeStatusTo: fromActionToStatus(tafActionToDraftAction(tafAction))
-              });
+              }, true);
 
             case 7:
               action(value);
@@ -5904,18 +6071,16 @@ var TafLayout = function TafLayout(_ref) {
   };
 
   React__default.useEffect(function () {
+    var _a, _b;
+
     var newSortedTafs = sortTafTimeSlots(tafList);
     var updatedLocations = timeSlot === 'ACTIVE' ? newSortedTafs.current : newSortedTafs.upcoming;
     updateSortedTafs(sortTafTimeSlots(tafList));
     setLocations(updatedLocations); // update active index
 
-    var newActiveIndex = updatedLocations.findIndex(function (location) {
-      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
+    var previousActiveLocationUUID = (_b = (_a = locations[activeTafIndex]) === null || _a === void 0 ? void 0 : _a.taf) === null || _b === void 0 ? void 0 : _b.uuid;
+    var newTafLocationIndex = getNewTafLocationIndex(updatedLocations, previousActiveLocationUUID);
+    setActiveTafIndex(newTafLocationIndex); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tafList, setLocations]);
   React__default.useEffect(function () {
     setError(postError);
@@ -5932,7 +6097,7 @@ var TafLayout = function TafLayout(_ref) {
     setError(patchError);
   }, [patchError]);
 
-  if (!tafList) {
+  if (!tafList || !tafList.length) {
     return null;
   }
 
@@ -6179,27 +6344,6 @@ var Wrapper = function Wrapper(props) {
   return /*#__PURE__*/React.createElement(TafWrapper, Object.assign({}, props), /*#__PURE__*/React.createElement(TafModule, null));
 };
 
-var createApi$1 = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
-  var axiosInstance = createApiInstance(url, appUrl, auth, setAuth, authTokenUrl, authClientId);
-  return {
-    // api data
-    getTafList: function getTafList() {
-      return axiosInstance.get('/taflist');
-    },
-    postTaf: function postTaf(formData) {
-      return axiosInstance.post('/taf', Object.assign({}, formData));
-    },
-    getTAC: function getTAC(tafData, signal) {
-      return axiosInstance.post.apply(axiosInstance, ['/taf2tac'].concat([Object.assign({}, tafData)].concat(_toConsumableArray(signal ? [{
-        signal: signal
-      }] : []))));
-    },
-    patchTaf: function patchTaf(formData) {
-      return axiosInstance.patch('/taf', Object.assign({}, formData));
-    }
-  };
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -6217,8 +6361,35 @@ var createApi$1 = function createApi(url, appUrl, auth, setAuth, authTokenUrl, a
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
-var MOCK_USERNAME = 'user.name';
+var getApiRoutes$1 = function getApiRoutes(axiosInstance) {
+  return {
+    getTafList: function getTafList() {
+      return axiosInstance.get('/taflist');
+    },
+    postTaf: function postTaf(formData) {
+      return axiosInstance.post('/taf', Object.assign({}, formData));
+    },
+    getTAC: function getTAC(tafData, getJSON, signal) {
+      return axiosInstance.post('/taf2tac', tafData, Object.assign(Object.assign({}, signal ? {
+        signal: signal
+      } : {}), {
+        headers: {
+          Accept: getJSON ? 'application/json' : 'text/plain'
+        }
+      }));
+    },
+    patchTaf: function patchTaf(formData) {
+      return axiosInstance.patch('/taf', Object.assign({}, formData));
+    }
+  };
+};
+
+var createApi$1 = function createApi(props) {
+  var axiosInstance = createApiInstance(props);
+  return getApiRoutes$1(axiosInstance);
+};
 
+var MOCK_USERNAME = 'user.name';
 var currentDate = moment.utc().format('YYYY-MM-DD');
 var tomorrowDate = moment.utc().add(1, 'day').format('YYYY-MM-DD');
 var airportPeriod = 6;
@@ -7020,7 +7191,6 @@ var fakeDraftAmendmentTaf = {
   taf: {
     uuid: '954905487',
     previousId: '5f9583fjdf45ff4330f337925',
-    issueDate: "".concat(currentDate, "T14:00:00Z"),
     baseTime: "".concat(currentDate, "T12:00:00Z"),
     validDateStart: "".concat(currentDate, "T14:00:00Z"),
     validDateEnd: "".concat(tomorrowDate, "T18:00:00Z"),
@@ -7080,7 +7250,6 @@ var fakeDraftAmendmentTaf = {
   editor: null,
   taf: Object.assign(Object.assign({}, fakeDraftAmendmentTaf.taf), {
     location: 'EHRD',
-    issueDate: "2022-01-06T14:00:00Z",
     baseTime: "2022-01-06T12:00:00Z",
     validDateStart: "2022-01-06T14:00:00Z",
     validDateEnd: "2022-01-07T18:00:00Z",
@@ -7161,20 +7330,37 @@ 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) {
-    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'));
-    });
-  });
+var fakeTafTacJson = {
+  tac: [[{
+    text: 'TAF'
+  }, {
+    text: 'EHAM'
+  }, {
+    text: '0812/0918'
+  }, {
+    text: '20020G35KT',
+    type: 'adverse'
+  }, {
+    text: '0500',
+    type: 'adverse'
+  }, {
+    text: 'SN',
+    type: 'adverse'
+  }, {
+    text: 'BKN040'
+  }], [{
+    text: 'BECMG'
+  }, {
+    text: '0814/0816'
+  }, {
+    text: '0700',
+    type: 'adverse'
+  }, {
+    text: 'BKN001',
+    type: 'adverse'
+  }, {
+    text: '='
+  }]]
 };
 
 var fakeUpdatedTafList = _toConsumableArray(fakeTafList);
@@ -7182,29 +7368,17 @@ var fakeUpdatedTafList = _toConsumableArray(fakeTafList);
 var setFakeUpdatedList = function setFakeUpdatedList(newList) {
   fakeUpdatedTafList = newList;
 };
+
 var getFakeUpdatedList = function getFakeUpdatedList() {
   return fakeUpdatedTafList;
 };
-var fakeAxiosInstance = {
-  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-module-boundary-types
-  get: function get(_url, _params) {
-    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, _signal) {
-    return fakePromise(false, _signal);
-  },
-  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-module-boundary-types
-  patch: function patch(_url, _params, _signal) {
-    return fakePromise(false, _signal);
-  }
-};
-var createApi = function createApi() {
+
+var getApiRoutes = function getApiRoutes(axiosInstance) {
   return {
     getTafList: function getTafList() {
       // eslint-disable-next-line no-console
       console.log('Retrieving new TAF list');
-      return fakeAxiosInstance.get('/taflist').then(function () {
+      return axiosInstance.get('/taflist').then(function () {
         return {
           data: getFakeUpdatedList()
         };
@@ -7215,14 +7389,18 @@ var createApi = function createApi() {
       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);
+      return axiosInstance.post('/taf', _postTaf);
     },
-    getTAC: function getTAC(tafData, signal) {
-      return fakeAxiosInstance.post.apply(fakeAxiosInstance, ['/taf2tac'].concat([Object.assign({}, tafData)].concat(_toConsumableArray(signal ? [{
+    getTAC: function getTAC(taf, getJSON, signal) {
+      return axiosInstance.post('/taf2tac', taf, Object.assign(Object.assign({}, signal ? {
         signal: signal
-      }] : [])))).then(function () {
+      } : {}), {
+        headers: {
+          Accept: getJSON ? 'application/json' : 'text/plain'
+        }
+      })).then(function () {
         return {
-          data: fakeTafTac
+          data: getJSON ? fakeTafTacJson : fakeTafTac
         };
       });
     },
@@ -7239,11 +7417,16 @@ var createApi = function createApi() {
       setFakeUpdatedList(updatedList); // eslint-disable-next-line no-console
 
       console.log("The new editor of the taf will be ".concat(_patchTaf.editor || 'empty'));
-      return fakeAxiosInstance.patch('/taf', _patchTaf);
+      return axiosInstance.patch('/taf', _patchTaf);
     }
   };
 };
 
+var createApi = function createApi() {
+  var instance = createFakeApiInstance();
+  return getApiRoutes(instance);
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -7282,13 +7465,15 @@ var TafApiWrapper = function TafApiWrapper(_ref) {
       onSetAuth = _ref.onSetAuth,
       onPreventCloseView = _ref.onPreventCloseView;
   return config ? /*#__PURE__*/React.createElement(ApiProvider, {
-    baseURL: config.baseUrl,
-    appURL: config.appUrl,
+    config: {
+      baseURL: config.baseURL,
+      appURL: config.baseURL,
+      authTokenURL: config.authTokenURL,
+      authClientId: config.authClientId
+    },
     auth: auth,
     onSetAuth: onSetAuth,
-    createApi: createApi$1,
-    authTokenUrl: config.authTokenUrl,
-    authClientId: config.authClientId
+    createApi: createApi$1
   }, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(Wrapper, {
     onPreventCloseView: onPreventCloseView
   }))) : null;