fix: Implement hooks

Author: nicovitt

src/declaration.d.ts

@@ -0,0 +1,4 @@
+declare module "parse/node.js" {
+  import Parse from "parse/node.js";
+  export = Parse;
+}

src/hooks/useObjectState.ts

@@ -0,0 +1,22 @@
+import React from "react";
+
+type Result<T> = [T, (value: Partial<T>) => void, () => void];
+
+export function useObjectState<T>(initialState: T): Result<T> {
+  const [state, setState] = React.useState<T>(initialState);
+
+  const set = React.useCallback(
+    (value: Partial<T>) => {
+      setState((currentState: T) => {
+        return { ...currentState, ...value };
+      });
+    },
+    [setState]
+  );
+
+  const reset = React.useCallback(() => {
+    setState(initialState);
+  }, [setState, initialState]);
+
+  return React.useMemo(() => [state, set, reset], [state, set, reset]);
+}

src/hooks/useParseFunction.ts

@@ -0,0 +1,60 @@
+import Parse from "parse/node.js";
+import React from "react";
+
+type Result<T> = {
+  result: T | undefined;
+  loading: boolean;
+  error: Error | undefined;
+  reload: () => void;
+};
+
+export function useParseFunction<T>(
+  name: string,
+  params: any,
+  dependency?: any
+): Result<T> {
+  const [state, setState] = React.useState<Result<T>>({
+    result: undefined,
+    loading: true,
+    error: undefined,
+    reload: fetch,
+  });
+
+  async function fetch() {
+    if (!name) {
+      return;
+    }
+
+    Parse.Cloud.run(name, params).then(
+      (response: any) => {
+        setState({
+          result: response,
+          error: undefined,
+          loading: false,
+          reload: fetch,
+        });
+      },
+      (error: Error) => {
+        setState({
+          result: undefined,
+          error,
+          loading: false,
+          reload: fetch,
+        });
+      }
+    );
+  }
+
+  React.useEffect(() => {
+    setState({
+      result: undefined,
+      loading: true,
+      error: undefined,
+      reload: fetch,
+    });
+
+    fetch();
+  }, [name, dependency]);
+
+  return state;
+}

src/hooks/useParseGet.ts

@@ -0,0 +1,63 @@
+import Parse from "parse/node.js";
+import React from "react";
+
+type Result<T> = {
+  result: T | undefined;
+  loading: boolean;
+  error: Error | undefined;
+  reload: () => void;
+};
+
+export function useParseGet<T extends Parse.Object>(
+  cls: new (...args: any[]) => T,
+  id: string,
+  options?: { includes?: string[] }
+): Result<T> {
+  const [state, setState] = React.useState<Result<T>>({
+    result: undefined,
+    loading: true,
+    error: undefined,
+    reload: fetch,
+  });
+
+  async function fetch() {
+    if (cls && id) {
+      const query = new Parse.Query(cls as Parse.Object);
+
+      if (options?.includes) {
+        for (const include of options.includes) {
+          query.include(include);
+        }
+      }
+
+      try {
+        setState({
+          result: (await query.get(id)) as T,
+          loading: false,
+          error: undefined,
+          reload: fetch,
+        });
+      } catch (error) {
+        setState({
+          result: undefined,
+          error: error as Error,
+          loading: false,
+          reload: fetch,
+        });
+      }
+    }
+  }
+
+  React.useEffect(() => {
+    setState({
+      result: undefined,
+      loading: true,
+      error: undefined,
+      reload: fetch,
+    });
+
+    fetch();
+  }, [cls, id]);
+
+  return state;
+}

src/hooks/useParseList.ts

@@ -0,0 +1,69 @@
+import Parse from "parse/node.js";
+import React from "react";
+
+type Result<T> = {
+  result: T[];
+  count: number;
+  loading: boolean;
+  error: Error | undefined;
+  reload: () => void;
+};
+
+export function useParseList<T extends Parse.Object>(
+  cls: new (...args: any[]) => T,
+  options?: { count?: boolean; includes?: string[] }
+): Result<T> {
+  const [state, setState] = React.useState<Result<T>>({
+    result: [],
+    count: 0,
+    loading: true,
+    error: undefined,
+    reload: fetch,
+  });
+
+  async function fetch() {
+    if (cls) {
+      const query = new Parse.Query(cls);
+
+      query.descending("updatedAt");
+
+      if (options?.includes) {
+        for (const include of options.includes) {
+          query.include(include);
+        }
+      }
+
+      try {
+        setState({
+          result: await query.find(),
+          count: options?.count ? await query.count() : 0,
+          error: undefined,
+          loading: false,
+          reload: fetch,
+        });
+      } catch (error) {
+        setState({
+          result: [],
+          count: 0,
+          error: error as Error,
+          loading: false,
+          reload: fetch,
+        });
+      }
+    }
+  }
+
+  React.useEffect(() => {
+    setState({
+      result: [],
+      count: 0,
+      loading: true,
+      error: undefined,
+      reload: fetch,
+    });
+
+    fetch();
+  }, [cls]);
+
+  return state;
+}

