Skip to content

Commit 6f20bd4

Browse files
bbimberbbimber
authored
Refactor app.tsx and dev.tsx (#181)
* Refactor app.tsx and dev.tsx * Update MCC classes
1 parent b90a3e9 commit 6f20bd4

File tree

23 files changed

+3108
-8927
lines changed

23 files changed

+3108
-8927
lines changed

‎mcc/jest.config.js‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎mcc/package-lock.json‎

Lines changed: 3007 additions & 8648 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎mcc/package.json‎

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,44 +7,34 @@
77
"start": "cross-env NODE_ENV=development webpack serve --config node_modules/@labkey/build/webpack/watch.config.js",
88
"build-dev": "npm run clean && cross-env NODE_ENV=development webpack --config node_modules/@labkey/build/webpack/dev.config.js --color",
99
"build-prod": "npm run clean && cross-env NODE_ENV=production webpack --config node_modules/@labkey/build/webpack/prod.config.js --color --progress --profile",
10-
"clean": "rimraf resources/web/mcc/gen && rimraf resources/web/gen",
11-
"test": "cross-env NODE_ENV=test jest"
10+
"clean": "rimraf resources/web/mcc/gen && rimraf resources/web/gen"
1211
},
1312
"dependencies": {
14-
"@emotion/react": "^11.11.1",
15-
"@emotion/styled": "^11.11.0",
16-
"@labkey/api": "^1.35.0",
13+
"@emotion/react": "^11.14.0",
14+
"@emotion/styled": "^11.14.0",
15+
"@labkey/api": "^1.39.0",
1716
"@mui/material": "^5.0.0",
18-
"@mui/styles": "^5.14.7",
17+
"@mui/styles": "^5.0.0",
1918
"@mui/x-data-grid": "^6.0.0",
20-
"chart.js": "^4.4.4",
21-
"react": "^17.0.2",
22-
"react-chartjs-2": "^5.2.0",
23-
"react-dom": "^17.0.2",
19+
"chart.js": "^4.4.8",
20+
"react": "^17.0.0",
21+
"react-chartjs-2": "^5.3.0",
22+
"react-dom": "^17.0.0",
2423
"react-tooltip": "^5.28.0",
2524
"tsv": "^0.2.0",
26-
"uuid": "^10.0.0",
25+
"uuid": "^11.1.0",
2726
"google-palette": "^1.1.1"
2827
},
2928
"devDependencies": {
3029
"@labkey/build": "^8.4.0",
31-
"@types/chart.js": "^2.9.0",
32-
"@types/jest": "^29.0.0",
33-
"@types/jexl": "^2.3.1",
34-
"@types/jquery": "^3.0.0",
30+
"@types/chart.js": "^2.9.41",
31+
"@types/jexl": "^2.3.4",
32+
"@types/jquery": "^3.5.32",
3533
"@types/node": "^18.17.1",
36-
"@types/react": "^17.0.68",
37-
"@types/react-dom": "^17.0.21",
34+
"@types/react": "^17.0.0",
35+
"@types/react-dom": "^17.0.0",
3836
"@types/tsv": "^0.2.4",
39-
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
40-
"canvas": "^2.11.2",
41-
"enzyme": "^3.11.0",
42-
"jest": "^29.0.0",
43-
"jest-canvas-mock": "^2.5.2",
44-
"jest-cli": "^29.0.0",
45-
"jest-environment-jsdom": "^29.7.0",
46-
"jest-mock": "^29.0.0",
47-
"rimraf": "^6.0.1",
48-
"ts-jest": "^29.0.0"
37+
"canvas": "^3.1.0",
38+
"rimraf": "^6.0.1"
4939
}
5040
}

