[next] Search (#2251)

* feat: added text indexes, query param to edges

* fix: cleaned up, added createdAt index

* fix: improved indexing support

* feat: integrate search into community and stories

* feat: adorn with search button

* test: add tests

src/core/client/framework/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useEffectAfterMount } from "./useEffectAfterMount";

src/core/client/framework/hooks/useEffectAfterMount.ts

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * useEffectAfterMount is a react hook that will run effects
+ * except when the component has just been mounted.
+ */
+export default function useEffectAfterMount(
+  effect: React.EffectCallback,
+  deps?: ReadonlyArray<any> | undefined
+) {
+  const mountedRef = useRef<boolean>(false);
+  useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    return effect();
+  }, deps);
+}

src/core/client/framework/lib/relay/index.ts

@@ -24,3 +24,5 @@ export {
 } from "./commitLocalUpdatePromisified";
 export { initLocalBaseState, setAccessTokenInLocalState } from "./localState";
 export { default as fetchQuery } from "./fetchQuery";
+export { default as useRefetch } from "./useRefetch";
+export { default as useLoadMore } from "./useLoadMore";

src/core/client/framework/lib/relay/useLoadMore.ts

@@ -0,0 +1,30 @@
+import { useCallback, useState } from "react";
+import { RelayPaginationProp } from "react-relay";
+
+/**
+ * useLoadMore is a react hook that returns a `loadMore` callback
+ * and a `isLoadingMore` boolean.
+ */
+export default function useLoadMore(
+  relay: RelayPaginationProp,
+  count: number
+): [() => void, boolean] {
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const loadMore = useCallback(
+    () => {
+      if (!relay.hasMore() || relay.isLoading()) {
+        return;
+      }
+      setIsLoadingMore(true);
+      relay.loadMore(count, error => {
+        setIsLoadingMore(false);
+        if (error) {
+          // tslint:disable-next-line:no-console
+          console.error(error);
+        }
+      });
+    },
+    [relay]
+  );
+  return [loadMore, isLoadingMore];
+}

src/core/client/framework/lib/relay/useRefetch.ts

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { RelayPaginationProp } from "react-relay";
+import { Variables } from "relay-runtime";
+
+import { useEffectAfterMount } from "talk-framework/hooks";
+
+/**
+ * useRefetch is a react hook that returns a `refetch` callback
+ * and a `isRefetching` boolean. Any change to the variables
+ * will result in a `refetch`.
+ */
+export default function useRefetch<V = Variables>(
+  relay: RelayPaginationProp,
+  variables: V = {} as any
+): [() => void, boolean] {
+  const [manualRefetchCount, setManualRefetchCount] = useState(0);
+  const [refetching, setRefetching] = useState(false);
+  useEffectAfterMount(
+    () => {
+      setRefetching(true);
+      const disposable = relay.refetchConnection(
+        10,
+        error => {
+          setRefetching(false);
+          if (error) {
+            // tslint:disable-next-line:no-console
+            console.error(error);
+          }
+        },
+        variables
+      );
+      return () => {
+        if (disposable) {
+          disposable.dispose();
+        }
+      };
+    },
+    [
+      relay,
+      manualRefetchCount,
+      ...Object.keys(variables).reduce<any[]>((a, k) => {
+        a.push((variables as any)[k]);
+        return a;
+      }, []),
+    ]
+  );
+  return [() => setManualRefetchCount(manualRefetchCount + 1), refetching];
+}