[CORL-1239] Swap setTimeout for setLongTimeout (#3071)

* fix: ensure user editable time use setLongTimeout

* fix: fixed wrong type

* fix: fixed snapshots

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/core/client/admin/App/DecisionHistory/__snapshots__/DecisionHistoryLoading.spec.tsx.snap

@@ -11,9 +11,7 @@ exports[`renders correctly 1`] = `
       className="DecisionHistoryLoading-container"
       justifyContent="center"
     >
-      <Delay
-        ms={500}
-      >
+      <Delay>
         <withPropsOnChange(Spinner)
           size="sm"
         />

src/core/client/admin/App/GlobalNotification/useNotification.ts

@@ -1,4 +1,5 @@
 import { useRouter } from "found";
+import { setLongTimeout } from "long-settimeout";
 import { ReactNode, useContext } from "react";
 
 import { NotificationContext } from "./GlobalNotificationContext";
@@ -17,7 +18,7 @@ function useNotification() {
   const setMessage = (message: ReactNode, timeout?: number) => {
     dispatch({ type: "SET_MESSAGE", message });
     if (timeout) {
-      setTimeout(() => {
+      setLongTimeout(() => {
         dispatch({ type: "CLEAR_MESSAGE" });
       }, timeout);
     }

src/core/client/admin/routes/AuthCheck/RestrictedContainer.tsx

@@ -3,7 +3,7 @@ import React, { Component } from "react";
 import { graphql } from "react-relay";
 
 import { SetRedirectPathMutation } from "coral-admin/mutations";
-import { timeout } from "coral-common/utils";
+import { waitFor } from "coral-common/helpers";
 import {
   MutationProp,
   withFragmentContainer,
@@ -31,7 +31,7 @@ class RestrictedContainer extends Component<Props> {
   private handleSignInAs = async () => {
     await this.props.signOut();
     // Wait for new context to propagate.
-    await timeout();
+    await waitFor();
     void this.props.setRedirectPath({
       path: location.pathname + location.search + location.hash,
     });

src/core/client/stream/local/initLocalState.spec.ts

@@ -1,6 +1,6 @@
 import { Environment, RecordSource } from "relay-runtime";
 
-import { timeout } from "coral-common/utils";
+import { waitFor } from "coral-common/helpers";
 import { CoralContext } from "coral-framework/lib/bootstrap";
 import { LOCAL_ID } from "coral-framework/lib/relay";
 import { createPromisifiedStorage } from "coral-framework/lib/storage";
@@ -27,7 +27,7 @@ it("init local state", async () => {
     localStorage: createPromisifiedStorage(),
   };
   await initLocalState(environment, context as any);
-  await timeout();
+  await waitFor();
   expect(JSON.stringify(source.toJSON(), null, 2)).toMatchSnapshot();
 });
 

src/core/client/stream/mutations/SetCommentIDMutation.spec.ts

@@ -1,7 +1,8 @@
 import { Environment, RecordSource } from "relay-runtime";
 import sinon from "sinon";
 
-import { parseQuery, timeout } from "coral-common/utils";
+import { waitFor } from "coral-common/helpers";
+import { parseQuery } from "coral-common/utils";
 import { LOCAL_ID } from "coral-framework/lib/relay";
 import { createRelayEnvironment } from "coral-framework/testHelpers";
 
@@ -39,7 +40,7 @@ it("Should call setCommentID in pym", async () => {
     },
   };
   await commit(environment, { id }, context as any);
-  await timeout();
+  await waitFor();
   expect(source.get(LOCAL_ID)!.commentID).toEqual(id);
   context.pym.sendMessage.verify();
 });
@@ -51,7 +52,7 @@ it("Should call setCommentID in pym with empty id", async () => {
     },
   };
   await commit(environment, { id: null }, context as any);
-  await timeout();
+  await waitFor();
   expect(source.get(LOCAL_ID)!.commentID).toEqual(null);
   expect(parseQuery(location.search).commentID).toBeUndefined();
   context.pym.sendMessage.verify();

src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx

@@ -1,6 +1,7 @@
 import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
 import { EventEmitter2 } from "eventemitter2";
+import { setLongTimeout } from "long-settimeout";
 import React, { Component, MouseEvent } from "react";
 import { graphql } from "react-relay";
 
@@ -179,7 +180,7 @@ export class CommentContainer extends Component<Props, State> {
       new Date(this.props.comment.editing.editableUntil!).getTime() -
       Date.now();
     if (ms > 0) {
-      return setTimeout(() => this.setState({ editable: false }), ms);
+      return setLongTimeout(() => this.setState({ editable: false }), ms);
     }
     return;
   }

src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx

@@ -1,4 +1,5 @@
 import { CoralRTE } from "@coralproject/rte";
+import { setLongTimeout } from "long-settimeout";
 import React, { Component } from "react";
 import { graphql } from "react-relay";
 
@@ -15,6 +16,7 @@ import CLASSES from "coral-stream/classes";
 import { EditCommentFormContainer_comment as CommentData } from "coral-stream/__generated__/EditCommentFormContainer_comment.graphql";
 import { EditCommentFormContainer_settings as SettingsData } from "coral-stream/__generated__/EditCommentFormContainer_settings.graphql";
 import { EditCommentFormContainer_story as StoryData } from "coral-stream/__generated__/EditCommentFormContainer_story.graphql";
+
 import {
   getSubmitStatus,
   shouldTriggerSettingsRefresh,
@@ -99,7 +101,7 @@ export class EditCommentFormContainer extends Component<Props, State> {
       new Date(this.props.comment.editing.editableUntil!).getTime() -
       Date.now();
     if (ms > 0) {
-      return setTimeout(() => this.setState({ expired: true }), ms);
+      return setLongTimeout(() => this.setState({ expired: true }), ms);
     }
     return;
   }

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.spec.tsx

@@ -4,7 +4,8 @@ import React from "react";
 import { createRenderer } from "react-test-renderer/shallow";
 import sinon from "sinon";
 
-import { pureMerge, timeout } from "coral-common/utils";
+import { waitFor } from "coral-common/helpers";
+import { pureMerge } from "coral-common/utils";
 import { createPromisifiedStorage } from "coral-framework/lib/storage";
 import { removeFragmentRefs, wait } from "coral-framework/testHelpers";
 import { DeepPartial, PropTypesOf } from "coral-framework/types";
@@ -75,7 +76,7 @@ it("renders correctly", async () => {
 
   const renderer = createRenderer();
   renderer.render(<ReplyCommentFormContainerN {...props} />);
-  await timeout();
+  await waitFor();
   expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
@@ -89,7 +90,7 @@ it("renders with initialValues", async () => {
 
   const renderer = createRenderer();
   renderer.render(<ReplyCommentFormContainerN {...props} />);
-  await timeout();
+  await waitFor();
   expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
@@ -102,7 +103,7 @@ it("save values", async () => {
   );
 
   const wrapper = shallow(<ReplyCommentFormContainerN {...props} />);
-  await timeout();
+  await waitFor();
   wrapper.update();
   wrapper
     .first()
@@ -131,7 +132,7 @@ it("creates a comment", async () => {
   );
 
   const wrapper = shallow(<ReplyCommentFormContainerN {...props} />);
-  await timeout();
+  await waitFor();
   wrapper.update();
   wrapper.first().props().onSubmit(input, form);
   expect(
@@ -145,7 +146,7 @@ it("creates a comment", async () => {
       ...input,
     })
   ).toBeTruthy();
-  await timeout();
+  await waitFor();
   expect(onCloseStub.calledOnce).toBe(true);
 });
 
@@ -161,7 +162,7 @@ it("closes on cancel", async () => {
   );
 
   const wrapper = shallow(<ReplyCommentFormContainerN {...props} />);
-  await timeout();
+  await waitFor();
   wrapper.update();
   wrapper.findWhere((w) => !!w.prop("onCancel")).prop("onCancel")();
 
@@ -183,7 +184,7 @@ it("autofocuses", async () => {
   });
 
   const wrapper = shallow(<ReplyCommentFormContainerN {...props} />);
-  await timeout();
+  await waitFor();
   wrapper.update();
   wrapper
     .findWhere((n) => n.prop("rteRef"))
@@ -206,7 +207,7 @@ it("renders when story has been closed", async () => {
 
   const renderer = createRenderer();
   renderer.render(<ReplyCommentFormContainerN {...props} />);
-  await timeout();
+  await waitFor();
   expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
@@ -221,6 +222,6 @@ it("renders when commenting has been disabled", async () => {
   });
   const renderer = createRenderer();
   renderer.render(<ReplyCommentFormContainerN {...props} />);
-  await timeout();
+  await waitFor();
   expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/PermalinkViewQuery.spec.tsx.snap

@@ -7,9 +7,7 @@ exports[`renders error 1`] = `
 `;
 
 exports[`renders loading 1`] = `
-<Delay
-  ms={500}
->
+<Delay>
   <withPropsOnChange(Spinner) />
 </Delay>
 `;

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormContainer.spec.tsx

@@ -3,7 +3,8 @@ import { noop } from "lodash";
 import React from "react";
 import sinon from "sinon";
 
-import { pureMerge, timeout } from "coral-common/utils";
+import { waitFor } from "coral-common/helpers";
+import { pureMerge } from "coral-common/utils";
 import { createPromisifiedStorage } from "coral-framework/lib/storage";
 import { act, removeFragmentRefs, wait } from "coral-framework/testHelpers";
 import { DeepPartial, PropTypesOf } from "coral-framework/types";
@@ -110,7 +111,7 @@ it("save values", async () => {
   await props.sessionStorage.setItem(contextKey, "Hello World!");
 
   const wrapper = shallow(<PostCommentFormContainerN {...props} />);
-  await timeout();
+  await waitFor();
 
   act(() => {
     wrapper.update();
@@ -151,7 +152,7 @@ it("creates a comment", async () => {
   });
 
   const wrapper = shallow(<PostCommentFormContainerN {...props} />);
-  await timeout();
+  await waitFor();
 
   act(() => {
     wrapper.update();
@@ -190,7 +191,7 @@ it("renders when story has been closed (collapsing)", async () => {
     },
   });
   const wrapper = shallow(<PostCommentFormContainerN {...props} />);
-  await timeout();
+  await waitFor();
 
   act(() => {
     wrapper.update();
@@ -211,7 +212,7 @@ it("renders when commenting has been disabled (collapsing)", async () => {
     },
   });
   const wrapper = shallow(<PostCommentFormContainerN {...props} />);
-  await timeout();
+  await waitFor();
 
   act(() => {
     wrapper.update();
@@ -244,7 +245,7 @@ it("renders when story has been closed (non-collapsing)", async () => {
     },
   });
   const wrapper = shallow(<PostCommentFormContainerN {...props} />);
-  await timeout();
+  await waitFor();
 
   act(() => {
     wrapper.setProps(nextProps);
@@ -273,7 +274,7 @@ it("renders when commenting has been disabled (non-collapsing)", async () => {
     },
   });
   const wrapper = shallow(<PostCommentFormContainerN {...props} />);
-  await timeout();
+  await waitFor();
 
   act(() => {
     wrapper.setProps(nextProps);
@@ -291,7 +292,7 @@ it("renders when user is scheduled to be deleted", async () => {
     },
   });
   const wrapper = shallow(<PostCommentFormContainerN {...props} />);
-  await timeout();
+  await waitFor();
 
   await act(async () => {
     await wait(() => expect(wrapper).toMatchSnapshot());

src/core/client/stream/tabs/Comments/Stream/StoryClosedTimeout/StoryClosedTimeoutContainer.tsx

@@ -1,3 +1,4 @@
+import { setLongTimeout } from "long-settimeout";
 import React from "react";
 import { graphql } from "react-relay";
 
@@ -18,7 +19,7 @@ interface Props {
 function createTimeout(callback: () => void, closedAt: string) {
   const diff = new Date(closedAt).valueOf() - Date.now();
   if (diff > 0) {
-    return setTimeout(callback, diff);
+    return setLongTimeout(callback, diff);
   }
   return null;
 }

src/core/client/stream/tabs/Configure/ConfigureQuery.tsx

@@ -24,7 +24,7 @@ const loadConfigureContainer = () =>
   );
 // (cvle) For some reason without `setTimeout` this request will block other requests.
 const preloadConfigureContainer = once(() =>
-  setTimeout(loadConfigureContainer)
+  setTimeout(loadConfigureContainer, 0)
 );
 
 const LazyConfigureContainer = React.lazy(loadConfigureContainer);

src/core/client/stream/tabs/Discussions/DiscussionsQuery.tsx

@@ -25,7 +25,7 @@ const loadDiscussionsContainer = () =>
   );
 // (cvle) For some reason without `setTimeout` this request will block other requests.
 const preloadDiscussionsContainer = once(() =>
-  setTimeout(loadDiscussionsContainer)
+  setTimeout(loadDiscussionsContainer, 0)
 );
 
 const LazyDiscussionsContainer = React.lazy(loadDiscussionsContainer);

src/core/client/stream/tabs/Profile/ProfileQuery.tsx

@@ -22,7 +22,7 @@ const loadProfileContainer = () =>
     return x;
   });
 // (cvle) For some reason without `setTimeout` this request will block other requests.
-const preloadProfileContainer = once(() => setTimeout(loadProfileContainer));
+const preloadProfileContainer = once(() => setTimeout(loadProfileContainer, 0));
 
 const LazyProfileContainer = React.lazy(loadProfileContainer);
 

src/core/client/ui/components/v2/Delay/Delay.tsx

@@ -1,3 +1,4 @@
+import { clearLongTimeout, setLongTimeout } from "long-settimeout";
 import React, { FunctionComponent, useEffect, useState } from "react";
 
 interface Props {
@@ -5,14 +6,14 @@ interface Props {
   children: React.ReactNode;
 }
 
-const Delay: FunctionComponent<Props> = ({ ms, children }) => {
+const Delay: FunctionComponent<Props> = ({ ms = 500, children }) => {
   const [render, setRender] = useState<boolean>(false);
   useEffect(() => {
-    const timeout = setTimeout(() => {
+    const timeout = setLongTimeout(() => {
       setRender(true);
     }, ms);
     return () => {
-      clearTimeout(timeout);
+      clearLongTimeout(timeout);
     };
   }, [ms]);
   if (!render) {
@@ -21,8 +22,4 @@ const Delay: FunctionComponent<Props> = ({ ms, children }) => {
   return <>{children}</>;
 };
 
-Delay.defaultProps = {
-  ms: 500,
-};
-
 export default Delay;

src/core/common/helpers/waitFor.ts

@@ -1,7 +1,6 @@
-export default function waitFor(timeout: number): Promise<void> {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve();
-    }, timeout);
-  });
+import { setLongTimeout } from "long-settimeout";
+
+/** A promisified timeout. */
+export default function waitFor(ms = 0): Promise<void> {
+  return new Promise((resolve) => setLongTimeout(resolve, ms));
 }

src/core/common/utils/index.ts

@@ -1,4 +1,3 @@
-export { default as timeout } from "./timeout";
 export { default as animationFrame } from "./animationFrame";
 export { default as pascalCase } from "./pascalCase";
 export { default as oncePerFrame } from "./oncePerFrame";

src/core/common/utils/timeout.ts

@@ -1,6 +0,0 @@
-import { setLongTimeout } from "long-settimeout";
-
-/** A promisified timeout. */
-export default function timeout(ms = 0) {
-  return new Promise((resolve) => setLongTimeout(resolve, ms));
-}

src/core/server/services/fetch/abortAfter.ts

@@ -1,8 +1,9 @@
 import AbortController from "abort-controller";
+import { setLongTimeout } from "long-settimeout";
 
 function abortAfter(ms: number) {
   const controller = new AbortController();
-  const timeout = setTimeout(() => {
+  const timeout = setLongTimeout(() => {
     controller.abort();
   }, ms);
 

src/core/server/services/fetch/fetch.ts

@@ -1,6 +1,7 @@
 import http from "http";
 import https from "https";
 import { capitalize } from "lodash";
+import { clearLongTimeout } from "long-settimeout";
 import fetch, { RequestInit, Response } from "node-fetch";
 import { URL } from "url";
 
@@ -119,7 +120,7 @@ export const createFetch = ({
 
       return res;
     } finally {
-      clearTimeout(abort.timeout);
+      clearLongTimeout(abort.timeout);
     }
   };
 };