Small refactors (#174)

* Create theme file and other small tweaks - Separate out the theme into its own file - Fix typo - Move a button to a more logical place in the code (the css places it correctly regardless so the code placement is just helpful to those reading the code) * Rename CodeMirrorComponent -> CodeEditor and ConsoleComponent -> Console * Move tests folder out of src * Rename FSHOutput -> FSHEditor and JSONOutput -> JSONEditor
FHIR · Aug 15, 2024 · 1544a2d · 1544a2d
1 parent 2ef4e18
commit 1544a2d
Show file tree

Hide file tree

Showing 28 changed files with 143 additions and 144 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -4,14 +4,15 @@ import FileSaver from 'file-saver';
 import JSZip from 'jszip';
 import { debounce, partition } from 'lodash';
 import clsx from 'clsx';
-import { createTheme, makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import { Grid, ThemeProvider } from '@material-ui/core';
 import { expandLink } from './utils/BitlyWorker';
 import TopBar from './components/TopBar';
-import JSONOutput from './components/JSONOutput';
-import FSHOutput from './components/FSHOutput';
-import ConsoleComponent from './components/ConsoleComponent';
+import JSONEditor from './components/JSONEditor';
+import FSHEditor from './components/FSHEditor';
+import Console from './components/Console';
 import FSHControls from './components/FSHControls';
+import theme from './theme';
 
 const useStyles = makeStyles(() => ({
   container: {
@@ -31,7 +32,7 @@ const useStyles = makeStyles(() => ({
     width: '4px',
     cursor: 'col-resize',
     '&:hover': {
-      background: colors.lightBlue
+      background: theme.palette.common.lightBlue
     }
   },
   resizeBlue: {
@@ -61,60 +62,7 @@ const useStyles = makeStyles(() => ({
   }
 }));
 
-const colors = {
-  lighterBlue: '#D8E2EA',
-  lightBlue: '#487AA2',
-  blue: '#30638e',
-  darkerBlue: '#143E61',
-  editorGrey: '#263238',
-  lightestGrey: '#E7ECEE',
-  lightGrey: '#D0D9DD',
-  grey: '#575B5C',
-  darkerGrey: '#3D4345',
-  darkestGrey: '#121D21',
-  red: '#FD6668'
-};
-
-export const theme = createTheme({
-  palette: {
-    success: {
-      main: colors.blue,
-      dark: colors.darkerBlue,
-      light: colors.lightBlue
-    },
-    common: colors
-  },
-  typography: {
-    fontFamily: 'Open Sans'
-  },
-  overrides: {
-    MuiTooltip: {
-      tooltip: {
-        backgroundColor: colors.darkestGrey,
-        fontSize: '13px'
-      },
-      arrow: {
-        color: colors.darkestGrey
-      }
-    },
-    MuiButton: {
-      text: {
-        textTransform: 'none',
-        fontWeight: 600
-      }
-    },
-    MuiIconButton: {
-      root: {
-        '&:hover': {
-          backgroundColor: colors.grey
-        }
-      }
-    }
-  }
-});
-
 const githubURL = 'https://raw.githubusercontent.com/FSHSchool/FSHOnline-Examples/main/';
-const log = console.log; //eslint-disable-line no-unused-vars
 const defaultInfoMessage = 'There are no messages to display in the console.';
 const defaultProblemMessage = 'There are no problems to display in the console.';
 let infoMessages = [defaultInfoMessage];
@@ -140,7 +88,7 @@ console.log = function getMessages(message) {
 };
 
 /* 
-Parses metadata into a seperate object and converts the manifest into a form that can
+Parses metadata into a separate object and converts the manifest into a form that can
 be consumed by the TreeView component
 */
 function convertManifest(childrenArr) {
@@ -207,8 +155,8 @@ export default function App(props) {
   const [inputFSHText, setInputFSHText] = useState('');
   const [inputFHIRText, setInputFHIRText] = useState(['']);
   const [initialText, setInitialText] = useState('');
-  const [isWaitingForFHIROutput, setIsWaitingForFHIROutput] = useState(false);
-  const [isWaitingForFSHOutput, setIsWaitingForFSHOutput] = useState(false);
+  const [isWaitingForFHIR, setIsWaitingForFHIR] = useState(false);
+  const [isWaitingForFSH, setIsWaitingForFSH] = useState(false);
   const [expandConsole, setExpandConsole] = useState(false);
   const [exampleConfig, setExampleConfig] = useState([]);
   const [exampleFilePaths, setExampleFilePaths] = useState({});
@@ -267,13 +215,13 @@ export default function App(props) {
 
   function handleSUSHIControls(showNewText, sushiOutput, isWaiting) {
     setShowNewFHIRText(showNewText);
-    setInputFHIRText(sushiOutput); // JSONOutput component handles resetting initial text, so don't reset here
-    setIsWaitingForFHIROutput(isWaiting);
+    setInputFHIRText(sushiOutput); // JSONEditor component handles resetting initial text, so don't reset here
+    setIsWaitingForFHIR(isWaiting);
   }
 
-  function handleGoFSHControls(fshOutput, isWaiting) {
-    setIsWaitingForFSHOutput(isWaiting);
-    setInitialText(fshOutput === '' ? null : fshOutput); // Reset initial text to null if empty in order to display placeholder text
+  function handleGoFSHControls(fshText, isWaiting) {
+    setIsWaitingForFSH(isWaiting);
+    setInitialText(fshText === '' ? null : fshText); // Reset initial text to null if empty in order to display placeholder text
   }
 
   function updateInputFSHTextValue(text) {
@@ -412,7 +360,7 @@ export default function App(props) {
             resetLogMessages={resetLogMessages}
             exampleConfig={exampleConfig}
             exampleMetadata={exampleFilePaths}
-            isWaiting={isWaitingForFSHOutput || isWaitingForFHIROutput}
+            isWaiting={isWaitingForFSH || isWaitingForFHIR}
             saveAll={saveAll}
             setIsLineWrapped={setLineWrap}
             isLineWrapped={isLineWrapped}
@@ -433,11 +381,11 @@ export default function App(props) {
                 className={clsx(classes.fullHeightGrid, classes.editorPane)}
                 style={{ maxWidth: `calc(${leftWidth}% - 2px)`, flexBasis: `calc(${leftWidth}% - 2px)` }}
               >
-                <FSHOutput
+                <FSHEditor
                   text={inputFSHText}
                   initialText={initialText}
                   updateTextValue={updateInputFSHTextValue}
-                  isWaiting={isWaitingForFSHOutput}
+                  isWaiting={isWaitingForFSH}
                   setInitialText={setInitialText}
                   config={configToShare}
                   isLineWrapped={isLineWrapped}
@@ -459,11 +407,11 @@ export default function App(props) {
                   flexBasis: `calc(${100 - leftWidth}% - 2px)`
                 }}
               >
-                <JSONOutput
+                <JSONEditor
                   text={inputFHIRText}
                   showNewText={showNewFHIRText}
                   setShowNewText={setShowNewFHIRText}
-                  isWaiting={isWaitingForFHIROutput}
+                  isWaiting={isWaitingForFHIR}
                   updateTextValue={updateInputFHIRTextValue}
                   isLineWrapped={isLineWrapped}
                 />
@@ -472,7 +420,7 @@ export default function App(props) {
           </ExpandedConsoleContext.Provider>
         </div>
         <div className={expandConsole ? classes.expandedConsole : classes.collapsedConsole}>
-          <ConsoleComponent
+          <Console
             consoleMessages={infoMessages}
             problemMessages={problemMessages}
             problemCount={problemCount}

diff --git a/src/components/CodeMirrorComponent.jsx → src/components/CodeEditor.jsx b/src/components/CodeMirrorComponent.jsx → src/components/CodeEditor.jsx
@@ -8,7 +8,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import CodeMirror from 'codemirror';
 import { ExpandedConsoleContext } from '../App';
 import ShareLink from './ShareLink';
-import '../style/CodeMirrorComponent.css';
+import '../style/CodeEditor.css';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/material.css';
 import 'codemirror/addon/fold/foldgutter.css';
@@ -211,7 +211,7 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-export default function CodeMirrorComponent(props) {
+export default function CodeEditor(props) {
   const classes = useStyles();
   const expandedConsoleContext = useContext(ExpandedConsoleContext);
   const [drawerOpen, setDrawerOpen] = useState(true);

diff --git a/src/components/ConsoleComponent.jsx → src/components/Console.jsx b/src/components/ConsoleComponent.jsx → src/components/Console.jsx
diff --git a/src/components/FSHControls.jsx b/src/components/FSHControls.jsx
@@ -31,7 +31,7 @@ import {
 import { runSUSHI, runGoFSH } from '../utils/FSHHelpers';
 import { sliceDependency } from '../utils/helpers';
 import { TreeView, TreeItem } from '@material-ui/lab';
-import CodeMirrorComponent from './CodeMirrorComponent';
+import CodeEditor from './CodeEditor';
 
 const useStyles = makeStyles((theme) => ({
   box: {
@@ -292,6 +292,12 @@ export default function FSHControls(props) {
 
   return (
     <Box className={classes.box}>
+      <div className={classes.leftControls}>
+        <Button name="Examples" className={classes.button} onClick={handleOpenExamples}>
+          <LibraryBooksIcon /> &nbsp; FSH Examples
+        </Button>
+      </div>
+
       <Grid container>
         <Grid item xs={5}>
           <Button className={clsx(classes.button, classes.buttonLeft)} onClick={handleSUSHIClick} testid="Button">
@@ -323,12 +329,6 @@ export default function FSHControls(props) {
         </Grid>
       </Grid>
 
-      <div className={classes.leftControls}>
-        <Button name="Examples" className={classes.button} onClick={handleOpenExamples}>
-          <LibraryBooksIcon /> &nbsp; FSH Examples
-        </Button>
-      </div>
-
       <div className={classes.rightControls}>
         <Button name="SaveAll" className={classes.secondaryButton} onClick={props.saveAll}>
           <SaveAlt /> Save All
@@ -431,7 +431,7 @@ export default function FSHControls(props) {
               </TreeView>
             </Grid>
             <Grid item xs={8}>
-              <CodeMirrorComponent
+              <CodeEditor
                 name={currentExample ? currentExampleName : ''}
                 isExamples={true}
                 value={currentExample}

diff --git a/src/components/FSHOutput.jsx → src/components/FSHEditor.jsx b/src/components/FSHOutput.jsx → src/components/FSHEditor.jsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import FileSaver from 'file-saver';
-import CodeMirrorComponent from './CodeMirrorComponent';
+import CodeEditor from './CodeEditor';
 import DeleteConfirmationModal from './DeleteConfirmationModal';
 
-export default function FSHOutput(props) {
+export default function FSHEditor(props) {
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
 
   const handleOpenDeleteModal = () => {
@@ -21,7 +21,7 @@ export default function FSHOutput(props) {
 
   return (
     <>
-      <CodeMirrorComponent
+      <CodeEditor
         name={'FSH'}
         isExamples={false}
         value={props.text}

diff --git a/src/components/JSONOutput.jsx → src/components/JSONEditor.jsx b/src/components/JSONOutput.jsx → src/components/JSONEditor.jsx
@@ -5,7 +5,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import clsx from 'clsx';
 import { Button, List, ListItem, Tooltip } from '@material-ui/core';
 import { Add, ErrorOutline } from '@material-ui/icons';
-import CodeMirrorComponent from './CodeMirrorComponent';
+import CodeEditor from './CodeEditor';
 import DeleteConfirmationModal from './DeleteConfirmationModal';
 
 const useStyles = makeStyles((theme) => ({
@@ -147,7 +147,7 @@ const getIterablePackage = (defsPackage) => {
   }));
 };
 
-export default function JSONOutput(props) {
+export default function JSONEditor(props) {
   const classes = useStyles();
   const [initialText, setInitialText] = useState('');
   const [fhirDefinitions, setFhirDefinitions] = useState([{ resourceType: null, id: 'Untitled', def: null }]);
@@ -406,7 +406,7 @@ export default function JSONOutput(props) {
 
   return (
     <>
-      <CodeMirrorComponent
+      <CodeEditor
         name={`FHIR JSON: ${name}`}
         value={displayValue}
         initialText={initialText}

diff --git a/src/components/ShareLink.jsx b/src/components/ShareLink.jsx
@@ -17,7 +17,7 @@ import {
   Box
 } from '@material-ui/core';
 import { generateLink } from '../utils/BitlyWorker';
-import { theme } from '../App';
+import theme from '../theme';
 
 const useStyles = makeStyles((theme) => ({
   iconButton: {

diff --git a/src/style/CodeMirrorComponent.css → src/style/CodeEditor.css b/src/style/CodeMirrorComponent.css → src/style/CodeEditor.css
diff --git a/src/theme.js b/src/theme.js
@@ -0,0 +1,55 @@
+import { createTheme } from '@material-ui/core/styles';
+
+const colors = {
+  lighterBlue: '#D8E2EA',
+  lightBlue: '#487AA2',
+  blue: '#30638e',
+  darkerBlue: '#143E61',
+  editorGrey: '#263238',
+  lightestGrey: '#E7ECEE',
+  lightGrey: '#D0D9DD',
+  grey: '#575B5C',
+  darkerGrey: '#3D4345',
+  darkestGrey: '#121D21',
+  red: '#FD6668'
+};
+
+const theme = createTheme({
+  palette: {
+    success: {
+      main: colors.blue,
+      dark: colors.darkerBlue,
+      light: colors.lightBlue
+    },
+    common: colors
+  },
+  typography: {
+    fontFamily: 'Open Sans'
+  },
+  overrides: {
+    MuiTooltip: {
+      tooltip: {
+        backgroundColor: colors.darkestGrey,
+        fontSize: '13px'
+      },
+      arrow: {
+        color: colors.darkestGrey
+      }
+    },
+    MuiButton: {
+      text: {
+        textTransform: 'none',
+        fontWeight: 600
+      }
+    },
+    MuiIconButton: {
+      root: {
+        '&:hover': {
+          backgroundColor: colors.grey
+        }
+      }
+    }
+  }
+});
+
+export default theme;
diff --git a/src/tests/App.test.jsx → tests/App.test.jsx b/src/tests/App.test.jsx → tests/App.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { waitFor, render, fireEvent } from '@testing-library/react';
-import App, { decodeFSH } from '../App';
-import * as bitlyWorker from '../utils/BitlyWorker';
+import App, { decodeFSH } from '../src/App';
+import * as bitlyWorker from '../src/utils/BitlyWorker';
 
 it('basic app renders', () => {
   const { getByText } = render(<App match={{}} />);

diff --git a/src/tests/AppRouter.test.jsx → tests/AppRouter.test.jsx b/src/tests/AppRouter.test.jsx → tests/AppRouter.test.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
-import AppRouter from '../AppRouter';
+import AppRouter from '../src/AppRouter';
 
-vi.mock('../App.jsx', () => ({ default: () => <div>Mock FSH Online</div> }));
+vi.mock('../src/App.jsx', () => ({ default: () => <div>Mock FSH Online</div> }));
 
 test('Renders FSH Online App when visiting /FSHOnline', () => {
   const { getByText } = render(