Skip to content

Commit 98b25e4

Browse files
committed
Upgrade to React 18
1 parent 6cee515 commit 98b25e4

File tree

5 files changed

+96
-101
lines changed

5 files changed

+96
-101
lines changed

package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"@types/jest": "^26.0.24",
1616
"@types/node": "^14.17.32",
1717
"@types/pouchdb": "^6.4.0",
18-
"@types/react": "^17.0.34",
19-
"@types/react-dom": "^17.0.11",
18+
"@types/react": "^17.0.43",
19+
"@types/react-dom": "^17.0.14",
2020
"@types/react-redux": "^7.1.20",
2121
"@types/react-test-renderer": "^17.0.1",
2222
"@types/redux-first-router": "^2.1.7",
@@ -29,11 +29,11 @@
2929
"pouchdb-adapter-memory": "^7.2.2",
3030
"pouchdb-browser": "^7.2.2",
3131
"prettier": "^2.4.1",
32-
"react": "^17.0.2",
33-
"react-dom": "^17.0.2",
32+
"react": "^18.0.0",
33+
"react-dom": "^18.0.0",
3434
"react-redux": "^7.2.6",
3535
"react-scripts": "4.0.3",
36-
"react-test-renderer": "^17.0.2",
36+
"react-test-renderer": "^18.0.0",
3737
"redux": "^4.1.2",
3838
"redux-first-router": "^2.1.5",
3939
"redux-thunk": "^2.4.0",

src/components/__snapshots__/main.test.tsx.snap

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,7 @@ exports[`renders empty view with no tab selected 1`] = `
2020
/>
2121
</svg>
2222
</button>
23-
<h2>
24-
25-
</h2>
23+
<h2 />
2624
<button
2725
className="create"
2826
onClick={[Function]}
@@ -83,9 +81,7 @@ exports[`renders missing tab info error 1`] = `
8381
/>
8482
</svg>
8583
</button>
86-
<h2>
87-
88-
</h2>
84+
<h2 />
8985
<button
9086
className="create"
9187
onClick={[Function]}

src/components/app.tsx

Lines changed: 60 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -94,70 +94,68 @@ export default class App extends Component<Props> {
9494
}
9595

