From fe2b04e366ec46f6c4f176999cd7d35aeb64d5b3 Mon Sep 17 00:00:00 2001 From: Horia Miron Date: Fri, 9 Oct 2020 13:04:38 +0300 Subject: [PATCH] fix(admin): Show selected item in the sidebar --- .../components/data-listing/DataListing.tsx | 26 +++++----- .../auth0-list-item/Auth0ListItem.tsx | 47 ------------------- .../data-listing/auth0-list-item/index.tsx | 19 -------- .../default-list-item/DefaultListItem.tsx | 6 +-- .../src/components/data-listing/index.tsx | 1 - .../src/pages-client/dashboards/routes.tsx | 5 ++ .../src/pages-client/layers/routes.tsx | 5 ++ .../src/pages-client/organizations/routes.tsx | 9 +++- .../src/pages-client/places/routes.tsx | 6 ++- .../src/pages-client/widgets/routes.tsx | 5 ++ 10 files changed, 42 insertions(+), 87 deletions(-) delete mode 100644 packages/earth-admin/src/components/data-listing/auth0-list-item/Auth0ListItem.tsx delete mode 100644 packages/earth-admin/src/components/data-listing/auth0-list-item/index.tsx diff --git a/packages/earth-admin/src/components/data-listing/DataListing.tsx b/packages/earth-admin/src/components/data-listing/DataListing.tsx index 6e4e0ee0..4629e40c 100644 --- a/packages/earth-admin/src/components/data-listing/DataListing.tsx +++ b/packages/earth-admin/src/components/data-listing/DataListing.tsx @@ -64,19 +64,6 @@ const DataListing = (props: DataListingProps) => { } = props; const { selectedGroup } = useAuth0(); - const renderItem = (index) => { - const item = data[index]; - return ( -
- {React.createElement(childComponent, { - item, - categoryUrl, - selectedItem, - })} -
- ); - }; - return ( <> {searchValueAction && ( @@ -101,7 +88,18 @@ const DataListing = (props: DataListingProps) => { awaitMore={awaitMore} pageSize={pageSize} itemCount={data.length} - renderItem={renderItem} + renderItem={(index) => { + const item = data[index]; + return ( +
+ {React.createElement(childComponent, { + item, + categoryUrl, + selected: selectedItem === item.id, + })} +
+ ); + }} onIntersection={onIntersection} {...otherProps} /> diff --git a/packages/earth-admin/src/components/data-listing/auth0-list-item/Auth0ListItem.tsx b/packages/earth-admin/src/components/data-listing/auth0-list-item/Auth0ListItem.tsx deleted file mode 100644 index 3214a57f..00000000 --- a/packages/earth-admin/src/components/data-listing/auth0-list-item/Auth0ListItem.tsx +++ /dev/null @@ -1,47 +0,0 @@ -/* - Copyright 2018-2020 National Geographic Society - - Use of this software does not constitute endorsement by National Geographic - Society (NGS). The NGS name and NGS logo may not be used for any purpose without - written permission from NGS. - - Licensed under the Apache License, Version 2.0 (the "License"); you may not use - this file except in compliance with the License. You may obtain a copy of the - License at - - https://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software distributed - under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR - CONDITIONS OF ANY KIND, either express or implied. See the License for the - specific language governing permissions and limitations under the License. -*/ - -import React from 'react'; - -import { LinkWithOrg } from '../../link-with-org'; - -interface Auth0ListProps { - categoryUrl: string; - item: { id: string; name: string; email: string; groups: Array<{ name: string }> }; -} - -const Auth0ListItem = (props: Auth0ListProps) => { - const { categoryUrl, item } = props; - - return ( - -

{item.name}

- {!!item.groups && ( - - {item.groups.map((group) => group.name).join(', ')} - - )} - - ); -}; - -export default Auth0ListItem; diff --git a/packages/earth-admin/src/components/data-listing/auth0-list-item/index.tsx b/packages/earth-admin/src/components/data-listing/auth0-list-item/index.tsx deleted file mode 100644 index 9819793a..00000000 --- a/packages/earth-admin/src/components/data-listing/auth0-list-item/index.tsx +++ /dev/null @@ -1,19 +0,0 @@ -/* - Copyright 2018-2020 National Geographic Society - - Use of this software does not constitute endorsement by National Geographic - Society (NGS). The NGS name and NGS logo may not be used for any purpose without - written permission from NGS. - - Licensed under the Apache License, Version 2.0 (the "License"); you may not use - this file except in compliance with the License. You may obtain a copy of the - License at - - https://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software distributed - under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR - CONDITIONS OF ANY KIND, either express or implied. See the License for the - specific language governing permissions and limitations under the License. -*/ -export { default as Auth0ListItem } from './Auth0ListItem'; diff --git a/packages/earth-admin/src/components/data-listing/default-list-item/DefaultListItem.tsx b/packages/earth-admin/src/components/data-listing/default-list-item/DefaultListItem.tsx index 893419a3..aa26c981 100644 --- a/packages/earth-admin/src/components/data-listing/default-list-item/DefaultListItem.tsx +++ b/packages/earth-admin/src/components/data-listing/default-list-item/DefaultListItem.tsx @@ -25,11 +25,11 @@ import { LinkWithOrg } from '@app/components/link-with-org'; interface DataListProps { categoryUrl: string; item: { name: string; id: string; slug: string }; - selectedItem: string; + selected: boolean; } const DefaultListItem = (props: DataListProps) => { - const { categoryUrl, item, selectedItem } = props; + const { categoryUrl, item, selected } = props; return ( { className={classnames( 'marapp-qa-listitem ng-data-link ng-display-block ng-padding-medium-horizontal ng-padding-small-vertical', { - 'ng-data-link-selected': selectedItem === item.id, + 'ng-data-link-selected': selected, } )} > diff --git a/packages/earth-admin/src/components/data-listing/index.tsx b/packages/earth-admin/src/components/data-listing/index.tsx index d69c2fc0..3e5f8bd2 100644 --- a/packages/earth-admin/src/components/data-listing/index.tsx +++ b/packages/earth-admin/src/components/data-listing/index.tsx @@ -18,5 +18,4 @@ */ export { DefaultListItem } from './default-list-item'; -export { Auth0ListItem } from './auth0-list-item'; export { default as DataListing } from './DataListing'; diff --git a/packages/earth-admin/src/pages-client/dashboards/routes.tsx b/packages/earth-admin/src/pages-client/dashboards/routes.tsx index 19f3181b..355ea9a1 100644 --- a/packages/earth-admin/src/pages-client/dashboards/routes.tsx +++ b/packages/earth-admin/src/pages-client/dashboards/routes.tsx @@ -50,6 +50,10 @@ export default function DashboardsPage(props) { }; const { listProps, mutate } = useInfiniteList(getQuery, getAllDashboards); + // Matches everything after the resource name in the url. + // In our case that's /resource-id or /new + const selectedItem = props['*']; + return ( <> @@ -59,6 +63,7 @@ export default function DashboardsPage(props) { pageTitle="dashboards" searchValueAction={setSearchValue} pageSize={PAGE_SIZE} + selectedItem={selectedItem} searchValue={searchValue} {...listProps} /> diff --git a/packages/earth-admin/src/pages-client/layers/routes.tsx b/packages/earth-admin/src/pages-client/layers/routes.tsx index 96c54756..b4c1bd75 100644 --- a/packages/earth-admin/src/pages-client/layers/routes.tsx +++ b/packages/earth-admin/src/pages-client/layers/routes.tsx @@ -50,6 +50,10 @@ export default function LayersPage(props) { }; const { listProps, mutate } = useInfiniteList(getQuery, getAllLayers); + // Matches everything after the resource name in the url. + // In our case that's /resource-id or /new + const selectedItem = props['*']; + return ( <> @@ -60,6 +64,7 @@ export default function LayersPage(props) { searchValueAction={setSearchValue} pageSize={PAGE_SIZE} searchValue={searchValue} + selectedItem={selectedItem} {...listProps} /> diff --git a/packages/earth-admin/src/pages-client/organizations/routes.tsx b/packages/earth-admin/src/pages-client/organizations/routes.tsx index 95c7c9a0..c4f711f7 100644 --- a/packages/earth-admin/src/pages-client/organizations/routes.tsx +++ b/packages/earth-admin/src/pages-client/organizations/routes.tsx @@ -21,7 +21,7 @@ import { Router } from '@reach/router'; import React from 'react'; import { useAuth0 } from '@app/auth/auth0'; -import { Auth0ListItem, DataListing } from '@app/components/data-listing'; +import { DataListing, DefaultListItem } from '@app/components/data-listing'; import { SidebarLayout } from '@app/layouts'; import { getAllOrganizations } from '@app/services/organizations'; import { encodeQueryToURL, setPage } from '@app/utils'; @@ -47,14 +47,19 @@ export default function PlacesPage(props) { }; const { listProps, mutate } = useInfiniteListPaged(getQuery, getAllOrganizations); + // Matches everything after the resource name in the url. + // In our case that's /resource-id or /new + const selectedItem = props['*']; + return ( <> diff --git a/packages/earth-admin/src/pages-client/places/routes.tsx b/packages/earth-admin/src/pages-client/places/routes.tsx index 023a251b..48a9b050 100644 --- a/packages/earth-admin/src/pages-client/places/routes.tsx +++ b/packages/earth-admin/src/pages-client/places/routes.tsx @@ -50,6 +50,10 @@ export default function PlacesPage(props) { }; const { listProps, mutate } = useInfiniteList(getQuery, getAllPlaces); + // Matches everything after the resource name in the url. + // In our case that's /resource-id or /new + const selectedItem = props['*']; + return ( <> @@ -60,8 +64,8 @@ export default function PlacesPage(props) { searchValueAction={setSearchValue} pageSize={PAGE_SIZE} searchValue={searchValue} + selectedItem={selectedItem} {...listProps} - // selectedItem={selectedItem} /> diff --git a/packages/earth-admin/src/pages-client/widgets/routes.tsx b/packages/earth-admin/src/pages-client/widgets/routes.tsx index 0e4b733f..0bdeefd1 100644 --- a/packages/earth-admin/src/pages-client/widgets/routes.tsx +++ b/packages/earth-admin/src/pages-client/widgets/routes.tsx @@ -69,6 +69,10 @@ export default function DashboardsPage(props) { } ); + // Matches everything after the resource name in the url. + // In our case that's /resource-id or /new + const selectedItem = props['*']; + return ( <> @@ -79,6 +83,7 @@ export default function DashboardsPage(props) { searchValueAction={setSearchValue} pageSize={PAGE_SIZE} searchValue={searchValue} + selectedItem={selectedItem} {...listProps} />