feat(map): SWR support on earth page [EP-3524]

* wip * wip #2 * wip #3 * wip #4 * wip #5 * wip #6 * fixed layers panel * wip #7 * wip #8 * fix admin * wip #9 * fix license Co-authored-by: ancashoria <horia.ancas@gmail.com>
natgeosociety · Jan 21, 2021 · 02daba4 · 02daba4
1 parent 806e8dd
commit 02daba4
Show file tree

Hide file tree

Showing 26 changed files with 409 additions and 382 deletions.
diff --git a/packages/earth-admin/src/utils/hooks.test.ts b/packages/earth-admin/src/utils/hooks.test.ts
@@ -1,3 +1,22 @@
+/*
+  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 { act, renderHook } from '@testing-library/react-hooks';
 
 import { mergePages, useInfiniteList } from './hooks';

diff --git a/packages/earth-admin/src/utils/hooks.tsx b/packages/earth-admin/src/utils/hooks.tsx
@@ -10,7 +10,7 @@
   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

diff --git a/packages/earth-map/.env.sample b/packages/earth-map/.env.sample
@@ -6,7 +6,7 @@ GATSBY_APP_MAP_ASSETS_URL='' # required
 GATSBY_APP_MAP_API_URL='' # required
 GATSBY_APP_MAP_MAPBOX_TOKEN='' # required
 GATSBY_APP_MAP_ADMIN_URL='/admin/' # required
-GATSBY_APP_MAP_FULLPAGE_LICENSE='11A64E11-6A674726-89F7B31C-36D8EAF7'
+GATSBY_APP_MAP_FULLPAGE_LICENSE='' # required
 
 GATSBY_APP_MAP_AUTH0_DOMAIN='' # required
 GATSBY_APP_MAP_AUTH0_CLIENT_ID='' # required

diff --git a/packages/earth-map/package.json b/packages/earth-map/package.json
@@ -27,25 +27,26 @@
     "core-js": "^3.6.5",
     "file-saver": "^2.0.5",
     "fuse.js": "^3.4.4",
+    "gatsby": "^2.17.10",
+    "gatsby-plugin-create-client-paths": "^2.1.15",
+    "gatsby-plugin-portal": "^1.0.7",
+    "gatsby-plugin-root-import": "^2.0.5",
+    "gatsby-plugin-sass": "^2.1.20",
+    "gatsby-plugin-typescript": "^2.1.15",
     "i18next": "^19.8.3",
     "jszip": "^3.5.0",
     "lodash": "^4.17.15",
     "orbit-controls-es6": "^2.0.0",
     "react-gtm-module": "^2.0.10",
     "react-i18next": "^11.7.3",
     "react-intersection-observer": "^8.26.2",
+    "swr": "^0.4.0",
     "three": "^0.103.0",
     "three-css2drender": "^1.0.0",
     "ts-jsonapi": "^2.1.3",
     "url-join": "^4.0.1",
     "viewport-mercator-project": "^6.1.1",
-    "yn": "^4.0.0",
-    "gatsby": "^2.17.10",
-    "gatsby-plugin-portal": "^1.0.7",
-    "gatsby-plugin-typescript": "^2.1.15",
-    "gatsby-plugin-sass": "^2.1.20",
-    "gatsby-plugin-root-import": "^2.0.5",
-    "gatsby-plugin-create-client-paths": "^2.1.15"
+    "yn": "^4.0.0"
   },
   "devDependencies": {
     "babel-eslint": "10.1.0",

diff --git a/packages/earth-map/src/components/collection/collections-card/CollectionsCard.tsx b/packages/earth-map/src/components/collection/collections-card/CollectionsCard.tsx
@@ -33,16 +33,13 @@ const { NEW_COLLECTION } = EarthRoutes;
 interface IProps {
   canCreate: boolean;
   group: string[];
-  featured?: {
-    data: ICollection[];
-  };
+  data: ICollection[];
 }
 
 export const CollectionsCard = (props: IProps) => {
-  const { canCreate, featured, group } = props;
+  const { canCreate, data, group } = props;
   const { t } = useTranslation();
-  const { data } = featured;
-  const hasCollections = !!data.length;
+  const hasCollections = !!data?.length;
 
   if (hasCollections) {
     return (

diff --git a/...ents/collection/collections-card/index.ts → ...nts/collection/collections-card/index.tsx b/...ents/collection/collections-card/index.ts → ...nts/collection/collections-card/index.tsx
@@ -17,10 +17,22 @@
   specific language governing permissions and limitations under the License.
 */
 
