feat(client): save zoom levels in local storage

client/app/components/star-map.ts

@@ -13,14 +13,24 @@ interface ComponentSignature {
     locations: Location[];
     ship: ShipModel;
     scale: number;
+    key: 'locations' | 'ship';
   };
 }
 
+type SavedZoomLevels = {
+  locations: number;
+  ship: number;
+};
+
+const DEFAULT_SCALE = 256;
+
 export default class StarMapComponent extends Component<ComponentSignature> {
   @tracked private _scale: number | null = null;
 
   public get scale(): number {
-    return this._scale || this.args.scale || 256;
+    return (
+      this._scale || this.savedZoomLevel || this.args.scale || DEFAULT_SCALE
+    );
   }
 
   private get mapSize(): number {
@@ -55,13 +65,34 @@ export default class StarMapComponent extends Component<ComponentSignature> {
 
   @action
   public zoomIn(): void {
-    const newScale = this.scale / 2;
-    this._scale = newScale >= 1 ? newScale : 1;
+    const nextScale = this.scale / 2;
+    const newScale = nextScale >= 1 ? nextScale : 1;
+    this.saveZoomLevel(newScale);
+    this._scale = newScale;
   }
 
   @action
   public zoomOut(): void {
-    const newScale = this.scale * 2;
-    this._scale = newScale <= 1024 ? newScale : 1024;
+    const nextScale = this.scale * 2;
+    const newScale = nextScale <= 1024 ? nextScale : 1024;
+    this.saveZoomLevel(newScale);
+    this._scale = newScale;
+  }
+
+  public saveZoomLevel(scale: number): void {
+    const savedZoomLevels = this._readSavedZoomLevels();
+    savedZoomLevels[this.args.key] = scale;
+    console.log(JSON.stringify(savedZoomLevels));
+    window.localStorage.setItem('zoomLevels', JSON.stringify(savedZoomLevels));
+  }
+
+  public get savedZoomLevel(): number | null {
+    const savedZoomLevels = this._readSavedZoomLevels();
+    return savedZoomLevels[this.args.key];
+  }
+
+  private _readSavedZoomLevels(): SavedZoomLevels {
+    const rawSavedZoomLevels = window.localStorage.getItem('zoomLevels');
+    return rawSavedZoomLevels ? JSON.parse(rawSavedZoomLevels) : {};
   }
 }

client/app/templates/locations/list.hbs

@@ -2,7 +2,7 @@
 
 <h2>Locations</h2>
 
-<StarMap @locations={{@model}} />
+<StarMap @locations={{@model}} @key="locations" />
 
 <table class="table">
   <thead>

client/app/templates/ships/get.hbs

@@ -49,7 +49,7 @@
   </dd>
 </dl>
 
-<StarMap @locations={{this.starMapLocations}} @ship={{@model}} @scale={{32}} />
+<StarMap @locations={{this.starMapLocations}} @ship={{@model}} @key="ship" />
 
 <h3>Autopilot</h3>
 {{#if this.currentUser.isAuthenticated}}

client/tests/acceptance/ship-test.ts

@@ -1,11 +1,12 @@
 import { module, test } from 'qunit';
-import { currentURL, click, fillIn } from '@ember/test-helpers';
+import { click, currentURL, fillIn } from '@ember/test-helpers';
 import { visit } from '@1024pix/ember-testing-library';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import 'qunit-dom';
 import { Response } from 'miragejs';
 
 import { setupApplicationTest } from 'sokown-client/tests/helpers';
+import stubLocalStorage from 'sokown-client/tests/helpers/local-storage-stub';
 
 type TestContext = {
   server: {
@@ -19,6 +20,9 @@ module('Acceptance | ship', function (hooks) {
 
   module('visiting /ships/:id', function () {
     test('it displays ship public information and star map', async function (assert) {
+      // given
+      stubLocalStorage({ ship: 32 });
+
       // when
       const screen = await visit('/');
       await click(screen.getByRole('link', { name: 'Ships' }));

client/tests/integration/components/star-map-test.ts

@@ -4,6 +4,9 @@ import { hbs } from 'ember-cli-htmlbars';
 import { click } from '@ember/test-helpers';
 
 import { setupRenderingTest } from 'sokown-client/tests/helpers';
+import stubLocalStorage from 'sokown-client/tests/helpers/local-storage-stub';
+
+stubLocalStorage({});
 
 module('Integration | Component | star-map', function (hooks) {
   setupRenderingTest(hooks, {});
@@ -75,9 +78,10 @@ module('Integration | Component | star-map', function (hooks) {
   module('when zooming in', function () {
     test('it reduces map scale', async function (assert) {
       // given
+      const localStorage = stubLocalStorage({ locations: 32, ship: 32 });
       this.set('locations', []);
       const screen = await render(
-        hbs`<StarMap @locations={{this.locations}} @scale={{32}} />`,
+        hbs`<StarMap @locations={{this.locations}} @scale={{32}} @key="locations" />`,
       );
 
       // when
@@ -87,15 +91,22 @@ module('Integration | Component | star-map', function (hooks) {
       const starMap = screen.getByLabelText('A star map of the solar system');
       assert.dom(starMap).hasAttribute('viewBox', '-80 -80 160 160');
       assert.dom(screen.getByLabelText('Scale')).hasText('16 S.U.');
+      assert.true(
+        localStorage.setItem.calledWith(
+          'zoomLevels',
+          '{"locations":16,"ship":32}',
+        ),
+      );
     });
   });
 
   module('when zooming out', function () {
     test('it increases map scale', async function (assert) {
       // given
+      const localStorage = stubLocalStorage({ locations: 32, ship: 32 });
       this.set('locations', []);
       const screen = await render(
-        hbs`<StarMap @locations={{this.locations}} @scale={{32}} />`,
+        hbs`<StarMap @locations={{this.locations}} @scale={{32}} @key={{"locations"}} />`,
       );
 
       // when
@@ -105,6 +116,12 @@ module('Integration | Component | star-map', function (hooks) {
       const starMap = screen.getByLabelText('A star map of the solar system');
       assert.dom(starMap).hasAttribute('viewBox', '-320 -320 640 640');
       assert.dom(screen.getByLabelText('Scale')).hasText('64 S.U.');
+      assert.true(
+        localStorage.setItem.calledWith(
+          'zoomLevels',
+          '{"locations":64,"ship":32}',
+        ),
+      );
     });
   });
 });