‎mcc/src/client/AnimalRequest/animal-request.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,10 @@ import AnimalCensus from './components/census';
5151
export function AnimalRequest() {
5252
const requestId = (new URLSearchParams(window.location.search)).get("requestId")
5353

54-
const [showWithdrawDialog, setShowWithdrawDialog] = useState(false)
54+
const [showWithdrawDialog, setShowWithdrawDialog] = useState<boolean>(false)
5555
const [withdrawReasonText, setWithdrawReasonText] = useState<string>(null)
56-
const [isSubmitting, setIsSubmitting] = useState(false)
57-
const [displayOverlay, setDisplayOverlay] = useState(false)
56+
const [isSubmitting, setIsSubmitting] = useState<boolean>(false)
57+
const [displayOverlay, setDisplayOverlay] = useState<boolean>(false)
5858
const [requestData, setRequestData] = useState<AnimalRequestModel>(null)
5959
const [stateRollbackOnFailure, setStateRollbackOnFailure] = useState(requestData?.request?.status)
6060

@@ -153,13 +153,15 @@ export function AnimalRequest() {
153153
return !!ctx.hasRequestAdminPermission
154154
}
155155

156-
function handleSubmitButton(e, isSubmitting) {
157-
setIsSubmitting(isSubmitting);
156+
function handleSubmitButton(e, isSubmittingVal: boolean) {
157+
console.log('handleSubmitButton: ' + isSubmittingVal)
158+
setIsSubmitting(isSubmittingVal);
159+
console.log('done with setIsSubmitting:' + isSubmitting)
158160

159161
if (!isSubmitting) {
160162
// Use this to reset each field's error state
161-
e.target.form.querySelectorAll('input, select, textarea').forEach(function(e){
162-
e.checkValidity()
163+
e.target.form.querySelectorAll('input, select, textarea').forEach(function(el){
164+
el.checkValidity()
163165
})
164166
}
165167
}
@@ -718,13 +720,13 @@ export function AnimalRequest() {
718720
</div>
719721

720722
<div className="tw-flex tw-flex-wrap tw-mx-2">
721-
<button className="tw-ml-auto tw-bg-red-500 hover:tw-bg-red-400 tw-text-white tw-font-bold tw-py-4 tw-mt-2 tw-px-6 tw-border-none tw-rounded" onClick={(e) => {
723+
<Button baseColor="red" marginLeft="auto" text="Cancel" onClick={(e) => {
722724
e.preventDefault()
723725

724726
if (confirm("You are about to leave this page.")) {
725-
window.location.href = ActionURL.buildURL('mcc', 'mccRequests.view');
727+
window.location.href = ActionURL.buildURL('mcc', 'mccRequests.view')
726728
}
727-
}}>Cancel</button>
729+
}} />
728730

729731
<Button onClick={(e) => {
730732
handleSubmitButton(e, false);
@@ -778,7 +780,7 @@ export function AnimalRequest() {
778780
setShowWithdrawDialog(false)
779781
setIsSubmitting(true)
780782
}
781-
}} form={"animalRequestForm"} disabled={false} text={"Submit"}/>
783+
}} form={"animalRequestForm"} text={"Submit"}/>
782784
<Button onClick={(e) => setShowWithdrawDialog(false)} text={"Close"}/>
783785
</Box>
784786
</DialogActions>

‎mcc/src/client/AnimalRequest/app.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
42
import '../tailwind.css';
53

64
import { AnimalRequest } from './animal-request';
75
import { ErrorBoundary } from '../components/ErrorBoundary';
6+
import ReactDOM from 'react-dom';
87

9-
// Need to wait for container element to be available in labkey wrapper before render
108
window.addEventListener('DOMContentLoaded', (event) => {
119
ReactDOM.render(
1210
<ErrorBoundary>
1311
<AnimalRequest/>
14-
</ErrorBoundary>, document.getElementById('app'));
15-
});
12+
</ErrorBoundary>, document.getElementById('app')
13+
);
14+
});

‎mcc/src/client/AnimalRequest/components/button.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
11
import React from 'react';
22

3-
export default function Button(props) {
3+
export default function Button(props: {onClick: (event: MouseEvent) => void, id?: string, display?: boolean, text: string, form?: string, baseColor?: string, marginLeft?: string }) {
44
function onClick(e) {
5-
if(props.onClick) {
5+
if (props.onClick) {
66
props.onClick(e)
77
}
88
}
9-
if(props.display === false) {
9+
10+
const baseColor = props.baseColor ? props.baseColor : 'blue'
11+
const marginLeft = props.marginLeft ? props.marginLeft : '16'
12+
const classes = "tw-ml-" + marginLeft + " tw-bg-" + baseColor + "-500 hover:tw-bg-" + baseColor + "-400 tw-text-white tw-font-bold tw-py-4 tw-mt-2 tw-px-6 tw-border-none tw-rounded"
13+
14+
if (props.display === false) {
1015
return (
1116
<>
1217
</>
1318
)
1419
} else {
1520
return (
16-
<button className="tw-ml-16 tw-bg-blue-500 hover:tw-bg-blue-400 tw-text-white tw-font-bold tw-py-4 tw-mt-2 tw-px-6 tw-border-none tw-rounded"
17-
onClick={(e) => onClick(e)} form={props.form}>{props.text}</button>
21+
<button id={props.id}
22+
className={classes}
23+
onClick={(e) => onClick(e)}
24+
form={props.form}>{props.text}
25+
</button>
1826
)
1927
}
2028
}

‎mcc/src/client/AnimalRequest/components/error-message-handler.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { nanoid } from 'nanoid'
33

44
export default function ErrorMessageHandler(props) {
55
const ref = React.useRef(null)
6-
const [errors, setErrors] = React.useState(new Set())
6+
const [errors, setErrors] = React.useState(new Set<String>())
77

88
React.useEffect(() => {
99
if (ref && ref.current && props.isSubmitting) {
@@ -13,7 +13,7 @@ export default function ErrorMessageHandler(props) {
1313
}
1414

1515
const handleValidationMessages = () => {
16-
const tmp = new Set()
16+
const tmp = new Set<String>()
1717
el.querySelectorAll<HTMLSelectElement>('input, select, textarea').forEach(function(e){
1818
if (!e.checkValidity()) {
1919
const name = e.getAttribute("aria-label").split("#")[0]

‎mcc/src/client/Dashboard/Dashboard.spec.tsx‎

Lines changed: 0 additions & 76 deletions
This file was deleted.

‎mcc/src/client/Dashboard/app.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import React from 'react';
2+
import { Dashboard } from './Dashboard';
23
import ReactDOM from 'react-dom';
34

4-
import { Dashboard } from './Dashboard'
5-
6-
// Need to wait for container element to be available in labkey wrapper before render
75
window.addEventListener('DOMContentLoaded', (event) => {
8-
ReactDOM.render(<Dashboard />, document.getElementById('app'));
6+
ReactDOM.render(<Dashboard/>, document.getElementById('app'));
97
});

‎mcc/src/client/Dashboard/dev.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
32

43
import { Dashboard } from './Dashboard';
4+
import ReactDOM from 'react-dom';
55

6-
const render = () => {
7-
ReactDOM.render(<Dashboard />, document.getElementById('app'));
8-
};
9-
10-
render();
6+
window.addEventListener('DOMContentLoaded', (event) => {
7+
ReactDOM.render(<Dashboard/>, document.getElementById('app'));
8+
}, true);

0 commit comments

Comments
 (0)