Feature/list most latest contact request on laning page

client/app/[locale]/page.tsx

@@ -1,10 +1,16 @@
 import MainPageTemplate from "@/modules/main/template"
-import { getUserCount, searchPostApi } from "@/utils/common/api"
+import {
+  getUserCount,
+  listLatestContactRequest,
+  searchPostApi,
+} from "@/utils/common/api"
 
 import { EReferralType } from "@/types/common/referral-type"
 
 // cache for 1 hours
-export const revalidate = 60 * 60
+// export const revalidate = 60 * 60
+
+export const revalidate = 0
 
 export default async function IndexPage() {
   const count = await getUserCount()
@@ -23,5 +29,7 @@ export default async function IndexPage() {
     ],
   })
 
-  return <MainPageTemplate count={count} posts={posts} />
+  const list = await listLatestContactRequest()
+
+  return <MainPageTemplate count={count} posts={posts} contactList={list} />
 }

client/modules/main/components/carousels/contact-request.tsx

@@ -0,0 +1,56 @@
+import React from "react"
+import { useScopedI18n } from "@/utils/services/internationalization/client"
+import Autoplay from "embla-carousel-autoplay"
+
+import { TContactRequestListResponse } from "@/types/api/response/contact-request/contact-request-list"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel"
+
+interface IContactRequestCarouselProps {
+  list: TContactRequestListResponse[]
+}
+const ContactRequestCarousel: React.FunctionComponent<
+  IContactRequestCarouselProps
+> = ({ list }) => {
+  const scopedT = useScopedI18n("index")
+
+  return (
+    <Carousel
+      plugins={[
+        Autoplay({
+          delay: 2000,
+        }),
+      ]}
+    >
+      <CarouselContent>
+        {list.map((data) => {
+          if (data.type === "post")
+            return (
+              <CarouselItem className="basis-1/2 md:basis-1/4">
+                <div className="flex w-fit shrink-0 flex-row justify-center">
+                  <p className="shrink-0">@{data.senderUserName}</p>
+                  <p className="shrink-0">{scopedT("requested")}</p>
+                  <p className="shrink-0">{data.postJobTitle}</p>
+                </div>
+              </CarouselItem>
+            )
+          if (data.type === "member")
+            return (
+              <CarouselItem className="basis-1/2 md:basis-1/4">
+                <div className="flex w-fit  shrink-0 flex-row justify-center">
+                  <p>@{data.senderUserName} </p>
+                  <p>{scopedT("contacted")}</p>
+                  <p>@{data.receiverUserName}</p>
+                </div>
+              </CarouselItem>
+            )
+        })}
+      </CarouselContent>
+    </Carousel>
+  )
+}
+
+export default ContactRequestCarousel

client/modules/main/template.tsx

@@ -2,12 +2,14 @@
 
 import React, { useRef } from "react"
 import Link from "next/link"
-import PostCarousel from "@/modules/main/components/post-carousel"
+import ContactRequestCarousel from "@/modules/main/components/carousels/contact-request"
+import PostCarousel from "@/modules/main/components/carousels/post"
 import UserCount from "@/modules/main/components/user-count"
 import { useScopedI18n } from "@/utils/services/internationalization/client"
 import { motion } from "framer-motion"
 import { useTheme } from "next-themes"
 
+import { TContactRequestListResponse } from "@/types/api/response/contact-request/contact-request-list"
 import { ISearchPostResponse } from "@/types/api/response/referer-post"
 import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
