From 46c3d0a0be98c4aca72e86732f6c33f9026d8b8c Mon Sep 17 00:00:00 2001
From: caando <zhangjikun907475@gmail.com>
Date: Fri, 21 Jul 2023 04:05:04 +0800
Subject: [PATCH 1/3] feat(preview): added preview images

---
 src/constants/queryKeys.ts                |   1 +
 src/hooks/allSitesHooks/index.ts          |   1 +
 src/hooks/allSitesHooks/useSitePreview.ts |  25 +++++
 src/layouts/Sites.tsx                     | 109 +++++++++++++++-------
 src/services/AllSitesService.ts           |   9 +-
 src/types/sites.ts                        |   4 +
 6 files changed, 113 insertions(+), 36 deletions(-)
 create mode 100644 src/hooks/allSitesHooks/useSitePreview.ts

diff --git a/src/constants/queryKeys.ts b/src/constants/queryKeys.ts
index 3f3220a81..64368d4b0 100644
--- a/src/constants/queryKeys.ts
+++ b/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"
diff --git a/src/hooks/allSitesHooks/index.ts b/src/hooks/allSitesHooks/index.ts
index e04106640..b87ec6daa 100644
--- a/src/hooks/allSitesHooks/index.ts
+++ b/src/hooks/allSitesHooks/index.ts
@@ -1 +1,2 @@
 export * from "./useGetAllSites"
+export * from "./useSitePreview"
diff --git a/src/hooks/allSitesHooks/useSitePreview.ts b/src/hooks/allSitesHooks/useSitePreview.ts
new file mode 100644
index 000000000..edb1d4527
--- /dev/null
+++ b/src/hooks/allSitesHooks/useSitePreview.ts
@@ -0,0 +1,25 @@
+import { useQuery } from "react-query"
+import type { 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.error(error)
+      },
+    }
+  )
+}
diff --git a/src/layouts/Sites.tsx b/src/layouts/Sites.tsx
index 485845573..b8d4841c2 100644
--- a/src/layouts/Sites.tsx
+++ b/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,57 @@ import { EmptySitesImage, IsomerLogoNoText } from "assets"
 import { AnnouncementModal } from "features/AnnouncementModal/AnnouncementModal"
 import { SiteData } from "types/sites"
 
+const SitePreviewImage = ({ imageUrl }: { imageUrl?: string }) => {
+  if (!imageUrl) {
+    return <IsomerLogoNoText height="50%" />
+  }
+  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 +113,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)
+      )}
     </>
   )
 }
diff --git a/src/services/AllSitesService.ts b/src/services/AllSitesService.ts
index d228a8f3d..ce3057e84 100644
--- a/src/services/AllSitesService.ts
+++ b/src/services/AllSitesService.ts
@@ -1,4 +1,4 @@
-import { SiteDataRequest } from "types/sites"
+import { SiteDataRequest, SitePreviewRequest } from "types/sites"
 
 import { apiService } from "./ApiService"
 
@@ -6,3 +6,10 @@ export const getAllSites = async (): Promise<SiteDataRequest> => {
   const endpoint = `/sites`
   return apiService.get(endpoint).then((res) => res.data)
 }
+
+export const getSitePreview = async (
+  sites: string[]
+): Promise<SitePreviewRequest[]> => {
+  const endpoint = `/sites/preview`
+  return apiService.post(endpoint, { sites }).then((res) => res.data)
+}
diff --git a/src/types/sites.ts b/src/types/sites.ts
index 3c6e63f2f..77cc4ab0d 100644
--- a/src/types/sites.ts
+++ b/src/types/sites.ts
@@ -8,3 +8,7 @@ export interface SiteData {
 export interface SiteDataRequest {
   siteNames: SiteData[]
 }
+
+export interface SitePreviewRequest {
+  imageUrl: string
+}

From f908304c5f02469ddbf6dacecb9ec584ed60d2f9 Mon Sep 17 00:00:00 2001
From: caando <zhangjikun907475@gmail.com>
Date: Wed, 26 Jul 2023 11:15:41 +0800
Subject: [PATCH 2/3] fix(preview): fixes according to review

---
 src/hooks/allSitesHooks/useSitePreview.ts | 7 +++----
 src/types/sites.ts                        | 2 +-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/hooks/allSitesHooks/useSitePreview.ts b/src/hooks/allSitesHooks/useSitePreview.ts
index edb1d4527..e6cfc8972 100644
--- a/src/hooks/allSitesHooks/useSitePreview.ts
+++ b/src/hooks/allSitesHooks/useSitePreview.ts
@@ -1,5 +1,4 @@
-import { useQuery } from "react-query"
-import type { UseQueryResult } from "react-query"
+import { useQuery, UseQueryResult } from "react-query"
 
 import { SITE_PREVIEW_KEY } from "constants/queryKeys"
 
@@ -12,13 +11,13 @@ export const useSitePreview = (
   sites: string[]
 ): UseQueryResult<SitePreviewRequest[]> => {
   return useQuery<SitePreviewRequest[]>(
-    [`${SITE_PREVIEW_KEY}`, userEmail],
+    [SITE_PREVIEW_KEY, userEmail],
     () => AllSitesService.getSitePreview(sites),
     {
       retry: false,
       refetchOnWindowFocus: false,
       onError: (error) => {
-        console.error(error)
+        console.log(error)
       },
     }
   )
diff --git a/src/types/sites.ts b/src/types/sites.ts
index 77cc4ab0d..920aec546 100644
--- a/src/types/sites.ts
+++ b/src/types/sites.ts
@@ -10,5 +10,5 @@ export interface SiteDataRequest {
 }
 
 export interface SitePreviewRequest {
-  imageUrl: string
+  imageUrl?: string
 }

From 9f280adf1d2d8c05084a8e972ff1958f1eabaf66 Mon Sep 17 00:00:00 2001
From: caando <zhangjikun907475@gmail.com>
Date: Thu, 27 Jul 2023 14:59:09 +0800
Subject: [PATCH 3/3] ref(preview): remove excess imageUrl check and added
 comments

---
 src/layouts/Sites.tsx           | 3 ---
 src/services/AllSitesService.ts | 5 +++++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/layouts/Sites.tsx b/src/layouts/Sites.tsx
index b8d4841c2..b750b49e5 100644
--- a/src/layouts/Sites.tsx
+++ b/src/layouts/Sites.tsx
@@ -31,9 +31,6 @@ import { AnnouncementModal } from "features/AnnouncementModal/AnnouncementModal"
 import { SiteData } from "types/sites"
 
 const SitePreviewImage = ({ imageUrl }: { imageUrl?: string }) => {
-  if (!imageUrl) {
-    return <IsomerLogoNoText height="50%" />
-  }
   return (
     <Image
       src={imageUrl}
diff --git a/src/services/AllSitesService.ts b/src/services/AllSitesService.ts
index ce3057e84..e8e7ce4e1 100644
--- a/src/services/AllSitesService.ts
+++ b/src/services/AllSitesService.ts
@@ -7,6 +7,11 @@ export const getAllSites = async (): Promise<SiteDataRequest> => {
   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[]> => {