diff options
-rw-r--r-- | vnext/package-lock.json | 194 | ||||
-rw-r--r-- | vnext/package.json | 2 | ||||
-rw-r--r-- | vnext/src/App.js | 58 | ||||
-rw-r--r-- | vnext/src/ui/Feeds.js | 49 | ||||
-rw-r--r-- | vnext/src/ui/Header.js | 8 | ||||
-rw-r--r-- | vnext/src/ui/Login.js | 8 | ||||
-rw-r--r-- | vnext/src/ui/Post.js | 6 |
7 files changed, 105 insertions, 220 deletions
diff --git a/vnext/package-lock.json b/vnext/package-lock.json index ac65b113..55bd8712 100644 --- a/vnext/package-lock.json +++ b/vnext/package-lock.json @@ -23,7 +23,7 @@ "react-cookie": "^4.1.1", "react-dom": "18.2.0", "react-hook-form": "^7.38.0", - "react-router-dom": "^5.3.4", + "react-router-dom": "^6.4.2", "react-use": "^17.4.0", "regenerator-runtime": "^0.13.10", "svg4everybody": "^2.1.9", @@ -3138,6 +3138,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz", + "integrity": "sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ==", + "engines": { + "node": ">=14" + } + }, "node_modules/@sinclair/typebox": { "version": "0.24.50", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.50.tgz", @@ -7756,19 +7764,6 @@ "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": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -8610,11 +8605,6 @@ "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": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -11236,6 +11226,7 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -12876,6 +12867,7 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -13285,47 +13277,33 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-router": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", - "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", - "dependencies": { - "@babel/runtime": "^7.12.13", - "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" + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.2.tgz", + "integrity": "sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==", + "dependencies": { + "@remix-run/router": "1.0.2" + }, + "engines": { + "node": ">=14" }, "peerDependencies": { - "react": ">=15" + "react": ">=16.8" } }, "node_modules/react-router-dom": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz", - "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==", - "dependencies": { - "@babel/runtime": "^7.12.13", - "history": "^4.9.0", - "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" + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.2.tgz", + "integrity": "sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==", + "dependencies": { + "@remix-run/router": "1.0.2", + "react-router": "6.4.2" + }, + "engines": { + "node": ">=14" }, "peerDependencies": { - "react": ">=15" - } - }, - "node_modules/react-router/node_modules/path-to-regexp": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", - "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", - "dependencies": { - "isarray": "0.0.1" + "react": ">=16.8", + "react-dom": ">=16.8" } }, "node_modules/react-shallow-renderer": { @@ -13714,11 +13692,6 @@ "node": ">=8" } }, - "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.exports": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz", @@ -14982,16 +14955,6 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "dev": true }, - "node_modules/tiny-invariant": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", - "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==" - }, - "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/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -15404,11 +15367,6 @@ "spdx-expression-parse": "^3.0.0" } }, - "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": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -18136,6 +18094,11 @@ "fastq": "^1.6.0" } }, + "@remix-run/router": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz", + "integrity": "sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ==" + }, "@sinclair/typebox": { "version": "0.24.50", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.50.tgz", @@ -21599,19 +21562,6 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "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": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -22211,11 +22161,6 @@ "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": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -24167,7 +24112,8 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "dev": true }, "object-code": { "version": "1.2.4", @@ -25220,6 +25166,7 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -25510,43 +25457,20 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "react-router": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", - "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", - "requires": { - "@babel/runtime": "^7.12.13", - "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": { - "path-to-regexp": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", - "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", - "requires": { - "isarray": "0.0.1" - } - } + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.2.tgz", + "integrity": "sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==", + "requires": { + "@remix-run/router": "1.0.2" } }, "react-router-dom": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz", - "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==", + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.2.tgz", + "integrity": "sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==", "requires": { - "@babel/runtime": "^7.12.13", - "history": "^4.9.0", - "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" + "@remix-run/router": "1.0.2", + "react-router": "6.4.2" } }, "react-shallow-renderer": { @@ -25852,11 +25776,6 @@ "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", "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.exports": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz", @@ -26858,16 +26777,6 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "dev": true }, - "tiny-invariant": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", - "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==" - }, - "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==" - }, "tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -27173,11 +27082,6 @@ "spdx-expression-parse": "^3.0.0" } }, - "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": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/vnext/package.json b/vnext/package.json index bf5dc14a..cfcfee29 100644 --- a/vnext/package.json +++ b/vnext/package.json @@ -91,7 +91,7 @@ "react-cookie": "^4.1.1", "react-dom": "18.2.0", "react-hook-form": "^7.38.0", - "react-router-dom": "^5.3.4", + "react-router-dom": "^6.4.2", "react-use": "^17.4.0", "regenerator-runtime": "^0.13.10", "svg4everybody": "^2.1.9", diff --git a/vnext/src/App.js b/vnext/src/App.js index b56e0300..79fde2d1 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -1,5 +1,5 @@ import { useState, useEffect, useRef } from 'react'; -import { Route, Link, Switch } from 'react-router-dom'; +import { Route, Link, Routes } from 'react-router-dom'; import { useScroll, useRafState } from 'react-use'; import qs from 'qs'; @@ -183,47 +183,21 @@ export default function App({ footer }) { </aside> } <section id="content" ref={contentRef} className={scrollState.top ? elClassTop : ''}> - <Switch> - <Route exact path="/"> - <Discussions visitor={visitor} /> - </Route> - <Route exact path="/home"> - <Home visitor={visitor} /> - </Route> - <Route exact path="/discover"> - <Discover visitor={visitor} /> - </Route> - <Route exact path="/settings"> - <Settings visitor={visitor} onChange={auth} /> - </Route> - <Route exact path="/login"> - <Login visitor={visitor} onAuth={auth} /> - </Route> - <Route exact path="/post"> - <Post visitor={visitor} /> - </Route> - <Route exact path="/pm"> - <Contacts visitor={visitor} /> - </Route> - <Route exact path="/pm/:user"> - <Chat connection={eventSource} visitor={visitor} /> - </Route> - <Route exact path="/:user/friends"> - <Friends /> - </Route> - <Route exact path="/:user/readers"> - <Readers /> - </Route> - <Route exact path="/:user"> - <Blog visitor={visitor} /> - </Route> - <Route exact path="/tag/:tag"> - <Tag visitor={visitor} /> - </Route> - <Route exact path="/:user/:mid"> - <Thread connection={eventSource} visitor={visitor} /> - </Route> - </Switch> + <Routes> + <Route exact path="/" element={<Discussions visitor={visitor} />} /> + <Route exact path="/home" element={<Home visitor={visitor} />} /> + <Route exact path="/discover" element={<Discover visitor={visitor} />} /> + <Route exact path="/settings" element={<Settings visitor={visitor} onChange={auth} />} /> + <Route exact path="/login" element={<Login visitor={visitor} onAuth={auth} />} /> + <Route exact path="/post" element={<Post visitor={visitor} />} /> + <Route exact path="/pm" element={<Contacts visitor={visitor} />} /> + <Route exact path="/pm/:user" element={<Chat connection={eventSource} visitor={visitor} />} /> + <Route exact path="/:user/friends" element={<Friends />} /> + <Route exact path="/:user/readers" element={<Readers />} /> + <Route exact path="/:user" element={<Blog visitor={visitor} />} /> + <Route exact path="/tag/:tag" element={<Tag visitor={visitor} />} /> + <Route exact path="/:user/:mid" element={<Thread connection={eventSource} visitor={visitor} />} /> + </Routes> </section> </div> </> diff --git a/vnext/src/ui/Feeds.js b/vnext/src/ui/Feeds.js index d6813130..c9199fa6 100644 --- a/vnext/src/ui/Feeds.js +++ b/vnext/src/ui/Feeds.js @@ -1,5 +1,5 @@ -import { useState, useEffect } from 'react'; -import { Link, useLocation, useHistory, useParams } from 'react-router-dom'; +import { useState, useEffect, useLayoutEffect } from 'react'; +import { Link, useLocation, useParams, Navigate } from 'react-router-dom'; import qs from 'qs'; import moment from 'moment'; @@ -25,6 +25,19 @@ import { getMessages } from '../api'; * @property {import('../api').Message[]=} msgs */ +function RequireAuth({ visitor, children }) { + let location = useLocation(); + if (!visitor.hash) { + // Redirect them to the /login page, but save the current location they were + // trying to go to when they were redirected. This allows us to send them + // along to that page after they login, which is a nicer user experience + // than dropping them off on the home page. + return <Navigate to="/login" state={{ from: location }} />; + } + + return children; +} + /** * @param {PageProps} props */ @@ -36,7 +49,7 @@ export function Discover({ visitor }) { search: search, pageParam: search.search ? 'page' : 'before_mid' }; - return (<Feed authRequired={false} query={query} visitor={visitor} />); + return (<Feed query={query} visitor={visitor} />); } /** @@ -47,7 +60,7 @@ export function Discussions({ visitor }) { baseUrl: '/api/messages/discussions', pageParam: 'to' }; - return (<Feed authRequired={false} query={query} visitor={visitor} />); + return (<Feed query={query} visitor={visitor} />); } /** @@ -70,7 +83,7 @@ export function Blog({ visitor }) { <div className="msg-cont"> <UserInfo uname={user} /> </div> - <Feed authRequired={false} query={query} visitor={visitor} /> + <Feed query={query} visitor={visitor} /> </> ); } @@ -88,7 +101,7 @@ export function Tag({ visitor }) { }, pageParam: 'before_mid' }; - return (<Feed authRequired={false} query={query} visitor={visitor} />); + return (<Feed query={query} visitor={visitor} />); } /** @@ -99,12 +112,15 @@ export function Home({ visitor }) { baseUrl: '/api/home', pageParam: 'before_mid' }; - return (<Feed authRequired={true} query={query} visitor={visitor} />); + return ( + <RequireAuth visitor={visitor}> + <Feed query={query} visitor={visitor} /> + </RequireAuth> + ); } /** * @typedef {Object} FeedState - * @property { boolean } authRequired * @property { import('../api').SecureUser } visitor * @property { import('../api').Message[]= } msgs * @property { Query} query @@ -113,11 +129,9 @@ export function Home({ visitor }) { /** * @param {FeedState} props */ -function Feed({ visitor, query, authRequired }) { +function Feed({ visitor, query }) { const location = useLocation(); - const history = useHistory(); const [state, setState] = useState({ - authRequired: authRequired, hash: visitor.hash, msgs: [], nextpage: null, @@ -125,7 +139,6 @@ function Feed({ visitor, query, authRequired }) { tag: '' }); const [loading, setLoading] = useState(true); - useEffect(() => { setLoading(true); const filter = location.search.substring(1); @@ -135,23 +148,17 @@ function Feed({ visitor, query, authRequired }) { newFilter[pageParam] = pageValue; return `?${qs.stringify(newFilter)}`; }; - document.body.scrollTop = 0; - document.documentElement.scrollTop = 0; const filterParams = qs.parse(filter); let params = Object.assign({}, filterParams || {}, query.search || {}); let url = query.baseUrl; - if (state.hash) { - params.hash = state.hash; - } - if (!params.hash && state.authRequired) { - history.push('/'); - } getMessages(url, params) .then(response => { const { data } = response; const { pageParam } = query; const lastMessage = data.slice(-1)[0] || {}; const nextpage = getPageParam(pageParam, lastMessage, filterParams); + document.body.scrollTop = 0; + document.documentElement.scrollTop = 0; setState((prevState) => { return { ...prevState, @@ -169,7 +176,7 @@ function Feed({ visitor, query, authRequired }) { }; }); }); - }, [location.search, state.hash, state.authRequired, history, query]); + }, [location.search, query]); return (state.msgs.length > 0 ? ( <div className="msgs"> { diff --git a/vnext/src/ui/Header.js b/vnext/src/ui/Header.js index 1574a489..3162c9ea 100644 --- a/vnext/src/ui/Header.js +++ b/vnext/src/ui/Header.js @@ -1,12 +1,12 @@ import { memo, useCallback } from 'react'; -import { Link, useHistory } from 'react-router-dom'; +import { Link, useNavigate } from 'react-router-dom'; import Icon from './Icon'; import { UserLink } from './UserInfo'; import SearchBox from './SearchBox'; function Header({ visitor, className }) { - const history = useHistory(); + const navigate = useNavigate(); /** * @param {string} searchString */ @@ -14,8 +14,8 @@ function Header({ visitor, className }) { let location = {}; location.pathname = '/discover'; location.search = `?search=${searchString}`; - history.push(location); - }, [history]); + navigate(location); + }, [navigate]); return ( <div id="header" className={className}> <div id="header_wrapper"> diff --git a/vnext/src/ui/Login.js b/vnext/src/ui/Login.js index fc3922c8..5a96c822 100644 --- a/vnext/src/ui/Login.js +++ b/vnext/src/ui/Login.js @@ -1,5 +1,5 @@ import { useEffect } from 'react'; -import { useLocation, useHistory } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import Icon from './Icon'; import Button from './Button'; @@ -22,15 +22,15 @@ import './Login.css'; function Login({ visitor, onAuth }) { const location = useLocation(); - const history = useHistory(); + const navigate = useNavigate(); useEffect(() => { if (visitor.hash) { const {retpath } = location.state || '/'; console.log(retpath); - history.push(retpath); + navigate(retpath); } - }, [history, location.state, visitor]); + }, [navigate, location.state, visitor]); const { register, handleSubmit, formState: { errors }, } = useForm(); diff --git a/vnext/src/ui/Post.js b/vnext/src/ui/Post.js index d8d841e1..a1d14ea0 100644 --- a/vnext/src/ui/Post.js +++ b/vnext/src/ui/Post.js @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { useLocation, useHistory } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import qs from 'qs'; @@ -13,7 +13,7 @@ import { post, update } from '../api'; */ export default function Post({ visitor }) { const location = useLocation(); - const history = useHistory(); + const navigate = useNavigate(); let draftMessage = (location.state || {}).draft || {}; let [draft, setDraft] = useState(draftMessage.body); let params = qs.parse(window.location.search.substring(1)); @@ -24,7 +24,7 @@ export default function Post({ visitor }) { .then(response => { if (response.status === 200) { const msg = response.data.newMessage; - history.push(`/${visitor.uname}/${msg.mid}`); + navigate(`/${visitor.uname}/${msg.mid}`); } }).catch(console.log); }; |