Merge pull request #6443 from TheThingsNetwork/fix/refactor-components

Remove `withRequest` and related selectors and refactor `<Require />`
TheThingsNetwork · Aug 14, 2023 · f1b6589 · f1b6589
2 parents 1fb53ec + 4589469
commit f1b6589
Show file tree

Hide file tree

Showing 41 changed files with 368 additions and 728 deletions.
diff --git a/pkg/webui/account/containers/authorizations-table/index.js b/pkg/webui/account/containers/authorizations-table/index.js
@@ -29,7 +29,6 @@ import { getAuthorizationsList } from '@account/store/actions/authorizations'
 import {
   selectAuthorizations,
   selectAuthorizationsTotalCount,
-  selectAuthorizationsFetching,
 } from '@account/store/selectors/authorizations'
 import { selectUserId } from '@account/store/selectors/user'
 
@@ -67,11 +66,10 @@ const OAuthClientAuthorizationsTable = () => {
   }, [])
 
   const baseDataSelector = createSelector(
-    [selectAuthorizations, selectAuthorizationsTotalCount, selectAuthorizationsFetching],
-    (authorizations, totalCount, fetching) => ({
+    [selectAuthorizations, selectAuthorizationsTotalCount],
+    (authorizations, totalCount) => ({
       authorizations,
       totalCount,
-      fetching,
       mayAdd: false,
     }),
   )

diff --git a/pkg/webui/account/containers/clients-table/index.js b/pkg/webui/account/containers/clients-table/index.js
@@ -36,11 +36,7 @@ import { checkFromState, mayPerformAllClientActions } from '@account/lib/feature
 import { deleteClient, restoreClient, getClientsList } from '@account/store/actions/clients'
 
 import { selectUserIsAdmin } from '@account/store/selectors/user'
-import {
-  selectOAuthClients,
-  selectOAuthClientsTotalCount,
-  selectOAuthClientsFetching,
-} from '@account/store/selectors/clients'
+import { selectOAuthClients, selectOAuthClientsTotalCount } from '@account/store/selectors/clients'
 
 const m = defineMessages({
   ownedTabTitle: 'Owned OAuth clients',
@@ -182,11 +178,10 @@ const ClientsTable = () => {
   }, [tab, handlePurge, handleRestore, formatMessage])
 
   const baseDataSelector = createSelector(
-    [selectOAuthClients, selectOAuthClientsTotalCount, selectOAuthClientsFetching, mayAddSelector],
-    (clients, totalCount, fetching, mayAdd) => ({
+    [selectOAuthClients, selectOAuthClientsTotalCount, mayAddSelector],
+    (clients, totalCount, mayAdd) => ({
       clients,
       totalCount,
-      fetching,
       mayAdd,
     }),
   )

diff --git a/pkg/webui/account/containers/collaborators-table/index.js b/pkg/webui/account/containers/collaborators-table/index.js
@@ -36,8 +36,6 @@ import { getCollaboratorsList, deleteCollaborator } from '@ttn-lw/lib/store/acti
 import {
   selectCollaborators,
   selectCollaboratorsTotalCount,
-  selectCollaboratorsFetching,
-  selectCollaboratorsError,
 } from '@ttn-lw/lib/store/selectors/collaborators'
 
 import { selectUserId } from '@account/store/selectors/user'
@@ -165,17 +163,10 @@ const CollaboratorsTable = props => {
   }, [intl, currentUserId, deleteCollaborator])
 
   const baseDataSelector = createSelector(
-    [
-      selectCollaborators,
-      selectCollaboratorsTotalCount,
-      selectCollaboratorsFetching,
-      selectCollaboratorsError,
-    ],
-    (collaborators, totalCount, fetching, error) => ({
+    [selectCollaborators, selectCollaboratorsTotalCount],
+    (collaborators, totalCount) => ({
       collaborators,
       totalCount,
-      fetching,
-      error,
       mayLink: false,
     }),
   )

diff --git a/pkg/webui/account/containers/sessions-table/index.js b/pkg/webui/account/containers/sessions-table/index.js
@@ -31,11 +31,7 @@ import attachPromise from '@ttn-lw/lib/store/actions/attach-promise'
 import { getUserSessionsList, deleteUserSession } from '@account/store/actions/sessions'
 
 import { selectUserId, selectSessionId } from '@account/store/selectors/user'
-import {
-  selectUserSessions,
-  selectUserSessionsTotalCount,
-  selectUserSessionsFetching,
-} from '@account/store/selectors/sessions'
+import { selectUserSessions, selectUserSessionsTotalCount } from '@account/store/selectors/sessions'
 
 const m = defineMessages({
   deleteSessionSuccess: 'Session removed successfully',
@@ -76,8 +72,8 @@ const UserSessionsTable = () => {
   )
 
   const baseDataSelector = createSelector(
-    [selectUserSessions, selectUserSessionsTotalCount, selectUserSessionsFetching],
-    (sessions, totalCount, fetching) => {
+    [selectUserSessions, selectUserSessionsTotalCount],
+    (sessions, totalCount) => {
       const decoratedSessions = []
 
       if (sessions) {
@@ -95,7 +91,6 @@ const UserSessionsTable = () => {
       return {
         sessions: decoratedSessions,
         totalCount,
-        fetching,
         mayAdd: false,
         mayLink: false,
       }

diff --git a/pkg/webui/account/containers/tokens-table/index.js b/pkg/webui/account/containers/tokens-table/index.js
@@ -41,11 +41,7 @@ import {
   getAccessTokensList,
 } from '@account/store/actions/authorizations'
 
-import {
-  selectTokens,
-  selectTokensTotalCount,
-  selectTokensFetching,
-} from '@account/store/selectors/authorizations'
+import { selectTokens, selectTokensTotalCount } from '@account/store/selectors/authorizations'
 import { selectUserId } from '@account/store/selectors/user'
 
 const m = defineMessages({
@@ -169,11 +165,9 @@ const TokensTable = () => {
   const baseDataSelector = createSelector(
     selectTokens,
     selectTokensTotalCount,
-    selectTokensFetching,
-    (tokens, totalCount, fetching) => ({
+    (tokens, totalCount) => ({
       tokens,
       totalCount,
-      fetching,
       mayAdd: false,
       mayLink: false,
     }),

diff --git a/pkg/webui/account/views/oauth-clients-list/index.js b/pkg/webui/account/views/oauth-clients-list/index.js
@@ -14,27 +14,38 @@
 
 import React from 'react'
 import { Row, Col, Container } from 'react-grid-system'
+import { useSelector } from 'react-redux'
 
 import PAGE_SIZES from '@ttn-lw/constants/page-sizes'
 
 import PageTitle from '@ttn-lw/components/page-title'
 
 import IntlHelmet from '@ttn-lw/lib/components/intl-helmet'
+import RequireRequest from '@ttn-lw/lib/components/require-request'
 
 import ClientsTable from '@account/containers/clients-table'
 
 import sharedMessages from '@ttn-lw/lib/shared-messages'
 
-const ClientsList = () => (
-  <Container>
-    <Row>
-      <IntlHelmet title={sharedMessages.oauthClients} />
-      <Col>
-        <PageTitle title={sharedMessages.oauthClients} hideHeading />
-        <ClientsTable pageSize={PAGE_SIZES.REGULAR} />
-      </Col>
-    </Row>
-  </Container>
-)
+import { getUserRights } from '@account/store/actions/user'
+
+import { selectUserId } from '@account/store/selectors/user'
+
+const ClientsList = () => {
+  const userId = useSelector(selectUserId)
+  return (
+    <RequireRequest requestAction={getUserRights(userId)}>
+      <Container>
+        <Row>
+          <IntlHelmet title={sharedMessages.oauthClients} />
+          <Col>
+            <PageTitle title={sharedMessages.oauthClients} hideHeading />
+            <ClientsTable pageSize={PAGE_SIZES.REGULAR} />
+          </Col>
+        </Row>
+      </Container>
+    </RequireRequest>
+  )
+}
 
 export default ClientsList