Merge pull request #30 from devlopersabbir/sabbir

[fix 🐱‍🏍] improve codes & fix some mejor issues 🤞

Author: devlopersabbir

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,17 +1,17 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**

package.json

@@ -1,8 +1,14 @@
 {
   "name": "finddevs",
   "description": "Discover All Developers From The Programming World",
-  "version": "0.2.0",
+  "version": "1.2.1",
   "private": false,
+  "author": {
+    "email": "devlopersabbir@gmail.com",
+    "name": "Sabbir Hossain Shuvo",
+    "url": "https://devlopersabbir.github.io"
+  },
+  "license": "MIT",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -12,7 +18,6 @@
     "introspect": "drizzle-kit introspect:pg",
     "push": "drizzle-kit push:pg",
     "generate": "drizzle-kit generate:pg",
-    "migrate": "drizzle-kit migrate:pg",
     "drop": "drizzle-kit drop",
     "studio": "drizzle-kit studio --host localhost --port 3001 --verbose --config drizzle.config.ts",
     "seed": "cross-env DB_SEEDING=true tsx src/database/seed.ts"

src/app/layout.tsx

@@ -18,7 +18,7 @@ export const metadata: Metadata = {
   icons: "/favicon/favicon.ico",
   authors: {
     name: "Sabbir Hossain Shuvo",
-    url: "https://github.com/devlopersabbir",
+    url: "https://devlopersabbir.github.io",
   },
 };
 

src/components/contents/ProfileCard.tsx

@@ -3,51 +3,54 @@ import { ArrowRight, MapPin } from "lucide-react";
 import { Badge } from "../ui/badge";
 import Link from "next/link";
 import { Carousel, CarouselContent, CarouselItem } from "../ui/carousel";
-import { TNetwork, TUserSchema } from "@/types";
+import { TUserSchema } from "@/types";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { getIconComponent } from "@/constants";
 
-const ProfileCard = ({
-  description,
-  location,
-  name,
-  portfolio,
-  skill,
-  profileImage,
-  social,
-}: TUserSchema) => {
+type User = {
+  id: number;
+  uuid: string | null;
+  createdAt: Date;
+  updatedAt: Date;
+};
+type Props = {
+  profile: TUserSchema & User;
+};
+const ProfileCard = ({ profile }: Props) => {
   return (
     <Card className="w-full backdrop-blur-3xl shadow flex flex-col dark:bg-zinc-700 border-none transition-all ease-out duration-300">
       {/* header */}
       <CardHeader className="flex justify-between items-stretch flex-row lg:gap-4 md:gap-2 gap-1 overflow-hidden">
         <Avatar className="lg:w-24 md:w-20 w-16 lg:h-24 md:h-20 h-16 object-cover transition-all ease-out duration-300">
           <AvatarImage
-            src={profileImage}
+            src={profile.profileImage}
             className="object-fill"
-            alt="profile photo"
+            alt={profile.name}
           />
-          <AvatarFallback>{name.substring(0, 2).toUpperCase()}</AvatarFallback>
+          <AvatarFallback>
+            {profile.name.substring(0, 2).toUpperCase()}
+          </AvatarFallback>
         </Avatar>
         <div className="flex-start w-full overflow-hidden flex-col lg:gap-1 gap-0.5">
           <h2 className="lg:text-2xl md:text-xl sm:text-lg text-base font-semibold text-gray-700 dark:text-zinc-200 ">
-            {name}
+            {profile.name}
           </h2>
           <p className="flex-center lg:gap-2 md:gap-1 gap-0 lg:text-xl md:text-lg sm:text-base text-xs">
             <MapPin size={16} />
-            {location}
+            {profile.location}
           </p>
           <Carousel className="w-full lg:mt-1.5 md:mt-0.5 mt-0">
             <CarouselContent
               id="skills"
               className="flex justify-start items-center"
             >
-              {skill.map((sk: string, index: number) => (
-                <CarouselItem key={index} className="w-auto basis-[-29-px]">
+              {profile.skills.map((skill: string, i: number) => (
+                <CarouselItem key={i} className="w-auto basis-[-29-px]">
                   <Badge
                     variant="secondary"
                     className="lg:text-sm text-xs cursor-all-scroll select-none"
                   >
-                    {sk}
+                    {skill}
                   </Badge>
                 </CarouselItem>
               ))}
@@ -57,7 +60,8 @@ const ProfileCard = ({
 
         <div>
           <Link
-            href={portfolio ?? "https://github.com/devlopersabbir"}
+            href={profile.portfolio ?? "https://github.com/devlopersabbir"}
+            target="_blank"
             className="hover:underline text-green-600 flex gap-2 font-semibold"
           >
             <span className="lg:text-lg md:text-md sm:text-base text-xs">
@@ -70,16 +74,16 @@ const ProfileCard = ({
 
       <CardContent>
         <p className="font-thin lg:text-lg md:text-base text-xs">
-          {description}
+          {profile.description}
         </p>
         <div className="flex-start mt-3 gap-4">
-          {social?.map((net: TNetwork, i: number) => (
+          {profile.social?.map((social, i) => (
             <Link
               key={i}
-              href={net.link}
+              href={social.link}
               className="group scale-100 duration-300 ease-out bg-red-600 hover:bg-transparent rounded-md hover:rounded-full p-1.5 text-white"
             >
-              {getIconComponent(net.network as string)}
+              {getIconComponent(social.network)}
             </Link>
           ))}
         </div>

src/components/contents/ProfileGrid.tsx

@@ -15,12 +15,17 @@ 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
+  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 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),
@@ -33,7 +38,7 @@ const ProfileGrid = async ({ page, searchParams }: Props) => {
               ilike(users.name, `%${searchParams}%`),
               ilike(users.location, `%${searchParams}%`),
               ilike(users.description, `%${searchParams}%`),
-              skillsCondition
+              skillsCondition,
             ),
           )
           .limit(itemPerPage)
@@ -48,24 +53,14 @@ const ProfileGrid = async ({ page, searchParams }: Props) => {
 
   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">
+    <div className="lg:mt-32 mt-[10rem] mb-8 border-t-orange-500 lg:ml-[20rem] px-4 lg:px-6 relative">
       <Search />
       <div className="flex-center flex-col gap-3">
         {count <= 0 || profiles.length === 0 ? (
           <Notfound />
         ) : (
-          profiles.map((item, index: number) => (
-            <ProfileCard
-              key={index}
-              role={item.role}
-              description={item.description}
-              location={item.location}
-              name={item.name}
-              portfolio={item.portfolio as string}
-              skill={item.skills}
-              profileImage={item.profileImage as string}
-              social={item.social as any}
-            />
+          profiles.map((profile, i) => (
+            <ProfileCard key={i} profile={profile} />
           ))
         )}
       </div>

src/components/forms/CreateProfile.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { Input } from "../ui/input";
-import { Facebook, Github, Linkedin, UploadCloud } from "lucide-react";
+import { UploadCloud } from "lucide-react";
+import { Facebook, Github, Linkedin } from "lucide-react";
 import {
   Form,
   FormControl,
@@ -113,8 +114,9 @@ const CreateProfile = ({
                     width={160}
                     height={160}
                     alt="profile photo"
+                    objectFit="cover"
                     priority
-                    className="rounded-full object-contain"
+                    className="rounded-full object-cover"
                   />
                 ) : (
                   <div className="flex-center w-full h-full rounded-full border-2 bg-zinc-100">
@@ -129,7 +131,7 @@ const CreateProfile = ({
                     )}
                   </div>
                 )}
-                <FormControl className="w-40 h-40 border-2 border-red-400 absolute rounded-full opacity-0">
+                <FormControl className="w-40 h-40 border-2 border-red-400 absolute rounded-full opacity-0 cursor-pointer">
                   <Input
                     type="file"
                     accept="image/*"
@@ -212,19 +214,19 @@ const CreateProfile = ({
                 </FormLabel>
                 {networks.map((net: TNetwork, i: number) => (
                   <div className="relative flex-center" key={i}>
-                    {net.network === "Github" ? (
+                    {net.network === "GitHub" ? (
                       <Github className="absolute left-2" />
                     ) : net.network === "Facebook" ? (
                       <Facebook className="absolute left-2" />
-                    ) : net.network === "Linkedin" ? (
+                    ) : net.network === "LinkedIn" ? (
                       <Linkedin className="absolute left-2" />
                     ) : null}
                     <Input
                       type="url"
                       className="pl-10"
                       id="link"
                       onChange={(e) => {
-                        const newSocial = [...(field.value as any)];
+                        const newSocial = [...field.value];
                         newSocial[i] = {
                           network: net.network,
                           link: e.target.value,
@@ -242,7 +244,7 @@ const CreateProfile = ({
             name="description"
             render={({ field }) => (
               <FormItem>
-                <FormLabel className="font-semibold">About your self</FormLabel>
+                <FormLabel className="font-semibold">About yourself</FormLabel>
                 <FormControl>
                   <Textarea
                     placeholder="Tell us a little bit about yourself"

src/constants/getIconComponents.tsx

@@ -1,26 +1,26 @@
-import { Network } from "@/utils";
-import { FacebookIcon, GithubIcon, LinkedinIcon } from "lucide-react";
 import React from "react";
+import { Facebook, Github, Linkedin } from "lucide-react";
+import { TNet } from "@/types";
 
-export const getIconComponent = (network: string) => {
+export const getIconComponent = (network: TNet) => {
   switch (network) {
-    case Network.Facebook:
+    case "Facebook":
       return (
-        <FacebookIcon
+        <Facebook
           size={25}
           className="group-hover:scale-125 group-hover:text-rose-600 group-hover:rotate-[360deg] duration-300 ease-out"
         />
       );
-    case Network.Github:
+    case "GitHub":
       return (
-        <GithubIcon
+        <Github
           size={25}
           className="group-hover:scale-125 group-hover:text-rose-600 group-hover:rotate-[360deg] duration-300 ease-out"
         />
       );
-    case Network.Linkedin:
+    case "LinkedIn":
       return (
-        <LinkedinIcon
+        <Linkedin
           size={25}
           className="group-hover:scale-125 group-hover:text-rose-600 group-hover:rotate-[360deg] duration-300 ease-out"
         />

src/constants/index.ts

@@ -2,15 +2,15 @@ import { TNetwork } from "@/types";
 
 export const networks: TNetwork[] = [
   {
-    network: "Github",
+    network: "GitHub",
     link: "",
   },
   {
     network: "Facebook",
     link: "",
   },
   {
-    network: "Linkedin",
+    network: "LinkedIn",
     link: "",
   },
 ];

src/database/faker.ts

@@ -1,5 +1,4 @@
 import { faker } from "@faker-js/faker";
-import { users } from "@/schemas/user";
 import { User } from "@/schemas/user";
 
 const generateUser = (id: number): User => ({
@@ -18,10 +17,7 @@ const generateUser = (id: number): User => ({
     ],
     3
   ),
-  role:
-    id === 1
-      ? "SYSTEM_ADMIN"
-      : faker.helpers.arrayElement(["DEVELOPER", "ADMIN"]),
+  role: faker.helpers.arrayElement(["DEVELOPER", "ADMIN"]),
   description: faker.lorem.paragraph(),
   social: [
     { network: "LinkedIn", link: faker.internet.url() },
@@ -33,6 +29,6 @@ const generateUser = (id: number): User => ({
   updatedAt: faker.date.recent(),
 });
 
-export const usersData: User[] = Array.from({ length: 15 }, (_, index) =>
-  generateUser(index + 1)
+export const usersData: User[] = Array.from({ length: 10 }).map((_, i) =>
+  generateUser(i + 1)
 );