Merge pull request #19 from maxlshk/default

FIX 📍 "error: operator does not exist: json @> json"

Author: devlopersabbir

package-lock.json

@@ -1,8 +1,8 @@
 {
   "name": "finddevs",
   "description": "Discover All Developers From The Programming World",
-  "version": "0.1.6",
-  "private": true,
+  "version": "0.1.8",
+  "private": false,
   "scripts": {
     "dev": "next dev",
     "build": "next build",

package.json

@@ -3,7 +3,14 @@ import { db } from "@/database";
 import { users } from "@/schemas";
 import ProfileCard from "./ProfileCard";
 import Paginations from "../pagination/Paginations";
-import { ilike, or, sql } from "drizzle-orm";
+import {
+  ilike,
+  or,
+  sql,
+  arrayContained,
+  arrayContains,
+  arrayOverlaps,
+} from "drizzle-orm";
 import Notfound from "../shared/Notfound";
 import Search from "../shared/search/Search";
 
@@ -16,6 +23,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),
@@ -27,6 +40,8 @@ const ProfileGrid = async ({ page, searchParams }: Props) => {
             or(
               ilike(users.name, `%${searchParams}%`),
               ilike(users.location, `%${searchParams}%`),
+              ilike(users.description, `%${searchParams}%`),
+              skillsCondition
             ),
           )
           .limit(itemPerPage)
@@ -38,6 +53,7 @@ const ProfileGrid = async ({ page, searchParams }: Props) => {
           .limit(itemPerPage)
           .offset(offset),
   ]);
+
   const count = lengths[0].count;
   return (
     <div className="lg:mt-32 mt-[10rem] mb-8 border-t-orange-500 lg:ml-[20rem] px-4 lg:px-6 overflow-y-scroll relative">

src/components/contents/ProfileGrid.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}