forked/topola-viewer
1
0
Fork 0
mirror of https://github.com/PeWu/topola-viewer.git synced 2026-05-26 23:26:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrated to react-router-dom v6

Browse Source
This commit is contained in:
Przemek Więch
2025-01-23 17:50:18 +01:00
parent 3e0dc9ec0a
commit 7dac5da251
8 changed files with 98 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
package-lock.json generated
View File

@@ -35,7 +35,7 @@
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-intl": "^6.8.9", "react-intl": "^6.8.9",
"react-linkify": "^1.0.0-alpha", "react-linkify": "^1.0.0-alpha",
"react-router-dom": "^5.3.4", "react-router-dom": "^6.28.2",
"rehype-stringify": "^10.0.1", "rehype-stringify": "^10.0.1",
"remark-parse": "^11.0.0", "remark-parse": "^11.0.0",
"remark-rehype": "^11.1.1", "remark-rehype": "^11.1.1",
@@ -3705,6 +3705,14 @@
"url": "https://opencollective.com/popperjs" "url": "https://opencollective.com/popperjs"
} }
}, },
"node_modules/@remix-run/router": {
"version": "1.21.1",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.1.tgz",
"integrity": "sha512-KeBYSwohb8g4/wCcnksvKTYlg69O62sQeLynn2YE+5z7JWEj95if27kclW9QqbrlsQ2DINI8fjbV3zyuKfwjKg==",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/@rollup/plugin-babel": { "node_modules/@rollup/plugin-babel": {
"version": "5.3.1", "version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -11156,19 +11164,6 @@
"he": "bin/he" "he": "bin/he"
} }
}, },
"node_modules/history": {
"version": "4.10.1",
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
"integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
"dependencies": {
"@babel/runtime": "^7.1.2",
"loose-envify": "^1.2.0",
"resolve-pathname": "^3.0.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0",
"value-equal": "^1.0.1"
}
},
"node_modules/hoist-non-react-statics": { "node_modules/hoist-non-react-statics": {
"version": "3.3.2", "version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -12175,11 +12170,6 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
},
"node_modules/isexe": { "node_modules/isexe": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -16248,14 +16238,6 @@
"integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
"dev": true "dev": true
}, },
"node_modules/path-to-regexp": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz",
"integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==",
"dependencies": {
"isarray": "0.0.1"
}
},
"node_modules/path-type": { "node_modules/path-type": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -18286,46 +18268,35 @@
} }
}, },
"node_modules/react-router": { "node_modules/react-router": {
"version": "5.3.4", "version": "6.28.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.2.tgz",
"integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", "integrity": "sha512-BgFY7+wEGVjHCiqaj2XiUBQ1kkzfg6UoKYwEe0wv+FF+HNPCxtS/MVPvLAPH++EsuCMReZl9RYVGqcHLk5ms3A==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.12.13", "@remix-run/router": "1.21.1"
"history": "^4.9.0", },
"hoist-non-react-statics": "^3.1.0", "engines": {
"loose-envify": "^1.3.1", "node": ">=14.0.0"
"path-to-regexp": "^1.7.0",
"prop-types": "^15.6.2",
"react-is": "^16.6.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=15" "react": ">=16.8"
} }
}, },
"node_modules/react-router-dom": { "node_modules/react-router-dom": {
"version": "5.3.4", "version": "6.28.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.2.tgz",
"integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==", "integrity": "sha512-O81EWqNJWqvlN/a7eTudAdQm0TbI7hw+WIi7OwwMcTn5JMyZ0ibTFNGz+t+Lju0df4LcqowCegcrK22lB1q9Kw==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.12.13", "@remix-run/router": "1.21.1",
"history": "^4.9.0", "react-router": "6.28.2"
"loose-envify": "^1.3.1", },
"prop-types": "^15.6.2", "engines": {
"react-router": "5.3.4", "node": ">=14.0.0"
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=15" "react": ">=16.8",
"react-dom": ">=16.8"
} }
}, },
"node_modules/react-router/node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-scripts": { "node_modules/react-scripts": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -19199,11 +19170,6 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/resolve-pathname": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
},
"node_modules/resolve-url-loader": { "node_modules/resolve-url-loader": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz", "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -21394,16 +21360,6 @@
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
"dev": true "dev": true
}, },
"node_modules/tiny-invariant": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
},
"node_modules/tiny-warning": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
},
"node_modules/tlds": { "node_modules/tlds": {
"version": "1.255.0", "version": "1.255.0",
"resolved": "https://registry.npmjs.org/tlds/-/tlds-1.255.0.tgz", "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.255.0.tgz",
@@ -22160,11 +22116,6 @@
"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
"dev": true "dev": true
}, },
"node_modules/value-equal": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
},
"node_modules/vary": { "node_modules/vary": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -25769,6 +25720,11 @@
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
}, },
"@remix-run/router": {
"version": "1.21.1",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.1.tgz",
"integrity": "sha512-KeBYSwohb8g4/wCcnksvKTYlg69O62sQeLynn2YE+5z7JWEj95if27kclW9QqbrlsQ2DINI8fjbV3zyuKfwjKg=="
},
"@rollup/plugin-babel": { "@rollup/plugin-babel": {
"version": "5.3.1", "version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -31453,19 +31409,6 @@
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true "dev": true
}, },
"history": {
"version": "4.10.1",
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
"integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
"requires": {
"@babel/runtime": "^7.1.2",
"loose-envify": "^1.2.0",
"resolve-pathname": "^3.0.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0",
"value-equal": "^1.0.1"
}
},
"hoist-non-react-statics": { "hoist-non-react-statics": {
"version": "3.3.2", "version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -32135,11 +32078,6 @@
"is-docker": "^2.0.0" "is-docker": "^2.0.0"
} }
}, },
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
},
"isexe": { "isexe": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -35201,14 +35139,6 @@
} }
} }
}, },
"path-to-regexp": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz",
"integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==",
"requires": {
"isarray": "0.0.1"
}
},
"path-type": { "path-type": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -36525,40 +36455,20 @@
"dev": true "dev": true
}, },
"react-router": { "react-router": {
"version": "5.3.4", "version": "6.28.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.2.tgz",
"integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", "integrity": "sha512-BgFY7+wEGVjHCiqaj2XiUBQ1kkzfg6UoKYwEe0wv+FF+HNPCxtS/MVPvLAPH++EsuCMReZl9RYVGqcHLk5ms3A==",
"requires": { "requires": {
"@babel/runtime": "^7.12.13", "@remix-run/router": "1.21.1"
"history": "^4.9.0",
"hoist-non-react-statics": "^3.1.0",
"loose-envify": "^1.3.1",
"path-to-regexp": "^1.7.0",
"prop-types": "^15.6.2",
"react-is": "^16.6.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
},
"dependencies": {
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
}
} }
}, },
"react-router-dom": { "react-router-dom": {
"version": "5.3.4", "version": "6.28.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.2.tgz",
"integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==", "integrity": "sha512-O81EWqNJWqvlN/a7eTudAdQm0TbI7hw+WIi7OwwMcTn5JMyZ0ibTFNGz+t+Lju0df4LcqowCegcrK22lB1q9Kw==",
"requires": { "requires": {
"@babel/runtime": "^7.12.13", "@remix-run/router": "1.21.1",
"history": "^4.9.0", "react-router": "6.28.2"
"loose-envify": "^1.3.1",
"prop-types": "^15.6.2",
"react-router": "5.3.4",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
} }
}, },
"react-scripts": { "react-scripts": {
@@ -37188,11 +37098,6 @@
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
"dev": true "dev": true
}, },
"resolve-pathname": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
},
"resolve-url-loader": { "resolve-url-loader": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz", "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -38832,16 +38737,6 @@
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
"dev": true "dev": true
}, },
"tiny-invariant": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
},
"tiny-warning": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
},
"tlds": { "tlds": {
"version": "1.255.0", "version": "1.255.0",
"resolved": "https://registry.npmjs.org/tlds/-/tlds-1.255.0.tgz", "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.255.0.tgz",
@@ -39410,11 +39305,6 @@
} }
} }
}, },
"value-equal": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
},
"vary": { "vary": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

2
package.json
View File

@@ -30,7 +30,7 @@
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-intl": "^6.8.9", "react-intl": "^6.8.9",
"react-linkify": "^1.0.0-alpha", "react-linkify": "^1.0.0-alpha",
"react-router-dom": "^5.3.4", "react-router-dom": "^6.28.2",
"rehype-stringify": "^10.0.1", "rehype-stringify": "^10.0.1",
"remark-parse": "^11.0.0", "remark-parse": "^11.0.0",
"remark-rehype": "^11.1.1", "remark-rehype": "^11.1.1",

74
src/app.tsx
View File

@@ -11,11 +11,11 @@ import {IndiInfo} from 'topola';
import {Intro} from './intro'; import {Intro} from './intro';
import {Loader, Message, Portal, Tab} from 'semantic-ui-react'; import {Loader, Message, Portal, Tab} from 'semantic-ui-react';
import {Media} from './util/media'; import {Media} from './util/media';
import {Redirect, Route, Switch} from 'react-router-dom'; import {Navigate, Route, Routes} from 'react-router-dom';
import {TopBar} from './menu/top_bar'; import {TopBar} from './menu/top_bar';
import {TopolaData} from './util/gedcom_util'; import {TopolaData} from './util/gedcom_util';
import {useEffect, useState} from 'react'; import {useEffect, useState} from 'react';
import {useHistory, useLocation} from 'react-router'; import {useNavigate, useLocation} from 'react-router';
import {idToIndiMap} from './util/gedcom_util'; import {idToIndiMap} from './util/gedcom_util';
import { import {
Chart, Chart,
@@ -229,7 +229,7 @@ export function App() {
const [config, setConfig] = useState(DEFALUT_CONFIG); const [config, setConfig] = useState(DEFALUT_CONFIG);
const intl = useIntl(); const intl = useIntl();
const history = useHistory(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
/** Sets the state with a new individual selection and chart type. */ /** Sets the state with a new individual selection and chart type. */
@@ -342,7 +342,7 @@ export function App() {
const args = getArguments(location); const args = getArguments(location);
if (!args.sourceSpec) { if (!args.sourceSpec) {
history.replace({pathname: '/'}); navigate({pathname: '/'}, {replace: true});
return; return;
} }
@@ -413,7 +413,7 @@ export function App() {
search[key] = args[key]; search[key] = args[key];
} }
location.search = queryString.stringify(search); location.search = queryString.stringify(search);
history.push(location); navigate(location);
} }
/** /**
@@ -570,45 +570,37 @@ export function App() {
return ( return (
<> <>
<Route <TopBar
render={() => ( data={data?.chartData}
<TopBar allowAllRelativesChart={sourceSpec?.source !== DataSourceEnum.WIKITREE}
data={data?.chartData} allowPrintAndDownload={chartType !== ChartType.Donatso}
allowAllRelativesChart={ showingChart={
sourceSpec?.source !== DataSourceEnum.WIKITREE location.pathname === '/view' &&
} (state === AppState.SHOWING_CHART || state === AppState.LOADING_MORE)
allowPrintAndDownload={chartType !== ChartType.Donatso} }
showingChart={ standalone={standalone}
history.location.pathname === '/view' && eventHandlers={{
(state === AppState.SHOWING_CHART || onSelection,
state === AppState.LOADING_MORE) onPrint,
} onDownloadPdf,
standalone={standalone} onDownloadPng,
eventHandlers={{ onDownloadSvg,
onSelection, }}
onPrint, showWikiTreeMenus={
onDownloadPdf, sourceSpec?.source === DataSourceEnum.WIKITREE && showWikiTreeMenus
onDownloadPng, }
onDownloadSvg,
}}
showWikiTreeMenus={
sourceSpec?.source === DataSourceEnum.WIKITREE &&
showWikiTreeMenus
}
/>
)}
/> />
{staticUrl ? ( {staticUrl ? (
<Switch> <Routes>
<Route exact path="/view" render={renderMainArea} /> <Route path="/view" element={renderMainArea()} />
<Redirect to={'/view'} /> <Route path="*" element={<Navigate to="/view" replace />} />
</Switch> </Routes>
) : ( ) : (
<Switch> <Routes>
<Route exact path="/" component={Intro} /> <Route path="/" element={<Intro />} />
<Route exact path="/view" render={renderMainArea} /> <Route path="/view" element={renderMainArea()} />
<Redirect to={'/'} /> <Route path="*" element={<Navigate to="/" replace />} />
</Switch> </Routes>
)} )}
</> </>
); );

2
src/index.tsx
View File

@@ -43,7 +43,7 @@ if (browser && browser.name === 'ie') {
<MediaContextProvider> <MediaContextProvider>
<style>{mediaStyles}</style> <style>{mediaStyles}</style>
<Router> <Router>
<Route component={App} /> <App />
</Router> </Router>
</MediaContextProvider> </MediaContextProvider>
</IntlProvider>, </IntlProvider>,

6
src/menu/top_bar.tsx
View File

@@ -8,7 +8,7 @@ import {MenuType} from './menu_item';
import {SearchBar} from './search'; import {SearchBar} from './search';
import {UploadMenu} from './upload_menu'; import {UploadMenu} from './upload_menu';
import {UrlMenu} from './url_menu'; import {UrlMenu} from './url_menu';
import {useHistory, useLocation} from 'react-router'; import {useNavigate, useLocation} from 'react-router';
import {WikiTreeLoginMenu, WikiTreeMenu} from './wikitree_menu'; import {WikiTreeLoginMenu, WikiTreeMenu} from './wikitree_menu';
enum ScreenSize { enum ScreenSize {
@@ -39,7 +39,7 @@ interface Props {
} }
export function TopBar(props: Props) { export function TopBar(props: Props) {
const history = useHistory(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
function changeView(view: string) { function changeView(view: string) {
@@ -47,7 +47,7 @@ export function TopBar(props: Props) {
if (search.view !== view) { if (search.view !== view) {
search.view = view; search.view = view;
location.search = queryString.stringify(search); location.search = queryString.stringify(search);
history.push(location); navigate(location);
} }
} }

21
src/menu/upload_menu.tsx
View File

@@ -5,7 +5,7 @@ import {Dropdown, Icon, Menu} from 'semantic-ui-react';
import {FormattedMessage} from 'react-intl'; import {FormattedMessage} from 'react-intl';
import {MenuType} from './menu_item'; import {MenuType} from './menu_item';
import {SyntheticEvent} from 'react'; import {SyntheticEvent} from 'react';
import {useHistory, useLocation} from 'react-router'; import {useNavigate, useLocation} from 'react-router';
import {loadFile} from '../datasource/load_data'; import {loadFile} from '../datasource/load_data';
function isImageFileName(fileName: string) { function isImageFileName(fileName: string) {
@@ -19,7 +19,7 @@ interface Props {
/** Displays and handles the "Open file" menu. */ /** Displays and handles the "Open file" menu. */
export function UploadMenu(props: Props) { export function UploadMenu(props: Props) {
const history = useHistory(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
async function handleUpload(event: SyntheticEvent<HTMLInputElement>) { async function handleUpload(event: SyntheticEvent<HTMLInputElement>) {
@@ -54,13 +54,18 @@ export function UploadMenu(props: Props) {
// Use history.replace() when reuploading the same file and history.push() when loading // Use history.replace() when reuploading the same file and history.push() when loading
// a new file. // a new file.
const search = queryString.parse(location.search); const search = queryString.parse(location.search);
const historyPush = search.file === hash ? history.replace : history.push; const replace = search.file === hash;
historyPush({ navigate(
pathname: '/view', {
search: queryString.stringify({file: hash}), pathname: '/view',
state: {data: gedcom, images}, search: queryString.stringify({file: hash}),
}); },
{
replace,
state: {data: gedcom, images},
},
);
} }
const content = ( const content = (

6
src/menu/url_menu.tsx
View File

@@ -4,7 +4,7 @@ import {Button, Form, Header, Icon, Input, Modal} from 'semantic-ui-react';
import {FormattedMessage} from 'react-intl'; import {FormattedMessage} from 'react-intl';
import {MenuItem, MenuType} from './menu_item'; import {MenuItem, MenuType} from './menu_item';
import {useEffect, useRef, useState} from 'react'; import {useEffect, useRef, useState} from 'react';
import {useHistory} from 'react-router'; import {useNavigate} from 'react-router';
interface Props { interface Props {
menuType: MenuType; menuType: MenuType;
@@ -15,7 +15,7 @@ export function UrlMenu(props: Props) {
const [dialogOpen, setDialogOpen] = useState(false); const [dialogOpen, setDialogOpen] = useState(false);
const [url, setUrl] = useState(''); const [url, setUrl] = useState('');
const inputRef = useRef<Input>(null); const inputRef = useRef<Input>(null);
const history = useHistory(); const navigate = useNavigate();
useEffect(() => { useEffect(() => {
if (dialogOpen) { if (dialogOpen) {
@@ -29,7 +29,7 @@ export function UrlMenu(props: Props) {
setDialogOpen(false); setDialogOpen(false);
if (url) { if (url) {
analyticsEvent('url_selected'); analyticsEvent('url_selected');
history.push({ navigate({
pathname: '/view', pathname: '/view',
search: queryString.stringify({url}), search: queryString.stringify({url}),
}); });

6
src/menu/wikitree_menu.tsx
View File

@@ -5,7 +5,7 @@ import {Button, Form, Header, Input, Modal} from 'semantic-ui-react';
import {FormattedMessage, useIntl} from 'react-intl'; import {FormattedMessage, useIntl} from 'react-intl';
import {MenuItem, MenuType} from './menu_item'; import {MenuItem, MenuType} from './menu_item';
import {useEffect, useRef, useState} from 'react'; import {useEffect, useRef, useState} from 'react';
import {useHistory, useLocation} from 'react-router'; import {useNavigate, useLocation} from 'react-router';
import {getLoggedInUserName, navigateToLoginPage} from 'wikitree-js'; import {getLoggedInUserName, navigateToLoginPage} from 'wikitree-js';
interface Props { interface Props {
@@ -17,7 +17,7 @@ export function WikiTreeMenu(props: Props) {
const [dialogOpen, setDialogOpen] = useState(false); const [dialogOpen, setDialogOpen] = useState(false);
const [wikiTreeId, setWikiTreeId] = useState(''); const [wikiTreeId, setWikiTreeId] = useState('');
const inputRef = useRef<Input>(null); const inputRef = useRef<Input>(null);
const history = useHistory(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
useEffect(() => { useEffect(() => {
@@ -37,7 +37,7 @@ export function WikiTreeMenu(props: Props) {
const search = queryString.parse(location.search); const search = queryString.parse(location.search);
const standalone = const standalone =
search.standalone !== undefined ? search.standalone : true; search.standalone !== undefined ? search.standalone : true;
history.push({ navigate({
pathname: '/view', pathname: '/view',
search: queryString.stringify({ search: queryString.stringify({
indi: wikiTreeId, indi: wikiTreeId,