ref(tsc): convert sources index to FC (#82474)

static/app/components/search/sources/index.tsx

@@ -1,4 +1,4 @@
-import {Component} from 'react';
+import {useCallback} from 'react';
 
 import type {Fuse} from 'sentry/utils/fuzzySearch';
 
@@ -23,53 +23,53 @@ type SourceResult = {
   results: Result[];
 };
 
-class SearchSources extends Component<Props> {
-  // `allSources` will be an array of all result objects from each source
-  renderResults(allSources: SourceResult[]) {
-    const {children} = this.props;
+function SearchSources(props: Props) {
+  const {children, sources} = props;
 
-    // loading means if any result has `isLoading` OR any result is null
-    const isLoading = !!allSources.find(arg => arg.isLoading || arg.results === null);
+  // `allSources` will be an array of all result objects from each source
+  const renderResults = useCallback(
+    (allSources: SourceResult[]) => {
+      // loading means if any result has `isLoading` OR any result is null
+      const isLoading = !!allSources.find(arg => arg.isLoading || arg.results === null);
 
-    const foundResults = isLoading
-      ? []
-      : allSources
-          .flatMap(({results}) => results ?? [])
-          .sort((a, b) => (a.score ?? 0) - (b.score ?? 0));
-    const hasAnyResults = !!foundResults.length;
+      const foundResults = isLoading
+        ? []
+        : allSources
+            .flatMap(({results}) => results ?? [])
+            .sort((a, b) => (a.score ?? 0) - (b.score ?? 0));
+      const hasAnyResults = !!foundResults.length;
 
-    return children({
-      isLoading,
-      results: foundResults,
-      hasAnyResults,
-    });
-  }
+      return children({
+        isLoading,
+        results: foundResults,
+        hasAnyResults,
+      });
+    },
+    [children]
+  );
 
-  renderSources(sources: Props['sources'], results: SourceResult[], idx: number) {
-    if (idx >= sources.length) {
-      return this.renderResults(results);
-    }
-    const Source = sources[idx];
-    return (
-      <Source {...this.props}>
-        {(args: SourceResult) => {
-          // Mutate the array instead of pushing because we don't know how often
-          // this child function will be called and pushing will cause duplicate
-          // results to be pushed for all calls down the chain.
-          results[idx] = args;
-          return this.renderSources(sources, results, idx + 1);
-        }}
-      </Source>
-    );
-  }
+  const renderSources = useCallback(
+    (results: SourceResult[], idx: number) => {
+      if (idx >= sources.length) {
+        return renderResults(results);
+      }
+      const Source = sources[idx];
+      return (
+        <Source {...props}>
+          {(args: SourceResult) => {
+            // Mutate the array instead of pushing because we don't know how often
+            // this child function will be called and pushing will cause duplicate
+            // results to be pushed for all calls down the chain.
+            results[idx] = args;
+            return renderSources(results, idx + 1);
+          }}
+        </Source>
+      );
+    },
+    [props, renderResults, sources]
+  );
 
-  render() {
-    return this.renderSources(
-      this.props.sources,
-      new Array(this.props.sources.length),
-      0
-    );
-  }
+  return renderSources(new Array(sources.length), 0);
 }
 
 export default SearchSources;