refactor(utils): migrate utils from Flow to TypeScript

src/components/thumbnail-card/__tests__/ThumbnailCardDetails.test.tsx

@@ -12,7 +12,7 @@ jest.mock('../../../utils/dom', () => ({ useIsContentOverflowed: jest.fn() }));
 
 describe('components/thumbnail-card/ThumbnailCardDetails', () => {
     beforeEach(() => {
-        libDom.useIsContentOverflowed.mockReturnValue(false);
+        (libDom.useIsContentOverflowed as jest.Mock).mockReturnValue(false);
     });
 
     test('should render', () => {
@@ -44,7 +44,7 @@ describe('components/thumbnail-card/ThumbnailCardDetails', () => {
     });
 
     test('should render a Tooltip if text is overflowed', async () => {
-        libDom.useIsContentOverflowed.mockReturnValue(true);
+        (libDom.useIsContentOverflowed as jest.Mock).mockReturnValue(true);
         renderComponent();
 
         await userEvent.tab();

src/utils/Browser.js → src/utils/Browser.js.flow

@@ -11,7 +11,7 @@ class Browser {
      * Returns the user agent.
      * Helps in mocking out.
      *
-     * @return {String} navigator userAgent
+     * @return {string} navigator userAgent
      */
     static getUserAgent(): string {
         return global.navigator.userAgent;

src/utils/Browser.ts

@@ -0,0 +1,115 @@
+let isDashSupported: boolean | undefined;
+
+class Browser {
+    /**
+     * Returns the user agent.
+     * Helps in mocking out.
+     */
+    static getUserAgent(): string {
+        return globalThis.navigator.userAgent;
+    }
+
+    /**
+     * Returns whether browser is mobile, including tablets.
+     *
+     * We rely on user agent (UA) to avoid matching desktops with touchscreens.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#mobile_tablet_or_desktop
+     */
+    static isMobile(): boolean {
+        const userAgent = Browser.getUserAgent();
+        return (
+            /iphone|ipad|ipod|android|blackberry|bb10|mini|windows\sce|palm/i.test(userAgent) || /Mobi/i.test(userAgent)
+        );
+    }
+
+    /** Returns whether browser is IE. */
+    static isIE(): boolean {
+        return /Trident/i.test(Browser.getUserAgent());
+    }
+
+    /** Returns whether browser is Firefox. */
+    static isFirefox(): boolean {
+        const userAgent = Browser.getUserAgent();
+        return /Firefox/i.test(userAgent) && !/Seamonkey\//i.test(userAgent);
+    }
+
+    /** Returns whether browser is Safari. */
+    static isSafari(): boolean {
+        const userAgent = Browser.getUserAgent();
+        return /AppleWebKit/i.test(userAgent) && !/Chrome\//i.test(userAgent);
+    }
+
+    /**
+     * Returns whether browser is Mobile Safari.
+     *
+     * @see https://developer.chrome.com/docs/multidevice/user-agent/
+     */
+    static isMobileSafari(): boolean {
+        return Browser.isMobile() && Browser.isSafari() && !Browser.isMobileChromeOniOS();
+    }
+
+    /**
+     * Returns whether browser is Mobile Chrome on iOS.
+     *
+     * @see https://developer.chrome.com/docs/multidevice/user-agent/
+     */
+    static isMobileChromeOniOS(): boolean {
+        const userAgent = Browser.getUserAgent();
+        return Browser.isMobile() && /AppleWebKit/i.test(userAgent) && /CriOS\//i.test(userAgent);
+    }
+
+    /**
+     * Returns whether browser can download via HTML5.
+     *
+     * @see https://github.com/Modernizr/Modernizr/blob/master/feature-detects/a/download.js
+     */
+    static canDownload(): boolean {
+        return (
+            !Browser.isMobile() ||
+            (!(window as Window & { externalHost?: unknown }).externalHost && 'download' in document.createElement('a'))
+        );
+    }
+
+    /**
+     * Checks the browser for Dash support using H264 high.
+     * Dash requires MediaSource extensions to exist and be applicable
+     * to the H264 container (since we use H264 and not webm)
+     */
+    static canPlayDash(recheck: boolean = false): boolean {
+        if (typeof isDashSupported === 'undefined' || recheck) {
+            const mse = globalThis.MediaSource;
+            isDashSupported =
+                !!mse &&
+                typeof mse.isTypeSupported === 'function' &&
+                mse.isTypeSupported('video/mp4; codecs="avc1.64001E"');
+        }
+
+        return !!isDashSupported;
+    }
+
+    /**
+     * Checks whether the browser has support for the Clipboard API. This new API supercedes
+     * the `execCommand`-based API and uses Promises for detecting whether it works or not.
+     *
+     * This check determines if the browser can support writing to the clipboard.
+     * @see https://www.w3.org/TR/clipboard-apis/#async-clipboard-api
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
+     */
+    static canWriteToClipboard(): boolean {
+        return !!globalThis.navigator.clipboard?.writeText;
+    }
+
+    /**
+     * Checks whether the browser has support for the Clipboard API. This new API supercedes
+     * the `execCommand`-based API and uses Promises for detecting whether it works or not.
+     *
+     * This check determines if the browser can support reading from the clipboard.
+     * @see https://www.w3.org/TR/clipboard-apis/#async-clipboard-api
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
+     */
+    static canReadFromClipboard(): boolean {
+        return !!globalThis.navigator.clipboard?.readText;
+    }
+}
+
+export default Browser;

src/utils/Cache.ts

@@ -0,0 +1,55 @@
+import merge from 'lodash/merge';
+import type { StringAnyMap } from '../common/types/core';
+
+class Cache {
+    cache: StringAnyMap;
+
+    constructor() {
+        this.cache = {};
+    }
+
+    /** Caches a simple object in memory. */
+    set(key: string, value: unknown): void {
+        this.cache[key] = value;
+    }
+
+    /** Merges cached values for objects. */
+    merge(key: string, value: unknown): void {
+        if (this.has(key)) {
+            this.set(key, merge({}, this.get(key), value));
+        } else {
+            throw new Error(`Key ${key} not in cache!`);
+        }
+    }
+
+    /** Deletes object from in-memory cache. */
+    unset(key: string): void {
+        delete this.cache[key];
+    }
+
+    /** Deletes all cached objects whose keys match the given prefix. */
+    unsetAll(prefix: string): void {
+        Object.keys(this.cache).forEach((key: string) => {
+            if (key.startsWith(prefix)) {
+                delete this.cache[key];
+            }
+        });
+    }
+
+    /** Checks if cache has provided key. */
+    has(key: string): boolean {
+        return {}.hasOwnProperty.call(this.cache, key);
+    }
+
+    /** Fetches a cached object from in-memory cache if available. */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    get(key: string): any {
+        if (this.has(key)) {
+            return this.cache[key];
+        }
+
+        return undefined;
+    }
+}
+
+export default Cache;

src/utils/LocalStore.ts

@@ -0,0 +1,96 @@
+import Cache from './Cache';
+import type APICache from './Cache';
+
+const KEY_PREFIX = 'localStore';
+const SERVICE_VERSION = '0';
+
+class LocalStore {
+    memoryStore: APICache;
+
+    localStorage: typeof localStorage;
+
+    isLocalStorageAvailable: boolean;
+
+    constructor() {
+        this.memoryStore = new Cache();
+        try {
+            this.localStorage = window.localStorage;
+            this.isLocalStorageAvailable = this.canUseLocalStorage();
+        } catch (e) {
+            this.isLocalStorageAvailable = false;
+        }
+    }
+
+    /** Builds a key for the session store. */
+    buildKey(key: string): string {
+        return `${KEY_PREFIX}/${SERVICE_VERSION}/${key}`;
+    }
+
+    /**
+     * Test to see browser can use local storage.
+     * See http://stackoverflow.com/questions/14555347
+     * Note that this will return false if we are actually hitting the maximum localStorage
+     * size (5MB / 2.5M chars)
+     */
+    canUseLocalStorage(): boolean {
+        if (!this.localStorage) {
+            return false;
+        }
+
+        try {
+            this.localStorage.setItem(this.buildKey('TestKey'), 'testValue');
+            this.localStorage.removeItem(this.buildKey('TestKey'));
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
+
+    /** Set an item. */
+    setItem(key: string, value: unknown): void {
+        if (this.isLocalStorageAvailable) {
+            try {
+                this.localStorage.setItem(this.buildKey(key), JSON.stringify(value));
+            } catch (e) {
+                // no-op
+            }
+        } else {
+            this.memoryStore.set(key, value);
+        }
+    }
+
+    /** Get an item. */
+    getItem(key: string): unknown {
+        if (this.isLocalStorageAvailable) {
+            try {
+                const item = this.localStorage.getItem(this.buildKey(key));
+                if (!item) {
+                    return null;
+                }
+
+                return JSON.parse(item);
+            } catch (e) {
+                return null;
+            }
+        } else {
+            return this.memoryStore.get(key);
+        }
+    }
+
+    /** Remove an item. */
+    removeItem(key: string): void {
+        if (this.isLocalStorageAvailable) {
+            try {
+                this.localStorage.removeItem(this.buildKey(key));
+            } catch (e) {
+                // no-op
+            }
+
+            return;
+        }
+
+        this.memoryStore.unset(key);
+    }
+}
+
+export default LocalStore;