Project of the month card

web/src/components/Map/Map.tsx

@@ -14,6 +14,7 @@ import { setInfoOverlay } from 'src/reducers/overlaysReducer'
 import { setProjectId } from 'src/reducers/projectsReducer'
 
 import { BasketDetails } from '../Overlays/BasketDetails'
+import { ProjectOfMonthCard } from '../Overlays/Info/ProjectOfMonthCard'
 import { TreeInfoBox } from '../Overlays/Info/TreeInfoBox'
 import { InfoOverlay } from '../Overlays/InfoOverlay'
 import { ProfileOverlay } from '../Overlays/ProfileOverlay'
@@ -384,7 +385,7 @@ export const Map = ({ initialOverlay, urlProjectId, mediaSize }) => {
         />
       )}
       {/* <BackToGlobe map={map} /> */}
-
+      {!activeProjectData && <ProjectOfMonthCard mediaSize={mediaSize} />}
       {Object.values(treeData)?.length > 0 && (
         <TreeInfoBox
           treeData={treeData}

web/src/components/Overlays/Info/ProjectCard/ProjectCard.tsx

@@ -3,7 +3,6 @@ import { useThemeUI } from 'theme-ui'
 import { breakpoints } from 'src/constants'
 import { countryToEmoji } from 'src/utils/countryToEmoji'
 
-import Button from '../../../Map/components/Button'
 import ThemedSkeleton from '../../../Map/components/Skeleton'
 import { InfoBox } from '../InfoBox'
 
@@ -37,8 +36,6 @@ export const ProjectCard = ({
     )
   }
 
-  const projectId = activeProjectData?.project?.id
-
   return (
     <InfoBox maximize={maximize} mediaSize={mediaSize}>
       <ProjectSplash activeProjectData={activeProjectData} />
@@ -76,7 +73,7 @@ export const ProjectCard = ({
   )
 }
 
-const ProjectSplash = ({ activeProjectData }) => {
+export const ProjectSplash = ({ activeProjectData }) => {
   const splash = activeProjectData?.project?.assets?.filter((d) =>
     d.classification?.includes('Splash')
   )[0]?.awsCID
@@ -127,7 +124,7 @@ ${countryToEmoji[activeProjectData?.project?.country]?.name}`}
   )
 }
 
-const Description = ({ activeProjectData }) => (
+export const Description = ({ activeProjectData }) => (
   <>
     <h3>Description</h3>
     <p style={{ fontSize: '0.875rem', whiteSpace: 'pre-line' }}>

web/src/components/Overlays/Info/ProjectOfMonthCard.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useState } from 'react'
+
+import { useThemeUI } from 'theme-ui'
+
+import { Link } from '@redwoodjs/router'
+
+import { ExitButton } from 'src/components/Map/components/ExitButton'
+import { fetchProjectInfo } from 'src/components/Map/mapfetch'
+
+import { ProjectSplash } from './ProjectCard/ProjectCard'
+export const ProjectOfMonthCard = ({ mediaSize }) => {
+  const [projectData, setProjectData] = useState()
+  const [isVisible, setIsVisible] = useState(true)
+
+  const { theme } = useThemeUI()
+
+  const fetchProjectOfMonth = async () => {
+    const response = fetch(`${process.env.GAINFOREST_ENDPOINT}/api/graphql`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        query: `
+          query {
+            projectOfTheMonth {
+              id
+            }
+          }
+        `,
+      }),
+    })
+      .then((res) => res.json())
+      .then((result) => {
+        return result?.data?.projectOfTheMonth?.id
+      })
+
+    return response
+  }
+
+  useEffect(() => {
+    const fetchProject = async () => {
+      const projectData = await fetchProjectOfMonth()
+      if (projectData) {
+        const data = await fetchProjectInfo(projectData)
+        setProjectData(data)
+      }
+    }
+    fetchProject()
+  }, [])
+
+  const truncateText = (text, maxLength) => {
+    const replacedText = text.replaceAll('\\n', '\n')
+
+    if (replacedText.length > maxLength) {
+      return `${replacedText.substring(0, maxLength)}...`
+    } else {
+      return replacedText
+    }
+  }
+
+  if (projectData && isVisible)
+    return (
+      <div
+        style={{
+          zIndex: 2,
+          boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
+          position: 'absolute',
+          height: '500px',
+          width: '300px',
+          top: '100px',
+          left: '20px',
+          backgroundColor: theme.colors.background as string,
+          color: theme.colors.text as string,
+          borderRadius: '0.5em',
+          overflowY: 'auto',
+          padding: '8px',
+          alignItems: 'center',
+        }}
+      >
+        <ExitButton
+          onClick={() => setIsVisible(false)}
+          style={{ top: '10px', left: '260px' }}
+          mediaSize={mediaSize}
+          maximize={false}
+        />
+        <h3>Project of the month</h3>
+        <h1>{projectData.project.name}</h1>
+        <ProjectSplash activeProjectData={projectData} />
+        <h3>Description</h3>
+        <p style={{ fontSize: '0.875rem', whiteSpace: 'pre-line' }}>
+          {truncateText(projectData.project.longDescription, 200)}
+        </p>
+        <Link to={`/${projectData.project.id}/1`}>Learn more</Link>
+      </div>
+    )
+  else {
+    return null
+  }
+}