From 59ed95a4f595eac0fe1fdffd90eac026b789cd99 Mon Sep 17 00:00:00 2001 From: Thomas Kam Date: Tue, 22 Oct 2024 03:00:33 -0400 Subject: [PATCH] client-admin partly converted to react router v6 --- client-admin/package-lock.json | 99 +++----- client-admin/package.json | 2 +- client-admin/src/app.js | 228 ++++++++---------- .../comment-moderation/index.js | 12 +- .../components/conversation-admin/index.js | 18 +- .../conversation-admin/report/reports.js | 7 +- .../src/components/landers/createuser.js | 9 +- client-admin/src/components/landers/signin.js | 4 +- client-admin/src/index.js | 4 +- 9 files changed, 160 insertions(+), 223 deletions(-) diff --git a/client-admin/package-lock.json b/client-admin/package-lock.json index 53ed65cd6..6dc292929 100644 --- a/client-admin/package-lock.json +++ b/client-admin/package-lock.json @@ -17,7 +17,7 @@ "react-dom": "^18.3.1", "react-easy-emoji": "~1.8.1", "react-redux": "^9.1.2", - "react-router-dom": "^5.3.4", + "react-router-dom": "^6.27.0", "redux": "^5.0.0", "redux-thunk": "~2.3.0", "theme-ui": "^0.16.2", @@ -2340,6 +2340,14 @@ "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==", "dev": true }, + "node_modules/@remix-run/router": { + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz", + "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@styled-system/background": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@styled-system/background/-/background-5.1.2.tgz", @@ -6876,23 +6884,11 @@ "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", "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "peer": true, "dependencies": { "react-is": "^16.7.0" } @@ -9886,52 +9882,33 @@ } }, "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==", + "version": "6.27.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz", + "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==", "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" + "@remix-run/router": "1.20.0" + }, + "engines": { + "node": ">=14.0.0" }, "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==", + "version": "6.27.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz", + "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==", "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" + "@remix-run/router": "1.20.0", + "react-router": "6.27.0" + }, + "engines": { + "node": ">=14.0.0" }, "peerDependencies": { - "react": ">=15" - } - }, - "node_modules/react-router/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/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/read-pkg": { @@ -10345,11 +10322,6 @@ "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/retry": { "version": "0.13.1", "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz", @@ -11604,16 +11576,6 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "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/to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -12121,11 +12083,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", diff --git a/client-admin/package.json b/client-admin/package.json index c91daadec..0b676daaf 100644 --- a/client-admin/package.json +++ b/client-admin/package.json @@ -62,7 +62,7 @@ "react-dom": "^18.3.1", "react-easy-emoji": "~1.8.1", "react-redux": "^9.1.2", - "react-router-dom": "^5.3.4", + "react-router-dom": "^6.27.0", "redux": "^5.0.0", "redux-thunk": "~2.3.0", "theme-ui": "^0.16.2", diff --git a/client-admin/src/app.js b/client-admin/src/app.js index b050b22ff..b7617b433 100644 --- a/client-admin/src/app.js +++ b/client-admin/src/app.js @@ -8,7 +8,7 @@ import { populateUserStore } from './actions' import _ from 'lodash' -import { Switch, Route, Link, Redirect } from 'react-router-dom' +import { Routes, Route, Link, Navigate, useLocation } from 'react-router-dom' import { Flex, Box, jsx } from 'theme-ui' /* landers */ @@ -31,28 +31,20 @@ import Integrate from './components/conversations-and-account/integrate' import InteriorHeader from './components/interior-header' -const PrivateRoute = ({ component: Component, isLoading, authed, ...rest }) => { +const PrivateRoute = ({ element: Component, isLoading, authed, ...rest }) => { + const location = useLocation(); if (isLoading) { - return null + return null; } - return ( - - authed === true ? ( - - ) : ( - - ) - } - /> - ) + return authed === true ? ( + + ) : ( + + ); } PrivateRoute.propTypes = { - component: PropTypes.element, + element: PropTypes.element, isLoading: PropTypes.bool, location: PropTypes.object, authed: PropTypes.bool @@ -127,119 +119,100 @@ class App extends React.Component { } render() { + const SignInWrapper = (props) => { + return ; + }; const { location } = this.props return ( <> - - - + } - /> + path=":url/*(/+)" + element={} /> + } /> } render={() => } /> - } - /> - - - - - - - - - - - - - - - - { - if (routeProps.location.pathname.split('/')[1] === 'm') { - return null - } - return ( - - - - - Conversations - - - - - Integrate - - - - - Account - - - - - - - - - - - ) - }} - /> - - - - + } /> + } /> + + } /> + } > + } /> + + } /> + } /> + + + + + + + Conversations + + + + + Integrate + + + + + Account + + + + + + } /> + } /> + + } /> + } /> + + + + + } /> + + ) } @@ -259,4 +232,9 @@ App.propTypes = { }) } -export default App +function AppWithLocation(props) { + const location = useLocation() + return +} + +export default AppWithLocation diff --git a/client-admin/src/components/conversation-admin/comment-moderation/index.js b/client-admin/src/components/conversation-admin/comment-moderation/index.js index 012b49804..f95304c51 100644 --- a/client-admin/src/components/conversation-admin/comment-moderation/index.js +++ b/client-admin/src/components/conversation-admin/comment-moderation/index.js @@ -13,7 +13,7 @@ import ModerateCommentsTodo from './moderate-comments-todo' import ModerateCommentsAccepted from './moderate-comments-accepted' import ModerateCommentsRejected from './moderate-comments-rejected' -import { Switch, Route, Link } from 'react-router-dom' +import { Routes, Route, Link } from 'react-router-dom' const mapStateToProps = (state, ownProps) => { return { @@ -103,23 +103,23 @@ class CommentModeration extends React.Component { - + } /> } /> } /> - + ) diff --git a/client-admin/src/components/conversation-admin/index.js b/client-admin/src/components/conversation-admin/index.js index df0ad4105..540057028 100644 --- a/client-admin/src/components/conversation-admin/index.js +++ b/client-admin/src/components/conversation-admin/index.js @@ -5,7 +5,7 @@ import React from 'react' import { connect } from 'react-redux' import { Flex, Box, jsx } from 'theme-ui' import { populateZidMetadataStore, resetMetadataStore } from '../../actions' -import { Switch, Route, Link } from 'react-router-dom' +import { Route, Link, Routes } from 'react-router-dom' import ConversationConfig from './conversation-config' import ConversationStats from './stats' @@ -99,29 +99,29 @@ class ConversationAdminContainer extends React.Component { - + } /> } /> - + } /> } /> } /> - {/* */} - + {/* } /> */} + ) diff --git a/client-admin/src/components/conversation-admin/report/reports.js b/client-admin/src/components/conversation-admin/report/reports.js index 16759024e..e78045df4 100644 --- a/client-admin/src/components/conversation-admin/report/reports.js +++ b/client-admin/src/components/conversation-admin/report/reports.js @@ -3,15 +3,12 @@ import React from 'react' import ReportsList from './reports-list' -import { Switch, Route } from 'react-router-dom' class Reports extends React.Component { render() { return (
- - - +
) } @@ -20,5 +17,5 @@ class Reports extends React.Component { export default Reports // -// +// }> // diff --git a/client-admin/src/components/landers/createuser.js b/client-admin/src/components/landers/createuser.js index 5fc58d344..b3bfa7cb2 100644 --- a/client-admin/src/components/landers/createuser.js +++ b/client-admin/src/components/landers/createuser.js @@ -6,7 +6,7 @@ import { connect } from 'react-redux' import { doCreateUser, doFacebookSignin } from '../../actions' import { Heading, Box, Text, Button, jsx } from 'theme-ui' -import { Link } from 'react-router-dom' +import { Link, useLocation } from 'react-router-dom' import StaticLayout from './lander-layout' import strings from '../../strings/strings' @@ -225,4 +225,9 @@ class Createuser extends React.Component { } } -export default Createuser +const CreateUserWithLocation = (props) => { + const location = useLocation() + return +} + +export default CreateUserWithLocation diff --git a/client-admin/src/components/landers/signin.js b/client-admin/src/components/landers/signin.js index e16bbf30a..e715b8b23 100644 --- a/client-admin/src/components/landers/signin.js +++ b/client-admin/src/components/landers/signin.js @@ -4,7 +4,7 @@ import React from 'react' import { connect } from 'react-redux' import { doSignin, doFacebookSignin } from '../../actions' -import { Link, Redirect } from 'react-router-dom' +import { Link, Navigate } from 'react-router-dom' import { Heading, Box, Text, Button, jsx } from 'theme-ui' import StaticLayout from './lander-layout' @@ -171,7 +171,7 @@ class SignIn extends React.Component { const { signInSuccessful, authed } = this.props if (signInSuccessful || authed) { - return + return } return ( diff --git a/client-admin/src/index.js b/client-admin/src/index.js index e856ef051..a7e75f853 100644 --- a/client-admin/src/index.js +++ b/client-admin/src/index.js @@ -10,7 +10,7 @@ import { ThemeUIProvider } from 'theme-ui' import theme from './theme' import App from './app' -import { BrowserRouter, Route } from 'react-router-dom' +import { BrowserRouter } from 'react-router-dom' import { createRoot } from 'react-dom/client'; const store = configureStore() @@ -21,7 +21,7 @@ root.render( - }> +