feat: planter page

doc/examples/planters/940.json

@@ -2,5 +2,13 @@
   "id": 940,
   "first_name": "Sebastian ",
   "last_name": "Gaertner",
-  "photo_url": "https://treetracker-dev-images.s3.eu-central-1.amazonaws.com/2020.10.19.09.47.53_-5.508107173727935_38.981361706266256_39f0cc9d-0f13-4547-8142-150f15cabb67_IMG_20201019_094513_6614320100195503436.jpg"
+  "photo_url": "https://treetracker-dev-images.s3.eu-central-1.amazonaws.com/2020.10.19.09.47.53_-5.508107173727935_38.981361706266256_39f0cc9d-0f13-4547-8142-150f15cabb67_IMG_20201019_094513_6614320100195503436.jpg",
+  "trees_planted": 4,
+  "about": "Greenway is a Youth-Driven Environmental Protection Organization providing alternative solutions to single-use plastic and planting carbon-sucking trees for socio-economic development and reducing climate crisis. Our social work includes reforestation, landscape restoration, climate education, awareness campaign, conducting research, outreach activities, and collaborating with key stakeholders to implement sustainable solutions.",
+  "mission": "To combat climate change, desertification, land degradation, carbon emission by inspiring healthier communities affected by severe climate disorder and modestly reducing pollution by 2050.",
+  "links": {
+    "featured_trees": "/trees?planter_id=940&limit=4",
+    "associated_organizations": "/organizations?planter_id=940",
+    "species": "/species?planter_id=940"
+  }
 }

doc/examples/planters/940/trees.json

@@ -0,0 +1,6 @@
+{
+  "summary": {
+    "total": "0"
+  },
+  "trees": [{}]
+}

doc/examples/species/1.json

@@ -0,0 +1,5 @@
+{
+  "id": 1,
+  "name": "Baobab Tree",
+  "count": 10
+}

doc/examples/species/2.json

@@ -0,0 +1,5 @@
+{
+  "id": 2,
+  "name": "Wattle Tree",
+  "count": 2
+}

doc/web-map-api.yaml

@@ -150,6 +150,20 @@ paths:
                   total: 0
       operationId: get-organizations-orgId-trees-summary
       description: ''
+  '/mock/trees/query/planter_id=940&limit=4':
+    get:
+      responses:
+        '200':
+          content:
+            application/json:
+              examples:
+                trees:
+                  value:
+                    trees:
+                      - $ref: 'examples/trees/186734.json'
+                      - $ref: 'examples/trees/186735.json'
+                      - $ref: 'examples/trees/186736.json'
+                      - $ref: 'examples/trees/186737.json'
   '/mock/trees/933042':
     get:
       responses:
@@ -257,6 +271,33 @@ paths:
             application/json:
               example:
                 $ref: 'examples/planters/940.json'
+  '/mock/planters/940/trees':
+    get:
+      responses:
+        '200':
+          content:
+            application/json:
+              example:
+                $ref: 'examples/planters/940/trees.json'
+  '/mock/planters/940/organizations':
+    get:
+      responses:
+        '200':
+          content:
+            application/json:
+              example:
+                $ref: 'examples/planters/940/organizations.json'
+  '/mock/organizations/query/planter_id=940':
+    get:
+      responses:
+        '200':
+          content:
+            application/json:
+              examples:
+                organizations:
+                  value:
+                    organizations:
+                      - $ref: 'examples/organizations/1.json'
   '/mock/organizations/1':
     get:
       responses:
@@ -265,6 +306,18 @@ paths:
             application/json:
               example:
                 $ref: 'examples/organizations/1.json'
+  '/mock/species/query/planter_id=940':
+    get:
+      responses:
+        '200':
+          content:
+            application/json:
+              examples:
+                species:
+                  value:
+                    species:
+                      - $ref: 'examples/species/1.json'
+                      - $ref: 'examples/species/2.json'
 components:
   schemas:
     tree:

src/models/utils.js

