Add reset function to useWebViewState

extensions/src/hello-world/src/web-views/hello-world-2.web-view.tsx

@@ -2,14 +2,16 @@ import papi from '@papi/frontend';
 import { useEvent, Button } from 'platform-bible-react';
 import { useCallback, useState } from 'react';
 import type { HelloWorldEvent } from 'hello-world';
+import { WebViewProps } from '@papi/core';
 
-globalThis.webViewComponent = function HelloWorld2() {
+globalThis.webViewComponent = function HelloWorld2({ useWebViewState }: WebViewProps) {
   const [clicks, setClicks] = useState(0);
+  const [clicks2, setClicks2, resetClicks2] = useWebViewState('newClicks', 0);
 
   // Update the clicks when we are informed helloWorld has been run
   useEvent(
     papi.network.getNetworkEvent('helloWorld.onHelloWorld'),
-    useCallback(({ times }: HelloWorldEvent) => setClicks(times), []),
+    useCallback(({ times }: HelloWorldEvent) => setClicks(times), [setClicks]),
   );
 
   return (
@@ -27,6 +29,16 @@ globalThis.webViewComponent = function HelloWorld2() {
           Hello World {clicks}
         </Button>
       </div>
+      <div>
+        <Button
+          onClick={() => {
+            setClicks2(clicks2 + 1);
+          }}
+        >
+          Hello World {clicks2}
+        </Button>
+        <Button onClick={() => resetClicks2()}>Reset counter</Button>
+      </div>
     </>
   );
 };

lib/papi-dts/papi.d.ts

@@ -200,8 +200,12 @@ declare module 'shared/models/web-view.model' {
    */
   export type UseWebViewStateHook = <T>(
     stateKey: string,
-    defaultStateValue: NonNullable<T>,
-  ) => [webViewState: NonNullable<T>, setWebViewState: Dispatch<SetStateAction<NonNullable<T>>>];
+    defaultStateValue: T,
+  ) => [
+    webViewState: T,
+    setWebViewState: Dispatch<SetStateAction<T>>,
+    resetWebViewState: () => void,
+  ];
   /**
    *
    * Gets the updatable properties on this WebView's WebView definition
@@ -371,7 +375,9 @@ declare module 'shared/global-this.model' {
     /** Retrieve the value from web view state with the given 'stateKey', if it exists. */
     var getWebViewState: <T>(stateKey: string) => T | undefined;
     /** Set the value for a given key in the web view state. */
-    var setWebViewState: <T>(stateKey: string, stateValue: NonNullable<T>) => void;
+    var setWebViewState: <T>(stateKey: string, stateValue: T) => void;
+    /** Remove the value for a given key in the web view state */
+    var resetWebViewState: (stateKey: string) => void;
     var getWebViewDefinitionUpdatablePropertiesById: (
       webViewId: string,
     ) => WebViewDefinitionUpdatableProperties | undefined;

src/renderer/global-this.model.ts

@@ -12,6 +12,7 @@ import { getModuleSimilarApiMessage } from '@shared/utils/util';
 import {
   getWebViewStateById,
   setWebViewStateById,
+  resetWebViewStateById,
 } from '@renderer/services/web-view-state.service';
 import useWebViewState from '@renderer/hooks/use-web-view-state.hook';
 import * as papiReact from '@renderer/services/papi-frontend-react.service';
@@ -80,7 +81,8 @@ declare global {
   var webViewRequire: WebViewRequire;
   // Web view state functions are used in the default imports for each webview in web-view.service.ts
   var getWebViewStateById: <T>(id: string, stateKey: string) => T | undefined;
-  var setWebViewStateById: <T>(id: string, stateKey: string, stateValue: NonNullable<T>) => void;
+  var setWebViewStateById: <T>(id: string, stateKey: string, stateValue: T) => void;
+  var resetWebViewStateById: (id: string, stateKey: string) => void;
 }
 /* eslint-enable */
 
@@ -105,9 +107,10 @@ globalThis.ReactDOMClient = ReactDOMClient;
 globalThis.createRoot = ReactDOMClient.createRoot;
 globalThis.SillsdevScripture = SillsdevScripture;
 globalThis.webViewRequire = webViewRequire;
-// We don't expose get/setWebViewStateById in PAPI because web views don't have access to IDs
+// We don't expose get/setWebViewStateById/resetWebViewStateById in PAPI because web views don't have access to IDs
 globalThis.getWebViewStateById = getWebViewStateById;
 globalThis.setWebViewStateById = setWebViewStateById;
+globalThis.resetWebViewStateById = resetWebViewStateById;
 // We store the hook reference because we need it to bind it to the webview's iframe 'window' context
 globalThis.useWebViewState = useWebViewState;
 

src/renderer/hooks/use-web-view-state.hook.ts

@@ -5,17 +5,24 @@ import { useState, useEffect, Dispatch, SetStateAction } from 'react';
 export default function useWebViewState<T>(
   this: {
     getWebViewState: (stateKey: string) => T | undefined;
-    setWebViewState: (stateKey: string, stateValue: NonNullable<T>) => void;
+    setWebViewState: (stateKey: string, stateValue: T) => void;
+    resetWebViewState: (stateKey: string) => void;
   },
   stateKey: string,
-  defaultStateValue: NonNullable<T>,
-): [webViewState: NonNullable<T>, setWebViewState: Dispatch<SetStateAction<NonNullable<T>>>] {
+  defaultStateValue: T,
+): [webViewState: T, setWebViewState: Dispatch<SetStateAction<T>>, resetWebViewState: () => void] {
   const [state, setState] = useState(() => this.getWebViewState(stateKey) ?? defaultStateValue);
 
   // Whenever the state changes, save the updated value
   useEffect(() => {
+    if (state === defaultStateValue) return;
     this.setWebViewState(stateKey, state);
-  }, [stateKey, state]);
+  }, [defaultStateValue, state, stateKey]);
 
-  return [state, setState];
+  const resetState = () => {
+    setState(defaultStateValue);
+    this.resetWebViewState(stateKey);
+  };
+
+  return [state, setState, resetState];
 }

