Merge pull request #263 from codex-team/note-settings-style-fix

feat(store): session and persistant stores implemented

src/application/services/useAuthRequired.ts

@@ -1,6 +1,7 @@
 import { useAppState } from './useAppState.ts';
 import useAuth from './useAuth.ts';
 import { useRouter } from 'vue-router';
+import { until } from '@vueuse/core';
 
 /**
  * Function that is used in App for checking user authorization
@@ -14,19 +15,25 @@ export default function useAuthRequired(): void {
 
   /**
    * Check if user is authorized
-   * If authorization is in process we treat user as unauthorized
    * When oauth will work, it will be treated as he authorized manually
    * @returns true if user is authorized, false otherwise
    */
-  function isUserAuthorized(): boolean {
-    return (user.value !== null && user.value !== undefined);
+  async function isUserAuthorized(): Promise<boolean> {
+    /**
+     * Wait until authorization process is finished
+     */
+    await until(user).not.toBe(undefined);
+
+    return user.value !== null;
   }
 
   /**
    * For each route check if auth is required
    */
-  router.beforeEach((actualRoute, _, next) => {
-    if (actualRoute.meta.authRequired === true && !isUserAuthorized()) {
+  router.beforeEach(async (actualRoute, _, next) => {
+    const isAuthorized = await isUserAuthorized();
+
+    if (actualRoute.meta.authRequired === true && !isAuthorized) {
       /**
        * If auth is required and user is not autorized
        * Then show google auth popup and redirect user to auth page

src/infrastructure/auth.repository.ts

@@ -2,6 +2,7 @@ import type AuthRepositoryInterface from '@/domain/auth.repository.interface';
 import type NotesApiTransport from './transport/notes-api';
 import type AuthStorage from './storage/auth';
 import type AuthSession from '@/domain/entities/AuthSession';
+import { notEmpty } from './utils/empty';
 
 /**
  * Facade for the auth data
@@ -28,7 +29,9 @@ export default class AuthRepository implements AuthRepositoryInterface {
    * Specify whether we have auth session (refresh token)
    */
   public hasSession(): boolean {
-    return this.authStorage.getRefreshToken() !== null;
+    const refreshToken = this.authStorage.getRefreshToken();
+
+    return notEmpty(refreshToken);
   }
 
   /**

src/infrastructure/index.ts

@@ -78,10 +78,10 @@ export function init(noteApiUrl: string, eventBus: EventBus): Repositories {
    * Init storages
    */
   const noteStore = new NoteStore();
-  const authStore = new AuthStore();
   const userStore = new UserStore();
   const editorToolsStore = new EditorToolsStore();
   const openedPagesStore = new OpenedPagesStore();
+  const authStore = new AuthStore();
 
   /**
    * Init transport

src/infrastructure/storage/abstract/persistant.ts

@@ -0,0 +1,82 @@
+/* eslint-disable-next-line boundaries/element-types */
+import { SubscribableStore } from './subscribable';
+
+export class PersistantStore<StoreData extends Record<string, unknown>> extends SubscribableStore<StoreData> {
+  /**
+   * Keys of the StoreData type
+   * Used to separate the needed local storage information
+   */
+  protected readonly keysStored: string[];
+
+  /**
+   * Proxy for data stored
+   */
+  protected data: StoreData;
+
+  /**
+   * Storage that would retain information when proxy is cleared
+   */
+  private storage = window.localStorage;
+
+  constructor(keysStored: string[]) {
+    super();
+    this.keysStored = keysStored;
+    this.data = new Proxy<StoreData>({} as StoreData, this._data);
+
+    /**
+     * Load data from local store to proxy
+     */
+    this.loadInitialData();
+  };
+
+  protected get _data(): ProxyHandler<StoreData> {
+    return {
+      get: (target, prop) => {
+        const item = this.storage.getItem(prop as string);
+
+        return item !== null ? JSON.parse(item) : undefined;
+      },
+
+      set: (target, prop, value, receiver) => {
+        /**
+         * Set new property value for proxy usage
+         */
+        Reflect.set(target, prop, value, receiver);
+
+        /**
+         * Set new property value for storage
+         */
+        this.storage.setItem(prop as string, JSON.stringify(value));
+
+        this.onDataChange([{ prop: prop as keyof StoreData,
+          newValue: value }]);
+
+        return true;
+      },
+
+      deleteProperty: (target, prop) => {
+        this.storage.removeItem(prop as string);
+
+        return Reflect.deleteProperty(target, prop);
+      },
+    };
+  }
+
+  /**
+   * Funciton for loading initial data from window.localStorage to proxy object
+   * Data stored in localStorage would be normalized for proxy
+   */
+  private loadInitialData(): void {
+    for (let i = 0; i < this.storage.length; i++) {
+      const key = this.storage.key(i);
+
+      if (key !== null && this.keysStored.includes(key)) {
+        const storedValue = this.storage.getItem(key);
+
+        if (storedValue !== null) {
+          this.data[key as keyof StoreData] = JSON.parse(storedValue);
+        }
+      }
+    }
+  }
+}

src/infrastructure/storage/abstract/session.ts

@@ -0,0 +1,33 @@
+/* eslint-disable-next-line boundaries/element-types */
+import { SubscribableStore } from './subscribable';
+
+export class SessionStore<StoreData extends Record<string, unknown>> extends SubscribableStore<StoreData> {
+  /**
+   * Proxy for data stored in store.
+   * Used to watch data changes
+   */
+  protected data = new Proxy<StoreData>({} as StoreData, this._data);
+
+  /**
+   * Data proxy handler
+   */
+  protected get _data(): ProxyHandler<StoreData> {
+    return {
+      set: (target, prop, value, receiver) => {
+        Reflect.set(target, prop, value, receiver);
+
+        this.onDataChange([{ prop: prop as keyof StoreData,
+          newValue: value }]);
+
+        return true;
+      },
+      get(target, prop, receiver) {
+        return Reflect.get(target, prop, receiver);
+      },
+
+      deleteProperty: (target, prop) => {
+        return Reflect.deleteProperty(target, prop);
+      },
+    };
+  }
+}

src/infrastructure/storage/abstract/subscribable.ts

@@ -24,40 +24,15 @@ type Change<StoreData> = {
  * Allows to subscribe to store data changes
  */
 export abstract class SubscribableStore<StoreData extends Record<string, unknown>> {
-  /**
-   * Proxy for data stored in store.
-   * Used to watch data changes
-   */
-  protected data = new Proxy<StoreData>({} as StoreData, this._data);
-
   /**
    * List of subscribers on data change
    */
-  private subscribers: PropChangeCallback<StoreData>[] = [];
+  protected subscribers: PropChangeCallback<StoreData>[] = [];
 
   /**
    * Using for accumulation of changes in store until subscriber appearse
    */
-  private stashedChanges: Change<StoreData>[] = [];
-
-  /**
-   * Data proxy handler
-   */
-  protected get _data(): ProxyHandler<StoreData> {
-    return {
-      set: (target, prop, value, receiver) => {
-        Reflect.set(target, prop, value, receiver);
-
-        this.onDataChange([{ prop: prop as keyof StoreData,
-          newValue: value }]);
-
-        return true;
-      },
-      get(target, prop, receiver) {
-        return Reflect.get(target, prop, receiver);
-      },
-    };
-  }
+  protected stashedChanges: Change<StoreData>[] = [];
 
   /**
    * Subscribe to store changes
@@ -86,7 +61,7 @@ export abstract class SubscribableStore<StoreData extends Record<string, unknown
    * Notifies subscribers about data change.
    * @param changes - array of changes
    */
-  private onDataChange(changes: Change<StoreData>[]): void {
+  protected onDataChange(changes: Change<StoreData>[]): void {
     /**
      * If there are no subscribers stash current change
      */

src/infrastructure/storage/auth.ts

@@ -1,38 +1,39 @@
-/**
- * Stores auth data in local storage
- */
-export default class AuthStorage {
-  /**
-   * Storage implementation
-   */
-  private readonly storage: Storage;
+import { PersistantStore } from './abstract/persistant';
 
+export type AuthStoreData = {
   /**
-   * Creates storage instance
+   * If user is authorized refresh token will be stored
    */
+  refreshToken?: string;
+};
+
+/**
+ * Stores auth data in local storage
+ */
+export default class AuthStorage extends PersistantStore<AuthStoreData> {
   constructor() {
-    this.storage = window.localStorage;
+    super(['refreshToken']);
   }
 
   /**
    * Returns refresh token
    */
   public getRefreshToken(): string | null {
-    return this.storage.getItem('refreshToken');
+    return this.data.refreshToken === undefined ? null : this.data.refreshToken;
   }
 
   /**
    * Save refresh token
    * @param refreshToken - refresh token to save
    */
   public setRefreshToken(refreshToken: string): void {
-    this.storage.setItem('refreshToken', refreshToken);
+    this.data.refreshToken = refreshToken;
   }
 
   /**
    * Removes refresh token
    */
   public removeRefreshToken(): void {
-    this.storage.removeItem('refreshToken');
+    delete this.data.refreshToken;
   }
 }

src/infrastructure/storage/openedPage.ts

@@ -1,5 +1,5 @@
 import type { OpenedPage } from '@/domain/entities/OpenedPage';
-import { SubscribableStore } from './abstract/subscribable';
+import { PersistantStore } from './abstract/persistant';
 
 export type OpenedPagesStoreData = {
   /**
@@ -11,10 +11,9 @@ export type OpenedPagesStoreData = {
 /**
  * Class to store all pages that are currently opened in workspace
  */
-export class OpenedPagesStore extends SubscribableStore<OpenedPagesStoreData> {
+export class OpenedPagesStore extends PersistantStore<OpenedPagesStoreData> {
   constructor() {
-    super();
-    this.data.openedPages = [];
+    super(['openedPages']);
   }
 
   /**

src/infrastructure/storage/user.ts

@@ -1,5 +1,5 @@
 import type { User } from '@/domain/entities/User';
-import { SubscribableStore } from './abstract/subscribable';
+import { SessionStore } from './abstract/session';
 import type EditorTool from '@/domain/entities/EditorTool';
 
 /**
@@ -20,7 +20,7 @@ export type UserStoreData = {
 /**
  * Store for the user data
  */
-export class UserStore extends SubscribableStore<UserStoreData> {
+export class UserStore extends SessionStore<UserStoreData> {
   /**
    * Returns user data
    */