Restructure the js app (#243)

* prettier

* linter

* add prettier, and format the code

* remove common, merge it with frontend

* refactor the app

* better lint and code fix

* travis for the frontend app

* travis build script

Signed-off-by: Daniel Maricic <daniel@woss.io>

* lint and build

* update the README.md

Signed-off-by: Daniel Maricic <daniel@woss.io>

* change the commands to reflect refactor

Signed-off-by: Daniel Maricic <daniel@woss.io>

* prettier and tslint are friends

Signed-off-by: Daniel Maricic <daniel@woss.io>

* code that wasn't linted properly before

Signed-off-by: Daniel Maricic <daniel@woss.io>

* prettier rc got deleted

* workgin on making the travis pass

Signed-off-by: Daniel Maricic <daniel@woss.io>

* travis build please?

Signed-off-by: Daniel Maricic <daniel@woss.io>

* update readme.md

Signed-off-by: Daniel Maricic <daniel@woss.io>

* dockerfile deleted from fronted - out of scope

Signed-off-by: Daniel Maricic <daniel@woss.io>

* remove

Signed-off-by: Daniel Maricic <daniel@woss.io>

* tsconfig

Signed-off-by: Daniel Maricic <daniel@woss.io>

* found the reason why EOL wasn't happening

Signed-off-by: Daniel Maricic <daniel@woss.io>

* type for the event in the ConnectionInput

as suggested

* strictnullCheck to true

* noImplicitAny

* noUnusedParams

* AfgHandling

* update

* fix Location.tsx

* Few minor fixes

* remove connection input and revert to original

* esnext fixes the imports for icons and non default `* as `

* update to the tsconfig.test.json don't use commonjs please

* fixed wrong comment for TIMEOUT_BASE

* return totem.svg and type decraration of maybe

Signed-off-by: Daniel Maricic <daniel@woss.io>

Co-authored-by: Will <w.kopp@kigroup.de>

frontend/src/persist/Persistent.ts

@@ -0,0 +1,49 @@
+import { parse, Stringified, stringify, Maybe } from '../common';
+
+export class Persistent<Data> {
+  private readonly onChange: (value: Data) => void;
+  private readonly key: string;
+  private value: Data;
+
+  constructor(
+    key: string,
+    initial: Data,
+    onChange: (value: Readonly<Data>) => void
+  ) {
+    this.key = key;
+    this.onChange = onChange;
+
+    const stored = window.localStorage.getItem(key) as Maybe<Stringified<Data>>;
+
+    if (stored) {
+      try {
+        this.value = parse(stored);
+      } catch (err) {
+        this.value = initial;
+      }
+    } else {
+      this.value = initial;
+    }
+
+    window.addEventListener('storage', (event) => {
+      if (event.key === this.key) {
+        this.value = parse((event.newValue as any) as Stringified<Data>);
+
+        this.onChange(this.value);
+      }
+    });
+  }
+
+  public get(): Readonly<Data> {
+    return this.value;
+  }
+
+  public set(value: Data) {
+    this.value = value;
+    window.localStorage.setItem(
+      this.key,
+      (stringify(this.value) as any) as string
+    );
+    this.onChange(this.value);
+  }
+}

frontend/src/persist/PersistentObject.ts

@@ -0,0 +1,23 @@
+import { Persistent } from './';
+
+export class PersistentObject<Data extends object> {
+  private readonly inner: Persistent<Data>;
+
+  constructor(key: string, initial: Data, onChange: (value: Data) => void) {
+    this.inner = new Persistent(key, initial, onChange);
+  }
+
+  public raw(): Readonly<Data> {
+    return this.inner.get();
+  }
+
+  public get<K extends keyof Data>(key: K): Data[K] {
+    return this.inner.get()[key];
+  }
+
+  public set<K extends keyof Data>(key: K, value: Data[K]) {
+    const data: Data = Object.assign({}, this.raw());
+    data[key] = value;
+    this.inner.set(data);
+  }
+}

frontend/src/persist/PersistentSet.ts

@@ -0,0 +1,35 @@
+import { Persistent } from './';
+
+export class PersistentSet<Item> {
+  private readonly inner: Persistent<Item[]>;
+  private value: Set<Item>;
+
+  constructor(key: string, onChange: (value: Set<Item>) => void) {
+    this.inner = new Persistent(key, [], (raw: Readonly<Item[]>) =>
+      onChange((this.value = new Set(raw as Item[])))
+    );
+    this.value = new Set(this.inner.get() as Item[]);
+  }
+
+  public get(): Set<Item> {
+    return this.value;
+  }
+
+  public add(item: Item) {
+    this.value.add(item);
+    this.inner.set(Array.from(this.value));
+  }
+
+  public delete(item: Item) {
+    this.value.delete(item);
+    this.inner.set(Array.from(this.value));
+  }
+
+  public clear() {
+    this.inner.set([]);
+  }
+
+  public has(item: Item): boolean {
+    return this.value.has(item);
+  }
+}

frontend/src/persist/index.ts

@@ -0,0 +1,3 @@
+export * from './Persistent';
+export * from './PersistentObject';
+export * from './PersistentSet';