@@ -19,9 +21,11 @@ import { Globe } from "@/components/customized-ui/fancy/globe/globe"
 const MainPageTemplate = ({
   count,
   posts,
+  contactList,
 }: {
   count: number | null
   posts: ISearchPostResponse[]
+  contactList: TContactRequestListResponse[]
 }) => {
   const isUserSignIn = useUserStore((state) => state.isSignIn)
   const { theme } = useTheme()
@@ -90,6 +94,9 @@ const MainPageTemplate = ({
               </Link>
             )}
           </div>
+          <div className="mt-20">
+            <ContactRequestCarousel list={contactList} />
+          </div>
           <div className="mt-20 ">
             <PostCarousel list={posts} />
           </div>

client/types/api/response/contact-request/contact-request-list.ts

@@ -0,0 +1,17 @@
+export type TContactRequestListResponse = IPostContact | IMemberContact
+
+interface IPostContact {
+  type: "post"
+  createdAt: string
+  postUuid: string
+  senderUserName: string
+  postJobTitle: string
+}
+
+interface IMemberContact {
+  type: "member"
+  createdAt: string
+  receiverUserName: string
+  receiverUuid: string
+  senderUserName: string
+}

client/utils/common/api/index.tsx

@@ -15,6 +15,7 @@ import { IUpdatePostRequest } from "@/types/api/request/post/update"
 import { IUserFilterMeta } from "@/types/api/request/user/filter-meta"
 import { IUpdateUserProfileRequest } from "@/types/api/request/user/update"
 import { ICityResponse } from "@/types/api/response/city"
+import { TContactRequestListResponse } from "@/types/api/response/contact-request/contact-request-list"
 import { IGetConversationListByUserUuidResponse } from "@/types/api/response/conversation-list"
 import { ICountryResponse } from "@/types/api/response/country"
 import { IIndustryResponse } from "@/types/api/response/industry"
@@ -250,7 +251,7 @@ export const searchReferral = async ({
   const maxYearOfExperience = queryKey[1].filterMeta.maxYearOfExperience
   const minYearOfExperience = queryKey[1].filterMeta.minYearOfExperience
   const types = queryKey[1].filterMeta.types
-  console.log(123123, queryKey[1].filterMeta)
+
   const sort = queryKey[1].sorting.split(",")
   const order = sort[1] !== "dec"
 
@@ -883,6 +884,20 @@ export const getUserCount = async () => {
   }
 }
 
+// contact Request history
+export const listLatestContactRequest = async () => {
+  try {
+    const { data, error } = await supabase.functions.invoke(
+      "list-latest-contact-request"
+    )
+
+    if (error) throw error
+    return data as TContactRequestListResponse[]
+  } catch (error) {
+    throw error
+  }
+}
+
 // Storage
 export const uploadMedia = async ({
   bucketName,

client/utils/services/internationalization/messages/en-ca.ts

@@ -12,7 +12,10 @@ export default {
     "members#other": "members",
     join_now: "Join Now !",
     check_latest_post: "Latest Post",
+    requested: "sent request to post",
+    contacted: "contacted",
   },
+
   "auth.form.email_label": "Email",
   "auth.form.username_label": "Username",
   "auth.form.username_description": "Changeable after registration",

client/utils/services/internationalization/messages/zh-hk.ts

@@ -10,6 +10,8 @@ export default {
     "members#other": "個會員",
     join_now: "即刻加入！",
     check_latest_post: "查看最新街招",
+    requested: "回應咗街招",
+    contacted: "聯絡咗",
   },
   "auth.form.email_label": "電郵",
   "auth.form.username_label": "用戶名稱",

supabase/functions/list-latest-contact-request/index.ts

@@ -0,0 +1,82 @@
+import { serve } from "https://deno.land/[email protected]/http/server.ts"
+import { corsHeaders } from "../_shared/cors.ts"
+import { initSupabaseServer } from "../_shared/server.ts"
+
+serve(async () => {
+  try {
+    const server = initSupabaseServer()
+
+    const { data: postContactList } = await server
+      .from("post_contact_history")
+      .select(
+        `
+        id,
+        uuid,
+      sender_uuid(
+        username
+      ),
+      post_uuid(
+        uuid,
+        job_title
+      ),
+      created_at
+      `,
+      )
+      .order("created_at", { ascending: false })
+      .limit(10)
+
+    const newPostList = postContactList.map((post) => {
+      return {
+        type: "post",
+        createdAt: post.created_at,
+        postUuid: post.uuid,
+        senderUserName: post.sender_uuid.username,
+        postJobTitle: post.post_uuid.job_title,
+      }
+    })
+
+    const { data: memberContactList } = await server
+      .from("referral_contact_history")
+      .select(
+        `
+      id,
+      uuid,
+    sender_uuid(
+      username
+    ),
+    receiver_uuid(
+      username,
+      uuid
+    ),
+    created_at
+      `,
+      )
+      .order("created_at", { ascending: false })
+      .limit(10)
+
+    const newMemberList = memberContactList.map((member) => {
+      return {
+        type: "member",
+        createdAt: member.created_at,
+        receiverUserName: member.receiver_uuid.username,
+        receiverUuid: member.receiver_uuid.uuid,
+        senderUserName: member.sender_uuid.username,
+      }
+    })
+
+    const res = [...newPostList, ...newMemberList]
+    const sortedRes = res.sort(
+      (a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+    )
+    return new Response(JSON.stringify(sortedRes), {
+      headers: { ...corsHeaders, "Content-Type": "application/json" }, // Be sure to add CORS headers here too
+      status: 200,
+    })
+  } catch (error: any) {
+    return new Response(JSON.stringify({ error }), {
+      headers: { ...corsHeaders, "Content-Type": "application/json" },
+      status: 400,
+    })
+  }
+})