@@ -1,3 +1,7 @@
+import { catchClause } from '@babel/types';
+
+const log = require('loglevel');
+
 function parseDomain(url) {
   const matcher = url.match(/^https?:\/\/([^/]*)\/?.*$/);
   if (matcher) {
@@ -39,4 +43,22 @@ function parseMapName(domain) {
   throw new Error(`the domain is wrong :${domain}`);
 }
 
-export { parseDomain, parseMapName };
+/*
+  to request the default API server
+*/
+async function requestAPI(url) {
+  try {
+    let urlFull = `${process.env.NEXT_PUBLIC_API_NEW}${url}`;
+    // TODO remove test code
+    urlFull = urlFull.replace(/\?/, '/query/');
+    log.warn('url:', urlFull);
+    const res = await fetch(urlFull);
+    const result = await res.json();
+    return result;
+  } catch (error) {
+    log.error(error);
+    throw error;
+  }
+}
+
+export { parseDomain, parseMapName, requestAPI };

src/pages/planters/[planterid].js

@@ -0,0 +1,68 @@
+import { Avatar, Button, Typography } from '@material-ui/core';
+import log from 'loglevel';
+
+import * as utils from '../../models/utils';
+
+export default function Planter({ planter }) {
+  return (
+    <div>
+      planter
+      <Typography variant="h6">{planter.first_name}</Typography>
+      <Avatar alt={planter.first_name} src={planter.photo_url} />
+      <Typography variant="h6">Tree planted</Typography>
+      {planter.featuredTrees.trees.map((tree) => (
+        <div key={tree.id}>
+          <Typography variant="h6">{tree.name}</Typography>
+          <Avatar alt={tree.name} src={tree.photo_url} />
+        </div>
+      ))}
+      <Typography variant="h6">Associated Organizations</Typography>
+      {planter.associatedOrganizations.organizations.map((org) => (
+        <div key={org.id}>
+          <Typography variant="h6">{org.name}</Typography>
+          <Avatar alt={org.name} src={org.photo_url} />
+        </div>
+      ))}
+      <Typography variant="h6">Species of trees planted</Typography>
+      {planter.species.species.map((species) => (
+        <div key={species.id}>
+          <Typography variant="subtitle2">{species.name}</Typography>
+          <Typography variant="body">count: {species.count}</Typography>
+        </div>
+      ))}
+      <Typography variant="h6">About</Typography>
+      <Typography variant="body1">{planter.about}</Typography>
+      <Typography variant="h6">Mission</Typography>
+      <Typography variant="body1">{planter.mission}</Typography>
+    </div>
+  );
+}
+
+export async function getServerSideProps({ params }) {
+  log.warn('params:', params);
+  log.warn('host:', process.env.NEXT_PUBLIC_API_NEW);
+
+  const props = {};
+  {
+    const url = `/planters/${params.planterid}`;
+    log.warn('url:', url);
+
+    const planter = await utils.requestAPI(url);
+    log.warn('response:', planter);
+    props.planter = planter;
+  }
+
+  {
+    const { featured_trees, associated_organizations, species } =
+      props.planter.links;
+    props.planter.featuredTrees = await utils.requestAPI(featured_trees);
+    props.planter.associatedOrganizations = await utils.requestAPI(
+      associated_organizations,
+    );
+    props.planter.species = await utils.requestAPI(species);
+  }
+
+  return {
+    props,
+  };
+}

src/pages/trees/[treeid].js

@@ -5,6 +5,7 @@ import log from 'loglevel';
 import Image from 'next/image';
 import React from 'react';
 
+import Link from '../../components/Link';
 import PageWrapper from '../../components/PageWrapper';
 import VerifiedBadge from '../../components/VerifiedBadge';
 import { useMapContext } from '../../mapContext';
@@ -65,14 +66,25 @@ export default function Tree({ tree, planter, organization }) {
 
   const TreeImage = () => (
     <Box className={classes.imageContainer}>
+      {/*
       <Image
         src={photo_url}
         layout="fill"
         objectPosition="center"
         objectFit="cover"
       />
+      */}
+      <Image
+        src={photo_url}
+        width={200}
+        height={100}
+        objectPosition="center"
+        objectFit="cover"
+      />
       <div>
-        Planter:
+        <Link href={`/planters/${planter.id}`} as={`/planters/${planter.id}`}>
+          Planter:
+        </Link>
         {planter.first_name}
         <Image src={planter.photo_url} width="100px" height="100px" />
       </div>