ReportContent: cleanup and improvements

- Use `finally` instead of an arbitrary timer to clear the spinner when resolving the claim.
- Move away from `makeSelect*`
- `perform`: use object form as there is no customization.
- Effect-dependency cleanup.

static/app-strings.json

@@ -410,7 +410,7 @@
   "Clear --[clears Publish Form]--": "Clear",
   "Loading": "Loading",
   "This file is in your library.": "This file is in your library.",
-  "Invalid claim ID %s.": "Invalid claim ID %s.",
+  "Invalid claim ID": "Invalid claim ID",
   "View Tag": "View Tag",
   "Hide": "Hide",
   "Close": "Close",

ui/component/reportContent/index.js

@@ -3,7 +3,7 @@ import { doReportContent } from 'redux/actions/reportContent';
 import { selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app';
 import { selectIsReportingContent, selectReportContentError } from 'redux/selectors/reportContent';
 import { doClaimSearch } from 'redux/actions/claims';
-import { makeSelectClaimForClaimId } from 'redux/selectors/claims';
+import { selectClaimForClaimId } from 'redux/selectors/claims';
 import { withRouter } from 'react-router';
 import ReportContent from './view';
 
@@ -18,13 +18,13 @@ const select = (state, props) => {
     activeChannelClaim: selectActiveChannelClaim(state),
     incognito: selectIncognito(state),
     claimId: claimId,
-    claim: makeSelectClaimForClaimId(claimId)(state),
+    claim: selectClaimForClaimId(state, claimId),
   };
 };
 
-const perform = (dispatch) => ({
-  doClaimSearch: (options) => dispatch(doClaimSearch(options)),
-  doReportContent: (category, params) => dispatch(doReportContent(category, params)),
-});
+const perform = {
+  doClaimSearch,
+  doReportContent,
+};
 
 export default withRouter(connect(select, perform)(ReportContent));

ui/component/reportContent/view.jsx

@@ -57,13 +57,15 @@ const DEFAULT_INPUT_DATA = {
 };
 
 type Props = {
+  // --- urlParams ---
   claimId: string,
+  // --- redux ---
   claim: StreamClaim,
   isReporting: boolean,
   error: string,
   activeChannelClaim: ?ChannelClaim,
   incognito: boolean,
-  doClaimSearch: (any) => void,
+  doClaimSearch: (any) => Promise<any>,
   doReportContent: (string, string) => void,
 };
 
@@ -85,9 +87,11 @@ export default function ReportContent(props: Props) {
         page: 1,
         no_totals: true,
         claim_ids: [claimId],
+      }).finally(() => {
+        setIsResolvingClaim(false);
       });
     }
-  }, [claim, claimId]);
+  }, [claim, claimId, doClaimSearch]);
 
   // On mount, pause player and get the timestamp, if applicable.
   React.useEffect(() => {
@@ -102,18 +106,9 @@ export default function ReportContent(props: Props) {
       const str = (n) => n.toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false });
       updateInput('timestamp', str(h) + ':' + str(m) + ':' + str(s));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  React.useEffect(() => {
-    let timer;
-    if (isResolvingClaim) {
-      timer = setTimeout(() => {
-        setIsResolvingClaim(false);
-      }, 3000);
-    }
-    return () => clearTimeout(timer);
-  }, [isResolvingClaim]);
-
   function onSubmit() {
     if (!claim) {
       if (isDev) throw new Error('ReportContent::onSubmit -- null claim');