Remove unnecessary RootState typing when calling useAppSelector (#1029)

src/components/Canvas/Canvas.tsx

@@ -18,7 +18,7 @@ import stackSelectors from '../../store/selectors/stacks';
 import { cardUpdated } from '../../store/slices/cards';
 import { Modal, modalAdded } from '../../store/slices/modals';
 import { stackUpdated } from '../../store/slices/stacks';
-import redux, { RootState } from '../../store/store';
+import redux from '../../store/store';
 import { addBranchCard } from '../../store/thunks/cards';
 import { popCards } from '../../store/thunks/stacks';
 import CardComponent from '../Card';
@@ -52,16 +52,16 @@ const useStyles = makeStyles((theme: Theme) =>
 const isMac = process.platform === 'darwin';
 
 const Canvas = () => {
-  const cardsArray = useAppSelector((state: RootState) => cardSelectors.selectAll(state));
-  const stacksArray = useAppSelector((state: RootState) => stackSelectors.selectAll(state));
-  const stacks = useAppSelector((state: RootState) => stackSelectors.selectEntities(state));
-  const cards = useAppSelector((state: RootState) => cardSelectors.selectEntities(state));
-  const filetypes = useAppSelector((state: RootState) => filetypeSelectors.selectAll(state));
-  const metafiles = useAppSelector((state: RootState) => metafileSelectors.selectAll(state));
-  const cached = useAppSelector((state: RootState) => cachedSelectors.selectAll(state));
-  const repos = useAppSelector((state: RootState) => repoSelectors.selectAll(state));
-  const branches = useAppSelector((state: RootState) => branchSelectors.selectAll(state));
-  const modals = useAppSelector((state: RootState) => modalSelectors.selectAll(state));
+  const cardsArray = useAppSelector(state => cardSelectors.selectAll(state));
+  const stacksArray = useAppSelector(state => stackSelectors.selectAll(state));
+  const stacks = useAppSelector(state => stackSelectors.selectEntities(state));
+  const cards = useAppSelector(state => cardSelectors.selectEntities(state));
+  const filetypes = useAppSelector(state => filetypeSelectors.selectAll(state));
+  const metafiles = useAppSelector(state => metafileSelectors.selectAll(state));
+  const cached = useAppSelector(state => cachedSelectors.selectAll(state));
+  const repos = useAppSelector(state => repoSelectors.selectAll(state));
+  const branches = useAppSelector(state => branchSelectors.selectAll(state));
+  const modals = useAppSelector(state => modalSelectors.selectAll(state));
   const dispatch = useAppDispatch();
   const styles = useStyles();
 

src/components/Card/CardComponent.tsx

@@ -4,7 +4,6 @@ import { CSSTransition } from 'react-transition-group';
 import clsx from 'clsx';
 import { sep } from 'path';
 import { Badge, Typography } from '@material-ui/core';
-import { RootState } from '../../store/store';
 import { createStack, pushCards, popCards } from '../../store/thunks/stacks';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import cardSelectors from '../../store/selectors/cards';
@@ -49,9 +48,9 @@ const Header = (props: PropsWithChildren<{ title: string, expanded: boolean, exp
 
 const CardComponent = (card: Card) => {
   const [flipped, setFlipped] = useState(false);
-  const cards = useAppSelector((state: RootState) => cardSelectors.selectEntities(state));
-  const stacks = useAppSelector((state: RootState) => stackSelectors.selectEntities(state));
-  const metafiles = useAppSelector((state: RootState) => metafileSelectors.selectEntities(state));
+  const cards = useAppSelector(state => cardSelectors.selectEntities(state));
+  const stacks = useAppSelector(state => stackSelectors.selectEntities(state));
+  const metafiles = useAppSelector(state => metafileSelectors.selectEntities(state));
   const dispatch = useAppDispatch();
 
   const expand = () => {

src/components/Card/Loading.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { DateTime } from 'luxon';
 import DataField from './DataField';
 import metafileSelectors from '../../store/selectors/metafiles';
-import { RootState } from '../../store/store';
 import { useAppSelector } from '../../store/hooks';
 import { CircularProgress, makeStyles } from '@material-ui/core';
 import { Card } from '../../store/slices/cards';
@@ -36,7 +35,7 @@ const Loading = () => {
 }
 
 export const LoadingReverse = (props: Card) => {
-    const metafile = useAppSelector((state: RootState) => metafileSelectors.selectById(state, props.metafile));
+    const metafile = useAppSelector(state => metafileSelectors.selectById(state, props.metafile));
 
     return (
         <>

src/components/Diff/Diff.tsx

@@ -6,7 +6,6 @@ import 'ace-builds/src-noconflict/ext-searchbox';
 import 'ace-builds/src-noconflict/ext-beautify';
 import 'ace-builds/webpack-resolver'; // resolver for dynamically loading modes, requires webpack file-loader module
 
-import { RootState } from '../../store/store';
 import { diff } from '../../containers/diff';
 import { useAppSelector } from '../../store/hooks';
 import metafileSelectors from '../../store/selectors/metafiles';
@@ -27,11 +26,11 @@ const extractMarkers = (diffOutput: string): IMarker[] => {
 };
 
 const Diff = (props: { metafile: UUID }) => {
-  const metafile = useAppSelector((state: RootState) => metafileSelectors.selectById(state, props.metafile));
-  const originalCard = useAppSelector((state: RootState) => cardSelectors.selectById(state, metafile?.targets?.[0] ? metafile.targets[0] : ''));
-  const original = useAppSelector((state: RootState) => metafileSelectors.selectById(state, originalCard ? originalCard.metafile : ''));
-  const updatedCard = useAppSelector((state: RootState) => cardSelectors.selectById(state, metafile?.targets?.[1] ? metafile.targets[1] : ''));
-  const updated = useAppSelector((state: RootState) => metafileSelectors.selectById(state, updatedCard ? updatedCard.metafile : ''));
+  const metafile = useAppSelector(state => metafileSelectors.selectById(state, props.metafile));
+  const originalCard = useAppSelector(state => cardSelectors.selectById(state, metafile?.targets?.[0] ? metafile.targets[0] : ''));
+  const original = useAppSelector(state => metafileSelectors.selectById(state, originalCard ? originalCard.metafile : ''));
+  const updatedCard = useAppSelector(state => cardSelectors.selectById(state, metafile?.targets?.[1] ? metafile.targets[1] : ''));
+  const updated = useAppSelector(state => metafileSelectors.selectById(state, updatedCard ? updatedCard.metafile : ''));
 
   const [diffOutput, setDiffOutput] = useState(diff(original?.content ? original.content : '', updated?.content ? updated.content : ''));
   const [markers, setMarkers] = useState(extractMarkers(diffOutput));

src/components/Diff/DiffReverse.tsx

@@ -3,13 +3,12 @@ import { isDefined } from '../../containers/utils';
 import { useAppSelector } from '../../store/hooks';
 import metafileSelectors from '../../store/selectors/metafiles';
 import { Card } from '../../store/slices/cards';
-import { RootState } from '../../store/store';
 import MetadataViewButton from '../Button/MetadataView';
 import RefreshButton from '../Button/Refresh';
 import Metadata from '../Card/Metadata';
 
 const DiffReverse = (props: Card) => {
-    const metafile = useAppSelector((state: RootState) => metafileSelectors.selectById(state, props.metafile));
+    const metafile = useAppSelector(state => metafileSelectors.selectById(state, props.metafile));
     const [view, setView] = useState('metadata');
 
     return (

src/components/Editor/EditorReverse.tsx

@@ -4,7 +4,6 @@ import { useAppSelector } from '../../store/hooks';
 import metafileSelectors from '../../store/selectors/metafiles';
 import repoSelectors from '../../store/selectors/repos';
 import { Card } from '../../store/slices/cards';
-import { RootState } from '../../store/store';
 import BranchList from '../Branches/BranchList';
 import BranchesViewButton from '../Button/BranchesView';
 import MetadataViewButton from '../Button/MetadataView';
@@ -13,7 +12,7 @@ import SourceControlButton from '../Button/SourceControl';
 import Metadata from '../Card/Metadata';
 
 const EditorReverse = (props: Card) => {
-    const metafile = useAppSelector((state: RootState) => metafileSelectors.selectById(state, props.metafile));
+    const metafile = useAppSelector(state => metafileSelectors.selectById(state, props.metafile));
     const repo = useAppSelector(state => repoSelectors.selectById(state, metafile?.repo ?? ''));
     const [view, setView] = useState('branches');
 

src/components/Explorer/Explorer.tsx

@@ -5,14 +5,13 @@ import metafileSelectors from '../../store/selectors/metafiles';
 import BranchRibbon from '../Branches/BranchRibbon';
 import Directory from './Directory';
 import FileComponent from './FileComponent';
-import { RootState } from '../../store/store';
 import { useAppSelector } from '../../store/hooks';
 import { UUID } from '../../store/types';
 import { isDescendant } from '../../containers/io';
 
 const Explorer = (props: { metafile: UUID }) => {
-  const metafile = useAppSelector((state: RootState) => metafileSelectors.selectById(state, props.metafile));
-  const descendants = useAppSelector((state: RootState) => metafileSelectors.selectByRoot(state, metafile?.path ?? ''));
+  const metafile = useAppSelector(state => metafileSelectors.selectById(state, props.metafile));
+  const descendants = useAppSelector(state => metafileSelectors.selectByRoot(state, metafile?.path ?? ''));
   const directories = descendants.filter(child => isDescendant(metafile?.path ?? '', child.path, true) && child.filetype === 'Directory' &&
     !child.name.startsWith('.') && child.name !== 'node_modules' && child.id !== metafile?.id);
   const files = descendants.filter(child => isDescendant(metafile?.path ?? '', child.path, true) && child.filetype !== 'Directory')

src/components/GitExplorer/DirectExplorer.tsx

@@ -3,7 +3,6 @@ import { Button, createStyles, Dialog, makeStyles, TextField, Theme } from '@mat
 import { Modal, modalRemoved } from '../../store/slices/modals';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { createBranch, listBranch } from '../../containers/git';
-import { RootState } from '../../store/store';
 import repoSelectors from '../../store/selectors/repos';
 
 export const useStyles = makeStyles((theme: Theme) =>
@@ -47,7 +46,7 @@ export const useStyles = makeStyles((theme: Theme) =>
 const DirectExplorer = (props: Modal) => {
     const styles = useStyles();
     const dispatch = useAppDispatch();
-    const repos = useAppSelector((state: RootState) => repoSelectors.selectAll(state));
+    const repos = useAppSelector(state => repoSelectors.selectAll(state));
     const [name, setName] = useState('');
 
     const handleClose = () => dispatch(modalRemoved(props.id));

src/components/GitGraph/GitGraphSelect.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { shallowEqual } from 'react-redux';
 import { createStyles, FormControl, makeStyles, MenuItem, Select, Theme, withStyles } from '@material-ui/core';
 import InputBase from '@material-ui/core/InputBase';
-import { RootState } from '../../store/store';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { v4 } from 'uuid';
 import repoSelectors from '../../store/selectors/repos';
@@ -40,9 +39,9 @@ const useStyles = makeStyles((theme: Theme) =>
 );
 
 const GitGraphSelect = () => {
-  const repos = useAppSelector((state: RootState) => repoSelectors.selectAll(state));
+  const repos = useAppSelector(state => repoSelectors.selectAll(state));
   const [selected, setSelected] = useState('');
-  const graphs: Modal[] = useAppSelector((state: RootState) => modalSelectors.selectByType(state, 'GitGraph'), shallowEqual);
+  const graphs: Modal[] = useAppSelector(state => modalSelectors.selectByType(state, 'GitGraph'), shallowEqual);
   const dispatch = useAppDispatch();
   const styles = useStyles();
 

src/components/MergeDialog/MergeDialog.tsx

@@ -10,7 +10,6 @@ import repoSelectors from '../../store/selectors/repos';
 import { branchUpdated, MergingBranch } from '../../store/slices/branches';
 import { isFilebasedMetafile } from '../../store/slices/metafiles';
 import { Modal, modalRemoved } from '../../store/slices/modals';
-import { RootState } from '../../store/store';
 import { addBranch, updateBranches } from '../../store/thunks/branches';
 import { buildCard } from '../../store/thunks/cards';
 import { fetchMetafile, updateVersionedMetafile } from '../../store/thunks/metafiles';
@@ -50,10 +49,10 @@ const useStyles = makeStyles((theme: Theme) =>
 type MissingGitConfigs = string[] | undefined;
 
 const MergeDialog = (props: Modal) => {
-    const cards = useAppSelector((state: RootState) => cardSelectors.selectAll(state));
-    // const cardsByMetafile = useAppSelector((state: RootState) => cardSelectors.selectByMetafi
-    const repos = useAppSelector((state: RootState) => repoSelectors.selectEntities(state));
-    const branches = useAppSelector((state: RootState) => branchSelectors.selectEntities(state));
+    const cards = useAppSelector(state => cardSelectors.selectAll(state));
+    // const cardsByMetafile = useAppSelector(state => cardSelectors.selectByMetafi
+    const repos = useAppSelector(state => repoSelectors.selectEntities(state));
+    const branches = useAppSelector(state => branchSelectors.selectEntities(state));
     const dispatch = useAppDispatch();
     const styles = useStyles();
 

src/components/Modal/CommitDialog.tsx

@@ -7,7 +7,6 @@ import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { Modal, modalRemoved } from '../../store/slices/modals';
 
 import metafileSelectors from '../../store/selectors/metafiles';
-import { RootState } from '../../store/store';
 import repoSelectors from '../../store/selectors/repos';
 import { isFilebasedMetafile, isFileMetafile, isVersionedMetafile } from '../../store/slices/metafiles';
 import { fetchBranches } from '../../store/thunks/branches';
@@ -59,8 +58,8 @@ const CommitDialog = (props: Modal) => {
     const dispatch = useAppDispatch();
     const styles = useStyles();
     const [message, setMessage] = useState('');
-    const metafiles = useAppSelector((state: RootState) => metafileSelectors.selectAll(state));
-    const repos = useAppSelector((state: RootState) => repoSelectors.selectAll(state));
+    const metafiles = useAppSelector(state => metafileSelectors.selectAll(state));
+    const repos = useAppSelector(state => repoSelectors.selectAll(state));
     const staged = metafiles.filter(m =>
         props.options?.['repo'] === m.repo &&
         props.options?.['branch'] === m.branch &&

src/components/Modal/DiffPickerDialog.tsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import * as MUI from '@material-ui/core';
 import { DateTime } from 'luxon';
 import { UUID } from '../../store/types';
-import { RootState } from '../../store/store';
 import { Modal, modalRemoved } from '../../store/slices/modals';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { buildCard } from '../../store/thunks/cards';
@@ -12,9 +11,9 @@ import metafileSelectors from '../../store/selectors/metafiles';
 import branchSelectors from '../../store/selectors/branches';
 
 const DiffPickerDialog = (props: Modal) => {
-  const cards = useAppSelector((state: RootState) => cardSelectors.selectAll(state));
-  const metafiles = useAppSelector((state: RootState) => metafileSelectors.selectEntities(state));
-  const branches = useAppSelector((state: RootState) => branchSelectors.selectEntities(state));
+  const cards = useAppSelector(state => cardSelectors.selectAll(state));
+  const metafiles = useAppSelector(state => metafileSelectors.selectEntities(state));
+  const branches = useAppSelector(state => branchSelectors.selectEntities(state));
   const dispatch = useAppDispatch();
   const [selectedLeft, setSelectedLeft] = useState<UUID>('');
   const [selectedRight, setSelectedRight] = useState<UUID>('');

src/components/Modal/NewBranchDialog.tsx

@@ -3,7 +3,6 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import { Button, Dialog, Divider, Grid, TextField, Typography } from '@material-ui/core';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { Modal, modalRemoved } from '../../store/slices/modals';
-import { RootState } from '../../store/store';
 import branchSelectors from '../../store/selectors/branches';
 import repoSelectors from '../../store/selectors/repos';
 import { addBranch, updateBranches } from '../../store/thunks/branches';
@@ -58,8 +57,8 @@ const useStyles = makeStyles((theme: Theme) =>
 const NewBranchDialog = (props: Modal) => {
     const styles = useStyles();
     const dispatch = useAppDispatch();
-    const repo = useAppSelector((state: RootState) => repoSelectors.selectById(state, props.target ? props.target : ''));
-    const branches = useAppSelector((state: RootState) => branchSelectors.selectByRepo(state, repo, true));
+    const repo = useAppSelector(state => repoSelectors.selectById(state, props.target ? props.target : ''));
+    const branches = useAppSelector(state => branchSelectors.selectByRepo(state, repo, true));
     const [branchName, setBranchName] = React.useState('');
     const isNoneDuplicate = !branches?.find(b => b.ref === branchName);
 

src/components/Modal/NewCardDialog.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import { Button, Dialog, Divider, FormControl, Grid, InputLabel, MenuItem, Select, TextField, Typography } from '@material-ui/core';
-import { RootState } from '../../store/store';
 import * as io from '../../containers/io';
 import { flattenArray } from '../../containers/flatten';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
@@ -61,7 +60,7 @@ const useStyles = makeStyles((theme: Theme) =>
 const NewCardDialog = (props: Modal) => {
   const styles = useStyles();
   const dispatch = useAppDispatch();
-  const filetypes = useAppSelector((state: RootState) => filetypeSelectors.selectAll(state));
+  const filetypes = useAppSelector(state => filetypeSelectors.selectAll(state));
   const exts: string[] = flattenArray(filetypes.map(filetype => filetype.extensions)); // List of all valid extensions found w/in filetypes
   // configExts is a list of all .config extensions found within exts:
   const configExts: string[] = flattenArray((filetypes.map(filetype =>

src/components/Modal/SourcePickerDialog.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import { Button, Dialog, Divider, Grid, Typography } from '@material-ui/core';
-import { RootState } from '../../store/store';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import repoSelectors from '../../store/selectors/repos';
 import { Modal, modalRemoved } from '../../store/slices/modals';
@@ -36,8 +35,8 @@ export const useStyles = makeStyles((theme: Theme) =>
 
 const SourcePickerDialog = (props: Modal) => {
   const styles = useStyles();
-  const repos = useAppSelector((state: RootState) => repoSelectors.selectEntities(state));
-  const branches = useAppSelector((state: RootState) => branchSelectors.selectEntities(state));
+  const repos = useAppSelector(state => repoSelectors.selectEntities(state));
+  const branches = useAppSelector(state => branchSelectors.selectEntities(state));
   const dispatch = useAppDispatch();
   const [selectedRepo, setSelectedRepo] = useState<UUID>('');
   const [selectedBranch, setSelectedBranch] = useState<UUID>('');