Skip to content

Commit

Permalink
Small refactors (#174)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
jafeltra authored Aug 15, 2024
1 parent 2ef4e18 commit 1544a2d
Show file tree
Hide file tree
Showing 28 changed files with 143 additions and 144 deletions.
92 changes: 20 additions & 72 deletions src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -31,7 +32,7 @@ const useStyles = makeStyles(() => ({
width: '4px',
cursor: 'col-resize',
'&:hover': {
background: colors.lightBlue
background: theme.palette.common.lightBlue
}
},
resizeBlue: {
Expand Down Expand Up @@ -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];
Expand All @@ -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) {
Expand Down Expand Up @@ -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({});
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand All @@ -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}
/>
Expand All @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand Down
File renamed without changes.
16 changes: 8 additions & 8 deletions src/components/FSHControls.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -431,7 +431,7 @@ export default function FSHControls(props) {
</TreeView>
</Grid>
<Grid item xs={8}>
<CodeMirrorComponent
<CodeEditor
name={currentExample ? currentExampleName : ''}
isExamples={true}
value={currentExample}
Expand Down
6 changes: 3 additions & 3 deletions src/components/FSHOutput.jsx → src/components/FSHEditor.jsx
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand All @@ -21,7 +21,7 @@ export default function FSHOutput(props) {

return (
<>
<CodeMirrorComponent
<CodeEditor
name={'FSH'}
isExamples={false}
value={props.text}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) => ({
Expand Down Expand Up @@ -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 }]);
Expand Down Expand Up @@ -406,7 +406,7 @@ export default function JSONOutput(props) {

return (
<>
<CodeMirrorComponent
<CodeEditor
name={`FHIR JSON: ${name}`}
value={displayValue}
initialText={initialText}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ShareLink.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
File renamed without changes.
55 changes: 55 additions & 0 deletions src/theme.js
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 2 additions & 2 deletions src/tests/App.test.jsx → tests/App.test.jsx
Original file line number Diff line number Diff line change
@@ -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={{}} />);
Expand Down
4 changes: 2 additions & 2 deletions src/tests/AppRouter.test.jsx → tests/AppRouter.test.jsx
Original file line number Diff line number Diff line change
@@ -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(
Expand Down
Loading

0 comments on commit 1544a2d

Please sign in to comment.