Integração de api no perfil do usuário

cecicassab · cecicassab · commit d0a6af05a6cc · 2025-11-20T16:59:06.000-03:00
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ Construir um sistema de ponta a ponta que rastreia fóruns, processa o texto das
 
 ### Rode a migration
 
-- Para criar o arquivo em databse.bd, no terminal, na pasta backend, execute: npx knex migrate:latest --knexfile knexfile.ts
+- Para criar o arquivo em databse.bd, no terminal, na pasta backend/src, execute: npx knex migrate:latest --knexfile knexfile.ts
 
 
 ## Criar seeds (popular tabelas)
diff --git a/frontend/src/API/Auth.ts b/frontend/src/API/Auth.ts
@@ -18,6 +18,7 @@ export async function Login(data: LoginProps) {
   }
 
   const {user, token} = await response.json();
+  console.log("Dados do usuário logado:", user);
   return { user, token };
   
 }
diff --git a/frontend/src/API/Keywords.ts b/frontend/src/API/Keywords.ts
@@ -8,7 +8,6 @@ export async function GetKeywords(): Promise<string[]> {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
-      // 'Authorization': `Bearer ${localStorage.getItem('token')}`
     },
   });
 
@@ -17,11 +16,5 @@ export async function GetKeywords(): Promise<string[]> {
   }
 
   const data = await response.json();
-
-  // IMPORTANTE: O componente TagInput do seu código original usa um array de strings.
-  // Se sua API retorna objetos (ex: [{id: 1, name: "React"}]), faça um map:
-  //return data.map((tech: any) => tech.name); 
-  
-  // Se a API já retorna direto ["React", "Java"], basta retornar:
   return data;
 }
diff --git a/frontend/src/API/Project.ts b/frontend/src/API/Project.ts
@@ -1,9 +1,17 @@
 export interface ProjectProps {
-  name: string;
+  title: string;
   description: string;
   technologies: string[]; 
   status: string;
-  date: string;
+  startDate: Date;
+}
+
+export function parseDate(dataString: string): Date {
+  // Divide a string "20/11/2025" em partes
+  const [dia, mes, ano] = dataString.split('/');
+
+  // Cria a data: new Date(ano, mês - 1, dia)
+  return new Date(Number(ano), Number(mes) - 1, Number(dia));
 }
 
 export async function NewProject(data: ProjectProps) {
@@ -40,7 +48,7 @@ export async function UpdateProject(projectId: string, data: ProjectProps) {
   } */
 }
 
