Use directus for project fetch

web/src/components/Map/Map.tsx

@@ -404,4 +404,4 @@ export const Map = ({ initialOverlay, urlProjectId, mediaSize }) => {
   )
 }
 
-export default Map
+export default Map

web/src/components/Map/mapfetch.ts

@@ -56,7 +56,7 @@ export const fetchGainForestCenterpoints = async (map) => {
 }
 
 export const fetchProjectInfo = async (projectId) => {
-  const endpoint = `${process.env.GAINFOREST_ENDPOINT}/api/graphql`
+  const endpoint = `${process.env.DIRECTUS_ENDPOINT}/graphql/items/project`
 
   const response = fetch(endpoint, {
     method: 'POST',
@@ -66,61 +66,37 @@ export const fetchProjectInfo = async (projectId) => {
     body: JSON.stringify({
       query: `
         query {
-          project(id:"${projectId}") {
-            id
+        project(filter: {legacyId:{ _eq: "${projectId}"}}) {
+            id: legacyId
             name
             country
             dataDownloadUrl
             dataDownloadInfo
             description
             longDescription
             stripeUrl
-            discordId
             lat
             lon
             area
             objective
-            assets {
-              id
-              name
-              classification
-              awsCID
-              shapefile {
-                default
-                isReference
-                shortName
-              }
-            }
-            communityMembers {
-              id
-              firstName
-              lastName
-              priority
-              role
-              bio
-              Wallet {
-                CeloAccounts
-                SOLAccounts
-              }
-              fundsReceived
-              profileUrl
-            }
-            Wallet {
-              CeloAccounts
-              SOLAccounts
-            }
+
           }
         }
       `,
     }),
   })
     .then((res) => res.json())
     .then((result) => {
+      console.log(result)
+      console.log(result.name)
+      console.log(result[0])
+      console.log(response)
       return result.data
     })
 
   return response
 }
+//
 export const fetchProjectPolygon = async (
   endpoint: string,
   setActiveProjectPolygon

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

@@ -10,7 +10,7 @@ import { InfoTag } from '../../../InfoTag/InfoTag'
 import ThemedSkeleton from '../../../Map/components/Skeleton'
 import { InfoBox } from '../InfoBox'
 
-import { ProjectSiteButtons } from './ProjectSiteButtons'
+//import { ProjectSiteButtons } from './ProjectSiteButtons'
 
 const fetchProjectNumbers = async (projectId) => {
   try {
@@ -35,7 +35,9 @@ export const ProjectCard = ({
   const [promoVideo, setPromoVideo] = useState('')
   const [projectNumbers, setProjectNumbers] = useState(null)
   const { theme } = useThemeUI()
+  console.log(activeProjectData)
 
+  //Will not use assets on Directus for now, but can use splashart
   useEffect(() => {
     const video = activeProjectData?.project?.assets?.find(
       (d) => d.classification === 'Promotional Video'
@@ -47,6 +49,7 @@ export const ProjectCard = ({
     }
   }, [activeProjectData])
 
+
   if (!activeProjectData) {
     return <ProjectCardSkeleton mediaSize={mediaSize} />
   }
@@ -64,11 +67,11 @@ export const ProjectCard = ({
           mediaSize={mediaSize}
           theme={theme}
         />
-        <ProjectSiteButtons
+        {/*<ProjectSiteButtons
           assets={activeProjectData?.project?.assets}
           activeShapefile={activeProjectPolygon}
           setActiveShapefile={setActiveProjectPolygon}
-        />
+        />*/}
         <Description activeProjectData={activeProjectData} />
         <Objectives activeProjectData={activeProjectData} />
         {projectNumbers && <SummaryStatistics numbers={projectNumbers} />}
@@ -94,6 +97,8 @@ const ProjectCardSkeleton = ({ mediaSize }) => (
   </InfoBox>
 )
 
+//Will not use assets for now
+//but will use splash art
 const ProjectSplash = ({ activeProjectData, promoVideo, handleClick }) => {
   const splash = activeProjectData?.project?.assets?.find((d) =>
     d.classification?.includes('Splash')
@@ -118,21 +123,22 @@ const ProjectSplash = ({ activeProjectData, promoVideo, handleClick }) => {
   )
 }
 
+
 const ProjectHeader = ({ activeProjectData, mediaSize, theme }) => (
   <HeaderContainer>
-    <ProjectLogo project={activeProjectData?.project} theme={theme} />
+    <ProjectLogo project={activeProjectData?.project[0]} theme={theme} />
     <div>
       <ProjectTitle mediaSize={mediaSize}>
-        {activeProjectData?.project?.name || ''}
+        {activeProjectData?.project[0].name || ''}
       </ProjectTitle>
       <CountryAndArea theme={theme} activeProjectData={activeProjectData} />
     </div>
   </HeaderContainer>
 )
 
 const CountryAndArea = ({ activeProjectData, theme }) => {
-  const area = Math.round(activeProjectData?.project?.area / 10000)
-  const country = countryToEmoji[activeProjectData?.project?.country]
+  const area = Math.round(activeProjectData?.project[0].area / 10000)
+  const country = countryToEmoji[activeProjectData?.project[0].country]
 
   return (
     <CountryAreaText>
@@ -151,13 +157,13 @@ const Description = ({ activeProjectData }) => (
   <Section>
     <h3>Description</h3>
     <DescriptionText>
-      {activeProjectData?.project?.longDescription.replaceAll('\\n', '\n')}
+      {activeProjectData?.project[0].longDescription.replaceAll('\\n', '\n')}
     </DescriptionText>
   </Section>
 )
 
 const Objectives = ({ activeProjectData }) => {
-  const objectives = activeProjectData.project?.objective
+  const objectives = activeProjectData?.project[0].objective
     ?.split(',')
     ?.filter(Boolean)
 
@@ -325,4 +331,4 @@ const StatValue = styled.div`
 const StatLabel = styled.div`
   font-size: 0.875rem;
   color: ${({ theme }) => theme.colors.text};
-`
+`

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

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 
 import Button from '../../../Map/components/Button'
 import { fetchProjectPolygon } from '../../../Map/mapfetch'
-
+/*
 export const ProjectSiteButtons = ({
   assets,
   activeShapefile,
@@ -78,4 +78,4 @@ export const ProjectSiteButtons = ({
       )}
     </>
   )
-}
+}*/

web/src/components/Overlays/InfoOverlay.tsx

@@ -245,4 +245,4 @@ export const ImageOverlay = ({
       )}
     </div>
   )
-}
+}