Fix the issue #444 (#874)

* Fix the issue #444
* fix: remove extra / in image path

---------

Co-authored-by: viet nguyen <vietnguyen@noreply>

package.json

@@ -142,4 +142,4 @@
   "engines": {
     "node": "18"
   }
-}
+}

src/components/ui/FeatureCard/FeatureCard.tsx

@@ -7,12 +7,12 @@ import { sanitizeName } from '../../../js/utils'
 import { FeatureImage } from './FeatureImage'
 import { CLIENT_CONFIG } from '../../../js/configs/clientConfig'
 
-function FeatureCard ({ area }: { area: AreaType }): JSX.Element {
+function FeatureCard ({ area }: { area: AreaType }): JSX.Element | null {
   const { areaName, pathTokens, aggregate, metadata, totalClimbs, media } = area
-  let imageUrl
-  if (media != null && media.length > 0) {
-    imageUrl = `${CLIENT_CONFIG.CDN_BASE_URL}/${shuffle(media)[0].mediaUrl}?format=webp&h=300&q=90`
-  }
+
+  if (media == null || media.length === 0) return null
+
+  const imageUrl = `${CLIENT_CONFIG.CDN_BASE_URL}${shuffle(media)[0].mediaUrl}?format=webp&h=300&q=90`
 
   const image = {
     url: imageUrl,

src/pages/index.tsx

@@ -15,6 +15,7 @@ import { IndexResponseType, MediaWithTags } from '../js/types'
 import { ExploreProps } from '../components/home/DenseAreas'
 import TabsTrigger from '../components/ui/TabsTrigger'
 import RecentTaggedMedia from '../components/home/RecentMedia'
+import { FRAGMENT_MEDIA_WITH_TAGS } from '../js/graphql/gql/tags'
 
 const allowedViews = ['explore', 'newTags', 'map', 'edit', 'pulse']
 
@@ -135,8 +136,8 @@ const Home: NextPage<HomePageType> = ({ exploreData, recentMediaWithTags }) => {
 }
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
-//  ${FRAGMENT_MEDIA_WITH_TAGS}
   const query = gql`
+  ${FRAGMENT_MEDIA_WITH_TAGS}
   query UsaAreas( $filter: Filter) {
     areas(filter: $filter, sort: { totalClimbs: -1 }) {
       id
@@ -175,9 +176,9 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
         lng
         areaId
       }
-      # media {
-      #   ... MediaWithTagsFields
-      # }
+       media {
+         ... MediaWithTagsFields
+       }
     }
   }`