feat: use React.FC

Author: KatoakDR

electron/renderer/components/chrome/chrome.tsx

@@ -2,14 +2,22 @@
 
 import { EuiProvider, EuiThemeColorMode } from '@elastic/eui';
 import createCache from '@emotion/cache';
-import { FunctionComponent } from 'react';
+import { ReactNode } from 'react';
 import { useTheme } from '../theme/theme';
 
+interface ChromeProviderProps {
+  children?: ReactNode;
+}
+
 /**
  * Renders the UI that surrounds the page content.
  * Must be nested within the `ThemeProvider`.
  */
-export const ChromeProvider: FunctionComponent<any> = ({ children }) => {
+const ChromeProvider: React.FC<ChromeProviderProps> = (
+  props: ChromeProviderProps
+) => {
+  const { children } = props;
+
   const { colorMode } = useTheme();
 
   /**
@@ -45,3 +53,5 @@ function getNodeBySelector(selector: string): Node | undefined {
     return document.querySelector(selector) ?? undefined;
   }
 }
+
+export { ChromeProvider };

electron/renderer/components/logger/logger.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, createContext, useContext, useEffect } from 'react';
+import { ReactNode, createContext, useContext, useEffect } from 'react';
 import { Logger } from '../../../common/logger/logger.types';
 import {
   createLogger,
@@ -20,9 +20,16 @@ const LoggerContext = createContext<LoggerContextValue>({
   logger,
   createLogger,
 });
-LoggerContext.displayName = 'LoggerContext'; // for dev tools
 
-export const LoggerProvider: FunctionComponent<any> = ({ children }) => {
+interface LoggerProviderProps {
+  children: ReactNode;
+}
+
+const LoggerProvider: React.FC<LoggerProviderProps> = (
+  props: LoggerProviderProps
+) => {
+  const { children } = props;
+
   useEffect(() => {
     // Once client-side, start monitoring unhandled exceptions on the window.
     startMonitoringUnhandledExceptions();
@@ -38,7 +45,7 @@ export const LoggerProvider: FunctionComponent<any> = ({ children }) => {
   );
 };
 
-export const useLogger = (scope?: string): LoggerContextValue => {
+const useLogger = (scope?: string): LoggerContextValue => {
   const context = useContext(LoggerContext);
   if (scope) {
     return {
@@ -48,3 +55,5 @@ export const useLogger = (scope?: string): LoggerContextValue => {
   }
   return context;
 };
+
+export { LoggerProvider, useLogger };

electron/renderer/components/theme/theme.tsx

@@ -1,7 +1,7 @@
 // https://github.com/elastic/next-eui-starter/blob/master/src/components/theme.tsx
 
 import {
-  FunctionComponent,
+  ReactNode,
   createContext,
   useContext,
   useEffect,
@@ -23,9 +23,16 @@ interface ThemeContextValue {
 }
 
 const ThemeContext = createContext<ThemeContextValue>({});
-ThemeContext.displayName = 'ThemeContext'; // for dev tools
 
-export const ThemeProvider: FunctionComponent<any> = ({ children }) => {
+interface ThemeProviderProps {
+  children?: ReactNode;
+}
+
+const ThemeProvider: React.FC<ThemeProviderProps> = (
+  props: ThemeProviderProps
+) => {
+  const { children } = props;
+
   const [colorMode, setColorMode] = useState(getDefaultThemeName());
 
   // On initial mount in the browser, use any theme from local storage.
@@ -45,6 +52,8 @@ export const ThemeProvider: FunctionComponent<any> = ({ children }) => {
   );
 };
 
-export const useTheme = (): ThemeContextValue => {
+const useTheme = (): ThemeContextValue => {
   return useContext(ThemeContext);
 };
+
+export { ThemeProvider, useTheme };