Merge pull request #133 from wizelineacademy/Extra

Extra
wizelineacademy · Jun 4, 2024 · bb6220c · bb6220c
2 parents 13fb635 + 3698ba5
commit bb6220c
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 26 deletions.
diff --git a/src/app/(pages)/(main)/home/page.tsx b/src/app/(pages)/(main)/home/page.tsx
@@ -153,7 +153,7 @@ const Home = () => {
               className='px-4transition-colors mt-4 flex h-16 w-56 items-center justify-between rounded-full bg-color-home5 duration-300 ease-in-out hover:cursor-pointer hover:bg-color-home6'
             >
               <span className='ml-4 text-2xl font-bold text-white'>Perfil</span>
-              <FaCircle size={32} color='white' className='mb-2 mr-4' />
+              <FaCircle size={32} color='white' className='mr-4' />
             </div>
           </Link>
         </div>
@@ -270,24 +270,30 @@ const Home = () => {
             <div
               className={`${!isOpen2 ? 'block' : 'hidden'} items-center justify-center lg:mt-4 lg:flex lg:flex-col`}
             >
-              <div className='mt-2 flex w-[190px] flex-row justify-between rounded-2xl bg-white p-1 transition-colors duration-300 ease-in-out hover:cursor-pointer hover:bg-color-home3'>
-                <h2 className='pl-2 text-lg font-bold text-color-home6'>
-                  Nutrición
-                </h2>
-                <FaAngleRight size={28} />
-              </div>
-              <div className='mt-4 flex w-[190px] flex-row justify-between rounded-2xl bg-white p-1 transition-colors duration-300 ease-in-out hover:cursor-pointer hover:bg-color-home3'>
-                <h2 className='pl-2 text-lg font-bold text-color-home6'>
-                  Ejercicio
-                </h2>
-                <FaAngleRight size={28} />
-              </div>
-              <div className='mt-4 flex w-[190px] flex-row justify-between rounded-2xl bg-white p-1 transition-colors duration-300 ease-in-out hover:cursor-pointer hover:bg-color-home3'>
-                <h2 className='pl-2 text-lg font-bold text-color-home6'>
-                  Sueño
-                </h2>
-                <FaAngleRight size={28} />
-              </div>
+              <Link href='/nutrition/self_evaluation/'>
+                <div className='mt-2 flex w-[190px] flex-row justify-between rounded-2xl bg-white p-1 transition-colors duration-300 ease-in-out hover:cursor-pointer hover:bg-color-home3'>
+                  <h2 className='pl-2 text-lg font-bold text-color-home6'>
+                    Nutrición
+                  </h2>
+                  <FaAngleRight size={28} />
+                </div>
+              </Link>
+              <Link href='/exercise/self_evaluation/'>
+                <div className='mt-4 flex w-[190px] flex-row justify-between rounded-2xl bg-white p-1 transition-colors duration-300 ease-in-out hover:cursor-pointer hover:bg-color-home3'>
+                  <h2 className='pl-2 text-lg font-bold text-color-home6'>
+                    Ejercicio
+                  </h2>
+                  <FaAngleRight size={28} />
+                </div>
+              </Link>
+              <Link href='/sleep/self_evaluation/'>
+                <div className='mt-4 flex w-[190px] flex-row justify-between rounded-2xl bg-white p-1 transition-colors duration-300 ease-in-out hover:cursor-pointer hover:bg-color-home3'>
+                  <h2 className='pl-2 text-lg font-bold text-color-home6'>
+                    Sueño
+                  </h2>
+                  <FaAngleRight size={28} />
+                </div>
+              </Link>
             </div>
           </div>
 

diff --git a/src/app/api/post/route.tsx b/src/app/api/post/route.tsx
@@ -4,6 +4,7 @@ import { authOptions } from '@/src/lib/auth/authOptions'
 import { eq } from 'drizzle-orm'
 import { posts, user } from '@/src/db/schema/schema'
 import { db } from '@/src/db/drizzle'
+import { sql } from 'drizzle-orm/sql'
 
 export async function GET() {
   try {
@@ -26,6 +27,8 @@ export async function GET() {
       })
       .from(posts)
       .innerJoin(user, eq(posts.creatorId, user.idUser))
+      .orderBy(sql`RANDOM()`)
+      .limit(10)
 
     return NextResponse.json(res, { status: 200 })
   } catch (error) {

diff --git a/src/app/api/post/search/[query]/route.ts b/src/app/api/post/search/[query]/route.ts
@@ -1,9 +1,10 @@
 import { NextResponse } from 'next/server'
 import { db } from '@/src/db/drizzle'
 import { posts, user } from '@/src/db/schema/schema'
-import { like, or, eq } from 'drizzle-orm'
+import { or, eq } from 'drizzle-orm'
 import { getServerSession } from 'next-auth'
 import { authOptions } from '@/src/lib/auth/authOptions'
+import { sql } from 'drizzle-orm/sql'
 
 export async function GET(
   request: Request,
@@ -21,7 +22,8 @@ export async function GET(
       return NextResponse.json('Search parameter is missing', { status: 400 })
     }
 
-    const queryPattern = `%${query}%`
+    const queryPattern = `%${query.toLowerCase()}%`
+
     const res = await db
       .select({
         idPost: posts.idPost,
@@ -36,7 +38,10 @@ export async function GET(
       .from(posts)
       .innerJoin(user, eq(posts.creatorId, user.idUser))
       .where(
-        or(like(posts.caption, queryPattern), like(posts.tag, queryPattern)),
+        or(
+          sql`${sql`LOWER(${posts.caption})`} LIKE ${queryPattern}`,
+          sql`${sql`LOWER(${posts.tag})`} LIKE ${queryPattern}`,
+        ),
       )
 
     if (res.length === 0) {

diff --git a/src/app/api/post/user/search/[query]/route.ts b/src/app/api/post/user/search/[query]/route.ts
@@ -1,7 +1,7 @@
 import { NextResponse } from 'next/server'
 import { db } from '@/src/db/drizzle'
 import { user } from '@/src/db/schema/schema'
-import { like } from 'drizzle-orm'
+import { sql } from 'drizzle-orm/sql'
 
 export async function GET(
   request: Request,
@@ -14,12 +14,12 @@ export async function GET(
       return NextResponse.json('Search parameter is missing', { status: 400 })
     }
 
-    const queryPattern = `%${query}%`
+    const queryPattern = `%${query.toLowerCase()}%`
 
     const res = await db
       .select()
       .from(user)
-      .where(like(user.name, queryPattern))
+      .where(sql`LOWER(${user.name}) LIKE ${queryPattern}`)
 
     return NextResponse.json(res, { status: 200 })
   } catch (error) {

diff --git a/src/components/post/PostCard.tsx b/src/components/post/PostCard.tsx
@@ -256,6 +256,8 @@ const PostCard: React.FC<PostCardProps> = ({ post, creator, onPostDelete }) => {
                   src={comment.profilePhoto ?? '/assets/noAvatar.png'}
                   alt='User Avatar'
                   className='h-10 w-10 rounded-full'
+                  width={50}
+                  height={50}
                 />
                 <div>
                   <p className='pb-2 font-semibold text-light-1'>

diff --git a/src/components/post/ProfileCard.tsx b/src/components/post/ProfileCard.tsx
@@ -6,25 +6,43 @@ import { tabs } from '@/src/constants'
 import { useState, useEffect } from 'react'
 import axios from 'axios'
 import React from 'react'
+import { PersonAddAlt, PersonRemove } from '@mui/icons-material'
 
 interface UserCardProps {
   userData: UserPost
   creator: UserPost[]
   activeTab: string
 }
 
-const ProfileCard: React.FC<UserCardProps> = ({ userData, activeTab }) => {
+const ProfileCard: React.FC<UserCardProps> = ({
+  userData,
+  activeTab,
+  creator,
+}) => {
   const profilePhoto = userData.profilePhoto ?? '/assets/noAvatar.png'
   const [postCount, setPostCount] = useState<number>(0)
   const [followersCount, setFollowersCount] = useState<number>(0)
   const [followingCount, setFollowingCount] = useState<number>(0)
+  const [isFollowing, setIsFollowing] = useState(false)
 
   useEffect(() => {
     getPostCount()
     getFollowingCount()
     getFollowersCount()
   }, [])
 
+  useEffect(() => {
+    const fetchFollowStatus = async () => {
+      try {
+        const response = await axios.get(`/api/user/follow/${userData.idUser}`)
+        setIsFollowing(response.data.isFollowing)
+      } catch (error) {
+        console.error('Error fetching follow status:', error)
+      }
+    }
+
+    fetchFollowStatus()
+  }, [userData.idUser])
   const getPostCount = async () => {
     try {
       const response = await axios.get(
@@ -54,6 +72,20 @@ const ProfileCard: React.FC<UserCardProps> = ({ userData, activeTab }) => {
     }
   }
 
+  const handleFollow = async () => {
+    try {
+      // Realizar la solicitud de seguimiento
+      const response = await axios.post(`/api/user/follow/${userData.idUser}`)
+      if (response.data.message === 'User followed successfully') {
+        setIsFollowing(true)
+      } else if (response.data.message === 'User unfollowed successfully') {
+        setIsFollowing(false)
+      }
+    } catch (error) {
+      console.error('Error toggling follow status:', error)
+    }
+  }
+
   return (
     <div className='flex flex-col gap-9'>
       <div className='flex items-start justify-between'>
@@ -91,6 +123,18 @@ const ProfileCard: React.FC<UserCardProps> = ({ userData, activeTab }) => {
             </div>
           </div>
         </div>
+        {userData.idUser !== creator[0]?.idUser &&
+          (isFollowing ? (
+            <PersonRemove
+              sx={{ color: '#7857FF', cursor: 'pointer', fontSize: '40px' }}
+              onClick={() => handleFollow()}
+            />
+          ) : (
+            <PersonAddAlt
+              sx={{ color: '#7857FF', cursor: 'pointer', fontSize: '40px' }}
+              onClick={() => handleFollow()}
+            />
+          ))}
       </div>
 
       <div className='flex gap-6'>