EPICLab · nelsonni · Apr 5, 2023 · Jan 4, 2023 · Jan 4, 2023 · Jan 10, 2023
diff --git a/.editorconfig b/.editorconfig
@@ -1,8 +1,9 @@
 root = true
 
 [*]
+charset = utf-8
 indent_style = space
 indent_size = 2
-charset = utf-8
+end_of_line = lf
 trim_trailing_whitespace = false
 insert_final_newline = false
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "printWidth": 100,
+  "endOfLine": "lf",
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "postversion": "git push --atomic --tags",
     "lint": "eslint --ext .ts,.tsx .",
     "test": "jest",
-    "test:coverage": "jest --coverage --collectCoverageFrom=\"./src/**\"",
+    "test:coverage": "jest --coverage --collectCoverageFrom=",
+    "test:coverageAll": "jest --coverage --collectCoverageFrom=\"./src/**\"",
     "clean": "fse remove out; fse remove .webpack; fse remove dist",
     "clean:tests": "jest --clearCache; fse remove coverage/",
     "clean:builds": "yarn cache clean; yarn cache clean --mirror; fse remove yarn-error.log",
@@ -61,6 +62,7 @@
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
     "@types/react-transition-group": "^4.4.5",
+    "@types/redux-logger": "^3.0.9",
     "@types/redux-mock-store": "^1.0.3",
     "@types/semver": "^7.3.13",
     "@types/sha1": "^1.1.3",
@@ -121,6 +123,7 @@
     "parse-git-config": "^3.0.0",
     "parse-path": "^7.0.0",
     "parse-url": "^8.1.0",
+    "re-reselect": "^4.0.1",
     "react": "^17.0.2",
     "react-ace": "^10.1.0",
     "react-dnd": "^15.1.1",
@@ -131,7 +134,9 @@
     "react-transition-group": "^4.4.5",
     "reactflow": "^11.4.0",
     "redux": "^4.2.0",
+    "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
+    "reselect": "^4.1.7",
     "semver": "^7.3.8",
     "sha1": "^1.1.1",
     "uuid": "^9.0.0"

diff --git a/src/assets/style.css b/src/assets/style.css
@@ -77,11 +77,11 @@ body {
   align-items: center;
 }
 
