From 7030ca67f55382f329add840784950b470e0c994 Mon Sep 17 00:00:00 2001
From: unknown <pebuka351@gmail.com>
Date: Mon, 30 Sep 2024 00:00:21 +0100
Subject: [PATCH] Job Search

---
 app/(guest)/jobs/components/available-jobs.js |   1 +
 app/(guest)/jobs/components/dropdown.js       | 108 ++++++++++++------
 app/(guest)/jobs/page.js                      |   6 +-
 3 files changed, 79 insertions(+), 36 deletions(-)

diff --git a/app/(guest)/jobs/components/available-jobs.js b/app/(guest)/jobs/components/available-jobs.js
index f6e7639..0996281 100644
--- a/app/(guest)/jobs/components/available-jobs.js
+++ b/app/(guest)/jobs/components/available-jobs.js
@@ -39,6 +39,7 @@ export default function AvailableJobs({ initialData }) {
                 ? '&date=' + searchQueries.date
                 : ''
         }`
+
         getJobs({
             url: jobsInfo?.next_page_url?.slice(33) + searchUrl || '/jobs',
             setLoading,
diff --git a/app/(guest)/jobs/components/dropdown.js b/app/(guest)/jobs/components/dropdown.js
index 5b0e870..6a8c15f 100644
--- a/app/(guest)/jobs/components/dropdown.js
+++ b/app/(guest)/jobs/components/dropdown.js
@@ -1,41 +1,79 @@
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/components/ui/select'
+'use client'
+import { useRef, useState, useEffect } from 'react'
+
+import { ChevronDown } from 'lucide-react'
+import { AnimatePresence, motion } from 'framer-motion'
 
 export default function DropdownMenu({ value, onChange, list, placeholder }) {
+    const [open, setOpen] = useState(false)
+    const dropdownRef = useRef(null)
+
+    // Function to handle clicks outside the dropdown
+    const handleClickOutside = event => {
+        if (
+            dropdownRef.current &&
+            !dropdownRef.current.contains(event.target)
+        ) {
+            setOpen(false)
+        }
+    }
+
+    // Add and clean up event listener for clicks outside
+    useEffect(() => {
+        if (open) {
+            document.addEventListener('mousedown', handleClickOutside)
+        } else {
+            document.removeEventListener('mousedown', handleClickOutside)
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside)
+        }
+    }, [open])
+
     return (
-        <div className="relative">
-            <Select value={value} onValueChange={e => onChange(e)}>
-                <SelectTrigger className="w-full tablet:h-12 h-14 focus:ring-transparent outline-none rounded-2xl border border-tremor-brand-boulder200 px-6 tablet:text-sm text-sm large:text-base font-normal text-tremor-brand-boulder700 placeholder:text-tremor-brand-boulder200">
-                    {value.trim().length > 0 ? (
-                        <SelectValue placeholder={value} />
-                    ) : (
-                        <p className="tablet:text-sm text-sm large:text-base font-normal text-tremor-brand-boulder200">
-                            {placeholder}
-                        </p>
-                    )}
-                </SelectTrigger>
-                <SelectContent
-                    className="rounded-3xl bg-white text-base shadow-lg focus:outline-none sm:text-sm py-3"
-                    style={{
-                        boxShadow: '0px 20px 417px 0px #00000012',
-                    }}>
-                    {list.map(item => {
-                        return (
-                            <SelectItem
-                                className="text-tremor-brand-boulder300 cursor-pointer border-transparent relative h-[42px] text-[13px] border select-none py-2 pl-3 pr-9 focus:bg-[#FFBB0A0F] focus:text-tremor-brand-boulder950 focus:border-[#FFBB0A0D]"
-                                key={item}
-                                value={item}>
-                                {item}
-                            </SelectItem>
-                        )
-                    })}
-                </SelectContent>
-            </Select>
+        <div className="w-full relative flex flex-col" ref={dropdownRef}>
+            <button
+                type="button"
+                onClick={() => setOpen(p => !p)}
+                className="w-full tablet:h-12 h-14 hover:ring-transparent outline-none flex items-center rounded-2xl border border-tremor-brand-boulder200 px-6 tablet:text-sm text-sm large:text-base justify-between font-normal text-tremor-brand-boulder700 placeholder:text-tremor-brand-boulder200">
+                {value.trim().length > 0 ? (
+                    <p className="tablet:text-sm text-sm large:text-base font-normal">
+                        {value}
+                    </p>
+                ) : (
+                    <p className="tablet:text-sm text-sm large:text-base font-normal text-tremor-brand-boulder200">
+                        {placeholder}
+                    </p>
+                )}
+                <ChevronDown className="h-4 w-4 opacity-50" />
+            </button>
+
+            <AnimatePresence>
+                {open && (
+                    <motion.div
+                        transition={{ ease: 'backOut', duration: 0.15 }}
+                        initial={{ opacity: 0.5, scale: 0.93 }}
+                        exit={{ opacity: 0, scale: 1 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        className="rounded-3xl bg-white top-[60px] border flex flex-col w-full tablet:top-[52px] absolute origin-top text-base shadow-lg focus:outline-none sm:text-sm py-3"
+                        style={{
+                            boxShadow: '0px 20px 417px 0px #00000012',
+                        }}>
+                        {list.map(item => {
+                            return (
+                                <button
+                                    type="button"
+                                    onClick={() => onChange(item)}
+                                    className="text-tremor-brand-boulder300 text-start w-full cursor-pointer border-transparent relative h-[42px] text-[13px] border py-2 px-6 hover:bg-[#FFBB0A0F] hover:text-tremor-brand-boulder950 hover:border-[#FFBB0A0D]"
+                                    key={item}>
+                                    {item}
+                                </button>
+                            )
+                        })}
+                    </motion.div>
+                )}
+            </AnimatePresence>
         </div>
     )
 }
diff --git a/app/(guest)/jobs/page.js b/app/(guest)/jobs/page.js
index 22acfb2..b376051 100644
--- a/app/(guest)/jobs/page.js
+++ b/app/(guest)/jobs/page.js
@@ -52,7 +52,11 @@ export default async function Page({ searchParams }) {
 
 const getJobs = async (page, searchParams) => {
     try {
-        const url = new URL('https://api.analogueshifts.app/api/jobs')
+        const url = new URL(
+            searchParams.search
+                ? 'https://api.analogueshifts.app/api/job/search'
+                : 'https://api.analogueshifts.app/api/jobs',
+        )
 
         // Always include the page query parameter
         url.searchParams.append('page', page)