style: progress on org page

Greenstand · Jan 30, 2022 · ade1b52 · ade1b52
1 parent 14772ef
commit ade1b52
Show file tree

Hide file tree

Showing 3 changed files with 182 additions and 137 deletions.
diff --git a/src/models/utils.js b/src/models/utils.js
@@ -1,4 +1,5 @@
 import log from 'loglevel';
+import moment from 'moment';
 
 function parseDomain(url) {
   const matcher = url.match(/^https?:\/\/([^/]*)\/?.*$/);
@@ -74,10 +75,15 @@ function formatDateString(date) {
   return new Date(date).toLocaleDateString('en-GB');
 }
 
+//
+const formatDates = (date) =>
+  moment(date, 'ddd MMM DD YYYY HH:mm:ss').format('LL');
+
 export {
   parseDomain,
   parseMapName,
   requestAPI,
   getContinent,
   formatDateString,
+  formatDates,
 };
diff --git a/src/pages/organizations/[organizationid].js b/src/pages/organizations/[organizationid].js
@@ -1,13 +1,20 @@
-import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
-import LocationOnIcon from '@mui/icons-material/LocationOn';
 import ParkOutlinedIcon from '@mui/icons-material/ParkOutlined';
 import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
-import { Box, Divider, Grid, Typography } from '@mui/material';
+import {
+  Box,
+  Divider,
+  Grid,
+  Stack,
+  Typography,
+  useTheme,
+  useMediaQuery,
+} from '@mui/material';
 import log from 'loglevel';
 import React from 'react';
 import CustomWorldMap from 'components/CustomWorldMap';
-import PlanterQuote from 'components/PlanterQuote';
+// import PlanterQuote from 'components/PlanterQuote';
 import TreeSpeciesCard from 'components/TreeSpeciesCard';
+import DataTag from 'components/common/DataTag';
 import { makeStyles } from 'models/makeStyles';
 import PageWrapper from '../../components/PageWrapper';
 import VerifiedBadge from '../../components/VerifiedBadge';
@@ -26,11 +33,6 @@ const useStyles = makeStyles()((theme) => ({
     color: theme.palette.textSecondary.main,
     margin: '4px 0',
   },
-  badgeWrapper: {
-    marginBottom: theme.spacing(2),
-    display: 'flex',
-    gap: theme.spacing(1),
-  },
   imgContainer: {
     borderRadius: '16px',
     position: 'relative',
@@ -77,19 +79,11 @@ const useStyles = makeStyles()((theme) => ({
 export default function Organization({ organization }) {
   const mapContext = useMapContext();
   const { classes } = useStyles();
-  const [isPlanterTab, setIsPlanterTab] = React.useState(false);
+  const [isPlanterTab, setIsPlanterTab] = React.useState(true);
   // eslint-disable-next-line
   const [continent, setContinent] = React.useState(null);
-  const {
-    name,
-    area,
-    country,
-    created_at,
-    about,
-    mission,
-    photo_url,
-    logo_url,
-  } = organization;
+  const theme = useTheme();
+  const isMobileScreen = useMediaQuery(theme.breakpoints.down('md'));
 
   async function updateContinent() {
     const tree = organization?.featuredTrees?.trees[0];
@@ -121,37 +115,48 @@ export default function Organization({ organization }) {
       }
     }
     reload();
-
+    // eslint-disable-next-line
     updateContinent();
-  }, [mapContext.map]);
+    // eslint-disable-next-line
+  }, [mapContext, organization]);
 
-  function handleCardClick() {
-    setIsPlanterTab(!isPlanterTab);
-  }
+  // console.log(organization);
 
   return (
     <PageWrapper>
-      <Typography variant="subtitle1">{name}</Typography>
-      <Box className={classes.badgeWrapper}>
+      <Typography variant="h2" className={classes.textColor}>
+        {organization.map_name}
+      </Typography>
+      <Stack gap={{ xs: 1, sm: 2 }} sx={{ mb: 3, mt: [2, 3] }}>
+        <DataTag data={utils.formatDates(organization.created_time)} />
+        <DataTag data="Shirimatunda, Tanzania" location />
+      </Stack>
+
+      <Box sx={{ display: 'flex', gap: 2 }}>
         <VerifiedBadge verified badgeName="Verified Planter" />
-        <VerifiedBadge verified={false} badgeName="Seeking Planters" />
-      </Box>
-      <Box className={classes.info}>
-        <CalendarTodayIcon fontSize="small" />
-        Planter since {created_at}
+        <VerifiedBadge verified={false} badgeName="Seeking Orgs" />
       </Box>
-      <Box className={classes.info}>
-        <LocationOnIcon fontSize="small" />
-        {area}, {country}
-      </Box>
-      <Divider variant="fullWidth" sx={{ mt: 6, mb: 9.5 }} />
 
-      <Box className={classes.imgContainer}>
-        <img src={photo_url} />
+      {isMobileScreen || (
+        <Divider variant="fullWidth" sx={{ mt: 7, mb: 13.75 }} />
+      )}
+
+      <Box
+        className={classes.imgContainer}
+        sx={{
+          width: '100%',
+          height: '688px',
+          borderRadius: 6,
+          mt: 11,
+          mb: [6, 10],
+        }}
+      >
+        {/* <Image src={placeholder} alt="some text" /> */}
         <Box className={classes.logoContainer}>
-          <img src={logo_url} />
+          {/*  <Image src={logo_url} /> */}
         </Box>
       </Box>
+
       <Grid
         container
         wrap="nowrap"
@@ -160,53 +165,43 @@ export default function Organization({ organization }) {
       >
         <Grid item sx={{ width: '49%' }}>
           <CustomCard
-            handleClick={handleCardClick}
+            handleClick={() => setIsPlanterTab(true)}
             icon={<ParkOutlinedIcon fontSize="large" />}
             title="Trees Planted"
-            text={organization?.featuredTrees?.total}
-            disabled={isPlanterTab}
+            text={organization?.featuredTrees?.trees.length}
+            disabled={!isPlanterTab}
           />
         </Grid>
         <Grid item sx={{ width: '49%' }}>
           <CustomCard
-            handleClick={handleCardClick}
+            handleClick={() => setIsPlanterTab(false)}
             icon={<PersonOutlineIcon fontSize="large" />}
             title="Hired Planters"
-            text={organization?.associatedPlanters?.total}
-            disabled={!isPlanterTab}
+            text={organization?.associatedPlanters?.planters.length}
+            disabled={isPlanterTab}
           />
         </Grid>
       </Grid>
 
-      {/* <Grid container spacing={1}>
-        <Grid item>
-          <CustomCard
-            handleClick={handleCardClick}
-            icon={<ParkOutlinedIcon />}
-            title="Trees Planted"
-            text={organization?.featuredTrees?.total}
-            disabled={!!isPlanterTab}
-          />
-        </Grid>
-        <Grid item>
-          <Box width={8} />
-        </Grid>
-        <Grid item>
-          <CustomCard
-            handleClick={handleCardClick}
-            icon={<GroupsOutlinedIcon />}
-            title="Associated Organizations"
-            text={organization?.associatedPlanters?.total}
-            disabled={!isPlanterTab}
-          />
-        </Grid>
-      </Grid> */}
-      {!isPlanterTab && (
-        <Box>
-          <CustomWorldMap totalTrees={organization?.featuredTrees?.total} />
-        </Box>
-      )}
       {isPlanterTab && (
+        <>
+          <Box sx={{ mt: [0, 22] }}>
+            <CustomWorldMap
+              totalTrees={organization?.featuredTrees?.trees.length}
+            />
+          </Box>
+          <Box className={classes.speciesBox}>
+            {organization?.species.species.map((species) => (
+              <TreeSpeciesCard
+                key={species.id}
+                name={species.name}
+                count={species.total}
+              />
+            ))}
+          </Box>
+        </>
+      )}
+      {/* {!isPlanterTab && (
         <div>
           {organization?.associatedPlanters?.planters?.map((planter) => (
             <PlanterQuote
@@ -219,7 +214,7 @@ export default function Organization({ organization }) {
             />
           ))}
         </div>
-      )}
+      )} */}
       <Box className={classes.speciesBox}>
         {organization?.species.species.map((species) => (
           <TreeSpeciesCard
@@ -238,7 +233,7 @@ export default function Organization({ organization }) {
         About the Organization
       </Typography>
       <Typography variant="body1" className={classes.textColor} mt={7}>
-        {about}
+        {/*  {about} */}
       </Typography>
       <br />
       <Typography
@@ -249,7 +244,7 @@ export default function Organization({ organization }) {
         Mission
       </Typography>
       <Typography variant="body1" className={classes.textColor} mt={7}>
-        {mission}
+        {/* {mission} */}
       </Typography>
       <Divider varian="fullwidth" className={classes.divider} />
       <Typography