Remove React.FunctionalComponent type defs from all components to pre…

…vent unintended children being rendered

src/components/DropSelect.tsx

@@ -23,7 +23,7 @@ type DropSelectProps = {
     width?: number | undefined;
 }
 
-const DropSelect: React.FunctionComponent<DropSelectProps> = props => {
+const DropSelect = (props: DropSelectProps) => {
     const classes = useStyles();
 
     return (

src/components/Modal/ErrorDialog.tsx

@@ -4,7 +4,7 @@ import { Dialog, DialogTitle, Button, DialogContent, DialogContentText } from '@
 import { metafileRemoved } from '../../store/slices/metafiles';
 import { Modal } from '../../store/slices/modals';
 
-const ErrorDialog: React.FunctionComponent<Modal> = props => {
+const ErrorDialog = (props: Modal) => {
   const dispatch = useDispatch();
   const message = props.options && props.options['message'] as string;
 

src/components/Modal/ModalComponent.tsx

@@ -10,7 +10,7 @@ import NewCardDialog from './NewCardDialog';
 import Notification from './Notification';
 import SourcePickerDialog from './SourcePickerDialog';
 
-const ModalComponent: React.FunctionComponent<Modal> = props => {
+const ModalComponent = (props: Modal) => {
   switch (props.type) {
     case 'DiffPicker':
       return (<DiffPickerDialog {...props} />);

src/components/Modal/NewCardDialog.tsx

@@ -59,7 +59,7 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-const NewCardDialog: React.FunctionComponent<Modal> = props => {
+const NewCardDialog = (props: Modal) => {
   const classes = useStyles();
   const dispatch = useAppDispatch();
   const filetypes = useAppSelector((state: RootState) => filetypeSelectors.selectAll(state));

src/components/Modal/Notification.tsx

@@ -4,7 +4,7 @@ import { Close } from '@material-ui/icons';
 import { useAppDispatch } from '../../store/hooks';
 import { Modal, modalRemoved } from '../../store/slices/modals';
 
-const Notification: React.FunctionComponent<Modal> = props => {
+const Notification = (props: Modal) => {
     const message = props.options && props.options['message'] as string;
     const dispatch = useAppDispatch();
 

src/components/NavMenu.tsx

@@ -14,7 +14,7 @@ export type NavItemProps = {
   click: (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
 }
 
-export const NavItem: React.FunctionComponent<NavItemProps> = ({ label, click, disabled }) => {
+export const NavItem = ({ label, click, disabled }: NavItemProps) => {
   return (
     <MenuItem onClick={click} {...removeUndefinedProperties({ disabled: disabled })}>{label}</ MenuItem>
   );
@@ -25,7 +25,7 @@ type NavMenuProps = {
   submenu: NavItemProps[];
 }
 
-export const NavMenu: React.FunctionComponent<NavMenuProps> = ({ label, submenu }) => {
+export const NavMenu = ({ label, submenu }: NavMenuProps) => {
   const [open, setOpen] = React.useState(false);
   const anchorRef = React.useRef<HTMLButtonElement>(null);
 

src/components/SourceControl/SourceControlReverse.tsx

@@ -8,7 +8,7 @@ import DataField from '../Card/DataField';
 import { Card } from '../../store/slices/cards';
 
 
-const SourceControlReverse: React.FunctionComponent<Card> = props => {
+const SourceControlReverse = (props: Card) => {
     const metafile = useAppSelector((state: RootState) => metafileSelectors.selectById(state, props.metafile));
     const repo = useAppSelector((state: RootState) => repoSelectors.selectById(state, metafile && metafile.repo ? metafile.repo : ''));
     const branch = useAppSelector((state: RootState) => branchSelectors.selectById(state, metafile && metafile.branch ? metafile.branch : ''));

src/components/Stack/StackPreview.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { usePreview } from 'react-dnd-preview';
 import { Card } from '../../store/slices/cards';
 import { Stack } from '../../store/slices/stacks';
@@ -14,7 +14,7 @@ type StackPreviewProps = {
     cards: Card[];
 }
 
-const StackPreview: React.FunctionComponent<StackPreviewProps> = props => {
+const StackPreview = (props: PropsWithChildren<StackPreviewProps>) => {
     const { display, itemType, style } = usePreview();
 
     if (!display) {

src/components/StatusIcon.tsx

@@ -41,7 +41,7 @@ export type Status =
     | 'Passing'
     | 'Failing';
 
-const StatusIcon: React.FunctionComponent<{ status: Status }> = props => {
+const StatusIcon = (props: { status: Status }) => {
     switch (props.status) {
         case 'Running':
             return <StyledCircularProgress size={18} />;

src/components/StyledTreeComponent.tsx

@@ -75,7 +75,7 @@ export const useTreeItemStyles = makeStyles((theme: Theme) =>
   })
 );
 
-export const StyledTreeItem: React.FunctionComponent<StyledTreeItemProps> = props => {
+export const StyledTreeItem = (props: StyledTreeItemProps) => {
   const { labelText, labelIcon: LabelIcon, labelInfo: LabelInfo, labelInfoClickHandler,
     color, bgColor, enableHover, labelInfoText, ...other } = props;
   const [hover, setHover] = useState(false);

src/store/cache/FSCache.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useEffect } from 'react';
+import React, { createContext, PropsWithChildren, ReactNode, useEffect } from 'react';
 import { PathLike } from 'fs-extra';
 import { FSWatcher, watch } from 'chokidar';
 import useMap from '../../containers/hooks/useMap';
@@ -18,7 +18,7 @@ export const FSCache = createContext<FSCacheType>({
     cache: new Map<PathLike, string>()
 });
 
-export const FSCacheProvider: React.FunctionComponent = props => {
+export const FSCacheProvider = (props: PropsWithChildren<ReactNode>) => {
     const cached = useAppSelector((state: RootState) => cachedSelectors.selectAll(state));
     const [cache, cacheActions] = useMap<PathLike, string>([]); // filepath to cached file content
     const [watchers, watcherActions] = useMap<PathLike, FSWatcher>([]); // filepath to file watcher