[CORL-294] Moderate a single story + quick search (#2286)

* feat: allow passing a `storyID` to `Query.moderationQueues`

* feat: moderate by story

* feat: implement search story combobox

* feat: add translations

* fix: tests

* fix: duplicate id

* fix: rename file

* chore: add more comments

* fix: add missing translation

* review: use query parameter "q" instead of url path

* chore: move placeholder logic inside, maybe this makes it clearer :-D

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

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

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

@@ -0,0 +1,21 @@
+import equals from "shallow-equals";
+
+import useEffectAfterMount from "./useEffectAfterMount";
+import usePrevious from "./usePrevious";
+
+/**
+ * useEffectWhenChanged is a react hook that will run effects
+ * when value changed.
+ */
+export default function useEffectWhenChanged(
+  callback: () => void,
+  deps: ReadonlyArray<any>
+) {
+  const previous = usePrevious(deps);
+  // We use `useEffectAfterMount` to make sure `previous` has an assigned value.
+  useEffectAfterMount(() => {
+    if (!equals(deps, previous)) {
+      callback();
+    }
+  }, deps);
+}

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

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * usePrevious is a react hook that will return the
+ * previous value.
+ */
+export default function usePrevious<T>(value: T): T {
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current as T;
+}