feat(preview): added preview images

src/constants/queryKeys.ts

@@ -27,6 +27,7 @@ export const DIFF_QUERY_KEY = "diff"
 export const REVIEW_REQUEST_QUERY_KEY = "review-request"
 export const COMMENTS_KEY = "comments-content"
 export const ALL_SITES_KEY = "all-sites-content"
+export const SITE_PREVIEW_KEY = "site-previews"
 export const GET_HOMEPAGE_KEY = "get-homepage"
 export const GET_NAV_KEY = "get-nav"
 export const GET_ALL_COLLECTIONS_KEY = "get-all-collections"

src/hooks/allSitesHooks/index.ts

@@ -1 +1,2 @@
 export * from "./useGetAllSites"
+export * from "./useSitePreview"

src/hooks/allSitesHooks/useSitePreview.ts

@@ -0,0 +1,24 @@
+import { useQuery, UseQueryResult } from "react-query"
+
+import { SITE_PREVIEW_KEY } from "constants/queryKeys"
+
+import * as AllSitesService from "services/AllSitesService"
+
+import { SitePreviewRequest } from "types/sites"
+
+export const useSitePreview = (
+  userEmail: string,
+  sites: string[]
+): UseQueryResult<SitePreviewRequest[]> => {
+  return useQuery<SitePreviewRequest[]>(
+    [SITE_PREVIEW_KEY, userEmail],
+    () => AllSitesService.getSitePreview(sites),
+    {
+      retry: false,
+      refetchOnWindowFocus: false,
+      onError: (error) => {
+        console.log(error)
+      },
+    }
+  )
+}

src/layouts/Sites.tsx

@@ -6,6 +6,7 @@ import {
   Text,
   VStack,
   Flex,
+  Image,
 } from "@chakra-ui/react"
 import { InlineMessage } from "@opengovsg/design-system-react"
 import { AllSitesHeader } from "components/Header/AllSitesHeader"
@@ -17,7 +18,7 @@ import { LOCAL_STORAGE_KEYS } from "constants/localStorage"
 
 import { useLoginContext } from "contexts/LoginContext"
 
-import { useGetAllSites } from "hooks/allSitesHooks"
+import { useGetAllSites, useSitePreview } from "hooks/allSitesHooks"
 import { useAnnouncements } from "hooks/useAnnouncement"
 
 import elementStyles from "styles/isomer-cms/Elements.module.scss"
@@ -29,8 +30,54 @@ import { EmptySitesImage, IsomerLogoNoText } from "assets"
 import { AnnouncementModal } from "features/AnnouncementModal/AnnouncementModal"
 import { SiteData } from "types/sites"
 
+const SitePreviewImage = ({ imageUrl }: { imageUrl?: string }) => {
+  return (
+    <Image
+      src={imageUrl}
+      height="50%"
+      fallback={<IsomerLogoNoText height="50%" />}
+    />
+  )
+}
+
+const SitesCard = (
+  repoName: string,
+  lastUpdated: string,
+  urlLink: "dashboard" | "workspace",
+  imageUrl?: string
+) => {
+  return (
+    <div className={siteStyles.siteContainer} key={repoName}>
+      <div className={siteStyles.site}>
+        <Link to={`/sites/${repoName}/${urlLink}`}>
+          <Flex w="full" h="70%" justifyContent="center" alignItems="center">
+            <SitePreviewImage imageUrl={imageUrl} />
+          </Flex>
+          <Divider />
+          <VStack
+            w="full"
+            h="30%"
+            justifyContent="center"
+            alignItems="start"
+            backgroundColor="interaction.mainLight.default"
+            pl="1rem"
+            borderRadius="0px 0px 4px 4px"
+          >
+            <Text fontSize="0.9em">{repoName}</Text>
+            {lastUpdated && (
+              <Text fontSize="0.6em" color="base.content.light">
+                {convertUtcToTimeDiff(lastUpdated)}
+              </Text>
+            )}
+          </VStack>
+        </Link>
+      </div>
+    </div>
+  )
+}
+
 const SitesContent = ({ siteNames }: { siteNames?: SiteData[] }) => {
-  const { userId } = useLoginContext()
+  const { userId, email } = useLoginContext()
   const isEmailLoginUser = !userId
   const urlLink = isEmailLoginUser ? "dashboard" : "workspace"
 
@@ -63,41 +110,30 @@ const SitesContent = ({ siteNames }: { siteNames?: SiteData[] }) => {
         </VStack>
       </VStack>
     )
+  const { data: previews } = useSitePreview(
+    email,
+    siteNames.map((site) => site.repoName)
+  )
+  if (previews && previews.length === siteNames.length) {
+    const sitesWithPreview = siteNames.map((siteName, index) => {
+      return {
+        ...siteName,
+        imageUrl: previews[index].imageUrl,
+      }
+    })
+    return (
+      <>
+        {sitesWithPreview.map(({ repoName, lastUpdated, imageUrl }) =>
+          SitesCard(repoName, lastUpdated, urlLink, imageUrl)
+        )}
+      </>
+    )
+  }
   return (
     <>
-      {siteNames.map((siteName) => (
-        <div className={siteStyles.siteContainer} key={siteName.repoName}>
-          <div className={siteStyles.site}>
-            <Link to={`/sites/${siteName.repoName}/${urlLink}`}>
-              <Flex
-                w="full"
-                h="70%"
-                justifyContent="center"
-                alignItems="center"
-              >
-                <IsomerLogoNoText height="30%" />
-              </Flex>
-              <Divider />
-              <VStack
-                w="full"
-                h="30%"
-                justifyContent="center"
-                alignItems="start"
-                backgroundColor="interaction.mainLight.default"
-                pl="1rem"
-                borderRadius="0px 0px 4px 4px"
-              >
-                <Text fontSize="0.9em">{siteName.repoName}</Text>
-                {siteName.lastUpdated && (
-                  <Text fontSize="0.6em" color="base.content.light">
-                    {convertUtcToTimeDiff(siteName.lastUpdated)}
-                  </Text>
-                )}
-              </VStack>
-            </Link>
-          </div>
-        </div>
-      ))}
+      {siteNames.map(({ repoName, lastUpdated }) =>
+        SitesCard(repoName, lastUpdated, urlLink)
+      )}
     </>
   )
 }

src/services/AllSitesService.ts

@@ -1,8 +1,20 @@
-import { SiteDataRequest } from "types/sites"
+import { SiteDataRequest, SitePreviewRequest } from "types/sites"
 
 import { apiService } from "./ApiService"
 
 export const getAllSites = async (): Promise<SiteDataRequest> => {
   const endpoint = `/sites`
   return apiService.get(endpoint).then((res) => res.data)
 }
+
+// This is a post request because the frontend needs to send
+// a list of sites to request for which is not doable with GET
+// request. However, in the future after migration of users to
+// email login, the list of sites can be removed in favor of a
+// db query. In that case the query method can be changed to GET.
+export const getSitePreview = async (
+  sites: string[]
+): Promise<SitePreviewRequest[]> => {
+  const endpoint = `/sites/preview`
+  return apiService.post(endpoint, { sites }).then((res) => res.data)
+}

src/types/sites.ts

@@ -8,3 +8,7 @@ export interface SiteData {
 export interface SiteDataRequest {
   siteNames: SiteData[]
 }
+
+export interface SitePreviewRequest {
+  imageUrl?: string
+}