@axinom/mosaic-fe-samples-host 0.2.1-rc.8 → 0.2.1

package/dist/index.js

@@ -148,7 +148,6 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
 
 const KEY_PROFILE_DATA = 'AX_PROFILE_DATA';
 const KEY_USER_SETTINGS = 'AX_USER_SETTINGS';
-const KEY_ACTIVE_PROFILE = 'AX_ACTIVE_PROFILE';
 /**
  * The structure of the `ProfileConfig` type maintained in code can undergo several structural changes overtime.
  * However, there may exist objects that were created using prior versions of the type persisted on client local-storages.
@@ -231,10 +230,13 @@ const setProfileVariable = (profile, key, value, comment) => {
  * latest `UserSettings` type in code by substituting reasonable defaults where necessary and eliminating obsolete properties.
  */
 const migrateUserSettingsStructuralChanges = () => {
-    var _a;
+    var _a, _b;
     const existingUserSettings = getUserSettings();
+    const allProfiles = getAllProfiles();
+    const firstProfileId = allProfiles.length > 0 ? allProfiles[0].id : undefined;
     const migratedUserSettings = {
         loggerPosition: (_a = existingUserSettings.loggerPosition) !== null && _a !== void 0 ? _a : '70%',
+        activeProfileId: (_b = existingUserSettings.activeProfileId) !== null && _b !== void 0 ? _b : firstProfileId,
     };
     setUserSettings(migratedUserSettings);
 };
@@ -251,12 +253,6 @@ const setUserSettings = (value) => {
 const generateShortUniqueId = (length = 8) => {
     const randomId = Math.floor(Math.random() * Math.pow(16, length)).toString(16);
     return ('0'.repeat(length - randomId.length) + randomId).toUpperCase();
-};
-const getActiveProfileId = () => {
-    return JSON.parse(localStorage.getItem(KEY_ACTIVE_PROFILE) || '');
-};
-const setActiveProfileId = (value) => {
-    localStorage.setItem(KEY_ACTIVE_PROFILE, JSON.stringify(value));
 };
 
 /**
@@ -305,22 +301,37 @@ const ScenarioHost = ({ scenarios }) => {
     var _a;
     const groupedScenarios = getGroupedScenarios(scenarios);
     const { pathname } = reactRouterDom.useLocation();
+    const [userSettings] = React.useState(getUserSettings());
     const [profiles] = React.useState(getAllProfiles());
-    const [activeProfile, setActiveProfile] = React.useState(profiles.length > 0 ? profiles[0] : undefined);
+    /**
+     * We read the `activeProfileId` from the UserSettings saved in the local-storage, and check if that exists
+     * in the `profiles` found in the local-storage.
+     *
+     * If there is a match, we return the profile matching to that ID, if not, we either return `undefined`
+     * or return the 1st profile in the array.
+     */
+    const getActiveProfileFromUserSettings = () => {
+        if (profiles.length > 0) {
+            const activeProfileIndex = profiles.findIndex((profile) => profile.id === userSettings.activeProfileId);
+            if (activeProfileIndex < 0) {
+                return profiles[0];
+            }
+            else {
+                return profiles[activeProfileIndex];
+            }
+        }
+        else {
+            return undefined;
+        }
+    };
+    const [activeProfile, setActiveProfile] = React.useState(getActiveProfileFromUserSettings());
     // Reference to the logger component. This can be used to log new messages.
     const loggerRef = React.useRef(null);
-    const handleProfileChanged = (event, data) => {
+    const handleProfileChanged = React.useCallback((event, data) => {
         const activeProfileIndex = profiles.findIndex((profile) => profile.id === data.value);
         setActiveProfile(profiles[activeProfileIndex]);
-        setActiveProfileId(data.value);
-    };
-    React.useEffect(() => {
-        const storageProfileId = getActiveProfileId();
-        if (storageProfileId !== (activeProfile === null || activeProfile === void 0 ? void 0 : activeProfile.id)) {
-            const activeProfileIndex = profiles.findIndex((profile) => profile.id === storageProfileId);
-            setActiveProfile(profiles[activeProfileIndex]);
-        }
-    }, [activeProfile === null || activeProfile === void 0 ? void 0 : activeProfile.id, profiles]);
+        setUserSettings(Object.assign(Object.assign({}, userSettings), { activeProfileId: profiles[activeProfileIndex].id }));
+    }, [profiles, userSettings]);
     const ScenarioErrorFallback = (info) => {
         return (React__default['default'].createElement(semanticUiReact.Segment, { basic: true },
             React__default['default'].createElement(semanticUiReact.Header, { size: "huge" }, "Something went wrong"),