-.card-header.unmerged {
+.card-header.flagged {
   background: rgba(218, 100, 115, 1);
 }
 
-.card-header.unmerged .title {
+.card-header.flagged .title {
   color: rgba(0, 0, 0, 0.54);
 }
 
@@ -274,7 +274,7 @@ img.diff_icon {
   color: rgb(200, 210, 220);
 }
 
-.branch-ribbon-container.unmerged {
+.branch-ribbon-container.flagged {
   background-color: rgba(218, 100, 115, 1);
   color: rgba(0, 0, 0, 0.54);
 }

diff --git a/src/components/Branches/BranchItem.tsx b/src/components/Branches/BranchItem.tsx
@@ -2,8 +2,8 @@ import { DeleteForever as Delete } from '@material-ui/icons';
 import React from 'react';
 import { ConnectableElement, DropTargetMonitor, useDrag, useDrop } from 'react-dnd';
 import { v4 } from 'uuid';
-import { getBranchMotif } from '../../containers/motif';
-import { removeUndefinedProperties } from '../../containers/utils';
+import { useBranchMotif } from '../../containers/hooks/useMotif';
+import { removeNullableProperties } from '../../containers/utils';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import branchSelectors from '../../store/selectors/branches';
 import repoSelectors from '../../store/selectors/repos';
@@ -31,6 +31,7 @@ const BranchItem = ({ repoId, branchId, deletable = false, highlight = false, on
     const branches = useAppSelector(state => branchSelectors.selectEntities(state));
     const branch = useAppSelector(state => branchSelectors.selectById(state, branchId));
     const repo = useAppSelector(state => repoSelectors.selectById(state, repoId));
+    const motif = useBranchMotif(branch);
     const dispatch = useAppDispatch();
 
     // Enable BranchItem as a drop source (i.e. allowing this component to be draggable)
@@ -83,8 +84,7 @@ const BranchItem = ({ repoId, branchId, deletable = false, highlight = false, on
         }
     }
 
-    const motif = branch ? getBranchMotif(branch) : undefined;
-    const optionals = removeUndefinedProperties({
+    const optionals = removeNullableProperties({
         color: motif?.color,
         labelInfo: deletable ? Delete : undefined,
         labelInfoClickHandler: deletable ? handleLabelInfoClick : undefined

diff --git a/src/components/Branches/BranchList.tsx b/src/components/Branches/BranchList.tsx
@@ -27,7 +27,7 @@ const BranchList = ({ cardId, repoId }: { cardId: UUID, repoId: UUID }) => {
     const card = useAppSelector(state => cardSelectors.selectById(state, cardId));
     const metafile = useAppSelector(state => metafileSelectors.selectById(state, card?.metafile ?? ''));
     const repo = useAppSelector(state => repoSelectors.selectById(state, repoId));
-    const repoBranches = useAppSelector(state => branchSelectors.selectByRepo(state, repo, true));
+    const repoBranches = useAppSelector(state => branchSelectors.selectByRepo(state, repo?.id ?? '', true));
     const branches = repoBranches.filter(branch => branch.ref !== 'HEAD').sort((a, b) => a.ref.localeCompare(b.ref));
     const dispatch = useAppDispatch();
 
@@ -41,7 +41,7 @@ const BranchList = ({ cardId, repoId }: { cardId: UUID, repoId: UUID }) => {
         console.log(`checkout: ${branchRef}`);
         if (card && metafile && repo) {
             try {
-                const updated = await dispatch(switchBranch({ metafileId: metafile.id, ref: branchRef, root: repo.root })).unwrap();
+                const updated = await dispatch(switchBranch({ metafileId: metafile.id, cardId: card.id, ref: branchRef, root: repo.root })).unwrap();
                 if (updated) dispatch(cardUpdated({
                     ...card,
                     name: updated.name,

diff --git a/src/components/Branches/BranchRibbon.tsx b/src/components/Branches/BranchRibbon.tsx
@@ -15,7 +15,7 @@ const BranchRibbon = ({ metafile, onClick }: { metafile: Metafile | undefined, o
       <div onClick={onClick}
         className={clsx('branch-ribbon-container', {
           'preview': loading,
-          'unmerged': branch?.status === 'unmerged',
+          'flagged': branch?.status === 'unmerged',
         })}>
         {loading ?
           <Skeleton variant='rect' aria-label='loading' animation='wave'>

diff --git a/src/components/Branches/BranchSelect.tsx b/src/components/Branches/BranchSelect.tsx
@@ -6,21 +6,6 @@ import { Repository } from '../../store/slices/repos';
 import { UUID } from '../../store/types';
 import { Branch } from '../../store/slices/branches';
 
-const emptyRepo: Repository = {
-    id: '',
-    name: '',
-    root: '',
-    corsProxy: '',
-    url: '',
-    default: '',
-    local: [],
-    remote: [],
-    oauth: 'github',
-    username: '',
-    password: '',
-    token: ''
-}
-
 type BranchSelectProps = {
     label: string;
     repo: Repository | undefined;
@@ -30,7 +15,7 @@ type BranchSelectProps = {
 }
 
 const BranchSelect = (props: BranchSelectProps) => {
-    const branches = useAppSelector(state => branchSelectors.selectByRepo(state, props.repo ? props.repo : emptyRepo, true));
+    const branches = useAppSelector(state => branchSelectors.selectByRepo(state, props.repo?.id ?? '', true));
     const branchLookup = useAppSelector(state => branchSelectors.selectEntities(state));
     const predicate = props.optionsFilter ? props.optionsFilter : undefined; // Cannot descriminate types from variables; see https://github.com/microsoft/TypeScript/issues/10530
     const options = (predicate ? branches.filter(b => predicate(b)) : branches).map(b => { return { label: b.id, value: b.ref }; });

diff --git a/src/components/Branches/Branches.tsx b/src/components/Branches/Branches.tsx
@@ -1,50 +1,56 @@
-import { makeStyles } from '@material-ui/core';
-import { ArrowDropDown, ArrowRight, Error } from '@material-ui/icons';
-import { TreeView } from '@material-ui/lab';
-import React from 'react';
-import { useAppSelector } from '../../store/hooks';
-import repoSelectors from '../../store/selectors/repos';
-import { StyledTreeItem } from '../StyledTreeComponent';
-import RepoItem from './RepoItem';
+import { makeStyles } from "@material-ui/core";
+import { ArrowDropDown, ArrowRight, Error } from "@material-ui/icons";
+import { TreeView } from "@material-ui/lab";
+import React from "react";
+import { useAppSelector } from "../../store/hooks";
+import repoSelectors from "../../store/selectors/repos";
+import { StyledTreeItem } from "../StyledTreeComponent";
+import RepoItem from "./RepoItem";
 
 export const useStyles = makeStyles({
-    formControl: {
-        color: 'rgba(171, 178, 191, 1.0)',
-        fontSize: 'small',
-        fontFamily: '\'Lato\', Georgia, Serif',
-    },
+  formControl: {
+    color: "rgba(171, 178, 191, 1.0)",
+    fontSize: "small",
+    fontFamily: "'Lato', Georgia, Serif",
+  },
 });
 
 /**
  * React Component to display a list of git repositories and the local and remote branches tracked within them.
- * 
+ *
  * @returns {React.Component} A React function component.
  */
 const Branches = () => {
-    const repos = useAppSelector(state => repoSelectors.selectAll(state));
-    const [expanded, setExpanded] = React.useState(repos[0] ? [repos[0].id] : []); // initial state; expand first listed repo
+  const repos = useAppSelector((state) => repoSelectors.selectAll(state));
+  const [expanded, setExpanded] = React.useState(repos[0] ? [repos[0].id] : []); // initial state; expand first listed repo
 
-    const handleToggle = (_event: React.ChangeEvent<Record<string, unknown>>, nodeIds: string[]) => setExpanded(nodeIds);
+  const handleToggle = (
+    _event: React.ChangeEvent<Record<string, unknown>>,
+    nodeIds: string[]
+  ) => setExpanded(nodeIds);
 
-    return (
-        <div className='list-component'>
-            <TreeView
-                defaultCollapseIcon={<ArrowDropDown />}
-                defaultExpandIcon={<ArrowRight />}
-                defaultEndIcon={<div style={{ width: 8 }} />}
-                expanded={expanded}
-                onNodeToggle={handleToggle}
-            >
-                {repos.length == 0 &&
-                    <StyledTreeItem key={'no-repo'} nodeId={'no-repo'}
-                        labelText={'[no repos tracked]'}
-                        labelIcon={Error}
-                    />
-                }
-                {repos.length > 0 && repos.map(repo => <RepoItem key={repo.id} repoId={repo.id} />)}
-            </TreeView>
-        </div>
-    );
-}
+  return (
+    <div className="list-component">
+      <TreeView
+        defaultCollapseIcon={<ArrowDropDown />}
+        defaultExpandIcon={<ArrowRight />}
+        defaultEndIcon={<div style={{ width: 8 }} />}
+        expanded={expanded}
+        onNodeToggle={handleToggle}
+      >
+        {repos.length == 0 && (
+          <StyledTreeItem
+            key={"no-repo"}
+            nodeId={"no-repo"}
+            labelText={"[no repos tracked]"}
+            labelIcon={Error}
+          />
+        )}
+        {repos.length > 0 &&
+          repos.map((repo) => <RepoItem key={repo.id} repoId={repo.id} />)}
+      </TreeView>
+    </div>
+  );
+};
 
-export default Branches;
+export default Branches;
diff --git a/src/components/Branches/RepoItem.tsx b/src/components/Branches/RepoItem.tsx
@@ -13,7 +13,7 @@ import { fetchMetafile } from '../../store/thunks/metafiles';
 
 const RepoItem = (props: { repoId: string }) => {
     const repo = useAppSelector(state => repoSelectors.selectById(state, props.repoId));
-    const branches = useAppSelector(state => branchSelectors.selectByRepo(state, repo, true));
+    const branches = useAppSelector(state => branchSelectors.selectByRepo(state, repo?.id ?? '', true));
     const sortedBranches = branches.filter(branch => branch.ref !== 'HEAD').sort((a, b) => a.ref.localeCompare(b.ref));
     const dispatch = useAppDispatch();
 

diff --git a/src/components/Browser/Browser.spec.tsx b/src/components/Browser/Browser.spec.tsx
@@ -5,7 +5,7 @@ import Browser from './Browser';
 describe('Browser', () => {
 
   it('Browser component is rendered', async () => {
-    render(<Browser card='1' />);
+    render(<Browser metafileId='1' />);
     expect(screen.getByPlaceholderText('URL')).toBeInTheDocument();
   });
 

diff --git a/src/components/Browser/Browser.tsx b/src/components/Browser/Browser.tsx
@@ -3,6 +3,7 @@ import React, { useCallback, useEffect } from 'react';
 import { makeStyles } from '@material-ui/core';
 import { useHistory } from '../../containers/hooks/useHistory';
 import UrlBar from './UrlBar';
+import { UUID } from '../../store/types';
 
 const useStyles = makeStyles((theme) => ({
   webviewContent: {
@@ -16,18 +17,18 @@ const useStyles = makeStyles((theme) => ({
 
 type Mode = 'light' | 'dark';
 
-const Browser = ({ card, mode = 'dark' }: { card: string, mode?: Mode }) => {
+const Browser = ({ metafileId: id, mode = 'dark' }: { metafileId: UUID, mode?: Mode }) => {
   const styles = useStyles({ mode: mode });
   const { state, set, goBack, goForward, canGoBack, canGoForward } = useHistory(new URL('https://epiclab.github.io/'));
 
   const refresh = () => {
-    const webview: Electron.WebviewTag | null = document.querySelector(`[id="${card}-webview"]`);
+    const webview: Electron.WebviewTag | null = document.querySelector(`[id="${id}-webview"]`);
     webview?.reload();
   }
 
   const go = (url: URL) => {
     if (state.present.href !== url.href) {
-      const webview: Electron.WebviewTag | null = document.querySelector(`[id="${card}-webview"]`);
+      const webview: Electron.WebviewTag | null = document.querySelector(`[id="${id}-webview"]`);
       webview?.loadURL(url.href);
       set(url);
     }
@@ -37,7 +38,7 @@ const Browser = ({ card, mode = 'dark' }: { card: string, mode?: Mode }) => {
     if (canGoBack) {
       const url = state.past[state.past.length - 1] as URL;
       goBack();
-      const webview: Electron.WebviewTag | null = document.querySelector(`[id="${card}-webview"]`);
+      const webview: Electron.WebviewTag | null = document.querySelector(`[id="${id}-webview"]`);
       webview?.loadURL(url.href);
     }
   }
@@ -46,7 +47,7 @@ const Browser = ({ card, mode = 'dark' }: { card: string, mode?: Mode }) => {
     if (canGoForward) {
       const url = state.future[0] as URL;
       goForward();
-      const webview: Electron.WebviewTag | null = document.querySelector(`[id="${card}-webview"]`);
+      const webview: Electron.WebviewTag | null = document.querySelector(`[id="${id}-webview"]`);
       webview?.loadURL(url.href);
     }
   }
@@ -56,13 +57,13 @@ const Browser = ({ card, mode = 'dark' }: { card: string, mode?: Mode }) => {
   }, [set, state.present.href]);
 
   useEffect(() => {
-    const webview: Electron.WebviewTag | null = document.querySelector(`[id="${card}-webview"]`);
+    const webview: Electron.WebviewTag | null = document.querySelector(`[id="${id}-webview"]`);
     webview?.addEventListener('did-navigate', handleNavigationEvent);
     return () => {
       webview?.removeEventListener('did-navigate', handleNavigationEvent);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [card]);
+  }, [id]);
 
   return (
     <>
@@ -71,7 +72,7 @@ const Browser = ({ card, mode = 'dark' }: { card: string, mode?: Mode }) => {
         canGoForward={canGoForward} forward={forward}
       />
       <div className={styles.webviewContent}>
-        <webview id={`${card}-webview`} src={'https://epiclab.github.io/'}
+        <webview id={`${id}-webview`} src={'https://epiclab.github.io/'}
           style={{ height: '100%', width: '100%', borderRadius: '10px!important' }} />
       </div>
     </>

diff --git a/src/components/Button/Commit.tsx b/src/components/Button/Commit.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { v4 } from 'uuid';
 import { IconButton, Tooltip } from '@material-ui/core';
 import { Done } from '@material-ui/icons';
@@ -27,6 +27,8 @@ import { isStaged } from '../../containers/utils';
 const CommitButton = ({ cardIds, enabled = true, mode = 'light' }: { cardIds: UUID[], enabled?: boolean, mode?: Mode }) => {
     const cards = useAppSelector(state => cardSelectors.selectByIds(state, cardIds));
     const metafiles = useAppSelector(state => metafileSelectors.selectByIds(state, cards.map(c => c.metafile)));
+    // const selectByIds = useMemo(metafileSelectors.makeSelectByIds, []); // create a memoized selector for each component instance, on mount
+    // const metafiles = useAppSelector(state => selectByIds(state, cards.map(c => c.metafile)));
     const staged = metafiles.filter(m => isVersionedMetafile(m) && isStaged(m.status));
     const classes = useIconButtonStyle({ mode: mode });
     const dispatch = useAppDispatch();

diff --git a/src/components/Button/Refresh.tsx b/src/components/Button/Refresh.tsx
@@ -3,10 +3,11 @@ import { Refresh } from '@material-ui/icons';
 import React from 'react';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import metafileSelectors from '../../store/selectors/metafiles';
-import { isFilebasedMetafile, isVersionedMetafile } from '../../store/slices/metafiles';
+import { isFilebasedMetafile } from '../../store/slices/metafiles';
 import { updateFilebasedMetafile, updateVersionedMetafile } from '../../store/thunks/metafiles';
 import { UUID } from '../../store/types';
 import { Mode, useIconButtonStyle } from './useStyledIconButton';
+import { isDefined } from '../../containers/utils';
 
 /**
  * Button for refreshing filebased and versioned fields in metafiles.
@@ -25,9 +26,9 @@ const RefreshButton = ({ metafileIds, enabled = true, mode = 'light' }: { metafi
     const refresh = async (event: React.MouseEvent) => {
         event.stopPropagation(); // prevent propogating the click event to underlying components that might have click event handlers
         return await Promise.all(metafiles.map(async metafile => {
-            if (metafile) {
-                if (isFilebasedMetafile(metafile)) await dispatch(updateFilebasedMetafile(metafile));
-                if (isVersionedMetafile(metafile)) await dispatch(updateVersionedMetafile(metafile));
+            if (isDefined(metafile) && isFilebasedMetafile(metafile)) {
+                await dispatch(updateFilebasedMetafile(metafile));
+                await dispatch(updateVersionedMetafile(metafile));
             }
         }));
     }