9696
return (
97-
<React.StrictMode>
98-
<div className="scenes">
99-
<div
100-
className={`scenes-container scenes-container-active-${getSceneIndex(
101-
this.props.location.type
102-
)}`}
103-
>
104-
<Tabs
105-
data={this.props.tabs}
106-
visible={this.props.currentLocation === ROUTE_TABS}
107-
checkingRemoteTab={this.props.checkingRemoteTab}
108-
remoteTabError={this.props.remoteTabError}
109-
createTabInputValue={this.props.createTabInputValue}
110-
importTabInputValue={this.props.importTabInputValue}
111-
onTabClick={this.props.onSelectTab}
112-
onCreateTabInputChange={this.props.onCreateTabInputChange}
113-
onCreateNewTab={this.props.onCreateTab}
114-
onImportTabInputChange={this.props.onImportTabInputChange}
115-
onImportTab={this.props.onImportTab}
116-
/>
117-
<Main
118-
tabInfo={this.props.tabInfo}
119-
tabId={this.props.location.payload.tabId}
120-
accounts={this.props.accounts}
121-
transactions={this.props.transactions}
122-
total={this.props.total}
123-
visible={this.props.currentLocation === ROUTE_TAB}
124-
checkingRemoteTab={this.props.checkingRemoteTab}
125-
remoteTabError={this.props.remoteTabError}
126-
importingTab={this.props.importingTab}
127-
onChangeTabClick={this.props.onNavigateToTabs}
128-
onNavigateToAddTransaction={this.props.onNavigateToAddTransaction}
129-
onDetailsClick={this.props.onNavigateToUpdateTransaction}
130-
/>
131-
<div className="scene editEntryScene">
132-
{this.getShowEditEntry() && (
133-
<EditEntry
134-
visible={
135-
this.props.currentLocation === ROUTE_TRANSACTION ||
136-
this.props.currentLocation === ROUTE_NEW_TRANSACTION
137-
}
138-
mode={this.getEditEntryMode()}
139-
formState={this.props.transactionFormState}
140-
checkingRemoteTab={this.props.checkingRemoteTab}
141-
remoteTabError={this.props.remoteTabError}
142-
importingTab={this.props.importingTab}
143-
onChangeTabClick={this.props.onNavigateToTabs}
144-
onCloseClick={this.props.onCloseTransaction}
145-
onSave={this.props.onAddOrUpdateTransaction}
146-
onDelete={this.props.onRemoveTransaction}
147-
onUpdateForm={this.props.onUpdateTransactionForm}
148-
onUpdateSharedForm={this.props.onUpdateTransactionSharedForm}
149-
onUpdateDirectForm={this.props.onUpdateTransactionDirectForm}
150-
onUpdateParticipant={
151-
this.props.onUpdateTransactionParticipant
152-
}
153-
onAddParticipant={this.props.onAddParticipant}
154-
onSetAllJoined={this.props.onSetAllJoined}
155-
/>
156-
)}
157-
</div>
97+
<div className="scenes">
98+
<div
99+
className={`scenes-container scenes-container-active-${getSceneIndex(
100+
this.props.location.type
101+
)}`}
102+
>
103+
<Tabs
104+
data={this.props.tabs}
105+
visible={this.props.currentLocation === ROUTE_TABS}
106+
checkingRemoteTab={this.props.checkingRemoteTab}
107+
remoteTabError={this.props.remoteTabError}
108+
createTabInputValue={this.props.createTabInputValue}
109+
importTabInputValue={this.props.importTabInputValue}
110+
onTabClick={this.props.onSelectTab}
111+
onCreateTabInputChange={this.props.onCreateTabInputChange}
112+
onCreateNewTab={this.props.onCreateTab}
113+
onImportTabInputChange={this.props.onImportTabInputChange}
114+
onImportTab={this.props.onImportTab}
115+
/>
116+
<Main
117+
tabInfo={this.props.tabInfo}
118+
tabId={this.props.location.payload.tabId}
119+
accounts={this.props.accounts}
120+
transactions={this.props.transactions}
121+
total={this.props.total}
122+
visible={this.props.currentLocation === ROUTE_TAB}
123+
checkingRemoteTab={this.props.checkingRemoteTab}
124+
remoteTabError={this.props.remoteTabError}
125+
importingTab={this.props.importingTab}
126+
onChangeTabClick={this.props.onNavigateToTabs}
127+
onNavigateToAddTransaction={this.props.onNavigateToAddTransaction}
128+
onDetailsClick={this.props.onNavigateToUpdateTransaction}
129+
/>
130+
<div className="scene editEntryScene">
131+
{this.getShowEditEntry() && (
132+
<EditEntry
133+
visible={
134+
this.props.currentLocation === ROUTE_TRANSACTION ||
135+
this.props.currentLocation === ROUTE_NEW_TRANSACTION
136+
}
137+
mode={this.getEditEntryMode()}
138+
formState={this.props.transactionFormState}
139+
checkingRemoteTab={this.props.checkingRemoteTab}
140+
remoteTabError={this.props.remoteTabError}
141+
importingTab={this.props.importingTab}
142+
onChangeTabClick={this.props.onNavigateToTabs}
143+
onCloseClick={this.props.onCloseTransaction}
144+
onSave={this.props.onAddOrUpdateTransaction}
145+
onDelete={this.props.onRemoveTransaction}
146+
onUpdateForm={this.props.onUpdateTransactionForm}
147+
onUpdateSharedForm={this.props.onUpdateTransactionSharedForm}
148+
onUpdateDirectForm={this.props.onUpdateTransactionDirectForm}
149+
onUpdateParticipant={
150+
this.props.onUpdateTransactionParticipant
151+
}
152+
onAddParticipant={this.props.onAddParticipant}
153+
onSetAllJoined={this.props.onSetAllJoined}
154+
/>
155+
)}
158156
</div>
159157
</div>
160-
</React.StrictMode>
158+
</div>
161159
);
162160
}
163161
}