src/hooks/useParseQuery.ts

@@ -0,0 +1,161 @@
+import Parse from "parse/node.js";
+import React from "react";
+
+type Result<T> = {
+  result: T[];
+  count: number;
+  loading: boolean;
+  error: Error | undefined;
+  reload: () => void;
+};
+
+export function useParseQuery<T extends Parse.Object>(
+  query: Parse.Query<T>,
+  options?: {
+    count?: boolean;
+    live?: boolean;
+    liveReload?: boolean;
+    reloadThrottle?: number;
+  }
+): Result<T> {
+  const subscriptionRef = React.useRef<Parse.LiveQuerySubscription>();
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>();
+  const throttleRef = React.useRef<boolean>(false);
+
+  const initialState = {
+    result: [],
+    count: 0,
+    loading: true,
+    error: undefined,
+    reload: fetch,
+  };
+
+  const [state, setState] = React.useState<Result<T>>(initialState);
+
+  async function fetch(force: boolean = false) {
+    if (
+      !force &&
+      options?.reloadThrottle &&
+      Number.isInteger(options?.reloadThrottle)
+    ) {
+      if (timeoutRef.current) {
+        throttleRef.current = true;
+        return;
+      } else {
+        timeoutRef.current = setTimeout(() => {
+          timeoutRef.current = null;
+
+          if (throttleRef.current) {
+            fetch();
+          }
+
+          throttleRef.current = false;
+        }, options.reloadThrottle);
+      }
+    }
+
+    if (query) {
+      if (options?.live) {
+        if (subscriptionRef.current) {
+          await subscriptionRef.current.unsubscribe();
+        }
+
+        subscriptionRef.current = await query.subscribe();
+
+        // subscriptionRef.current.on("open", () => {});
+
+        subscriptionRef.current.on("create", (object: T) => {
+          if (options?.liveReload) {
+            fetch();
+          } else {
+            setState(mergeResult(object, true));
+          }
+        });
+
+        subscriptionRef.current.on("update", (object: T) => {
+          if (options?.liveReload) {
+            fetch();
+          } else {
+            setState(mergeResult(object, true));
+          }
+        });
+
+        subscriptionRef.current.on("enter", (object: T) => {
+          if (options?.liveReload) {
+            fetch();
+          } else {
+            setState(mergeResult(object, true));
+          }
+        });
+
+        subscriptionRef.current.on("leave", (object: T) => {
+          if (options?.liveReload) {
+            fetch();
+          } else {
+            setState(mergeResult(object));
+          }
+        });
+      }
+
+      const requests: [Promise<T[]>, Promise<number>] = [
+        query.find(),
+        options?.count ? query.count() : Promise.resolve(0),
+      ];
+
+      Promise.all(requests).then(
+        ([response, count]) => {
+          if (Array.isArray(response)) {
+            setState(
+              mergeState({
+                result: response,
+                count: count || 0,
+                loading: false,
+              })
+            );
+          } else {
+            setState(
+              mergeState({ error: new Error("Bad Response"), loading: false })
+            );
+          }
+        },
+        (error: Error) => {
+          setState(mergeState({ error, loading: false }));
+        }
+      );
+    }
+  }
+
+  function mergeState(
+    nextState: Partial<Result<T>>
+  ): (state: Result<T>) => Result<T> {
+    return (state) => Object.assign({}, state, nextState);
+  }
+
+  function mergeResult(
+    object: T,
+    add: boolean = false
+  ): (state: Result<T>) => Result<T> {
+    return (state) => {
+      const result = state.result.filter((e) => e.id !== object.id);
+
+      if (add) {
+        result.push(object);
+      }
+
+      return Object.assign({}, state, { result });
+    };
+  }
+
+  React.useEffect(() => {
+    setState(initialState);
+    fetch(true);
+
+    return () => {
+      if (subscriptionRef.current) {
+        subscriptionRef.current.unsubscribe();
+      }
+    };
+  }, [query]);
+
+  return state;
+}