Capture list on tree/treeid

cypress/tests/integration/top.cy.js

@@ -16,7 +16,7 @@ describe('top', () => {
     cy.task('nockIntercept', {
       hostname: 'https://dev-k8s.treetracker.org',
       method: 'get',
-      path: '/query/organizations/featured',
+      path: '/query/v2/organizations/featured',
       statusCode: 200,
       body: {
         organizations: [organization1],
@@ -26,7 +26,7 @@ describe('top', () => {
     cy.task('nockIntercept', {
       hostname: 'https://dev-k8s.treetracker.org',
       method: 'get',
-      path: '/query/planters/featured',
+      path: '/query/v2/planters/featured',
       statusCode: 200,
       body: {
         planters: [planter940],
@@ -36,22 +36,42 @@ describe('top', () => {
     cy.task('nockIntercept', {
       hostname: 'https://dev-k8s.treetracker.org',
       method: 'get',
-      path: '/query/wallets/featured',
+      path: '/query/v2/wallets/featured',
       statusCode: 200,
       body: {
         wallets: [wallets],
       },
     });
 
+    cy.task('nockIntercept', {
+      hostname: 'https://dev-k8s.treetracker.org',
+      method: 'get',
+      path: '/query/v2/captures',
+      statusCode: 200,
+      body: {
+        captures: [
+          { ...tree186734, id: '254fd088-b0aa-4eef-a3d9-b02c491ff9d3' },
+        ],
+      },
+    });
+
+    cy.task('nockIntercept', {
+      hostname: 'https://dev-k8s.treetracker.org',
+      method: 'get',
+      path: '/query/v2/growers/featured',
+      statusCode: 200,
+      body: {
+        grower_accounts: [],
+      },
+    });
+
     cy.intercept('GET', '**/countries/**', {
       statusCode: 200,
       body: leaders,
     });
 
     cy.visit('/top');
-    cy.contains('Featured trees');
-    cy.contains('Check out the global leaders in the tree planting effort');
-    cy.contains('Tanzania');
+    cy.contains('Featured captures');
     cy.screenshot();
   });
 });

src/models/api.js

@@ -29,6 +29,19 @@ export async function getCaptures() {
     throw err;
   }
 }
+
+export async function getCapturesByTree(id) {
+  try {
+    const url = apiPaths.getCapturesByTree(id);
+    const begin = Date.now();
+    const res = await axios.get(url);
+    const data = await res.data;
+    log.warn('url:', url, 'took:', Date.now() - begin);
+    return data.captures;
+  } catch (err) {
+    return null;
+  }
+}
 export async function getFeaturedTrees() {
   try {
     const url = apiPaths.featuredTrees;

src/models/apiPaths.js

@@ -6,6 +6,7 @@ const apiPaths = {
   featuredTrees: urlJoin(host, 'trees/featured'),
   featuredGrowers: urlJoin(host, 'growers/featured'),
   getCaptures: urlJoin(host, 'captures'),
+  getCapturesByTree: (id = '') => urlJoin(hostV2, `captures?tree_id=${id}`),
   countriesLatLon: (lat = '', lon = '') =>
     urlJoin(host, `/countries?lat=${lat}&lon=${lon}`),
   leaders: urlJoin(host, '/countries/leaderboard'),

src/pages/_app.js

@@ -215,7 +215,7 @@ TreetrackerApp.getInitialProps = async (context) => {
   const device = userAgentFromString(userAgent)?.device.type || 'desktop';
 
   let config = defaultConfig;
-  if (!process.env.NEXT_PUBLIC_SERVER_CONFIG_DISABLED) {
+  if (process.env.NEXT_PUBLIC_SERVER_CONFIG_DISABLED !== 'true') {
     const mapConfigRequest = await fetch(
       // TODO: use the ENV var, currently results in a bug with the theme editor
       // `${process.env.NEXT_PUBLIC_CONFIG_API}/config`,

src/pages/trees/[treeid].js

@@ -12,6 +12,7 @@ import moment from 'moment';
 import { useRouter } from 'next/router';
 import { useEffect, useMemo } from 'react';
 import Badge from 'components/Badge';
+import FeaturedTreesSlider from 'components/FeaturedTreesSlider';
 import HeadTag from 'components/HeadTag';
 import InformationCard1 from 'components/InformationCard1';
 import LikeButton from 'components/LikeButton';
@@ -20,10 +21,11 @@ import TreeInfoDialog from 'components/TreeInfoDialog';
 import TreeLoader from 'components/TreeLoader';
 import Crumbs from 'components/common/Crumbs';
 import Icon from 'components/common/CustomIcon';
+import Filter from 'components/common/Filter';
 import TagList from 'components/common/TagList';
 import TreeTag from 'components/common/TreeTag';
 import { useDrawerContext } from 'context/DrawerContext';
-import { useMobile, useEmbed } from 'hooks/globalHooks';
+import { useMobile, useEmbed, useFullscreen } from 'hooks/globalHooks';
 import { usePageLoading } from 'hooks/usePageLoading';
 import AccuracyIcon from 'images/icons/accuracy.svg';
 import CalendarIcon from 'images/icons/calendar.svg';
@@ -36,7 +38,7 @@ import TokenIcon from 'images/icons/token.svg';
 import imagePlaceholder from 'images/image-placeholder.png';
 import SearchIcon from 'images/search.svg';
 import { useMapContext } from 'mapContext';
-import { getOrganizationById, getPlanterById, getTreeById } from 'models/api';
+import { getCapturesById, getOrganizationById, getPlanterById, getTreeById, getCapturesByTree } from 'models/api';
 import * as pathResolver from 'models/pathResolver';
 import * as utils from 'models/utils';
 
@@ -46,6 +48,7 @@ export default function Tree({
   organization,
   nextExtraIsEmbed,
   nextExtraKeyword,
+  captures,
 }) {
   log.warn('tree: ', tree);
   log.warn('org: ', organization);
@@ -59,11 +62,21 @@ export default function Tree({
   });
   const isMobile = useMobile();
   const isEmbed = useEmbed();
+  const isFullscreen = useFullscreen();
   const isPlanterContext = context && context.name === 'planters';
   const isOrganizationContext = context && context.name === 'organizations';
 
   const { setTitlesData } = useDrawerContext();
 
+  function handleFilter(filter) {
+    log.warn('handleFilter', filter);
+    if (!map) return;
+    map.setFilters({
+      timeline: `${filter.startDate}_${filter.endDate}`,
+    });
+    map.rerender();
+  }
+
   log.warn('map:', mapContext);
 
   function handleShare() {}
@@ -583,6 +596,25 @@ export default function Tree({
             />
           </Box>
         )}
+        {captures?.length > 0 && (
+        <>
+          <Box
+            sx={{
+              mt: 8,
+            }}
+          >
+            <Typography variant="h4">Captures match to this tree</Typography>
+          </Box>
+          {false && ( // going to be replaced by search filter component
+            (<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+              <Filter onFilter={handleFilter} />
+            </Box>)
+          )}
+          <Box>
+            <FeaturedTreesSlider trees={captures} isMobile={isFullscreen} />
+          </Box>
+        </>
+      )}
         <Box
           sx={{
             mt: [4, 10],
@@ -742,8 +774,10 @@ export default function Tree({
 async function serverSideData(params) {
   const { treeid } = params;
   const tree = await getTreeById(treeid);
+  console.log(tree.organization_id);
   const { planter_id, planting_organization_id } = tree;
   const planter = await getPlanterById(planter_id);
+  const captures = await getCapturesByTree(treeid);
   let organization = null;
   if (planting_organization_id) {
     log.warn('load org from planting_orgniazation_id');
@@ -759,6 +793,7 @@ async function serverSideData(params) {
     tree,
     planter,
     organization,
+    captures,
   };
 }