src/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from "react";
2-
import ReactDOM from "react-dom";
1+
import React, { StrictMode } from "react";
2+
import { createRoot } from 'react-dom/client';
33
import { connectRoutes, LocationState } from "redux-first-router";
44
import {
55
combineReducers,
@@ -80,7 +80,7 @@ const components = (
8080
</Provider>
8181
);
8282

83-
ReactDOM.render(components, document.getElementById("root"));
83+
createRoot(document.getElementById("root")!).render(<StrictMode>{components}</StrictMode>);
8484

8585
const unsubscribe = store.subscribe(() => {
8686
if (store.getState().app.initialLoadingDone) {

yarn.lock

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1907,7 +1907,7 @@
19071907
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
19081908
integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
19091909

1910-
"@types/react-dom@^17.0.11":
1910+
"@types/react-dom@^17.0.14":
19111911
version "17.0.14"
19121912
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.14.tgz#c8f917156b652ddf807711f5becbd2ab018dea9f"
19131913
integrity sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==
@@ -1931,7 +1931,7 @@
19311931
dependencies:
19321932
"@types/react" "*"
19331933

1934-
"@types/react@*", "@types/react@^17.0.34":
1934+
"@types/react@*", "@types/react@^17.0.43":
19351935
version "17.0.43"
19361936
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
19371937
integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==
@@ -9493,14 +9493,13 @@ react-dev-utils@^11.0.3:
94939493
strip-ansi "6.0.0"
94949494
text-table "0.2.0"
94959495

9496-
react-dom@^17.0.2:
9497-
version "17.0.2"
9498-
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
9499-
integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
9496+
react-dom@^18.0.0:
9497+
version "18.0.0"
9498+
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023"
9499+
integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==
95009500
dependencies:
95019501
loose-envify "^1.1.0"
9502-
object-assign "^4.1.1"
9503-
scheduler "^0.20.2"
9502+
scheduler "^0.21.0"
95049503

95059504
react-error-overlay@^6.0.9:
95069505
version "6.0.10"
@@ -9517,6 +9516,11 @@ react-is@^16.13.1, react-is@^16.7.0:
95179516
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
95189517
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
95199518

9519+
react-is@^18.0.0:
9520+
version "18.0.0"
9521+
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.0.0.tgz#026f6c4a27dbe33bf4a35655b9e1327c4e55e3f5"
9522+
integrity sha512-yUcBYdBBbo3QiPsgYDcfQcIkGZHfxOaoE6HLSnr1sPzMhdyxusbfKOSUbSd/ocGi32dxcj366PsTj+5oggeKKw==
9523+
95209524
react-redux@^7.2.6:
95219525
version "7.2.8"
95229526
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de"
@@ -9608,23 +9612,21 @@ react-shallow-renderer@^16.13.1:
96089612
object-assign "^4.1.1"
96099613
react-is "^16.12.0 || ^17.0.0"
96109614

9611-
react-test-renderer@^17.0.2:
9612-
version "17.0.2"
9613-
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
9614-
integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
9615+
react-test-renderer@^18.0.0:
9616+
version "18.0.0"
9617+
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.0.0.tgz#fa403d625ea9478a70ace43db88833f6c3a5bb4c"
9618+
integrity sha512-SyZTP/FSkwfiKOZuTZiISzsrC8A80KNlQ8PyyoGoOq+VzMAab6Em1POK/CiX3+XyXG6oiJa1C53zYDbdrJu9fw==
96159619
dependencies:
9616-
object-assign "^4.1.1"
9617-
react-is "^17.0.2"
9620+
react-is "^18.0.0"
96189621
react-shallow-renderer "^16.13.1"
9619-
scheduler "^0.20.2"
9622+
scheduler "^0.21.0"
96209623

9621-
react@^17.0.2:
9622-
version "17.0.2"
9623-
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
9624-
integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
9624+
react@^18.0.0:
9625+
version "18.0.0"
9626+
resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
9627+
integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==
96259628
dependencies:
96269629
loose-envify "^1.1.0"
9627-
object-assign "^4.1.1"
96289630

96299631
read-pkg-up@^7.0.1:
96309632
version "7.0.1"
@@ -10152,13 +10154,12 @@ saxes@^5.0.1:
1015210154
dependencies:
1015310155
xmlchars "^2.2.0"
1015410156

10155-
scheduler@^0.20.2:
10156-
version "0.20.2"
10157-
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
10158-
integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
10157+
scheduler@^0.21.0:
10158+
version "0.21.0"
10159+
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
10160+
integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
1015910161
dependencies:
1016010162
loose-envify "^1.1.0"
10161-
object-assign "^4.1.1"
1016210163

1016310164
schema-utils@^1.0.0:
1016410165
version "1.0.0"

0 commit comments

Comments
 (0)