chore: Update components with cleaner comments and less dependencies.

templates/components/cleanHTML.tsx

@@ -8,13 +8,7 @@ interface CleanHTMLProps {
 
 /**
  * Sanitized HTML; ensures only specified tags attributes pass through.
- * @component
- *
- * @param   {string}            html raw HTML string
- *
- * @returns {FunctionComponent} <CleanHTML html={html} />
  */
-
 export const CleanHTML: FunctionComponent<CleanHTMLProps> = ({
   html,
 }): FunctionComponent => {

templates/components/isMobile.ts

@@ -1,5 +1,8 @@
 const body = document.querySelector("body");
 
+/**
+ * Update the body element with a data attribute to indicate if the screen is mobile or not.
+ */
 const updateBody = (element: Element) => {
   window.requestAnimationFrame(() => {
     const rect = element.getBoundingClientRect();
@@ -11,6 +14,12 @@ const updateBody = (element: Element) => {
     }
   });
 };
+
+/**
+ * Debounce function to limit the number of times a function is called.
+ * @param ms - number of milliseconds to wait before calling the function.
+ * @param cb - callback method
+ */
 const debounce = (ms: number, cb: ResizeObserverCallback) => {
   let timer;
 
@@ -23,6 +32,10 @@ const debounce = (ms: number, cb: ResizeObserverCallback) => {
   };
 };
 
+/**
+ * Check if the browser supports ResizeObserver and if so, use it to detect screen size changes.
+ * If not, use the resize event listener.
+ */
 if ("ResizeObserver" in window && body) {
   const resizeObserver = new ResizeObserver(
     debounce(250, (entries) => {

templates/components/sessionState.ts

@@ -1,7 +1,10 @@
-import { fromJS } from "immutable";
-
-import { IState } from "./types";
+interface IState {
+  [key: string]: any;
+}
 
+/**
+ * Load state from session storage
+ */
 export const loadState = (): IState | undefined => {
   try {
     const serializedState: string | null =
@@ -11,14 +14,17 @@ export const loadState = (): IState | undefined => {
       return undefined;
     }
 
-    return fromJS(JSON.parse(serializedState));
+    return JSON.parse(serializedState);
   } catch (error) {
     console.error("Load State Error:", error);
 
     return undefined;
   }
 };
 
+/**
+ * Save state to session storage
+ */
 export const saveState = (state: IState) => {
   try {
     const serializedState: string = JSON.stringify(state);