Merge pull request #20 from devlopersabbir/revert-17-default

Revert 17 default
devlopersabbir · Mar 30, 2024 · 9dae6fe · 9dae6fe
2 parents 6d50f13 + bbd3af1
commit 9dae6fe
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/.env.exmaple → .env.example b/.env.exmaple → .env.example
diff --git a/src/components/contents/ProfileGrid.tsx b/src/components/contents/ProfileGrid.tsx
@@ -15,6 +15,12 @@ const ProfileGrid = async ({ page, searchParams }: Props) => {
   const currentPage = parseInt(page); // like 1
   const itemPerPage = 5; // we want to show 5 item in per pages
   const offset = (currentPage - 1) * itemPerPage; // (1 - 1) * 3 = 0
+  const searchSkills = searchParams ? searchParams.toLowerCase().split(/[\s,]+/) : []; // regular expression to accept inputs separated by comma, space or both
+
+  // In order to get rid of the "error: operator does not exist: json @> json" I mannually cast the skills column to JSONB
+  const skillsCondition = searchSkills.length > 0
+    ? sql.raw(`lower("skills"::text)::JSONB @> '${JSON.stringify(searchSkills.map(skill => skill.toLowerCase()))}'::JSONB`)
+    : undefined;
 
   const [lengths, profiles] = await Promise.all([
     db.select({ count: sql<number>`count(*)` }).from(users),
@@ -26,8 +32,9 @@ const ProfileGrid = async ({ page, searchParams }: Props) => {
             or(
               ilike(users.name, `%${searchParams}%`),
               ilike(users.location, `%${searchParams}%`),
-              ilike(users.description, `%${searchParams}%`)
-            )
+              ilike(users.description, `%${searchParams}%`),
+              skillsCondition
+            ),
           )
           .limit(itemPerPage)
           .offset(offset)

diff --git a/src/components/forms/SearchProfiles.tsx b/src/components/forms/SearchProfiles.tsx
@@ -29,7 +29,7 @@ const SearchProfiles = () => {
         type="text"
         value={queryString}
         className="text-lg p-6 text-gray-800 dark:text-white rounded-br-xl backdrop-blur-3xl bg-white/95 dark:bg-zinc-700 shadow-sm"
-        placeholder="Search developer by name, and locations"
+        placeholder="Search developer by name, skills or locations"
       />
       <SearchIcon
         size={30}