-import { connect } from 'react-redux';
+import React from 'react';
 
+import useLocations from '../../../fetchers/useLocations';
+import { LocationTypeEnum } from '../../../modules/places/model';
 import { CollectionsCard } from './CollectionsCard';
 
-export default connect((state: any) => ({
-  featured: state.collections.featured,
-}))(CollectionsCard);
+export default function WithData(props) {
+  const { group } = props;
+
+  const { data } = useLocations({
+    select: 'slug,name,id,organization,type,updatedAt',
+    filter: ['type', '==', LocationTypeEnum.COLLECTION].join(''),
+    page: { size: 5 },
+    sort: '-updatedAt',
+    group: group.toString(),
+  });
+
+  return <CollectionsCard data={data} {...props} />;
+}
diff --git a/packages/earth-map/src/components/filter-by/FilterBy.tsx b/packages/earth-map/src/components/filter-by/FilterBy.tsx
@@ -18,23 +18,30 @@
 */
 
 import classnames from 'classnames';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { cleanFilters, countFilters } from '../../utils/filters';
 import './styles.scss';
 
 interface IProps {
-  data: any;
   open: boolean;
   onOpenToggle: (payload?) => void;
   onChange: (payload?) => void;
+  filters: { [key: string]: string[] };
+  availableFilters: { [key: string]: Array<{ [key: string]: any }> };
 }
 
 const FilterBy = (props: IProps) => {
-  const { data, open, onOpenToggle, onChange } = props;
+  const { open, availableFilters, filters, onOpenToggle, onChange } = props;
   const { t } = useTranslation();
-  const { filters, availableFilters } = data;
+  const [currentAvailableFilters, setCurrentAvailableFilters] = useState({});
+
+  // Keep old available filters while new filters are fetched
+  useEffect(() => availableFilters && setCurrentAvailableFilters(availableFilters), [
+    availableFilters,
+  ]);
+
   const numberOfFilters = countFilters(filters);
 
   const toggleFilter = (key: string, value: string) => {
@@ -86,11 +93,11 @@ const FilterBy = (props: IProps) => {
         />
       </div>
       {open &&
-        Object.keys(availableFilters).map((key) => (
+        Object.keys(currentAvailableFilters).map((key) => (
           <React.Fragment key={key}>
             {/* {<h2 className="ng-color-ltgray ng-text-display-s ng-margin-bottom">{key}</h2>} */}
             <div className="ng-grid ng-form-dark ng-form" key={`${key}-form`}>
-              {availableFilters[key].map((filter, i) => {
+              {currentAvailableFilters[key].map((filter, i) => {
                 const checked = !!(filters[key] && filters[key].includes(filter.value));
                 const domId = `${key}-${filter.value}`;
                 const disabled = filter.count === 0;

diff --git a/packages/earth-map/src/components/header/component.tsx b/packages/earth-map/src/components/header/component.tsx
@@ -38,7 +38,6 @@ interface IProps {
   resetPlace?: Function;
   resetCollection?: Function;
   setPlacesSearch?: Function;
-  resetPlacesFeatured?: Function;
   resetMap?: Function;
   resetLayerCache?: Function;
   setUserGroup?: Function;
@@ -57,7 +56,6 @@ const Header = (props: IProps) => {
   } = useContext(Auth0Context);
   const {
     group,
-    resetPlacesFeatured,
     resetLayerCache,
     resetMap,
     resetPlace,
@@ -122,7 +120,6 @@ const Header = (props: IProps) => {
 
     setSelectedGroups(newSelection);
     setUserGroup(temp);
-    resetPlacesFeatured();
     resetLayerCache();
     setPlacesSearch({
       filters: {},

diff --git a/packages/earth-map/src/components/header/index.ts b/packages/earth-map/src/components/header/index.ts
@@ -22,7 +22,7 @@ import { connect } from 'react-redux';
 import { resetCollection } from '../../modules/collections/actions';
 import { resetLayerCache, resetLayers, setLayersSearch } from '../../modules/layers/actions';
 import { resetMap } from '../../modules/map/actions';
-import { resetPlace, resetPlacesFeatured, setPlacesSearch } from '../../modules/places/actions';
+import { resetPlace, setPlacesSearch } from '../../modules/places/actions';
 import { setSidebarPanel } from '../../modules/sidebar/actions';
 import { setUserGroup } from '../../modules/user/actions';
 import OrgSwitcher from './component';
@@ -37,7 +37,6 @@ export default connect(
     setPlacesSearch,
     resetPlace,
     resetCollection,
-    resetPlacesFeatured,
     resetLayerCache,
     resetMap,
     setLayersSearch,

diff --git a/packages/earth-map/src/components/layers/Layers.tsx b/packages/earth-map/src/components/layers/Layers.tsx
@@ -155,7 +155,8 @@ const Layers = (props: IProps) => {
               open={search.open}
               onOpenToggle={setLayersSearchOpen}
               onChange={setLayersSearch}
-              data={search}
+              filters={search.filters}
+              availableFilters={search.availableFilters}
             />
           )}
           {showBack && (

diff --git a/packages/earth-map/src/components/places/Places.tsx b/packages/earth-map/src/components/places/Places.tsx
@@ -1,16 +1,35 @@
+/*
+  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 { useTranslation } from 'react-i18next';
 import { push } from 'redux-first-router';
 
+import { serializeFilters } from '@marapp/earth-shared';
+
 import BackToLocation from '../../components/back-to-location';
 import FilterBy from '../../components/filter-by';
-import InfiniteList from '../../components/infinite-list';
-import ListItem from '../../components/list-item';
 import SearchBox from '../../components/searchbox';
 import SidebarLayoutSearch from '../../components/sidebar/sidebar-layout-search';
-import { LocationTypeEnum } from '../../modules/places/model';
-import { EarthRoutes } from '../../modules/router/model';
+import useLocations from '../../fetchers/useLocations';
 import { hasFilters } from '../../utils/filters';
+import PlacesSearchResults from './search-results';
 
 interface IProps {
   selected: boolean;
@@ -23,7 +42,6 @@ interface IProps {
   group?: any;
   locationName?: string;
   locationOrganization?: string;
-  nextPlacesPage?: () => void;
   setSidebarPanelExpanded?: (value: boolean) => void;
   resetMap?: () => {};
   resetPlace?: (value: any) => {};
@@ -38,12 +56,9 @@ const Places = (props: IProps) => {
   const {
     panelExpanded,
     search,
-    results,
-    nextPageCursor,
     group,
     locationName,
     locationOrganization,
-    nextPlacesPage,
     resetPlace,
     resetCollection,
     resetMap,
@@ -54,6 +69,13 @@ const Places = (props: IProps) => {
     children,
   } = props;
 
+  const { meta } = useLocations({
+    search: search.search,
+    filter: serializeFilters(search.filters),
+    select: 'name,slug,organization,type',
+    group: group.join(),
+  });
+
   const hasSearchTerm = !!search.search;
   const showX = selected || hasSearchTerm;
   const showFilter = !selected || panelExpanded;
@@ -101,7 +123,8 @@ const Places = (props: IProps) => {
               open={search.open}
               onOpenToggle={setPlacesSearchOpen}
               onChange={setPlacesSearch}
-              data={search}
+              filters={search.filters}
+              availableFilters={meta?.filters}
             />
           )}
           {showBack && (
@@ -115,34 +138,12 @@ const Places = (props: IProps) => {
       }
     >
       {showSearchResults ? (
-        <InfiniteList
-          title={t('Search results')}
-          data={results}
-          loading={search.loading}
-          nextPageCursor={nextPageCursor}
-          onNextPage={nextPlacesPage}
-        >
-          {({ id, $searchHint, name, slug, organization, type }) => (
-            <ListItem
-              hint={$searchHint.name}
-              title={name}
-              key={`${slug}-${organization}`}
-              onClick={() => {
-                setSidebarPanelExpanded(false);
-                setPlacesSearch({ search: name });
-              }}
-              linkTo={{
-                type:
-                  type === LocationTypeEnum.COLLECTION
-                    ? EarthRoutes.COLLECTION
-                    : EarthRoutes.LOCATION,
-                payload: { slug, id, organization },
-              }}
-              organization={group.length > 1 && organization}
-              labels={[type]}
-            />
-          )}
-        </InfiniteList>
+        <PlacesSearchResults
+          search={search.search}
+          filters={search.filters}
+          group={group}
+          setPlacesSearch={setPlacesSearch}
+        />
       ) : (
         children
       )}