Merge pull request #1730 from DylanJG01/v2

V2
Greenstand · Oct 27, 2023 · 97c7420 · 97c7420
2 parents a74183d + 9a4e62f
commit 97c7420
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 9 deletions.
diff --git a/cypress/tests/integration/nockRoutes.js b/cypress/tests/integration/nockRoutes.js
@@ -48,6 +48,13 @@ export function getNockRoutes(
       body: planter,
     },
 
+    {
+      method: 'GET',
+      path: `/growers/${planter.id}`,
+      statusCode: 200,
+      body: planter,
+    },
+
     {
       method: 'GET',
       path: `/organizations/${organization.id}`,

diff --git a/src/models/api.js b/src/models/api.js
@@ -16,6 +16,7 @@ export async function getFeaturedGrowers() {
     throw err;
   }
 }
+
 export async function getCaptures() {
   try {
     const url = apiPaths.getCaptures;
@@ -29,6 +30,21 @@ export async function getCaptures() {
     throw err;
   }
 }
+
+export async function getCapturesByTreeId(id) {
+  try {
+    const url = apiPaths.getCapturesByTreeId(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) {
+    log.error(err.message);
+    throw err;
+  }
+}
+
 export async function getFeaturedTrees() {
   try {
     const url = apiPaths.featuredTrees;

diff --git a/src/models/apiPaths.js b/src/models/apiPaths.js
@@ -10,6 +10,8 @@ const apiPaths = {
     urlJoin(host, `/countries?lat=${lat}&lon=${lon}`),
   leaders: urlJoin(host, '/countries/leaderboard'),
   trees: (id = '') => urlJoin(host, `/trees/${id}`),
+  getCapturesByTreeId: (treeid = '') =>
+    urlJoin(host, `/captures?tree_id=${treeid}`),
   captures: (id = '') => urlJoin(host, `captures/${id}`),
   growers: (id = '') => urlJoin(host, `growers/${id}`),
   planters: (id = '') => urlJoin(host, `planters/${id}`),

diff --git a/src/pages/trees/[treeid].js b/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,21 +38,31 @@ 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 {
+  getCaptures,
+  getOrganizationById,
+  getPlanterById,
+  getTreeById,
+  getCapturesByTreeId,
+  getGrowerById,
+} from 'models/api';
 import * as pathResolver from 'models/pathResolver';
 import * as utils from 'models/utils';
 
 export default function Tree({
   tree,
+  captures,
   planter,
   organization,
   nextExtraIsEmbed,
   nextExtraKeyword,
 }) {
   log.warn('tree: ', tree);
+  log.warn('captures ', captures);
   log.warn('org: ', organization);
   const mapContext = useMapContext();
   const { map } = mapContext;
+  const isFullscreen = useFullscreen();
   const theme = useTheme();
   const router = useRouter();
   const { isPageLoading } = usePageLoading();
@@ -199,6 +211,14 @@ export default function Tree({
     [tree?.approved, tree?.token_id],
   );
 
+  function handleFilter(filter) {
+    log.warn('handleFilter', filter);
+    if (!map) return;
+    map.setFilters({
+      timeline: `${filter.startDate}_${filter.endDate}`,
+    });
+    map.rerender();
+  }
   return (
     <>
       <HeadTag title={`Tree #${tree.id}`} />
@@ -215,8 +235,8 @@ export default function Tree({
         ]}
       >
         {/* <IsMobileScreen>
-        <DrawerTitle />
-      </IsMobileScreen> */}
+      <DrawerTitle />
+    </IsMobileScreen> */}
         {isMobile && (
           <Portal
             container={() => document.getElementById('drawer-title-container')}
@@ -557,10 +577,10 @@ export default function Tree({
         )}
 
         {/* <CustomImageWrapper
-        imageUrl={tree.image_url}
-        timeCreated={tree.time_created}
-        treeId={tree.id}
-      /> */}
+      imageUrl={tree.image_url}
+      timeCreated={tree.time_created}
+      treeId={tree.id}
+    /> */}
         {organization && (
           <Box
             sx={[
@@ -583,6 +603,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],
@@ -743,7 +782,10 @@ async function serverSideData(params) {
   const { treeid } = params;
   const tree = await getTreeById(treeid);
   const { planter_id, planting_organization_id } = tree;
-  const planter = await getPlanterById(planter_id);
+  const planter = await getGrowerById(planter_id);
+  const captures = await getCaptures();
+  // const captures = await getTreeCaptures(treeid)
+  // comment in when captures in v2 database have valid tree_id's.
   let organization = null;
   if (planting_organization_id) {
     log.warn('load org from planting_orgniazation_id');
@@ -757,6 +799,7 @@ async function serverSideData(params) {
 
   return {
     tree,
+    captures,
     planter,
     organization,
   };