Merge remote-tracking branch 'origin/main'

Author: mikepsinn

app/profile/ProfileForm.tsx

@@ -6,7 +6,7 @@ import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { userSchema } from './userSchema'
 import { updateUser } from './profileActions'
-import { User } from '@prisma/client'
+import {Skill, User} from '@prisma/client'
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
@@ -15,12 +15,19 @@ import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { toast } from "@/components/ui/use-toast"
 import { ChevronDown, ChevronUp, User as UserIcon, Mail, Phone, MapPin, Globe, Github, Twitter, Cake, UserCircle, Languages, Lock } from 'lucide-react' // Import icons
+import UserSkills from './UserSkills'
 
 type FormData = Omit<User, 'id' | 'createdAt' | 'updatedAt' | 'emailVerified' | 'lastSignInAt' | 'createdAtTwitter' | 'deletedAt' | 'favouritesCount' | 'followersCount' | 'followingCount' | 'likeCount' | 'listedCount' | 'points' | 'statusesCount' | 'tweetCount' | 'privateMetadata' | 'publicMetadata' | 'unsafeMetadata' | 'ipAddress' | 'signatureTimestamp' | 'referrerUserId'>
 
-type FormSection = 'personal' | 'contact' | 'online' | 'preferences'
+type FormSection = 'personal' | 'contact' | 'online' | 'preferences' | 'skills'
 
-export default function ProfileForm({ user }: { user: User }) {
+type UserSkillWithSkill = {
+    id: string;
+    skillId: string;
+    skill: Skill;
+}
+
+export default function ProfileForm({ user }: { user: User & { userSkills: UserSkillWithSkill[] } }) {
     const [isSubmitting, setIsSubmitting] = useState(false)
     const [openSections, setOpenSections] = useState<FormSection[]>([])
 
@@ -323,6 +330,10 @@ export default function ProfileForm({ user }: { user: User }) {
                     </div>
                 </div>
             ))}
+
+            {renderSection("Skills", "skills", (
+                <UserSkills user={user} />
+            ))}
         </form>
     )
 }

app/profile/UserSkills.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { User, Skill } from '@prisma/client'
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { X } from 'lucide-react'
+import { addUserSkill, removeUserSkill, searchSkills } from './skillActions'
+import { useDebounce } from 'use-debounce'
+
+type UserSkillWithSkill = {
+    id: string;
+    skillId: string;
+    skill: Skill;
+}
+
+type UserSkillsProps = {
+    user: User & { userSkills: UserSkillWithSkill[] };
+}
+
+export default function UserSkills({ user }: UserSkillsProps) {
+    const [searchTerm, setSearchTerm] = useState('')
+    const [debouncedSearchTerm] = useDebounce(searchTerm, 300)
+    const [filteredSkills, setFilteredSkills] = useState<Skill[]>([])
+
+    useEffect(() => {
+        const fetchSkills = async () => {
+            if (debouncedSearchTerm) {
+                const skills = await searchSkills(debouncedSearchTerm)
+                setFilteredSkills(skills.filter(skill => 
+                    !user.userSkills.some(userSkill => userSkill.skillId === skill.id)
+                ))
+            } else {
+                setFilteredSkills([])
+            }
+        }
+        fetchSkills()
+    }, [debouncedSearchTerm, user.userSkills])
+
+    const handleAddSkill = async (skillName: string) => {
+        if (skillName.trim()) {
+            await addUserSkill(user.id, skillName.trim())
+            setSearchTerm('')
+        }
+    }
+
+    const handleRemoveSkill = async (skillId: string) => {
+        await removeUserSkill(user.id, skillId)
+    }
+
+    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            e.preventDefault() // Prevent form submission
+            handleAddSkill(searchTerm)
+        }
+    }
+
+    return (
+        <div className="space-y-4">
+            <div className="relative">
+                <Input
+                    type="text"
+                    placeholder="Search for a skill..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    onKeyPress={handleKeyPress}
+                />
+                {searchTerm && filteredSkills.length > 0 && (
+                    <div className="absolute z-10 w-full border mt-1 rounded-md shadow-lg bg-background">
+                        {filteredSkills.map((skill) => (
+                            <div
+                                key={skill.id}
+                                className="p-2 hover:bg-accent hover:text-accent-foreground cursor-pointer"
+                                onClick={() => handleAddSkill(skill.name)}
+                            >
+                                {skill.name}
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+            <div className="flex flex-wrap gap-2">
+                {user.userSkills.map((userSkill) => (
+                    <div key={userSkill.id} className="flex items-center bg-opacity-10 rounded-full px-3 py-1">
+                        <span>{userSkill.skill.name}</span>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            className="ml-2 p-0"
+                            onClick={() => handleRemoveSkill(userSkill.skillId)}
+                        >
+                            <X size={16} />
+                        </Button>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}

app/profile/page.tsx

@@ -12,6 +12,13 @@ export default async function ProfilePage() {
 
     const user = await prisma.user.findUnique({
         where: { email: session.user.email },
+        include: {
+            userSkills: {
+                include: {
+                    skill: true
+                }
+            }
+        }
     })
 
     if (!user) {

app/profile/skillActions.ts

@@ -0,0 +1,47 @@
+'use server'
+
+import prisma from "@/lib/prisma"
+import { revalidatePath } from "next/cache"
+
+export async function addUserSkill(userId: string, skillName: string) {
+    const skill = await prisma.skill.upsert({
+        where: { name: skillName },
+        update: {},
+        create: { name: skillName },
+    })
+
+    await prisma.userSkill.create({
+        data: {
+            userId: userId,
+            skillId: skill.id,
+        },
+    })
+
+    revalidatePath('/profile')
+}
+
+export async function removeUserSkill(userId: string, skillId: string) {
+    await prisma.userSkill.delete({
+        where: {
+            userId_skillId: {
+                userId: userId,
+                skillId: skillId,
+            },
+        },
+    })
+
+    revalidatePath('/profile')
+}
+
+export async function searchSkills(searchTerm: string) {
+    const skills = await prisma.skill.findMany({
+        where: {
+            name: {
+                contains: searchTerm,
+                mode: 'insensitive',
+            },
+        },
+        take: 5,
+    })
+    return skills
+}

package.json

@@ -189,6 +189,7 @@
     "undici": "^6.18.2",
     "unist-builder": "^3.0.1",
     "unist-util-filter": "^5.0.1",
+    "use-debounce": "^10.0.3",
     "uuid": "^9.0.1",
     "vaul": "^0.9.0",
     "wavefile": "^11.0.0",