Function useValue

react/src/hooks.ts:225–326

(
  resource: Resource,
  propertyURL: string,
  /** Saves the resource when the resource is changed, after 100ms */
  opts: useValueOptions = {},
)

 * ```
 */
export function useValue(
  resource: Resource,
  propertyURL: string,
  /** Saves the resource when the resource is changed, after 100ms */
  opts: useValueOptions = {},
): [JSONValue | null, setValue] {
  const {
    commit = false,
    validate = true,
    commitDebounce = 100,
    handleValidationError,
  } = opts;
  const [val, set] = useState<JSONValue>(null);
  const store = useStore();
  const debounced = useDebounce(val, commitDebounce);
  const [touched, setTouched] = useState(false);

  // Try without this
  // When a component mounts, it needs to let the store know that it will subscribe to changes to that resource.
  // useEffect(() => {
  //   function handleNotify(updated: Resource) {
  //     // When a change happens, set the new Resource.
  //     set(updated.get(propertyURL));
  //   }
  //   store.subscribe(subject, handleNotify);

  //   return () => {
  //     // When the component is unmounted, unsubscribe from the store.
  //     store.unsubscribe(subject, handleNotify);
  //   };
  // }, [store, resource, subject]);

  // Save the resource when the debounced value has changed
  useEffect(() => {
    // Touched prevents the resource from being saved when it is loaded (and not changed)
    if (commit && touched) {
      // This weird async wrapping is needed to use await in a react hook.
      async function save() {
        try {
          setTouched(false);
          await resource.save(store, store.getAgent());
        } catch (e) {
          store.handleError(e);
        }
      }
      save();
    }
  }, [JSON.stringify(debounced)]);

  /**
   * Validates the value. If it fails, it calls the function in the second
   * Argument. Pass null to remove existing value.
   */
  async function validateAndSet(newVal: JSONValue): Promise<void> {
    if (newVal == null) {
      // remove the value
      resource.removePropVal(propertyURL);
      set(null);