Feature: Revamp post search ux (#351)

* feat: replace post referer and referee with post search and view

* feat: post type title

* feat: display post type

* feat: search post type with search params instead of usestate

---------

Co-authored-by: Pjaijai <paul6a24@hotmail.com>

client/app/[locale]/page.tsx

@@ -16,7 +16,11 @@ export default async function IndexPage() {
     jobTitle: "",
     maxYearOfExperience: 100,
     minYearOfExperience: 0,
-    type: EReferralType.REFERRER,
+    types: [
+      EReferralType.REFERRER,
+      EReferralType.REFEREE,
+      EReferralType.HIRING,
+    ],
   })
 
   return <MainPageTemplate count={count} posts={posts} />

client/app/[locale]/post/referer/page.tsx → client/app/[locale]/post/search/page.tsx

@@ -1,4 +1,5 @@
-import RefererPostPageTemplate from "@/modules/post/referer/template"
+import React from "react"
+import PostSearchPageTemplate from "@/modules/post/search/template"
 import {
   getCityList,
   getCountryList,
@@ -10,17 +11,17 @@ import { getI18n } from "@/utils/services/internationalization/server"
 import { siteConfig } from "@/config/site"
 import CommonPageLayout from "@/components/layouts/common"
 
-export const metadata = siteConfig.page.referrerPost.metadata
+export const metadata = siteConfig.page.searchPost.metadata
 
-const RefererPostPage = async () => {
+const PostSearchPage = async () => {
   const t = await getI18n()
   const countryList = await getCountryList()
   const provinceList = await getProvinceList()
   const cityList = await getCityList()
   const industryList = await getIndustryList()
   return (
     <CommonPageLayout title={t("page.post")}>
-      <RefererPostPageTemplate
+      <PostSearchPageTemplate
         countryList={countryList}
         provinceList={provinceList}
         cityList={cityList}
@@ -30,4 +31,4 @@ const RefererPostPage = async () => {
   )
 }
 
-export default RefererPostPage
+export default PostSearchPage

client/app/[locale]/post/referer/[uuid]/page.tsx → client/app/[locale]/post/view/[uuid]/page.tsx

@@ -3,6 +3,7 @@ import ReferralPostDetailsPageTemplate from "@/modules/post/view/template"
 import { getPostByUuid } from "@/utils/common/api"
 import { getI18n } from "@/utils/services/internationalization/server"
 
+import { EReferralType } from "@/types/common/referral-type"
 import CommonPageLayout from "@/components/layouts/common"
 
 export async function generateMetadata({
@@ -11,10 +12,31 @@ export async function generateMetadata({
   params: { uuid: string }
 }) {
   const { uuid } = params
+
+  // Fetch internationalization function
   const t = await getI18n()
-  const res = await getPostByUuid(uuid)
+
+  // Fetch post data
+  const { type: postType, job_title: jobTitle } = await getPostByUuid(uuid)
+
+  // Define type title based on post type
+  let typeTitle: string = ""
+  switch (postType) {
+    case EReferralType.HIRING:
+      typeTitle = t("post.type.hiring.title")
+      break
+    case EReferralType.REFEREE:
+      typeTitle = t("post.type.referee.title")
+      break
+    case EReferralType.REFERRER:
+      typeTitle = t("post.type.referer.title")
+      break
+    default:
+      break
+  }
+
   return {
-    title: `${res.job_title} | ${t("page.post")}`,
+    title: `${jobTitle} | ${typeTitle} | ${t("page.post")}`,
   }
 }
 

client/components/customized-ui/bars/search.tsx

@@ -6,6 +6,7 @@ import { ICountryResponse } from "@/types/api/response/country"
 import { IIndustryResponse } from "@/types/api/response/industry"
 import { IProvinceResponse } from "@/types/api/response/province"
 import { EMessageType } from "@/types/common/message-type"
+import { cn } from "@/lib/utils"
 import useCityOptions from "@/hooks/common/options/city-options"
 import useCountryOptions from "@/hooks/common/options/country-options"
 import useIndustryOptions from "@/hooks/common/options/industry-options"
@@ -47,6 +48,7 @@ export interface ISearchSearchBarProps {
   jobTitle: string
   handleReset: () => void
   handleSubmit: () => void
+  bottomLeftSection?: React.ReactNode
 }
 
 const SearchBar: React.FunctionComponent<ISearchSearchBarProps> = ({
@@ -78,6 +80,7 @@ const SearchBar: React.FunctionComponent<ISearchSearchBarProps> = ({
   jobTitle,
   handleReset,
   handleSubmit,
+  bottomLeftSection,
 }) => {
   const t = useI18n()
   const industryOptions = useIndustryOptions(industryList, true)
@@ -168,11 +171,19 @@ const SearchBar: React.FunctionComponent<ISearchSearchBarProps> = ({
           triggerClassName="w-full"
         />
       </div>
-      <div className="mt-4 flex w-full flex-row justify-end gap-2">
-        <ResetButton onClick={handleReset} />
-        <Button onClick={handleSubmit} className="whitespace-nowrap">
-          {t("general.search")}
-        </Button>
+      <div
+        className={cn(
+          "mt-4 flex w-full flex-row ",
+          bottomLeftSection ? "justify-between" : "justify-end"
+        )}
+      >
+        {bottomLeftSection}
+        <div className="justify-row flex flex-row gap-2">
+          <ResetButton onClick={handleReset} />
+          <Button onClick={handleSubmit} className="whitespace-nowrap">
+            {t("general.search")}
+          </Button>
+        </div>
       </div>
     </div>
   )

client/components/customized-ui/cards/referral-post.tsx

@@ -3,15 +3,14 @@ import Link from "next/link"
 import { useRouter } from "next/navigation"
 import PostCardInfoDisplay from "@/modules/post/components/info-display/card-info"
 import PostHeader from "@/modules/post/components/info-display/header"
+import usePostTypeTitle from "@/modules/post/hooks/post-type-title"
+import { useI18n } from "@/utils/services/internationalization/client"
 
+import { EReferralType } from "@/types/common/referral-type"
 import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
-import {
-  Card,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-} from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardFooter, CardHeader } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
 import BaseAvatar from "@/components/customized-ui/avatars/base"
 import CompanyNameDisplay from "@/components/customized-ui/info-display/company"
@@ -32,11 +31,13 @@ interface IReferralPostCardProps {
   createdAt: string | null
   createdBy: string | null
   className?: string
+  type: EReferralType
 }
 
 // NOTE: please use onClick with e.preventDefault() for any links inside this component to prevent validateDOMNesting warning
 
 const ReferralPostCard: React.FunctionComponent<IReferralPostCardProps> = ({
+  type,
   uuid,
   jobTitle,
   city,
@@ -53,12 +54,15 @@ const ReferralPostCard: React.FunctionComponent<IReferralPostCardProps> = ({
   className,
 }) => {
   const router = useRouter()
+  const t = useI18n()
 
   const handleAvatarOnClick = (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault()
     router.push(`${siteConfig.page.profile.href}/${createdBy}`)
   }
 
+  const postTypeTitle = usePostTypeTitle(type)
+
   return (
     <Card
       className={cn(
@@ -67,7 +71,7 @@ const ReferralPostCard: React.FunctionComponent<IReferralPostCardProps> = ({
       )}
     >
       <Link
-        href={`${siteConfig.page.referrerPost.href}/${uuid}`}
+        href={`${siteConfig.page.viewPost.href}/${uuid}`}
         onClick={(e) => e.stopPropagation()}
         className="flex h-full flex-col items-start justify-start"
       >
@@ -109,10 +113,11 @@ const ReferralPostCard: React.FunctionComponent<IReferralPostCardProps> = ({
         </div>
 
         {/* created at */}
-        <CardFooter className="mt-auto w-full justify-end">
-          <CardDescription>
-            <CreatedAtDisplay applyTo="card" createdAt={createdAt} />
-          </CardDescription>
+        <CardFooter className="mt-2 flex w-full flex-row justify-between">
+          {postTypeTitle && (
+            <Badge className="flex justify-center">{postTypeTitle}</Badge>
+          )}
+          <CreatedAtDisplay applyTo="card" createdAt={createdAt} />
         </CardFooter>
       </Link>
     </Card>

client/components/customized-ui/drawers/search.tsx

@@ -17,7 +17,9 @@ import ResetButton from "@/components/customized-ui/buttons/reset"
 import BaseSelect from "@/components/customized-ui/selects/base"
 import { Icons } from "@/components/icons"
 
-interface ISearchDrawerProps extends ISearchSearchBarProps {}
+export interface ISearchDrawerProps extends ISearchSearchBarProps {
+  additionalFields?: React.ReactNode
+}
 const SearchDrawer: React.FunctionComponent<ISearchDrawerProps> = ({
   provinceUuid,
   countryUuid,
@@ -47,6 +49,7 @@ const SearchDrawer: React.FunctionComponent<ISearchDrawerProps> = ({
   jobTitle,
   handleReset,
   handleSubmit,
+  additionalFields,
 }) => {
   const t = useI18n()
   const industryOptions = useIndustryOptions(industryList, true)
@@ -71,6 +74,7 @@ const SearchDrawer: React.FunctionComponent<ISearchDrawerProps> = ({
       </DrawerTrigger>
       <DrawerContent className="fixed bottom-0  flex h-fit flex-col rounded-t-[10px] p-2">
         <div className="container mt-2 flex flex-col gap-4">
+          {additionalFields}
           <Input
             onChange={handleCompanyChange}
             onKeyDown={handleKeyPressSubmitChange}

client/components/customized-ui/form/select.tsx

@@ -21,6 +21,7 @@ import { IFormTextInputProps } from "@/components/customized-ui/form/input"
 interface IFormSelectProps extends IFormTextInputProps {
   options: { value: string; title: string }[]
   defaultValue?: string
+  isDisabled?: boolean
 }
 
 const FormSelect: React.FunctionComponent<IFormSelectProps> = ({
@@ -31,6 +32,7 @@ const FormSelect: React.FunctionComponent<IFormSelectProps> = ({
   description,
   options,
   defaultValue,
+  isDisabled,
 }) => {
   return (
     <FormField
@@ -43,6 +45,7 @@ const FormSelect: React.FunctionComponent<IFormSelectProps> = ({
             onValueChange={field.onChange}
             defaultValue={defaultValue}
             value={field.value}
+            disabled={isDisabled}
           >
             <FormControl>
               <SelectTrigger>

client/components/customized-ui/navigation-menu/base.tsx

@@ -29,7 +29,7 @@ export function BaseNavigationMenu() {
     },
     {
       title: t("page.post"),
-      href: siteConfig.page.referrerPost.href,
+      href: siteConfig.page.searchPost.href,
       description: t("nav.referrer_post.description"),
     },
   ]

client/components/customized-ui/navigation-menu/mobile.tsx

@@ -43,7 +43,7 @@ export function MobileNavigationMenu({ className }: MobileNavigationMenuProps) {
   ]
 
   const workLinks = [
-    { title: t("page.post"), url: siteConfig.page.referrerPost.href },
+    { title: t("page.post"), url: siteConfig.page.searchPost.href },
     { title: t("page.create_post"), url: siteConfig.page.createPost.href },
   ]
 

client/components/site-header.tsx

@@ -12,7 +12,6 @@ import LocaleDropDownMenu from "@/components/customized-ui/drop-down-menu/locale
 import MessageIcon from "@/components/customized-ui/icons/message"
 import { BaseNavigationMenu } from "@/components/customized-ui/navigation-menu/base"
 import { MobileNavigationMenu } from "@/components/customized-ui/navigation-menu/mobile"
-import { Icons } from "@/components/icons"
 import { MainNav } from "@/components/main-nav"
 import { ThemeToggle } from "@/components/theme-toggle"
 

client/config/site.ts

@@ -102,15 +102,22 @@ export const siteConfig = {
       name: "編輯街招",
       href: "/post/edit",
     },
-    referrerPost: {
+    searchPost: {
       name: "街招",
-      href: "/post/referer",
+      href: "/post/search",
       metadata: {
         title: "街招",
-        description:
-          "係到搵有乜工搵人推薦。 Look for job postings and get referred.",
+        description: "係到搵有乜街招。 A wall for posts.",
       },
     },
+    viewPost: {
+      name: "街招",
+      href: "/post/view",
+      metadata: {
+        title: "街招",
+      },
+    },
+
     postHistory: {
       name: "街招記錄",
       href: "/post/history",