-export async function getFeedProjects(): Promise<ProjectProps[]> {
+export async function GetFeedProjects(): Promise<ProjectProps[]> {
   // Em um app real, você faria um fetch
   // const response = await fetch('http://localhost:3000/api/projects', ...);
   // const data = await response.json();
@@ -49,14 +57,14 @@ export async function getFeedProjects(): Promise<ProjectProps[]> {
   // Por agora, vamos simular a resposta da API:
   return [
     {
-      name: 'Projeto CTable (React)',
+      title: 'Projeto CTable (React)',
       description: 'Post da "ceci" (usuário logado)',
-      technologies: ['React', 'TS'], status: 'em-andamento', date: '10/11/2025'
+      technologies: ['React', 'TS'], status: 'em-andamento', startDate: parseDate('01/10/2026')
     },
     {
-      name: 'Projeto de Outra Pessoa',
+      title: 'Projeto de Outra Pessoa',
       description: 'Post de outro usuário...',
-      technologies: ['Python'], status: 'finalizado', date: '01/10/2025'
+      technologies: ['Python'], status: 'finalizado', startDate: parseDate('01/10/2025')
     }
   ];
 }
@@ -74,4 +82,26 @@ export async function DeleteProject(projectId: string) {
     const errorData = await response.json();
     throw new Error(errorData.message || "Erro ao excluir projeto.");
   } */
-}
+}
+
+export async function GetUserProjects(): Promise<ProjectProps[]> {
+  const token = localStorage.getItem('token');
+
+  const response = await fetch('http://localhost:3000/api/user/projects', {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${token}`, // Adiciona o Token JWT
+    },
+  });
+  
+  if (!response.ok) {
+    const errorData = await response.json();
+    throw new Error(errorData.message);
+  }
+
+  const data = await response.json();
+  console.log("Dados dos projetos do usuário:", data.projects);
+
+  return data.projects;
+}
diff --git a/frontend/src/components/layout/Sidebar/index.tsx b/frontend/src/components/layout/Sidebar/index.tsx
@@ -7,15 +7,14 @@ import * as S from './styles';
 interface Community {
     id: string;
     name: string;
-    iconUrl: string;
 }
 
 // --- DADOS MOCKADOS ---
 const mockCommunities: Community[] = [
-    { id: 'react', name: 'r/React', iconUrl: 'https://styles.redditmedia.com/t5_2zldd/styles/communityIcon_fbblpo38o0x11.png' },
-    { id: 'node', name: 'r/Node', iconUrl: 'https://styles.redditmedia.com/t5_2qgct/styles/communityIcon_i4e0vjze1w2y1.png' },
-    { id: 'python', name: 'r/Python', iconUrl: 'https://styles.redditmedia.com/t5_2qh0y/styles/communityIcon_h9b7f16n1af31.png' },
-    { id: 'scikit', name: 'r/Scikit-Learn', iconUrl: 'https://styles.redditmedia.com/t5_2tby0/styles/communityIcon_d8j4iz4o9k731.png' },
+    { id: 'react', name: 'r/React' },
+    { id: 'node', name: 'r/Node' },
+    { id: 'python', name: 'r/Python'},
+    { id: 'scikit', name: 'r/Scikit-Learn'},
 ];
 // ----------------------
 
@@ -52,7 +51,6 @@ export default function Sidebar() {
                                 key={community.id}
                             >
                                 <S.CommunityIcon
-                                    src={community.iconUrl}
                                     alt={`${community.name} icon`}
                                 />
                                 <span>{community.name}</span>
diff --git a/frontend/src/pages/CreateProject/index.tsx b/frontend/src/pages/CreateProject/index.tsx
@@ -11,6 +11,11 @@ import  Toast  from '../../components/common/Toast';
 import { useNavigate, useLocation, useParams } from 'react-router-dom';
 import type { NotificationState } from '../../components/common/Toast';
 import { GetKeywords } from '../../API/Keywords';
+import { parseDate } from '../../API/Project';
+
+interface ProjectFormProps extends Omit<ProjectProps, 'startDate'> {
+  startDate: string; 
+}
 
 export default function CreateProject() {
   const navigate = useNavigate();
@@ -23,14 +28,22 @@ export default function CreateProject() {
   const projectToEdit = location.state?.projectToEdit as (ProjectProps & { id: string }) | undefined;
   const isEditMode = !!projectToEdit; // Se projectToEdit existe, estamos editando
 
-  const { register, handleSubmit, control, watch } = useForm<ProjectProps>({
+  const formatDateToString = (date?: Date | string) => {
+    if (!date) return "";
+    const d = new Date(date);
+    // Verifica se é data válida
+    if (isNaN(d.getTime())) return "";
+    return d.toLocaleDateString('pt-BR'); // Retorna "20/11/2025"
+  };
+
+  const { register, handleSubmit, control, watch } = useForm<ProjectFormProps>({
     // Preenche os valores padrão se estiver em modo de edição
     defaultValues: {
-      name: projectToEdit?.name || "",
+      title: projectToEdit?.title || "",
       description: projectToEdit?.description || "",
       technologies: projectToEdit?.technologies || [], 
       status: projectToEdit?.status || "",
-      date: projectToEdit?.date || ""
+      startDate: formatDateToString(projectToEdit?.startDate)
     }
   });
 
@@ -53,17 +66,23 @@ export default function CreateProject() {
   }, []);
 
   // Lida com CRIAR ou ATUALIZAR
-  const onSubmit = (data: ProjectProps) => {
+  const onSubmit = (data: ProjectFormProps) => {
+
+    const finalData: ProjectProps = {
+        ...data,
+        startDate: parseDate(data.startDate) 
+    };
+
     try {
       if (isEditMode) {
         // MODO DE EDIÇÃO
-        console.log("Atualizando Projeto:", projectId, data);
-        // UpdateProject(projectId, data); 
+        console.log("Atualizando Projeto:", projectId, finalData);
+        // UpdateProject(projectId, finalData); 
         setNotification({ message: 'Projeto atualizado com sucesso!', type: 'success' });
       } else {
         // MODO DE CRIAÇÃO
-        console.log("Criando Projeto:", data);
-        NewProject(data); 
+        console.log("Criando Projeto:", finalData);
+        NewProject(finalData); 
         setNotification({ message: 'Projeto criado com sucesso!', type: 'success' });
       }
       
@@ -97,8 +116,8 @@ export default function CreateProject() {
           <h2>{isEditMode ? 'Editar Projeto' : 'Criar Projeto'}</h2>
 
           <S.InputGroup>
-            <S.Label htmlFor="name">Nome do Projeto</S.Label>
-            <S.Input id="name" {...register('name', { required: true })} />
+            <S.Label htmlFor="title">Nome do Projeto</S.Label>
+            <S.Input id="title" {...register('title', { required: true })} />
           </S.InputGroup>
 
           <S.InputGroup>
@@ -120,21 +139,21 @@ export default function CreateProject() {
           </S.InputGroup>
 
           <S.InputGroup>
-            <S.Label htmlFor="date">Data de Início</S.Label>
+            <S.Label htmlFor="startDate">Data de Início</S.Label>
             <Controller
-              name="date"
+              name="startDate"
               control={control}
-              render={({ field }) => (
+              render={({ field: { onChange, value } }) => (
                 <S.Input
                   as={IMaskInput}
                   mask="00/00/0000"
-                  id="date"
+                  id="startDate"
                   placeholder="DD/MM/AAAA"
-                  {...field}
-                  // 9. Desabilita a data se estiver em modo de edição
+                  value={value} 
+                  onAccept={(value: string) => onChange(value)}
                   disabled={isEditMode} 
                 />
-              )}
+              )} 
             />
           </S.InputGroup>
           
diff --git a/frontend/src/pages/Login/index.tsx b/frontend/src/pages/Login/index.tsx
@@ -13,21 +13,23 @@ import  Toast  from '../../components/common/Toast';
 import { useNavigate } from 'react-router-dom';
 import {Login} from '../../API/Auth'
 import type { LoginProps } from '../../API/Auth';
+import { useAuth } from '../../API/AuthContext';
 import type { NotificationState } from '../../components/common/Toast';
 
 export default function LoginPage() {
   const [notification, setNotification] = useState<NotificationState | null>(null);
-  
+  const { login } = useAuth();
     
   const { register, handleSubmit, formState: {isSubmitting} } = useForm<LoginProps>();
   const navigate = useNavigate();
   
     async function onSubmit(data: LoginProps) {
       console.log(data);
       try{
-        await Login(data);
+        //await Login(data);
+        await login(data);
         
-        console.log('Usuário registrado com sucesso:');
+        console.log('Usuário registrado com sucesso');
         
         // Define estado para mostrar notificação de sucesso
         setNotification({ message: 'Usuário registrado com sucesso!', type: 'success' });
diff --git a/frontend/src/pages/Profile/index.tsx b/frontend/src/pages/Profile/index.tsx
@@ -5,12 +5,8 @@ import * as S from './styles';
 import * as D from '../../components/common/Dropdown/styles';
 import type { ProjectProps } from '../../API/Project';
 import type { CommentProps } from '../../API/Comment';
-
-// 3. Tipagem do Usuário
-type UserProps = {
-  username: string;
-  avatarUrl: string;
-};
+import { GetUserProjects } from '../../API/Project';
+import { useAuth } from '../../API/AuthContext';
 
 // --- ÍCONES ---
 const PostsIcon = () => (
@@ -34,43 +30,23 @@ const SettingsIcon = () => (
 type ViewState = 'posts' | 'comments';
 
 export default function Profile() {
+  const { currentUser, logout } = useAuth();
   const [view, setView] = useState<ViewState>('posts');
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
 
   // Estados para os dados da API
-  const [user, setUser] = useState<UserProps | null>(null);
   const [userPosts, setUserPosts] = useState<ProjectProps[]>([]);
   const [userComments, setUserComments] = useState<CommentProps[]>([]);
 
-  // Simulação de chamada de API (useEffect)
   useEffect(() => {
     // Função assíncrona para buscar todos os dados
+    console.log("Efeito de busca de dados do perfil disparado.");
     const fetchProfileData = async () => {
       try {;
-
-        // Dados que viriam da sua API
-        const apiUserData: UserProps = {
-          username: 'ceci',
-          avatarUrl: '' // URL da imagem do avatar
-        };
         
-        const apiUserPosts: ProjectProps[] = [
-          {
-            name: 'Projeto CTable (React)',
-            description: 'Este é o projeto que estamos construindo agora!',
-            technologies: ['React', 'TypeScript', 'Node.js'],
-            status: 'em-andamento',
-            date: '10/11/2025'
-          },
-          {
-            name: 'API de Análise de Dados',
-            description: 'Um backend em Python para análise.',
-            technologies: ['Python', 'Django'],
-            status: 'finalizado',
-            date: '01/08/2025'
-          }
-        ];
+        console.log("Usuário atual no Profile:", currentUser);
+        const apiUserPosts = await GetUserProjects();
         
         const apiUserComments: CommentProps[] = [
           {
@@ -80,18 +56,17 @@ export default function Profile() {
           }
         ];
         
-        // Atualiza os estados
-        setUser(apiUserData);
         setUserPosts(apiUserPosts);
         setUserComments(apiUserComments);
 
       } catch (error) {
         console.error("Falha ao buscar dados do perfil:", error);
       } 
+      
     };
-
-    fetchProfileData();
-  }, []); // O array vazio [] garante que isso rode apenas uma vez
+    if(currentUser)
+      fetchProfileData();
+  }, [currentUser]); 
 
   // Lógica para fechar o menu ao clicar fora 
   useEffect(() => {
@@ -110,11 +85,13 @@ export default function Profile() {
 
   // Função para renderizar o feed (posts ou comentários)
   const renderFeed = () => {
-
     if (view === 'posts') {
-      // Mapeia 'userPosts' e passa o 'post' (ProjectProps)
-      return userPosts.map(post => (
-        <S.PostContainer >
+      if (userPosts.length === 0) {
+        return <p style={{ color: '#fff', padding: '20px' }}>Nenhum projeto encontrado.</p>;
+      }
+
+     return userPosts.map((post, index) => (
+        <S.PostContainer key={index}>
           <Postcard post={post} showMenu={true} />
         </S.PostContainer>
       ));
@@ -179,10 +156,10 @@ export default function Profile() {
         <S.ProfileInfo>
             <S.ProfileAvatar 
               style={{ 
-                backgroundImage: user?.avatarUrl ? `url(${user.avatarUrl})` : undefined 
+                backgroundImage: undefined 
               }} 
             />
-            <S.Username>{user ? user.username : '...'}</S.Username>
+            <S.Username>{currentUser?.nomeCompleto || currentUser?.username || 'Carregando...'}</S.Username>
         </S.ProfileInfo>
 
         <S.PostList>

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@ export async function Login(data: LoginProps) {`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`const {user, token} = await response.json();`
	`21`	`+ console.log("Dados do usuário logado:", user);`
`21`	`22`	`return { user, token };`
`22`	`23`
`23`	`24`	`}`