feat: adding search friend

messages/en.json

@@ -7,7 +7,8 @@
     "realName": "Real name",
     "probability": "Probability",
     "url": "Url",
-    "reliability": "Realiability"
+    "reliability": "Reliability",
+    "searchFriend": "Search"
   },
   "LocationCard": {
     "providedByUser": "Provided by user:"

messages/pt.json

@@ -7,7 +7,8 @@
     "realName": "Nome real",
     "probability": "Probabilidade",
     "url": "Url",
-    "reliability": "Confiabilidade"
+    "reliability": "Confiabilidade",
+    "searchFriend": "Buscar"
   },
   "LocationCard": {
     "providedByUser": "Fornecido pelo usuário:"

src/app/components/UserCard/UserCard.tsx

@@ -1,8 +1,9 @@
 import { useTranslations } from 'next-intl';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { UserSummary } from 'steamapi';
 import { getLocationDetails } from '@/app/templates/Home/useHome';
 import { LocationInfoType } from '@/@types/targetInfoJsonType';
+import HomeContext from '@/app/templates/Home/context';
 
 function UserCard({
   friend,
@@ -19,6 +20,8 @@ function UserCard({
 
   const translator = useTranslations('UserCard');
 
+  const context = useContext(HomeContext);
+
   const defaultLocationInfoType = useMemo(
     () => ({
       city: undefined,
@@ -65,6 +68,17 @@ function UserCard({
             width={itsTargetUser ? 120 : 60}
             height={itsTargetUser ? 120 : 60}
           />
+          {!itsTargetUser && (
+            <button
+              onClick={() =>
+                context?.handleGetInfoClick(friend.steamID, 'Enter')
+              }
+              type="button"
+              className="w-[60px] py-1 mt-2 text-purple-400 font-semibold text-sm rounded-full border border-purple-800 bg-purple-600 bg-opacity-10 hover:bg-opacity-20"
+            >
+              {translator('searchFriend')}
+            </button>
+          )}
         </div>
       )}
       <div
@@ -94,6 +108,7 @@ function UserCard({
                 width={itsTargetUser ? 40 : 20}
                 height={itsTargetUser ? 28 : 14}
               />
+
               {isLoadingLocationDetails && (
                 <div className="h-4 bg-gray-500 rounded-md animate-pulse w-1/2" />
               )}

src/app/templates/Home/Home.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import dynamic from 'next/dynamic';
 import SponsorMe from '@/app/components/SponsorMe';
 import { useHome } from './useHome';
 import VideoBackground from './templates/VideoBackground';
 import MyUserSection from './templates/MyUserSection';
 import WelcomeText from './WelcomeText/WelcomeText';
+import HomeContext from './context';
 
 const LocationSection = dynamic(() => import('./templates/LocationSection'));
 const FriendsSection = dynamic(() => import('./templates/FriendsSection'));
@@ -25,42 +26,50 @@ export default function Home() {
     onCloseSponsorMe,
   } = useHome();
 
+  const contextValue = useMemo(
+    () => ({
+      handleGetInfoClick,
+    }),
+    [handleGetInfoClick],
+  );
+
   return (
-    <div className="max-h-dvh">
-      <VideoBackground />
-      {showSponsorMe && (
-        <SponsorMe
-          onClose={() => onCloseSponsorMe(0)}
-          dontAskAgain={() => onCloseSponsorMe(-20)}
-        />
-      )}
-      {hasNoDataYet && <WelcomeText />}
-      <div
-        className={`flex flex-col h-full w-full min-h-screen bg-no-repeat bg-cover p-12 text-white z-20 ${
-          hasNoDataYet
-            ? 'absolute top-1/2 transform -translate-y-1/2'
-            : 'relative'
-        }`}
-      >
-        <MyUserSection
-          targetInfoJson={targetInfoJson}
-          isLoading={isLoading.myCard}
-          onChangeTarget={onChangeTarget}
-          handleGetInfoClick={handleGetInfoClick}
-          targetValue={targetValue}
-        />
-        <div className="flex flex-col gap-16 my-8">
-          <LocationSection
-            possibleLocationJson={possibleLocationJson}
-            targetInfoJson={targetInfoJson}
-            isLoading={isLoading.friendsCards}
+    <HomeContext.Provider value={contextValue}>
+      <div className="max-h-dvh">
+        <VideoBackground />
+        {showSponsorMe && (
+          <SponsorMe
+            onClose={() => onCloseSponsorMe(0)}
+            dontAskAgain={() => onCloseSponsorMe(-20)}
           />
-          <FriendsSection
-            closeFriendsJson={closeFriendsJson}
-            isLoading={isLoading.friendsCards}
+        )}
+        {hasNoDataYet && <WelcomeText />}
+        <div
+          className={`flex flex-col h-full w-full min-h-screen bg-no-repeat bg-cover p-12 text-white z-20 ${
+            hasNoDataYet
+              ? 'absolute top-1/2 transform -translate-y-1/2'
+              : 'relative'
+          }`}
+        >
+          <MyUserSection
+            targetInfoJson={targetInfoJson}
+            isLoading={isLoading.myCard}
+            onChangeTarget={onChangeTarget}
+            targetValue={targetValue}
           />
+          <div className="flex flex-col gap-16 my-8">
+            <LocationSection
+              possibleLocationJson={possibleLocationJson}
+              targetInfoJson={targetInfoJson}
+              isLoading={isLoading.friendsCards}
+            />
+            <FriendsSection
+              closeFriendsJson={closeFriendsJson}
+              isLoading={isLoading.friendsCards}
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </HomeContext.Provider>
   );
 }

src/app/templates/Home/context.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+interface HomeContextType {
+  handleGetInfoClick: (value: string, key: string) => Promise<void>;
+}
+
+const HomeContext = createContext<HomeContextType | null>(null);
+
+export default HomeContext;

src/app/templates/Home/templates/MyUserSection/MyUserSection.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useTranslations } from 'next-intl';
 import targetInfoJsonType from '@/@types/targetInfoJsonType';
 import dynamic from 'next/dynamic';
 import SearchInput from '../SearchInput';
+import HomeContext from '../../context';
 
 const UserCard = dynamic(() => import('@/app/components/UserCard'));
 const UserCardSkeleton = dynamic(
@@ -13,19 +14,19 @@ type MyUserSectionProps = {
   targetInfoJson: targetInfoJsonType;
   isLoading: boolean;
   onChangeTarget: (value: string) => void;
-  handleGetInfoClick: (value: string, key: string) => Promise<void>;
   targetValue: React.MutableRefObject<string | null | undefined>;
 };
 
 function MyUserSection({
   targetInfoJson,
   isLoading,
   onChangeTarget,
-  handleGetInfoClick,
   targetValue,
 }: MyUserSectionProps) {
   const translator = useTranslations('Index');
 
+  const context = useContext(HomeContext);
+
   return (
     <div className="flex flex-col h-full w-full items-center justify-center gap-y-8">
       <h1 className="text-3xl font-bold text-center">
@@ -34,7 +35,9 @@ function MyUserSection({
       <SearchInput
         onChange={({ target }) => onChangeTarget(target.value)}
         placeholder={translator('inputSearchPlaceholder')}
-        onKeyDown={(e) => handleGetInfoClick(targetValue.current ?? '', e.key)}
+        onKeyDown={(e) =>
+          context?.handleGetInfoClick(targetValue.current ?? '', e.key)
+        }
       />
       {targetInfoJson ? (
         <UserCard friend={targetInfoJson.profileInfo} itsTargetUser />

src/app/templates/Home/useHome.ts

@@ -265,7 +265,6 @@ export const useHome = () => {
   };
 
   const handleGetInfoClick = async (value: string, key: string) => {
-    console.log('walter', { value, key });
     if (key !== 'Enter') {
       return;
     }