src/renderer/services/web-view-state.service.ts

@@ -97,6 +97,19 @@ export function setWebViewStateById<T>(id: string, stateKey: string, stateValue:
   save();
 }
 
+/**
+ * Remove the web view state object associated with the given ID
+ *
+ * @param id ID of the web view
+ * @param stateKey Key for the associated state
+ */
+export function resetWebViewStateById(id: string, stateKey: string): void {
+  if (!id || !stateKey) throw new Error('id and stateKey must be provided to remove webview state');
+  const state = getRecord(id);
+  delete state[stateKey];
+  save();
+}
+
 /**
  * Purge any web view state that hasn't been touched since the process has been running. Only call
  * this once all web views have been loaded.

src/renderer/services/web-view.service-host.ts

@@ -839,7 +839,7 @@ export const getWebView = async (
     // The web view provider might have updated the web view state, so save it
     setFullWebViewStateById(webView.id, webView.state);
 
-  // `webViewRequire`, `getWebViewStateById`, and `setWebViewStateById` below are defined in `src\renderer\global-this.model.ts`
+  // `webViewRequire`, `getWebViewStateById`, `setWebViewStateById` and `resetWebViewStateById` below are defined in `src\renderer\global-this.model.ts`
   // `useWebViewState` below is defined in `src\shared\global-this.model.ts`
   // We have to bind `useWebViewState` to the current `window` context because calls within PAPI don't have access to a webview's `window` context
   /**
@@ -862,8 +862,10 @@ export const getWebView = async (
   var require = window.parent.webViewRequire;
   var getWebViewStateById = window.parent.getWebViewStateById;
   var setWebViewStateById = window.parent.setWebViewStateById;
+  var resetWebViewStateById = window.parent.resetWebViewStateById;
   window.getWebViewState = (stateKey) => { return getWebViewStateById('${webView.id}', stateKey) };
   window.setWebViewState = (stateKey, stateValue) => { setWebViewStateById('${webView.id}', stateKey, stateValue) };
+  window.resetWebViewState = (stateKey) => { resetWebViewStateById('${webView.id}', stateKey) };
   window.useWebViewState = window.parent.useWebViewState.bind(window);
   var getWebViewDefinitionUpdatablePropertiesById = window.parent.getWebViewDefinitionUpdatablePropertiesById;
   window.getWebViewDefinitionUpdatableProperties = () => { return getWebViewDefinitionUpdatablePropertiesById('${webView.id}')}

src/shared/global-this.model.ts

@@ -37,7 +37,9 @@ declare global {
   /** Retrieve the value from web view state with the given 'stateKey', if it exists. */
   var getWebViewState: <T>(stateKey: string) => T | undefined;
   /** Set the value for a given key in the web view state. */
-  var setWebViewState: <T>(stateKey: string, stateValue: NonNullable<T>) => void;
+  var setWebViewState: <T>(stateKey: string, stateValue: T) => void;
+  /** Remove the value for a given key in the web view state */
+  var resetWebViewState: (stateKey: string) => void;
   // Web view "by id" functions are used in the default imports for each webview in web-view.service.ts
   // but probably wouldn't be used in a webview
   // TODO: Find a way to move this to `@renderer/global-this.model.ts` without causing an error on

src/shared/models/web-view.model.ts

@@ -220,8 +220,8 @@ export type WebViewDefinitionUpdateInfo = Partial<WebViewDefinitionUpdatableProp
  */
 export type UseWebViewStateHook = <T>(
   stateKey: string,
-  defaultStateValue: NonNullable<T>,
-) => [webViewState: NonNullable<T>, setWebViewState: Dispatch<SetStateAction<NonNullable<T>>>];
+  defaultStateValue: T,
+) => [webViewState: T, setWebViewState: Dispatch<SetStateAction<T>>, resetWebViewState: () => void];
 
 // Note: the following comment uses ＠, not the actual @ character, to hackily provide @param and
 // such on this type. It seem that, for some reason, JSDoc does not carry these annotations on