fix(admin): Show selected item in the sidebar

natgeosociety · Oct 9, 2020 · fe2b04e · fe2b04e
1 parent 2e6e5af
commit fe2b04e
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 87 deletions.
diff --git 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 (
-      <div key={`${index}-${item.slug}`}>
-        {React.createElement(childComponent, {
-          item,
-          categoryUrl,
-          selectedItem,
-        })}
-      </div>
-    );
-  };
-
   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 (
+                <div key={item.slug}>
+                  {React.createElement(childComponent, {
+                    item,
+                    categoryUrl,
+                    selected: selectedItem === item.id,
+                  })}
+                </div>
+              );
+            }}
             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
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
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
@@ -25,19 +25,19 @@ 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 (
     <LinkWithOrg
       to={`/${categoryUrl}/${item.id}`}
       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
@@ -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
@@ -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 (
     <>
       <SidebarLayout page={PAGE_TYPE}>
@@ -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
@@ -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 (
     <>
       <SidebarLayout page={PAGE_TYPE}>
@@ -60,6 +64,7 @@ export default function LayersPage(props) {
           searchValueAction={setSearchValue}
           pageSize={PAGE_SIZE}
           searchValue={searchValue}
+          selectedItem={selectedItem}
           {...listProps}
         />
       </SidebarLayout>

diff --git 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 (
     <>
       <SidebarLayout page={PAGE_TYPE}>
         <DataListing
-          childComponent={Auth0ListItem}
+          childComponent={DefaultListItem}
           categoryUrl="organizations"
           pageTitle="ORGANIZATIONS"
           pageSize={PAGE_SIZE}
+          selectedItem={selectedItem}
           {...listProps}
         />
       </SidebarLayout>

diff --git 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 (
     <>
       <SidebarLayout page={PAGE_TYPE}>
@@ -60,8 +64,8 @@ export default function PlacesPage(props) {
           searchValueAction={setSearchValue}
           pageSize={PAGE_SIZE}
           searchValue={searchValue}
+          selectedItem={selectedItem}
           {...listProps}
-          // selectedItem={selectedItem}
         />
       </SidebarLayout>
       <Router>

diff --git 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 (
     <>
       <SidebarLayout page={PAGE_TYPE}>
@@ -79,6 +83,7 @@ export default function DashboardsPage(props) {
           searchValueAction={setSearchValue}
           pageSize={PAGE_SIZE}
           searchValue={searchValue}
+          selectedItem={selectedItem}
           {...listProps}
         />
       </SidebarLayout>