- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| src | -
-
- |
- 95.45% | -105/110 | -100% | -0/0 | -92.59% | -25/27 | -95.45% | -105/110 | -
| src/business | -
-
- |
- 81.85% | -194/237 | -64.8% | -81/125 | -77.27% | -34/44 | -85.11% | -183/215 | -
| src/controller | -
-
- |
- 80.18% | -89/111 | -75% | -3/4 | -87.5% | -21/24 | -80.9% | -89/110 | -
| src/utils | -
-
- |
- 100% | -4/4 | -100% | -0/0 | -100% | -1/1 | -100% | -4/4 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 | 5x -5x -5x -5x - - - - - -5x -5x -5x -5x - - - -5x -5x - - - -5x - - - -5x - - - -5x | import express from 'express';
-import cors from 'cors';
-import routes from './routes';
-import { errorHandler } from './middleware/errorHandler';
-
-class App {
- public server: express.Application;
-
- constructor() {
- this.server = express();
- this.middlewares();
- this.routes();
- this.handleErrors();
- }
-
- private middlewares(): void {
- this.server.use(express.json());
- this.server.use(cors());
- }
-
- private routes(): void {
- this.server.use(routes);
- }
-
- private handleErrors(): void {
- this.server.use(errorHandler);
- }
-}
-
-export default new App().server; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 | - -5x -5x -5x - - - - - - - -82x - -82x - - - - -82x -2x -1x - -1x -1x - - - -80x - -80x - -80x - - -80x - - - - - - - - -80x - - - -80x - -80x - - - - -77x -77x - - - -77x -1x - - -76x - - - - -76x -1x - - -75x - -75x - - - -2x - - - - - - - -5x |
-import { UserData, LoginData } from "../models/User";
-import { userValidate } from "../utils/validationUser";
-import knex from '../data/index';
-import bcrypt from 'bcryptjs';
-
-
-
-class BusinessLogicAuth{
-
- async newUser(data: UserData){
-
- userValidate(data);
-
- const existingUser = await knex('User')
- .where('username', data.username)
- .orWhere('email', data.email)
- .first();
-
- if (existingUser) {
- if (existingUser.username === data.username) {
- throw new Error('Este username já está em uso.');
- }
- Eif (existingUser.email === data.email) {
- throw new Error('Este e-mail já está em uso.');
- }
- }
-
- const salt = await bcrypt.genSalt(10);
-
- const senhaHash = await bcrypt.hash(data.senha, salt);
-
- const { nomeCompleto, username, email, telefone, dataNascimento } = data;
-
-
- await knex('User').insert({
- fullName: nomeCompleto,
- username,
- email,
- phone: telefone,
- birthDate: dataNascimento,
- passwordHash: senhaHash
- });
-
- const user = await knex('User')
- .where('username', data.username)
- .first();
-
- const { passwordHash, ...userData} = user;
-
- return userData;
-
- }
-
- async enterUser(data: LoginData){
- try{
- const user = await knex('User')
- .where('username', data.username)
- .first();
-
- if(!user){
- throw new Error('Usuário ou senha incorretos.');
- }
-
- const isPasswordValid = await bcrypt.compare(
- data.senha,
- user.passwordHash
- );
-
- if (!isPasswordValid) {
- throw new Error('Usuário ou senha incorretos.');
- }
-
- const { passwordHash, ...userData } = user;
-
- return userData;
-
- }catch(error){
-
- throw error;
-
- }
- }
-
-}
-
-
-export default new BusinessLogicAuth(); |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 | 5x - - - - - - - - -17x - - - -17x -2x - - -15x - -15x - - - - - -15x - - - -15x - - - -15x - - - - - - -15x - -2x - - - -2x -2x - - - - - -2x -2x - - - -15x - - - - - -4x - - - -4x - - - -4x - - - - -4x -1x - - -3x - - - - - - -3x - - - - -3x - - - -3x - - - -3x -1x - - -2x - - - -2x -1x - - -1x - - - -1x - - - - -1x - - - - - - - - -1x - -1x - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - -1x - - - -1x - -2x - -1x - -1x - - - - -2x - - - - - - -1x - - - - -1x - - - -1x - - - -1x - - - -1x -1x - -1x - - - - -1x - - - - -1x - - - - -1x - - - - - - - - - - - - - -3x - -3x - - - -3x -1x - - -2x -1x - - -1x -1x -1x - -1x -1x -1x - - - - -1x -1x - - - -1x -1x - - - -1x - - - - -1x -1x - - - - -1x - - - - -1x - - - -1x - - - -1x -1x - - - - - - - - - - -5x | import knex from '../data/index';
-import { CommunityData } from '../models/Community'
-
-
-
-class BusinessLogicCommunity{
-
- async newCommunity(data: CommunityData, creatorID: number){
-
- const existingCommunity = await knex('Communities')
- .where('name', data.name)
- .first();
-
- if (existingCommunity) {
- throw new Error("Já existe uma comunidade com este nome.");
- }
-
- return knex.transaction(async (trx) => {
-
- const communityToInsert = {
- name: data.name,
- description: data.description,
- creatorID: creatorID
- };
-
- const [createdCommunity] = await trx('Communities')
- .insert(communityToInsert)
- .returning('*');
-
- Iif (!createdCommunity) {
- throw new Error("Falha ao criar comunidade.");
- }
-
- await trx('CommunityMembers').insert({
- communityID: createdCommunity.communityID,
- userID: creatorID,
- role: 'admin',
- joinedAt: new Date()
- });
-
- if (data.technologies && data.technologies.length > 0) {
-
- const keywordIDs = await trx('Keywords')
- .whereIn('tag', data.technologies)
- .select('keywordID');
-
- const keywordsToInsert = keywordIDs.map(keyword => {
- return {
- communityID: createdCommunity.communityID,
- keywordID: keyword.keywordID
- };
- });
-
- Eif (keywordsToInsert.length > 0) {
- await trx('CommunitiesKeywords').insert(keywordsToInsert);
- }
- }
-
- return createdCommunity;
- });
- }
-
- async newMemberCommunity(userID: number, communityID: string){
-
- const community = await knex('Communities')
- .where('communityID', communityID)
- .first();
-
- Iif (!community) {
- throw new Error("Comunidade não encontrada.");
- }
-
- const existingMember = await knex('CommunityMembers')
- .where('communityID', communityID)
- .andWhere('userID', userID)
- .first();
-
- if (existingMember) {
- throw new Error("Usuário já é membro desta comunidade.");
- }
-
- await knex('CommunityMembers').insert({
- communityID: communityID,
- userID: userID,
- role: 'member',
- joinedAt: new Date()
- });
-
- return { message: "Membro adicionado com sucesso", communityID, userID };
- }
-
- async leaveMemberCommunity(userID: number, communityID: string){
-
- const community = await knex('Communities')
- .where('communityID', communityID)
- .first();
-
- Iif (!community) {
- throw new Error("Comunidade não encontrada.");
- }
-
- if (community.creatorID === userID) {
- throw new Error("O criador não pode sair da comunidade. Você deve deletá-la ou transferir a propriedade.");
- }
-
- const member = await knex('CommunityMembers')
- .where({ communityID, userID })
- .first();
-
- if (!member) {
- throw new Error("Você não é membro desta comunidade.");
- }
-
- await knex('CommunityMembers')
- .where({ communityID, userID })
- .del();
-
- return { message: "Você saiu da comunidade com sucesso." };
- }
-
- async getAllUserCommunities(userID: number) {
-
- const userCommunities = await knex('Communities')
- .join('CommunityMembers', 'Communities.communityID', '=', 'CommunityMembers.communityID')
- .where('CommunityMembers.userID', userID)
- .select(
- 'Communities.*',
- 'CommunityMembers.role',
- 'CommunityMembers.joinedAt'
- );
-
- const communityIds = userCommunities.map(c => c.communityID);
-
- Eif (communityIds.length === 0) return [];
-
- const keywords = await knex('CommunitiesKeywords')
- .join('Keywords', 'CommunitiesKeywords.keywordID', '=', 'Keywords.keywordID')
- .whereIn('CommunitiesKeywords.communityID', communityIds)
- .select('CommunitiesKeywords.communityID', 'Keywords.tag');
-
- const result = userCommunities.map(comm => ({
- ...comm,
- technologies: keywords
- .filter((k: any) => k.communityID === comm.communityID)
- .map((k: any) => k.tag)
- }));
-
- return result;
- }
-
- async getUserFeed(userID: number){
- const feed = await knex('Projects')
-
- .join('ProjectCommunities', 'Projects.projectID', '=', 'ProjectCommunities.projectID')
-
- .join('CommunityMembers', 'ProjectCommunities.communityID', '=', 'CommunityMembers.communityID')
-
- .join('User', 'Projects.creatorID', '=', 'User.id')
-
- .where('CommunityMembers.userID', userID)
-
- .distinct('Projects.projectID')
-
- .select(
- 'Projects.*',
- 'User.username as authorUsername',
- 'User.fullName as authorName'
- )
-
- .orderBy('Projects.createdAt', 'desc');
-
- return feed;
- }
-
- async getAllCommunities(){
- const communities = await knex('Communities').select('*');
-
- const communityIds = communities.map(c => c.communityID);
-
- Iif (communityIds.length === 0) return [];
-
- const keywords = await knex('CommunitiesKeywords')
- .join('Keywords', 'CommunitiesKeywords.keywordID', '=', 'Keywords.keywordID')
- .whereIn('CommunitiesKeywords.communityID', communityIds)
- .select('CommunitiesKeywords.communityID', 'Keywords.tag');
-
- const result = communities.map(comm => ({
- ...comm,
- technologies: keywords
- .filter((k: any) => k.communityID === comm.communityID)
- .map((k: any) => k.tag)
- }));
-
- return result;
- }
-
- async getCommunityData(communityID: string, userID: number) {
-
- const community = await knex('Communities')
- .where('communityID', communityID)
- .first();
-
- Iif (!community) {
- throw new Error("Comunidade não encontrada.");
- }
-
- const membership = await knex('CommunityMembers')
- .where({ communityID: communityID, userID: userID })
- .first();
-
- const isMember = !!membership;
- const isAdmin = (community.creatorID === userID) || (membership && membership.role === 'admin');
-
- const keywords = await knex('CommunitiesKeywords')
- .join('Keywords', 'CommunitiesKeywords.keywordID', '=', 'Keywords.keywordID')
- .where('CommunitiesKeywords.communityID', communityID)
- .select('Keywords.tag');
-
- const memberCount = await knex('CommunityMembers')
- .where('communityID', communityID)
- .count('userID as count')
- .first();
-
- const projects = await knex('Projects')
- .join('ProjectCommunities', 'Projects.projectID', '=', 'ProjectCommunities.projectID')
- .where('ProjectCommunities.communityID', communityID)
- .select('Projects.*');
-
- return {
- community: {
- ...community,
- technologies: keywords.map((k: any) => k.tag),
- memberCount: memberCount?.count || 0,
- isMember: isMember,
- isAdmin: isAdmin
- },
- posts: projects || []
- };
- }
-
- async updateCommunity(creatorID: number, communityID: string, data: CommunityData){
-
- return knex.transaction(async (trx) => {
-
- const community = await trx('Communities')
- .where('communityID', communityID)
- .first();
-
- if (!community) {
- throw new Error("Comunidade não encontrada.");
- }
-
- if (community.creatorID !== creatorID) {
- throw new Error("Você não tem permissão para editar esta comunidade.");
- }
-
- const fieldsToUpdate: any = {};
- Eif (data.name) fieldsToUpdate.name = data.name;
- Eif (data.description) fieldsToUpdate.description = data.description;
-
- Eif (Object.keys(fieldsToUpdate).length > 0) {
- fieldsToUpdate.updatedAt = new Date();
- await trx('Communities')
- .where('communityID', communityID)
- .update(fieldsToUpdate);
- }
-
- Eif (data.technologies !== undefined) {
- await trx('CommunitiesKeywords')
- .where('communityID', communityID)
- .del();
-
- Eif (Array.isArray(data.technologies) && data.technologies.length > 0) {
- const keywordIDs = await trx('Keywords')
- .whereIn('tag', data.technologies)
- .select('keywordID');
-
- const linksToInsert = keywordIDs.map((k: any) => ({
- communityID: communityID,
- keywordID: k.keywordID
- }));
-
- Eif (linksToInsert.length > 0) {
- await trx('CommunitiesKeywords').insert(linksToInsert);
- }
- }
- }
-
- return await trx('Communities').where('communityID', communityID).first();
- });
- }
-
- async removeCommunity(creatorID: number, communityID: string){
- const community = await knex('Communities')
- .where('communityID', communityID)
- .first();
-
- Iif (!community) {
- throw new Error("Comunidade não encontrada.");
- }
-
- Eif (community.creatorID !== creatorID) {
- throw new Error("Você não tem permissão para deletar esta comunidade.");
- }
-
- await knex('Communities')
- .where('communityID', communityID)
- .del();
- }
-
-}
-
-
-export default new BusinessLogicCommunity(); |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 | 5x - -5x - - - - - - - - -3x - -3x -3x -3x -3x -3x - -3x - - - - -3x -1x - - -2x - -2x - - - -2x - - - - -2x - - - -2x - -2x - - - -2x - - - -2x - - - - - -5x | import knex from '../data/index';
-import { UserData } from '../models/User';
-import bcrypt from 'bcryptjs';
-
-
-
-class businessLogicProfile{
-
-
- async updateProfile(data: UserData, userID: number){
-
- const fieldsToUpdate: any = {};
-
- if (data.nomeCompleto) fieldsToUpdate.fullName = data.nomeCompleto;
- Iif (data.email) fieldsToUpdate.email = data.email;
- Iif (data.username) fieldsToUpdate.username = data.username;
- if (data.telefone) fieldsToUpdate.phone = data.telefone;
- Iif (data.dataNascimento) fieldsToUpdate.birthDate = data.dataNascimento;
-
- Iif (data.senha) {
- const salt = await bcrypt.genSalt(10);
- fieldsToUpdate.passwordHash = await bcrypt.hash(data.senha, salt);
- }
-
- if (Object.keys(fieldsToUpdate).length === 0) {
- throw new Error("Nenhum dado para atualizar.");
- }
-
- fieldsToUpdate.updatedAt = new Date();
-
- await knex('User')
- .where('id', userID)
- .update(fieldsToUpdate);
-
- const updatedUser = await knex('User')
- .where('id', userID)
- .select('id', 'fullName', 'username', 'email', 'phone', 'birthDate', 'createdAt')
- .first();
-
- return updatedUser;
- }
-
- async removeProfile(userID: number){
- const user = await knex('User').where('id', userID).first();
-
- Iif (!user) {
- throw new Error("Usuário não encontrado.");
- }
-
- await knex('User')
- .where('id', userID)
- .del();
-
- return { message: "Perfil deletado com sucesso." };
- }
-
-}
-
-
-export default new businessLogicProfile(); |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 | -5x - - - - - - -17x - -17x - - - - - - - -17x - - - -17x - -3x - - - -3x -5x - - - - - -3x -3x - - - - - -3x -5x - - -3x -1x - - - - - -1x - - - - -17x - - - - - -2x - -2x - - - -2x - - - -2x -1x - - -1x -1x -1x -1x -1x - -1x -1x -1x - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - -4x - - -4x - - - - -9x - -9x - -9x - - - - - - -9x - - - -2x - - - - - - - - - -2x - - - -3x - - - - - - - - - -3x - - - - -2x - - - -2x - - - -2x -1x - - -1x - - - - - - - -2x - - - -2x - - - -2x -1x - - -1x - - - - - - -3x - - - - - - - - - - -3x -2x - - - -1x - - - - - -1x - -2x - - - - - -5x |
-import knex from '../data/index';
-import { ProjectData } from '../models/Project';
-
-class BusinessLogicProject{
-
- async newProject(data: ProjectData, creatorID: number){
-
- return knex.transaction(async (trx) => {
-
- const projectToInsert = {
- title: data.title,
- description: data.description,
- status: data.status,
- startDate: data.startDate,
- creatorID: creatorID
- };
-
- const [newProject] = await trx('Projects')
- .insert(projectToInsert)
- .returning('*');
-
- if (data.technologies && data.technologies.length > 0) {
-
- const keywordIDs = await trx('Keywords')
- .whereIn('tag', data.technologies)
- .select('keywordID');
-
- const keywordsToInsert = keywordIDs.map(keyword => {
- return {
- projectID: newProject.projectID,
- keywordID: keyword.keywordID
- };
- });
-
- Eif (keywordsToInsert.length > 0) {
- await trx('ProjectsKeywords').insert(keywordsToInsert);
-
- // --- NOVA LÓGICA DE ASSOCIAÇÃO AUTOMÁTICA ---
-
- // 3. Busca Comunidades que usam essas mesmas Keywords
- // Usamos .distinct() para evitar duplicatas (caso uma comunidade tenha React E Node, por exemplo)
- const matchingCommunities = await trx('CommunitiesKeywords')
- .whereIn('keywordID', keywordIDs.map(k => k.keywordID))
- .distinct('communityID');
-
- if (matchingCommunities.length > 0) {
- const communitiesToLink = matchingCommunities.map(comm => ({
- projectID: newProject.projectID,
- communityID: comm.communityID,
- associatedAt: new Date()
- }));
-
- await trx('ProjectCommunities').insert(communitiesToLink);
- }
- }
- }
-
- return newProject;
- });
- }
-
- async updateProject(projectId: string, projectData: Partial<any>, userId: number) {
-
- return knex.transaction(async (trx) => {
-
- const existingProject = await trx('Projects')
- .where({ projectID: projectId })
- .first();
-
- Iif (!existingProject) {
- throw new Error("Projeto não encontrado.");
- }
-
- if (existingProject.creatorID !== userId) {
- throw new Error("Você não tem permissão para editar este projeto.");
- }
-
- const fieldsToUpdate: any = {};
- Eif (projectData.title !== undefined) fieldsToUpdate.title = projectData.title;
- Eif (projectData.description !== undefined) fieldsToUpdate.description = projectData.description;
- Iif (projectData.status !== undefined) fieldsToUpdate.status = projectData.status;
- Iif (projectData.startDate !== undefined) fieldsToUpdate.startDate = projectData.startDate;
-
- Eif (Object.keys(fieldsToUpdate).length > 0) {
- fieldsToUpdate.updatedAt = new Date();
- await trx('Projects')
- .where({ projectID: projectId })
- .update(fieldsToUpdate);
- }
-
- Iif (projectData.technologies !== undefined) {
-
- await trx('ProjectsKeywords')
- .where({ projectID: projectId })
- .del();
-
- await trx('ProjectCommunities')
- .where({ projectID: projectId })
- .del();
-
- if (Array.isArray(projectData.technologies) && projectData.technologies.length > 0) {
-
- const keywordIDs = await trx('Keywords')
- .whereIn('tag', projectData.technologies)
- .select('keywordID');
-
- const keywordsToInsert = keywordIDs.map((k: any) => ({
- projectID: projectId,
- keywordID: k.keywordID
- }));
-
- if (keywordsToInsert.length > 0) {
- await trx('ProjectsKeywords').insert(keywordsToInsert);
- }
-
- const matchingCommunities = await trx('CommunitiesKeywords')
- .whereIn('keywordID', keywordIDs.map((k:any) => k.keywordID))
- .distinct('communityID');
-
- if (matchingCommunities.length > 0) {
- const communitiesToLink = matchingCommunities.map((comm:any) => ({
- projectID: projectId,
- communityID: comm.communityID,
- associatedAt: new Date()
- }));
-
- await trx('ProjectCommunities').insert(communitiesToLink);
- }
- }
- }
-
- return await trx('Projects').where({ projectID: projectId }).first();
- });
- }
-
- async userProjects(creatorID: number){
-
- const projects = await knex('Projects')
- .where('creatorID', creatorID);
-
- return projects;
- }
-
- async newComment(userID: number, projectID: string, content: string){
-
- const project = await knex('Projects').where('projectID', projectID).first();
-
- Iif (!project) throw new Error("Projeto não encontrado.");
-
- const [newComment] = await knex('Comments').insert({
- authorID: userID,
- projectID: projectID,
- content: content,
- createdAt: new Date()
- }).returning('*');
-
- return newComment;
- }
-
- async getProjectComments(projectID: string){
- const comments = await knex('Comments')
- .join('User', 'Comments.authorID', '=', 'User.id')
- .where('Comments.projectID', projectID)
- .select(
- 'Comments.*',
- 'User.fullName',
- 'User.username'
- )
- .orderBy('Comments.createdAt', 'desc');
-
- return comments;
- }
-
- async getUserComments(userID: number){
- const comments = await knex('Comments')
- .join('Projects', 'Comments.projectID', '=', 'Projects.projectID')
- .where('Comments.authorID', userID)
- .select(
- 'Comments.*',
- 'Projects.title as projectTitle'
- )
- .orderBy('Comments.createdAt', 'desc')
- .orderBy('Comments.commentID', 'desc');
-
- return comments;
- }
-
- async removeComment(userID: number, commentID: string){
-
- const comment = await knex('Comments')
- .where('commentID', commentID)
- .first();
-
- Iif (!comment) {
- throw new Error("Comentário não encontrado.");
- }
-
- if (comment.authorID !== userID) {
- throw new Error("Você não tem permissão para deletar este comentário.");
- }
-
- await knex('Comments')
- .where('commentID', commentID)
- .del();
-
- }
-
- async removeProject(creatorID: number, projectID: string){
-
- const project = await knex('Projects')
- .where('projectID', projectID)
- .first();
-
- Iif (!project) {
- throw new Error("Projeto não encontrado.");
- }
-
- if (project.creatorID !== creatorID) {
- throw new Error("Você não tem permissão para deletar este projeto.");
- }
-
- await knex('Projects')
- .where('projectID', projectID)
- .del();
- }
-
- async getProjectById(projectId: string) {
- // Busca o projeto com dados do autor (join)
- const project = await knex('Projects')
- .join('User', 'Projects.creatorID', '=', 'User.id')
- .where('Projects.projectID', projectId)
- .select(
- 'Projects.*',
- 'User.username as authorUsername',
- 'User.fullName as authorName',
- 'User.id as authorID'
- )
- .first();
-
- if (!project) {
- throw new Error("Projeto não encontrado.");
- }
-
- // Busca as tecnologias (keywords) associadas
- const keywords = await knex('ProjectsKeywords')
- .join('Keywords', 'ProjectsKeywords.keywordID', '=', 'Keywords.keywordID')
- .where('ProjectsKeywords.projectID', projectId)
- .select('Keywords.tag');
-
- // Retorna o objeto formatado
- return {
- ...project,
- technologies: keywords.map((k: any) => k.tag)
- };
- }
-
-}
-
-export default new BusinessLogicProject(); |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| businessLogicAuth.ts | -
-
- |
- 100% | -28/28 | -90% | -9/10 | -100% | -2/2 | -100% | -28/28 | -
| businessLogicCommunity.ts | -
-
- |
- 83% | -83/100 | -65.45% | -36/55 | -68.18% | -15/22 | -84.61% | -77/91 | -
| businessLogicProfile.ts | -
-
- |
- 78.57% | -22/28 | -68.75% | -11/16 | -100% | -2/2 | -86.95% | -20/23 | -
| businessLogicProject.ts | -
-
- |
- 75.3% | -61/81 | -56.81% | -25/44 | -83.33% | -15/18 | -79.45% | -58/73 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| requestController.ts | -
-
- |
- 80.18% | -89/111 | -75% | -3/4 | -87.5% | -21/24 | -80.9% | -89/110 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 | 5x -5x - - -5x -5x -5x - -5x -5x -5x - -5x - - - - -82x - -82x - -80x - -80x - - - - - -80x - - -2x - - - - -77x - -77x - -75x - -75x - - - - - -75x - - - -2x - - - - -17x -17x -17x - -17x - - - - - - - - - - - - - - - - - - - - - - - - -4x - -4x - -4x - - - - - - - -2x - -2x - -1x - - -1x - - - - -2x - -2x - - -1x - - - - -3x -3x -1x - -2x - - - - -17x - -17x -15x - - -2x - - - - - - - - - - - - - - -1x -1x - -1x - -1x - - - - - - - - - -1x - -1x - -1x - - - - - - - - -1x - -1x - -1x - - - - - - - -4x - -4x -3x - - -1x - - - - -3x - -3x - -1x - - -2x - - - - - -3x - -3x - -1x - - -2x - - - - -1x - -1x - - -1x - - - - -9x - -9x - - - -9x - -9x - - - - - - - -2x - -2x - -2x - - - - - - - -3x - -3x - -2x - - -1x - - - - - -2x - -2x -2x - - - - - - - - -2x - -2x - - -1x - - - - -3x - -3x - -3x - - - - - - - - -5x | import businessLogicUser from '../business/businessLogicAuth'
-import BusinessLogicProject from '../business/businessLogicProject';
-import {UserData, LoginData } from '../models/User'
-import { ProjectData } from '../models/Project';
-import jwt from 'jsonwebtoken';
-import { authConfig } from '../config/auth'
-import knex from '../data';
-import { CommunityData } from '../models/Community';
-import BusinessLogicCommunity from '../business/businessLogicCommunity';
-import businessLogicProject from '../business/businessLogicProject';
-import businessLogicCommunity from '../business/businessLogicCommunity';
-import { error } from 'console';
-import businessLogicProfile from '../business/businessLogicProfile';
-
-class RequestController {
-
- async createUser(data: UserData) {
- try{
-
- const userData = await businessLogicUser.newUser(data);
-
- const payload = { id: userData.id, username: userData.username };
-
- const token = jwt.sign(
- payload,
- authConfig.secret,
- { expiresIn: authConfig.expiresIn }
- );
-
- return { user: userData, token: token };
-
- } catch(error){
- throw error;
- }
- }
-
- async enterUser(data: LoginData){
- try{
-
- const userData = await businessLogicUser.enterUser(data);
-
- const payload = { id: userData.id, username: userData.username };
-
- const token = jwt.sign(
- payload,
- authConfig.secret,
- { expiresIn: authConfig.expiresIn }
- );
-
- return { user: userData, token: token };
-
- }catch(error){
-
- throw error;
- }
- }
-
- async createProject(data: ProjectData, creatorID: number){
- try{
- console.log(data);
- const newProject = await BusinessLogicProject.newProject(data, creatorID);
-
- return newProject;
-
- }catch(error){
-
- throw new Error("Erro nos dados do projeto.");
-
- }
- }
-
- async getKeywords(){
- try{
-
- const keywords = await knex('Keywords').select('tag');
-
- const tags = keywords.map(kw => kw.tag);
-
- return tags;
-
- }catch(error){
- console.error("Erro ao buscar keywords:", error);
- throw new Error("Não foi possível buscar as keywords.");
- }
- }
-
- async getUserProjects(creatorID: number){
- try{
-
- const projects = await BusinessLogicProject.userProjects(creatorID);
-
- return projects;
-
- }catch(error){
- throw new Error("Erro ao buscar os projetos do usuário.");
- }
- }
-
- async updateProject(projectId: string, data: ProjectData, userId: number){
- try{
-
- const updatedProject = await BusinessLogicProject.updateProject(projectId, data, userId);
-
- return updatedProject;
-
- }catch(error){
- throw new Error("Erro ao atualizar o projeto.");
- }
- }
-
- async removeProject(userID: number, projectID: string){
- try{
-
- await BusinessLogicProject.removeProject(userID, projectID);
-
- }catch(error){
- throw error;
- }
- }
-
- async getProjectById(projectId: string) {
- try {
- const project = await businessLogicProject.getProjectById(projectId);
- return project;
- } catch (error) {
- throw error;
- }
- }
-
- async newCommunity(data: CommunityData, creatorID: number){
- try{
-
- const newCommunity = await BusinessLogicCommunity.newCommunity(data, creatorID);
- return newCommunity;
-
- }catch(error){
- throw error;
- }
- }
-
- async getAllUserCommunities(userID: number) {
- try {
- const communities = await BusinessLogicCommunity.getAllUserCommunities(userID);
- return communities;
- } catch (error) {
- console.error("Erro ao buscar comunidades:", error);
- throw new Error("Erro ao carregar as comunidades.");
- }
- }
-
- async getUserHome(userID: number){
- try{
- const communities = await businessLogicCommunity.getAllUserCommunities(userID);
-
- const feed = await businessLogicCommunity.getUserFeed(userID);
-
- return {
- communities: communities,
- feed: feed
- };
-
- }catch(error){
- throw error;
- }
- }
- async getAllCommunities(){
- try{
-
- const communities = await BusinessLogicCommunity.getAllCommunities();
-
- return communities;
-
- }catch(error){
- throw error;
- }
-
- }
-
- async getCommunityData(communityID: string, userID: number){
- try{
-
- const result = await BusinessLogicCommunity.getCommunityData(communityID,userID);
-
- return result;
-
- }catch(error){
- throw error;
- }
- }
-
- async newMemberCommunity(userID: number, communityID: string){
- try{
-
- const result = await BusinessLogicCommunity.newMemberCommunity(userID, communityID);
- return result;
-
- }catch(error){
- throw error;
- }
- }
-
- async leaveMemberCommunity(userID: number, communityID: string){
- try{
-
- const result = await businessLogicCommunity.leaveMemberCommunity(userID, communityID);
-
- return result;
-
- }catch(error){
- throw error;
- }
-
- }
-
- async updateCommunity(creatorID: number, communityID: string, data: CommunityData){
- try{
-
- const updatedCommunity = await BusinessLogicCommunity.updateCommunity(creatorID, communityID, data);
-
- return updatedCommunity;
-
- }catch(error){
- throw error;
- }
- }
-
- async removeCommunity(creatorID: number, communityID: string){
- try{
-
- await BusinessLogicCommunity.removeCommunity(creatorID, communityID);
-
- }catch(error){
- throw error;
- }
- }
-
- async newComment(userID: number, projectID: string, content: string){
- try{
-
- Iif (!content || content.trim() === "") {
- throw new Error("O comentário não pode ser vazio.");
- }
-
- const comment = await businessLogicProject.newComment(userID, projectID, content);
-
- return comment;
-
- }catch(error){
- throw error;
- }
- }
-
- async getProjectComments(projectID: string) {
- try{
-
- const projectComments = await businessLogicProject.getProjectComments(projectID);
-
- return projectComments;
-
- }catch(error){
- throw error;
- }
- }
-
- async updateProfile(data: UserData, userID: number){
- try{
-
- const result = await businessLogicProfile.updateProfile(data, userID);
-
- return result;
-
- }catch(error){
- throw error;
- }
-
- }
-
- async deleteProfile(userID: number){
- try{
-
- const message = await businessLogicProfile.removeProfile(userID);
- return message;
-
- }catch(error){
- throw error;
- }
-
- }
-
- async deleteComment(userID: number, commentID: string){
- try{
-
- await businessLogicProject.removeComment(userID, commentID);
-
- }catch(error){
- throw error;
- }
- }
-
- async getUserComments(userID: number){
- try{
-
- const allComments = await businessLogicProject.getUserComments(userID);
-
- return allComments;
-
- }catch(error){
- throw error;
- }
- }
-
-}
-
-export default new RequestController(); |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 | 5x -5x -5x - - - -5x - - -5x -82x -82x -80x - - - - - - - -5x -77x -75x - - - - - - - - -5x - - - - - - -5x -17x - -17x - -17x - -17x - - - - - - - -5x -4x -4x -4x - - - - - -5x -2x -2x -2x - -2x - -1x - - - - - -5x - -2x - -2x - -1x - - - -5x - -3x - -3x - -1x - - - -5x - -17x -15x - - - - - -5x - - - - - - -5x - -1x -1x - -1x - -1x - - -5x - -1x -1x - - - -5x - -4x -4x - -4x - -3x - - - -5x -3x -3x - -3x - -1x - - - - - - - -5x -1x - -1x - - - - - - -5x - -9x -9x - -9x - -9x - - - -5x - -3x - -3x - - -5x - -2x - -2x - -1x - - - -5x - -2x - -2x - -2x - - - - -5x - -3x - -2x - - -5x - -2x - -2x - - -5x - -1x - -1x - - -5x -3x -3x -3x -1x - -2x - - - - -5x | import express from 'express';
-import RequestController from './controller/requestController';
-import authMiddleware from './middleware/auth';
-import auth from './middleware/auth';
-import { request } from 'http';
-
-const routes = express.Router();
-
-// Endpoint para CADASTRAR um novo usuário
-routes.post('/api/register', async (request, response) => {
- console.log("Recebendo requisição de cadastro:", request.body);
- const {user, token} = await RequestController.createUser(request.body);
- return response.status(201).json({
- user,
- token,
- message: 'Usuário cadastrado com sucesso!'
- });
-});
-
-// Endpoint para verificar a existência de usuário
-routes.post('/api/login', async(request, response) => {
- const { user, token } = await RequestController.enterUser(request.body);
- return response.status(200).json({
- user,
- token,
- message: 'Usuário autenticado com sucesso.'
- });
-});
-
-
-// Endpoint para enviar ao fronend os keywords disponíveis
-routes.get('/api/keywords', async(request, response) => {
- const tags = await RequestController.getKeywords();
-
- return response.status(200).json(tags);
-});
-
-// Endpoint para criar projeto
-routes.post('/api/user/newproject', authMiddleware, async(request, response) =>{
- const projectData = request.body;
-
- const creatorID = request.user.id;
-
- const newProject = await RequestController.createProject(projectData, creatorID);
-
- return response.status(201).json({
- message: "Projeto criado com sucesso!",
- project: newProject
- });
-});
-
-
-// Endpoint para enviar ao frontend os projetos de determinado usuário
-routes.get('/api/user/projects', authMiddleware, async(request, response) => {
- const creatorID = request.user.id;
- const projects = await RequestController.getUserProjects(creatorID);
- return response.status(200).json({
- projects
- })
-});
-
-// Endpoint para atualizar um projeto existente
-routes.put('/api/user/updateproject/:projectId', authMiddleware, async(request, response) => {
- const { projectId } = request.params;
- const updatedData = request.body;
- const creatorID = request.user.id;
-
- const updatedProject = await RequestController.updateProject(projectId, updatedData, creatorID);
-
- return response.status(200).json({
- message: "Projeto atualizado com sucesso!",
- project: updatedProject
- });
-});
-
-routes.delete('/api/user/deleteproject/:projectId', authMiddleware, async(request, response) =>{
-
- const { projectId } = request.params;
-
- await RequestController.removeProject(request.user.id, projectId);
-
- return response.status(200).json({ message: "Projeto deletado com sucesso." });
-});
-
-
-routes.delete('/api/user/leavecommunity/:communityID', authMiddleware, async(request, response) =>{
-
- const { communityID } = request.params;
-
- const result = await RequestController.leaveMemberCommunity(request.user.id, communityID);
-
- return response.status(200).json(result);
-})
-
-// Endpoint para criar uma comunidade
-routes.post('/api/newcommunity', authMiddleware, async(request, response) => {
-
- const newCommunity = await RequestController.newCommunity(request.body, request.user.id);
- return response.status(201).json({
- community: newCommunity
- })
-
-});
-
-routes.get('/api/user/communities', authMiddleware, async (request, response) => {
-
- const communities = await RequestController.getAllUserCommunities(request.user.id);
- return response.status(200).json(communities);
-
-});
-
-routes.get('/api/communities/data/:communityId', authMiddleware, async (request, response) =>{
-
- const { communityId } = request.params;
- const userID = request.user.id;
-
- const data = await RequestController.getCommunityData(communityId, userID);
-
- return response.status(200).json(data);
-});
-
-routes.get('/api/communities', async(request, response) => {
-
- const communities = await RequestController.getAllCommunities();
- return response.status(200).json(communities);
-
-});
-
-routes.post('/api/communities/:communityId/join', authMiddleware, async(request, response) =>{
-
- const userID = request.user.id;
- const { communityId } = request.params;
-
- const result = await RequestController.newMemberCommunity(userID, communityId);
-
- return response.status(201).json(result);
-});
-
-
-routes.put('/api/communities/updatecommunity/:communityId', authMiddleware, async(request, response) => {
- const { communityId } = request.params;
- const data = request.body;
-
- const updatedCommunity = await RequestController.updateCommunity(request.user.id, communityId, data);
-
- return response.status(200).json({
- message: "Comunidade atualizada com sucesso!",
- community: updatedCommunity
- });
-
-});
-
-
-routes.delete('/api/communities/deletecommunity/:communityId', authMiddleware, async(request, response) => {
- const { communityId } = request.params;
-
- await RequestController.removeCommunity(request.user.id, communityId);
-
- return response.status(200).json({ message: "Comunidade deletada com sucesso." });
-
-})
-
-
-routes.post('/api/project/:projectID/comments', authMiddleware, async(request, response) =>{
-
- const { projectID } = request.params;
- const { content } = request.body;
-
- const comment = await RequestController.newComment(request.user.id, projectID, content);
-
- return response.status(201).json(comment);
-
-})
-
-routes.get('/api/user/comments', authMiddleware, async(request, response) => {
-
- const allComments = await RequestController.getUserComments(request.user.id);
-
- return response.status(200).json(allComments);
-})
-
-routes.delete('/api/project/:commentID/deletecomment', authMiddleware, async(request, response) =>{
-
- const { commentID } = request.params;
-
- await RequestController.deleteComment( request.user.id, commentID );
-
- return response.status(200).json({ message: "Comentário deletado com sucesso."});
-
-})
-
-routes.get('/api/project/:projectID/comments', async(request, response) => {
-
- const { projectID } = request.params;
-
- const projectComments = await RequestController.getProjectComments( projectID );
-
- return response.status(200).json(projectComments);
-
-})
-
-
-routes.put('/api/user/editprofile', authMiddleware, async(request, response) =>{
-
- const updatedProfile = await RequestController.updateProfile(request.body, request.user.id);
-
- return response.status(200).json(updatedProfile);
-})
-
-routes.delete('/api/user/deleteprofile', authMiddleware, async(request, response) =>{
-
- const message = await RequestController.deleteProfile(request.user.id);
-
- return response.status(200).json(message);
-})
-
-routes.get('/api/user/home', authMiddleware, async(request, response) => {
-
- const homeData = await RequestController.getUserHome(request.user.id);
-
- return response.status(200).json(homeData);
-})
-
-routes.get('/api/projects/:projectId', authMiddleware, async (request, response) => {
- const { projectId } = request.params;
- try {
- const project = await RequestController.getProjectById(projectId);
- return response.status(200).json(project);
- } catch (error) {
- return response.status(404).json({ message: "Projeto não encontrado" });
- }
-});
-
-
-export default routes; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| validationUser.ts | -
-
- |
- 100% | -4/4 | -100% | -0/0 | -100% | -1/1 | -100% | -4/4 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 | 5x - - -5x - - - - - - - - -5x -82x - | import { z } from 'zod';
-import { UserData } from '../models/User';
-
-const userSchema = z.object({
- nomeCompleto: z.string().min(3, "Nome muito curto"),
- username: z.string().min(4, "Username muito curto"),
- email: z.string().email("Formato de e-mail inválido"),
- telefone: z.string().optional(),
- dataNascimento: z.string()
-});
-
-
-export function userValidate(data: UserData){
- userSchema.parse(data);
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| src | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
| src/API | -
-
- |
- 5.3% | -6/113 | -4% | -2/50 | -4.54% | -1/22 | -5.3% | -6/113 | -
| src/components/common/Keyword | -
-
- |
- 100% | -3/3 | -100% | -0/0 | -100% | -1/1 | -100% | -3/3 | -
| src/components/common/Modal | -
-
- |
- 100% | -12/12 | -100% | -4/4 | -100% | -4/4 | -100% | -12/12 | -
| src/components/common/Toast | -
-
- |
- 100% | -7/7 | -100% | -0/0 | -100% | -4/4 | -100% | -7/7 | -
| src/components/domain/CreationForm | -
-
- |
- 87.32% | -62/71 | -85.71% | -12/14 | -84.48% | -49/58 | -86.95% | -60/69 | -
| src/components/domain/Postcard | -
-
- |
- 69.23% | -72/104 | -58.9% | -43/73 | -64.28% | -18/28 | -72.16% | -70/97 | -
| src/components/domain/Searchbar | -
-
- |
- 91.07% | -51/56 | -83.33% | -30/36 | -78.94% | -15/19 | -90.9% | -50/55 | -
| src/components/domain/TagInput | -
-
- |
- 94.28% | -33/35 | -76.19% | -16/21 | -92.85% | -13/14 | -93.93% | -31/33 | -
| src/components/layout/Header | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
| src/components/layout/HeaderHome | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
| src/components/layout/Sidebar | -
-
- |
- 93.75% | -15/16 | -75% | -3/4 | -100% | -5/5 | -93.75% | -15/16 | -
| src/pages/CommunityPage | -
-
- |
- 83.94% | -115/137 | -68.42% | -39/57 | -88.05% | -59/67 | -85.24% | -104/122 | -
| src/pages/CreateCommunity | -
-
- |
- 81.81% | -27/33 | -90.9% | -20/22 | -71.42% | -5/7 | -81.81% | -27/33 | -
| src/pages/CreateProject | -
-
- |
- 84.44% | -38/45 | -87.09% | -27/31 | -80% | -8/10 | -86.04% | -37/43 | -
| src/pages/EditProfile | -
-
- |
- 87.09% | -27/31 | -55.55% | -10/18 | -66.66% | -4/6 | -93.1% | -27/29 | -
| src/pages/Feed | -
-
- |
- 86.27% | -44/51 | -69.23% | -9/13 | -74.07% | -20/27 | -87.75% | -43/49 | -
| src/pages/Home | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
| src/pages/Login | -
-
- |
- 87.5% | -14/16 | -75% | -3/4 | -50% | -2/4 | -87.5% | -14/16 | -
| src/pages/Profile | -
-
- |
- 92.43% | -110/119 | -82.25% | -51/62 | -89.58% | -43/48 | -94.54% | -104/110 | -
| src/pages/ProjectPage | -
-
- |
- 90% | -18/20 | -75% | -6/8 | -100% | -4/4 | -94.11% | -16/17 | -
| src/pages/Register | -
-
- |
- 87.5% | -14/16 | -75% | -3/4 | -60% | -3/5 | -87.5% | -14/16 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| src | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
| src/API | -
-
- |
- 5.3% | -6/113 | -4% | -2/50 | -4.54% | -1/22 | -5.3% | -6/113 | -
| src/components/common/Keyword | -
-
- |
- 100% | -3/3 | -100% | -0/0 | -100% | -1/1 | -100% | -3/3 | -
| src/components/common/Modal | -
-
- |
- 100% | -12/12 | -100% | -4/4 | -100% | -4/4 | -100% | -12/12 | -
| src/components/common/Toast | -
-
- |
- 100% | -7/7 | -100% | -0/0 | -100% | -4/4 | -100% | -7/7 | -
| src/components/domain/CreationForm | -
-
- |
- 87.32% | -62/71 | -85.71% | -12/14 | -84.48% | -49/58 | -86.95% | -60/69 | -
| src/components/domain/Postcard | -
-
- |
- 69.23% | -72/104 | -58.9% | -43/73 | -64.28% | -18/28 | -72.16% | -70/97 | -
| src/components/domain/Searchbar | -
-
- |
- 91.07% | -51/56 | -83.33% | -30/36 | -78.94% | -15/19 | -90.9% | -50/55 | -
| src/components/domain/TagInput | -
-
- |
- 94.28% | -33/35 | -76.19% | -16/21 | -92.85% | -13/14 | -93.93% | -31/33 | -
| src/components/layout/Header | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
| src/components/layout/HeaderHome | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
| src/components/layout/Sidebar | -
-
- |
- 93.75% | -15/16 | -75% | -3/4 | -100% | -5/5 | -93.75% | -15/16 | -
| src/pages/CommunityPage | -
-
- |
- 83.94% | -115/137 | -68.42% | -39/57 | -88.05% | -59/67 | -85.24% | -104/122 | -
| src/pages/CreateCommunity | -
-
- |
- 81.81% | -27/33 | -90.9% | -20/22 | -71.42% | -5/7 | -81.81% | -27/33 | -
| src/pages/CreateProject | -
-
- |
- 84.44% | -38/45 | -87.09% | -27/31 | -80% | -8/10 | -86.04% | -37/43 | -
| src/pages/EditProfile | -
-
- |
- 87.09% | -27/31 | -55.55% | -10/18 | -66.66% | -4/6 | -93.1% | -27/29 | -
| src/pages/Feed | -
-
- |
- 86.27% | -44/51 | -69.23% | -9/13 | -74.07% | -20/27 | -87.75% | -43/49 | -
| src/pages/Home | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
| src/pages/Login | -
-
- |
- 87.5% | -14/16 | -75% | -3/4 | -50% | -2/4 | -87.5% | -14/16 | -
| src/pages/Profile | -
-
- |
- 92.43% | -110/119 | -82.25% | -51/62 | -89.58% | -43/48 | -94.54% | -104/110 | -
| src/pages/ProjectPage | -
-
- |
- 90% | -18/20 | -75% | -6/8 | -100% | -4/4 | -94.11% | -16/17 | -
| src/pages/Register | -
-
- |
- 87.5% | -14/16 | -75% | -3/4 | -60% | -3/5 | -87.5% | -14/16 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 | - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import api from './api';
-import { isAxiosError } from 'axios';
-export interface CommentProps {
- projectTitle?: string;
- commentID?: string;
- content: string;
- createdAt?: string;
- authorID?: string;
- projectID?: string;
- username?: string;
- fullName?: string;
-}
-
-const getAuthHeader = () => {
- return {
- headers: {
- 'Authorization': `Bearer ${localStorage.getItem('token')}`
- }
- };
-};
-
-export async function CreateComment(projectId: string, content: string) {
- try{
-
- const response = await api.post(`/api/project/${projectId}/comments`,
- {content},
- getAuthHeader()
- );
-
- return response.data;
-
- }catch(error){
-
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao enviar comentário.");
-
- }
-}
-
-export async function GetComments(projectId: string): Promise<CommentProps[]> {
- try{
-
- const response = await api.get(`/api/project/${projectId}/comments`, getAuthHeader());
-
- return await response.data;
- }catch(error){
- console.error("Erro ao buscar comentários:", error);
- throw new Error("Erro ao carregar comentários.");
- }
-
-
-}
-
-export async function GetUserComments(): Promise<CommentProps[]> {
- try{
- const response = await api.get('/api/user/comments', getAuthHeader());
-
- return response.data;
- }catch(error){
- console.error("Erro ao buscar comentários do usuário:", error);
- throw new Error("Erro ao carregar comentários do usuário.");
- }
-}
-
-export async function DeleteComment(commentId: string) {
- try{
-
- const response = await api.delete(`/api/project/${commentId}/deletecomment`, getAuthHeader());
-
- return response.data;
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao excluir comentário.");
- }
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 | - - - - - - - - - - - - - - -2x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import api from './api';
-import { isAxiosError } from 'axios';
-
-export interface CommunityProps {
- communityID: string;
- name: string;
- description: string;
- technologies: string[];
- createdAt: Date;
- updatedAt: Date;
- memberCount?: number;
- isMember?: boolean;
- isAdmin?: boolean;
-}
-
-const getAuthHeader = () => {
- return {
- headers: {
- 'Authorization': `Bearer ${localStorage.getItem('token')}`
- }
- };
-};
-
-export async function NewCommunity(data: CommunityProps) {
-
- try{
- console.log("Enviando dados da comunidade:", data);
- const response = await api.post('/api/newcommunity', data, getAuthHeader());
- return response.data
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao criar comunidade.");
- }
-}
-
-export async function GetUserCommunities(): Promise<CommunityProps[]> {
- try{
- const response = await api.get<CommunityProps[]>('/api/user/communities', getAuthHeader());
- return response.data
- }catch(error){
- console.error("Erro ao obter comunidades:", error);
- throw new Error('Erro ao obter comunidades');
- }
-}
-
-export async function GetCommunityById(communityId: string) {
- try{
- const response = await api.get(`/api/communities/data/${communityId}`, getAuthHeader());
-
- return await response.data;
- }catch(error){
- if (isAxiosError(error) && error.response?.status === 404) {
- throw new Error('Comunidade não encontrada');
- }
- throw new Error('Erro ao carregar a comunidade');
- }
-}
-
-export async function JoinCommunity(communityId: string) {
- try{
- const response = await api.post(`/api/communities/${communityId}/join`, {}, getAuthHeader());
-
- return await response.data;
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error('Erro ao entrar na comunidade');
- }
-}
-
-export async function DeleteCommunity(communityId: string) {
- try{
- const response = await api.delete(`/api/communities/deletecommunity/${communityId}`, getAuthHeader());
- return response.data
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao excluir comunidade.");
- }
-}
-
-export async function UpdateCommunity(communityId: string, data: CommunityProps) {
- try{
- const response = await api.put(`/api/communities/updatecommunity/${communityId}`,
- data,
- getAuthHeader()
- );
-
- return response.data;
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao atualizar comunidade.");
- }
-}
-
-export async function LeaveCommunity(communityId: string) {
- try{
- const response = await api.delete(`/api/user/leavecommunity/${communityId}`, getAuthHeader());
-
- return await response.data;
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao sair da comunidade.");
- }
-}
-
-export async function GetAllCommunities(): Promise<CommunityProps[]> {
- try{
- const response = await api.get<CommunityProps[]>('/api/communities', getAuthHeader());
- return response.data
- }catch(error){
- console.error("Erro ao obter todas as comunidades:", error);
- throw new Error('Erro ao obter todas as comunidades');
- }
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 | - - - - - - - - - - - - - - - - -2x - - -2x - - -4x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import api from './api';
-import { isAxiosError } from 'axios';
-
-export interface ProjectProps {
- id?: string;
- title: string;
- description: string;
- technologies: string[];
- status: string;
- startDate: Date;
- authorUsername?: string;
- authorName?: string;
- creatorID?: number;
-}
-
-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));
-}
-
-const getAuthHeader = () => {
- return {
- headers: {
- 'Authorization': `Bearer ${localStorage.getItem('token')}`
- }
- };
-};
-
-export async function NewProject(data: ProjectProps) {
- try{
- const response = await api.post('/api/user/newproject', data, getAuthHeader());
-
- return response.data;
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao criar projeto.");
- }
-}
-
-export async function UpdateProject(projectId: string, data: ProjectProps) {
- try{
- const response = await api.put(`/api/user/updateproject/${projectId}`,
- data,
- getAuthHeader()
- );
- return response.data;
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao atualizar projeto.");
- }
-
-}
-
-export async function GetFeedProjects(): Promise<ProjectProps[]> {
-
- try{
- const response = await api.get('/api/user/home', getAuthHeader());
-
- console.log("Dados do feed de projetos:", response.data);
-
- return response.data.feed;
- }catch(error){
- console.error("Erro ao buscar feed:", error);
- throw new Error("Erro ao carregar o feed de projetos.");
- }
-}
-
-export async function DeleteProject(projectId: string) {
- try{
- await api.delete(`/api/user/deleteproject/${projectId}`, getAuthHeader());
- }
- catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao excluir projeto.");
- }
-}
-
-export async function GetUserProjects(): Promise<ProjectProps[]> {
- try{
- const response = await api.get('/api/user/projects', getAuthHeader());
-
- console.log("Dados dos projetos do usuário:", response.data.projects);
-
- return response.data.projects;
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao buscar projetos do usuário.");
- }
-}
-
-export async function GetProjectById(projectId: string): Promise<ProjectProps> {
- try{
- const response = await api.get(`/api/projects/${projectId}`, getAuthHeader());
-
- return await response.data;
- }catch(error){
- console.error("Erro ao buscar projeto:", error);
- throw new Error('Erro ao carregar projeto');
- }
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 | - -5x - - - - | import axios from 'axios';
-
-const api = axios.create({
- baseURL: import.meta.env.VITE_API_URL || 'http://localhost:3000',
-});
-
-export default api; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Comment.ts | -
-
- |
- 4.16% | -1/24 | -0% | -0/8 | -0% | -0/5 | -4.16% | -1/24 | -
| Community.ts | -
-
- |
- 2.04% | -1/49 | -0% | -0/24 | -0% | -0/9 | -2.04% | -1/49 | -
| Project.ts | -
-
- |
- 7.69% | -3/39 | -0% | -0/16 | -12.5% | -1/8 | -7.69% | -3/39 | -
| api.ts | -
-
- |
- 100% | -1/1 | -100% | -2/2 | -100% | -0/0 | -100% | -1/1 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 | - - - - - - - -2x - - - - - - - - - - - | import { ThemeProvider } from "styled-components"
-import { defaultTheme } from './styles/themes/default'
-import { GlobalStyle } from './styles/global'
-import { Router } from "./Router"
-import { BrowserRouter } from "react-router-dom"
-
-function App() {
-
- return (
- <ThemeProvider theme={defaultTheme}>
- <BrowserRouter>
- <GlobalStyle/>
- <Router />
- </BrowserRouter>
- </ThemeProvider>
- )
-}
-
-export default App
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 100% | -3/3 | -100% | -0/0 | -100% | -1/1 | -100% | -3/3 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 | - - - - - - - - -1x -2x - - - - - - - - - -1x | import React from 'react';
-import * as S from './styles';
-
-// Props que o componente Keyword aceita
-interface KeywordProps {
- children: React.ReactNode;
- onRemove: () => void;
-}
-
-export const Keyword: React.FC<KeywordProps> = ({ children, onRemove }) => {
- return (
- <S.KeywordTag>
- {children}
- <S.KeywordRemoveButton onClick={onRemove} aria-label={`Remover ${children}`}>
- ×
- </S.KeywordRemoveButton>
- </S.KeywordTag>
- );
-};
-
-export const KeywordContainer = S.KeywordContainer; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 100% | -12/12 | -100% | -4/4 | -100% | -4/4 | -100% | -12/12 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 | - - - - - - - - - - -1x - -5x -5x -4x - -1x - - -5x -5x - - - -5x -1x - - - -4x -2x - - -4x - - - - - - - - - - - - | import React, { useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import * as S from './styles';
-
-interface ModalProps {
- isOpen: boolean;
- onClose: () => void;
- children: React.ReactNode;
- title: string;
-}
-
-const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children }) => {
- // Bloqueia o scroll do body quando o modal está aberto
- useEffect(() => {
- if (isOpen) {
- document.body.style.overflow = 'hidden';
- } else {
- document.body.style.overflow = 'unset';
- }
-
- return () => {
- document.body.style.overflow = 'unset';
- };
- }, [isOpen]);
-
- if (!isOpen) {
- return null;
- }
-
- // Impede que o clique no modal feche o modal (só o overlay)
- const handleContentClick = (e: React.MouseEvent) => {
- e.stopPropagation();
- };
-
- return createPortal(
- <S.ModalOverlay onClick={onClose}>
- <S.ModalContent onClick={handleContentClick}>
- <S.CloseButton onClick={onClose}>×</S.CloseButton>
- <S.ModalTitle>{title}</S.ModalTitle>
- {children}
- </S.ModalContent>
- </S.ModalOverlay>,
- document.body
- );
-};
-
-export default Modal; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 100% | -7/7 | -100% | -0/0 | -100% | -4/4 | -100% | -7/7 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 | - - - - - - - - - - - - - -1x - - -4x -4x -1x - - - -4x -4x - - - -4x - - - - - - - - - - | import React, { useEffect } from 'react';
-import { ToastContainer, ToastMessage, CloseButton } from './styles';
-
-interface ToastProps {
- message: string;
- type: 'success' | 'error';
- onClose: () => void; // Função para fechar o toast
-}
-
-export interface NotificationState {
- message: string;
- type: 'success' | 'error';
-}
-
-const Toast: React.FC<ToastProps> = ({ message, type, onClose }) => {
-
- // Efeito para fechar o toast automaticamente após 5 segundos
- useEffect(() => {
- const timer = setTimeout(() => {
- onClose();
- }, 5000);
-
- // Limpa o timer se o componente for desmontado
- return () => {
- clearTimeout(timer);
- };
- }, [onClose]);
-
- return (
- <ToastContainer type={type}>
- <ToastMessage>{message}</ToastMessage>
- <CloseButton onClick={onClose}>
- ×
- </CloseButton>
- </ToastContainer>
- );
-};
-
-export default Toast; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| styles.ts | -
-
- |
- 87.32% | -62/71 | -85.71% | -12/14 | -84.48% | -49/58 | -86.95% | -60/69 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 -421 -422 -423 -424 -425 -426 -427 -428 -429 -430 -431 -432 -433 -434 -435 -436 | - - -2x -20x - - - - - - - -20x - - - - - - - - - - - - - - - - -2x - - - - - - - - - - - - - - - - - - - -2x - - - -86x - - - - - - - - - - - - - - - - - -86x - - - - - - - - - - - -2x - - - - -33x - - -33x - - - - - -33x - - - - -33x -33x - - - - -33x -33x -33x - - - - - -2x - - - - - - - -13x - - - - - - - - - -13x - - - -13x - - - - - -2x - - - - -13x - - -13x - - - - - - - - - - - - -13x -13x - - - - -13x -13x -13x - - - - - -13x - - - - -13x -13x - - - - -2x - - - - - -2x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -2x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -2x - - - - - - - - - - - - - - - - - -2x - - - -20x -20x - - - - - -20x - - - - - - - - - - - - - - - - - - - - - -20x - - - - - - - - - - -20x - - - - - - - - -2x - - - - - - -20x - - -20x - - - - - - - -20x - - - - -20x -20x - - - - -20x -20x -20x - - - - - - - - - - -20x - - - - -20x - - - - -20x - - - - -2x - - -20x - - - - -20x - - - - - - -20x -20x - - - -20x -20x - - | import styled from 'styled-components';
-
-// O <form> container
-export const FormContainer = styled.form`
- background: ${props => props.theme.white};
- border-radius: 24px;
- padding: 40px;
- width: 100%;
- max-width: 800px;
- margin: 0 auto;
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
- 0 2px 8px rgba(0, 0, 0, 0.04);
- border: 1px solid ${props => props.theme.placeholder}20;
-
- animation: slideUp 0.5s ease-out;
-
- @keyframes slideUp {
- from {
- opacity: 0;
- transform: translateY(20px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-`;
-
-// Wrapper para cada par de (label + input)
-export const InputGroup = styled.div`
- margin-bottom: 28px;
- width: 100%;
-
- animation: fadeIn 0.4s ease-out backwards;
- animation-delay: calc(var(--index, 0) * 0.05s);
-
- @keyframes fadeIn {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-`;
-
-// Label
-export const Label = styled.label`
- display: block;
- font-size: 0.95em;
- font-weight: 700;
- color: ${props => props.theme.title};
- margin-bottom: 10px;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- font-size: 0.85rem;
- padding-left: 4px;
-
- /* Indicador visual opcional */
- position: relative;
-
- &::after {
- content: '';
- position: absolute;
- left: -12px;
- top: 50%;
- transform: translateY(-50%);
- width: 3px;
- height: 14px;
- background: linear-gradient(180deg, ${props => props.theme.button} 0%, ${props => props.theme['hover-button'] || props.theme.button} 100%);
- border-radius: 2px;
- opacity: 0;
- transition: opacity 0.2s ease;
- }
-
- ${InputGroup}:focus-within &::after {
- opacity: 1;
- }
-`;
-
-// Input
-export const Input = styled.input`
- width: 100%;
- padding: 14px 20px;
- font-size: 1em;
-
- background-color: ${props => props.theme['gray-100']};
- border: 2px solid transparent;
- border-radius: 12px;
- color: ${props => props.theme.title};
- box-sizing: border-box;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- font-weight: 500;
-
- &::placeholder {
- color: ${props => props.theme.placeholder};
- font-weight: 400;
- }
-
- &:hover {
- background-color: ${props => props.theme.white};
- border-color: ${props => props.theme.placeholder}40;
- }
-
- &:focus {
- outline: none;
- background-color: ${props => props.theme.white};
- border-color: ${props => props.theme.button};
- box-shadow: 0 0 0 4px ${props => props.theme.button}15,
- 0 2px 8px rgba(0, 0, 0, 0.04);
- transform: translateY(-1px);
- }
-`;
-
-export const SelectWrapper = styled.div`
- position: relative;
- width: 100%;
-
- /* A seta de seleção (CSS) */
- &::after {
- content: '▼';
- font-size: 0.85em;
- color: ${props => props.theme.placeholder};
- position: absolute;
- right: 20px;
- top: 50%;
- transform: translateY(-50%);
- pointer-events: none;
- transition: all 0.3s ease;
- }
-
- &:hover::after {
- color: ${props => props.theme.button};
- }
-
- &:focus-within::after {
- color: ${props => props.theme.button};
- transform: translateY(-50%) rotate(180deg);
- }
-`;
-
-// Componente de Select
-export const Select = styled.select`
- width: 100%;
- padding: 14px 20px;
- font-size: 1em;
-
- background-color: ${props => props.theme['gray-100']};
- border: 2px solid transparent;
- border-radius: 12px;
- color: ${props => props.theme.title};
- box-sizing: border-box;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- font-weight: 500;
- cursor: pointer;
-
- appearance: none;
- -webkit-appearance: none;
- -moz-appearance: none;
-
- padding-right: 50px;
-
- &:hover {
- background-color: ${props => props.theme.white};
- border-color: ${props => props.theme.placeholder}40;
- }
-
- &:focus {
- outline: none;
- background-color: ${props => props.theme.white};
- border-color: ${props => props.theme.button};
- box-shadow: 0 0 0 4px ${props => props.theme.button}15,
- 0 2px 8px rgba(0, 0, 0, 0.04);
- transform: translateY(-1px);
- }
-
- &:invalid {
- color: ${props => props.theme.placeholder};
- }
-
- option {
- padding: 10px;
- background: ${props => props.theme.white};
- color: ${props => props.theme.title};
- }
-`;
-
-// Wrapper para o input de busca E a lista de resultados
-export const SearchWrapper = styled.div`
- position: relative;
- width: 100%;
-`;
-
-// Lista de resultados de busca que aparece abaixo do input
-export const SearchResultsList = styled.ul`
- position: absolute;
- top: calc(100% + 4px);
- left: 0;
- right: 0;
- background: ${props => props.theme.white};
- border: 2px solid ${props => props.theme.button}20;
- border-radius: 12px;
- max-height: 240px;
- overflow-y: auto;
- margin: 0;
- padding: 6px;
- z-index: 100;
- list-style: none;
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12),
- 0 2px 8px rgba(0, 0, 0, 0.08);
-
- animation: slideDown 0.2s ease-out;
-
- @keyframes slideDown {
- from {
- opacity: 0;
- transform: translateY(-8px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-
- /* Estilização da scrollbar */
- &::-webkit-scrollbar {
- width: 8px;
- }
-
- &::-webkit-scrollbar-track {
- background: transparent;
- }
-
- &::-webkit-scrollbar-thumb {
- background: ${props => props.theme['gray-300']};
- border-radius: 4px;
- }
-
- &::-webkit-scrollbar-thumb:hover {
- background: ${props => props.theme['gray-400']};
- }
-`;
-
-// Item individual na lista de resultados
-export const SearchResultItem = styled.li`
- padding: 12px 16px;
- cursor: pointer;
- border-radius: 8px;
- color: ${props => props.theme.title};
- font-weight: 500;
- transition: all 0.2s ease;
- position: relative;
-
- /* Barra lateral que aparece no hover */
- &::before {
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- width: 3px;
- background: ${props => props.theme.button};
- border-radius: 0 2px 2px 0;
- transform: scaleY(0);
- transition: transform 0.2s ease;
- }
-
- &:hover {
- background-color: ${props => props.theme['gray-100']};
- padding-left: 20px;
-
- &::before {
- transform: scaleY(1);
- }
- }
-
- &:active {
- background-color: ${props => props.theme['gray-100']};
- }
-`;
-
-// Mensagem de erro
-export const ErrorMessage = styled.span`
- font-size: 0.85em;
- margin-top: 8px;
- color: ${props => props.theme['red-500'] || '#ef4444'};
- font-weight: 600;
- display: flex;
- align-items: center;
- gap: 6px;
- padding-left: 4px;
-
- /* Ícone de alerta */
- &::before {
- content: '⚠';
- font-size: 1.1em;
- }
-`;
-
-// Botão de submissão
-export const SubmitButton = styled.button`
- padding: 16px 40px;
- font-size: 1.05em;
- font-weight: 700;
- color: ${props => props.theme.white};
- background: linear-gradient(135deg, ${props => props.theme.button} 0%, ${props => props.theme['hover-button'] || props.theme.button} 100%);
- border: none;
- border-radius: 12px;
- cursor: pointer;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- margin-top: 16px;
- box-shadow: 0 4px 16px ${props => props.theme.button}40;
- position: relative;
- overflow: hidden;
-
- /* Efeito de brilho deslizante */
- &::before {
- content: '';
- position: absolute;
- top: 0;
- left: -100%;
- width: 100%;
- height: 100%;
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
- transition: left 0.5s;
- }
-
- &:hover::before {
- left: 100%;
- }
-
- &:hover {
- transform: translateY(-3px);
- box-shadow: 0 8px 24px ${props => props.theme.button}50;
- }
-
- &:active {
- transform: translateY(-1px);
- }
-
- &:disabled {
- opacity: 0.6;
- cursor: not-allowed;
- transform: none;
- box-shadow: 0 2px 8px ${props => props.theme.button}20;
-
- &:hover {
- transform: none;
- }
- }
-`;
-
-// Estilo para o campo de texto de várias linhas (Descrição)
-export const TextArea = styled.textarea`
- width: 100%;
- padding: 16px 20px;
- font-size: 1em;
- font-family: inherit;
- line-height: 1.6;
-
- background-color: ${props => props.theme['gray-100']};
- border: 2px solid transparent;
- border-radius: 12px;
- color: ${props => props.theme.title};
- box-sizing: border-box;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- resize: vertical;
- min-height: 150px;
- font-weight: 500;
-
- &::placeholder {
- color: ${props => props.theme.placeholder};
- font-weight: 400;
- }
-
- &:hover {
- background-color: ${props => props.theme.white};
- border-color: ${props => props.theme.placeholder}40;
- }
-
- &:focus {
- outline: none;
- background-color: ${props => props.theme.white};
- border-color: ${props => props.theme.button};
- box-shadow: 0 0 0 4px ${props => props.theme.button}15,
- 0 2px 8px rgba(0, 0, 0, 0.04);
- transform: translateY(-1px);
- }
-
- /* Estilização da scrollbar */
- &::-webkit-scrollbar {
- width: 10px;
- }
-
- &::-webkit-scrollbar-track {
- background: ${props => props.theme['gray-100']};
- border-radius: 0 10px 10px 0;
- }
-
- &::-webkit-scrollbar-thumb {
- background: ${props => props.theme['gray-300']};
- border-radius: 10px;
- }
-
- &::-webkit-scrollbar-thumb:hover {
- background: ${props => props.theme.button};
- }
-`;
-
-// Contador de caracteres
-export const CharacterCount = styled.div`
- text-align: right;
- font-size: 0.85em;
- color: ${props => props.theme['gray-500'] || props.theme.placeholder};
- margin-top: 6px;
- margin-right: 4px;
- font-weight: 600;
- padding: 4px 8px;
- background: ${props => props.theme['gray-100']};
- border-radius: 6px;
- display: inline-block;
- float: right;
-
- /* Muda de cor quando próximo do limite */
- &[data-warning="true"] {
- color: ${props => props.theme['yellow-600'] || '#d97706'};
- background: ${props => props.theme['yellow-50'] || '#fef3c7'};
- }
-
- &[data-limit="true"] {
- color: ${props => props.theme['red-500'] || '#ef4444'};
- background: ${props => '#fee2e2'};
- }
-`; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 69.23% | -72/104 | -58.9% | -43/73 | -64.28% | -18/28 | -72.16% | -70/97 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 | - - - - - - - - - - - - - -1x - - - - - - - -1x -21x - - - - - - -1x -12x - - - - - - - - - - - - - -21x - -21x -21x -21x -21x -21x - - -21x -21x -21x -21x -21x - -21x - -21x - -21x -10x -2x - - - - -2x -2x -2x - - - - - - -21x - - - - - -13x -4x - -13x -13x - - - -21x -1x - -1x -1x - - - - - -21x -2x -2x - -2x - -2x - - -2x -1x - - -1x -1x - - -1x - - - -21x -1x - -1x - - - - -1x - -1x -1x -1x - -1x -1x -1x - - - - - - -1x - - - -21x - - - - - - - - - - - - -21x - -12x - - -12x - - -12x - - - - - - -12x - - - - - - - - -21x -1x - - - - - -21x - - - - - - - - - - - - - - - - - - -4x - - - - - - - - - -2x -2x - - - - - - - - - - -2x - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - -1x - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React, { useState, useRef, useEffect } from 'react';
-import * as S from './styles';
-import * as D from '../../common/Dropdown/styles';
-import { useNavigate } from 'react-router-dom';
-import type { ProjectProps } from '../../../API/Project';
-import { DeleteProject } from '../../../API/Project';
-import Modal from '../../common/Modal';
-import type { NotificationState } from '../../common/Toast';
-import Toast from '../../common/Toast';
-import * as ModalS from '../../common/Modal/styles';
-import { CreateComment, GetComments, DeleteComment } from '../../../API/Comment';
-import type { CommentProps } from '../../../API/Comment';
-import { useAuth } from '../../../API/AuthContext';
-
-const TrashIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
- <polyline points="3 6 5 6 21 6"></polyline>
- <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
- </svg>
-);
-
-// Ícone de Comentário (Balão)
-const CommentIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
- <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
- </svg>
-);
-
-
-// --- Ícone de Menu (Ellipsis) ---
-const EllipsisIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
- <circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" />
- </svg>
-);
-
-interface PostcardProps {
- post: ProjectProps;
- showMenu: boolean; // Verifica se o menu deve ser mostrado (se é dono do post)
- onDelete?: (id: string) => Promise<void>;
- deleteLabel?: string;
-}
-
-// --- Componente Postcard ---
-export default function Postcard({ post, showMenu, onDelete, deleteLabel = 'Projeto' }: PostcardProps) {
- const { currentUser } = useAuth();
-
- const [isMenuOpen, setIsMenuOpen] = useState(false);
- const menuRef = useRef<HTMLDivElement>(null);
- const navigate = useNavigate(); // Inicialize o hook de navegação
- const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); // Estado para o modal de exclusão
- const [notification, setNotification] = useState<NotificationState | null>(null);
-
- // Estados para o formulário de comentário
- const [isCommentBoxOpen, setIsCommentBoxOpen] = useState(false);
- const [commentText, setCommentText] = useState("");
- const [isSubmittingComment, setIsSubmittingComment] = useState(false);
- const MAX_COMMENT_CHARS = 500;
- const [comments, setComments] = useState<CommentProps[]>([]);
-
- const [commentToDelete, setCommentToDelete] = useState<string | null>(null);
-
- const projectId = (post as any).id || (post as any).projectID;
-
- useEffect(() => {
- if (isCommentBoxOpen && projectId) {
- loadComments();
- }
- }, [isCommentBoxOpen, projectId]);
-
- async function loadComments() {
- try {
- const data = await GetComments(projectId);
- setComments(data);
- } catch (error) {
- console.error("Erro ao carregar comentários", error);
- }
- }
-
- // Lógica para fechar o menu ao clicar fora (sem alterações)
- useEffect(() => {
- function handleClickOutside(event: MouseEvent) {
- if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
- setIsMenuOpen(false);
- }
- }
- if (isMenuOpen) {
- document.addEventListener('mousedown', handleClickOutside);
- }
- return () => {
- document.removeEventListener('mousedown', handleClickOutside);
- };
- }, [isMenuOpen]);
-
- const handleEditClick = () => {
- const projectId = (post as any).id || (post as any).projectID;
-
- if (projectId) {
- navigate(`/editProject/${projectId}`, { state: { projectToEdit: post } });
- } else E{
- console.error("Erro: ID do projeto não encontrado no objeto:", post);
- }
- };
-
- const handleDeleteMainItem = async () => {
- try {
- const id = (post as any).id || (post as any).projectID || (post as any).commentID;
-
- Iif (!id) throw new Error("ID não encontrado.");
-
- Iif (onDelete) {
- await onDelete(id);
- } else {
- await DeleteProject(id);
- setTimeout(() => navigate('/feed'), 1000);
- }
-
- setNotification({ message: `${deleteLabel} excluído com sucesso!`, type: 'success' });
- setIsDeleteModalOpen(false);
-
- } catch (error) {
- setNotification({ message: `Erro ao excluir ${deleteLabel?.toLowerCase()}.`, type: 'error' });
- }
- };
-
- const handleCommentSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
-
- Iif (!projectId) {
- setNotification({ message: 'Erro: Projeto sem ID.', type: 'error' });
- return;
- }
-
- Iif (!commentText.trim()) return;
-
- try {
- setIsSubmittingComment(true);
- await CreateComment(projectId, commentText);
-
- setNotification({ message: 'Comentário enviado!', type: 'success' });
- setCommentText(""); // Limpa o campo
- setIsCommentBoxOpen(false);
-
- } catch (error) {
- if (error instanceof Error) {
- setNotification({ message: error.message, type: 'error' });
- }
- } finally {
- setIsSubmittingComment(false);
- }
- };
-
- const handleConfirmDeleteInternalComment = async () => {
- if (!commentToDelete) return;
- try {
- await DeleteComment(commentToDelete);
- setNotification({ message: 'Comentário excluído.', type: 'success' });
- setCommentToDelete(null);
- await loadComments();
- } catch (error: any) {
- setNotification({ message: error.message, type: 'error' });
- setCommentToDelete(null);
- }
- };
-
- const handleCardClick = (e: React.MouseEvent) => {
- // Não navega se estiver na aba de comentários do perfil (deleteLabel 'Comentário')
- Iif (deleteLabel !== 'Projeto') return;
-
- // Não navega se o clique foi em um elemento interativo
- const target = e.target as HTMLElement;
-
- // Verifica se clicou em botões, inputs, links ou no próprio menu
- Eif (
- target.closest('button') ||
- target.closest('input') ||
- target.closest('textarea') ||
- target.closest('a') ||
- target.closest(D.DropdownMenu as any) // Garante que itens do dropdown não disparem
- ) {
- return;
- }
-
- // Realiza a navegação
- if (projectId) {
- navigate(`/project/${projectId}`);
- }
- };
-
- const formatDate = (dateString?: string) => {
- Eif (!dateString) return "";
- return new Date(dateString).toLocaleDateString('pt-BR', {
- day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit'
- });
- };
-
- return (
- <S.PostCardWrapper onClick={handleCardClick}>
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
-
- <S.PostHeader>
- <img src={(post as any).avatarUrl || 'url_placeholder_avatar.png'} alt={post.title} />
- <span>{post.title}</span>
- <small>• {(post as any).author?.title || 'Autor'}</small>
- </S.PostHeader>
-
- <S.PostContent>
- {showMenu && (
- <S.MenuWrapper ref={menuRef}>
- <S.MenuButton onClick={() => setIsMenuOpen(prev => !prev)}>
- <EllipsisIcon />
- </S.MenuButton>
-
- {isMenuOpen && (
- <D.DropdownMenu>
- {deleteLabel === 'Projeto' && (
- <D.MenuItem onClick={handleEditClick}>Editar</D.MenuItem>
- )}
- <D.DangerMenuItem onClick={() => {
- setIsMenuOpen(false);
- setIsDeleteModalOpen(true);}}>
- Excluir
- </D.DangerMenuItem>
- </D.DropdownMenu>
- )}
- </S.MenuWrapper>
- )}
-
- <p>{post.description}</p>
-
- <S.ActionRow>
- <S.ActionButton onClick={() => setIsCommentBoxOpen(!isCommentBoxOpen)}>
- <CommentIcon />
- <span>Comentar</span>
- </S.ActionButton>
- </S.ActionRow>
-
- {isCommentBoxOpen && (
- <>
- <S.CommentForm onSubmit={handleCommentSubmit}>
- <S.CommentTextArea
- placeholder="Escreva seu comentário..."
- value={commentText}
- onChange={(e) => setCommentText(e.target.value)}
- maxLength={MAX_COMMENT_CHARS}
- disabled={isSubmittingComment}
- />
- <S.CommentFooter>
- <S.CharacterCount isLimit={commentText.length >= MAX_COMMENT_CHARS}>
- {commentText.length} / {MAX_COMMENT_CHARS}
- </S.CharacterCount>
- <S.SubmitCommentButton
- type="submit"
- disabled={isSubmittingComment || !commentText.trim()}
- >
- {isSubmittingComment ? 'Enviando...' : 'Enviar'}
- </S.SubmitCommentButton>
- </S.CommentFooter>
- </S.CommentForm>
-
- {/* LISTA DE COMENTÁRIOS */}
- {comments.length > 0 && (
- <S.CommentsSection>
- {comments.map((comment) => {
- // Verifica se o usuário atual é o autor do comentário
- const isAuthor = currentUser?.id && String(currentUser.id) === String(comment.authorID);
-
- return (
- <S.CommentItem key={comment.commentID || Math.random()}>
- <S.CommentAvatar />
- <S.CommentBubble>
- <S.CommentHeader>
- <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
- <strong>{comment.username || "Usuário"}</strong>
- <span>{formatDate(comment.createdAt)}</span>
- </div>
-
- {/* Botão de Deletar (Só aparece para o dono) */}
- {isAuthor && (
- <S.DeleteCommentButton
- onClick={() => setCommentToDelete(comment.commentID!)}
- title="Excluir comentário"
- >
- <TrashIcon />
- </S.DeleteCommentButton>
- )}
- </S.CommentHeader>
- <S.CommentText>{comment.content}</S.CommentText>
- </S.CommentBubble>
- </S.CommentItem>
- );
- })}
- </S.CommentsSection>
- )}
- </>
- )}
-
- </S.PostContent>
- <Modal
- isOpen={isDeleteModalOpen}
- onClose={() => setIsDeleteModalOpen(false)}
- title={`Excluir ${deleteLabel}`}
- >
- <div style={{ textAlign: 'center' }}>
- <p style={{ marginBottom: '24px', color: '#555' }}>
- Tem certeza que deseja excluir este {deleteLabel?.toLowerCase()}?
- </p>
- <ModalS.ModalActions>
- <ModalS.ChoiceButton onClick={() => setIsDeleteModalOpen(false)}>
- Cancelar
- </ModalS.ChoiceButton>
- <ModalS.ChoiceButton onClick={handleDeleteMainItem} style={{ backgroundColor: '#e74c3c' }}>
- Excluir
- </ModalS.ChoiceButton>
- </ModalS.ModalActions>
- </div>
- </Modal>
-
- <Modal
- isOpen={!!commentToDelete}
- onClose={() => setCommentToDelete(null)}
- title="Excluir Comentário"
- >
- <div style={{ textAlign: 'center' }}>
- <p style={{ marginBottom: '24px', color: '#555' }}>
- Deseja realmente apagar este comentário?
- </p>
- <ModalS.ModalActions>
- <ModalS.ChoiceButton onClick={() => setCommentToDelete(null)}>
- Cancelar
- </ModalS.ChoiceButton>
- <ModalS.ChoiceButton
- onClick={handleConfirmDeleteInternalComment}
- style={{ backgroundColor: '#e74c3c' }}
- >
- Excluir
- </ModalS.ChoiceButton>
- </ModalS.ModalActions>
- </div>
- </Modal>
-
- </S.PostCardWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 91.07% | -51/56 | -83.33% | -30/36 | -78.94% | -15/19 | -90.9% | -50/55 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 | - - - - - - - - - - -47x -47x - -47x - -47x -47x - - -47x -47x - - -47x -47x - -47x -6x -6x -6x -6x - -6x - - - - -6x -6x - - - -6x - - - - - -47x -20x -8x -8x -8x - - -12x - - -12x -3x - - - - - -12x -3x - - - -12x -12x - - - - -47x - -1x -1x - - -6x -6x - - - -47x -1x -1x -1x - - -47x -1x -1x -1x - - -47x - -47x - - - - - - -7x - - - - - - - - - - - - - - - - - -1x - -1x - - - - - - - - - - - - - - -3x - -1x - - - - - - - - - - - - - - - | import React, { useState, useEffect, useRef } from 'react';
-import { FiSearch } from 'react-icons/fi';
-import * as S from './styles';
-import { useNavigate } from 'react-router-dom';
-
-import { GetAllCommunities } from '../../../API/Community';
-import { GetFeedProjects } from '../../../API/Project';
-import type { CommunityProps } from '../../../API/Community';
-import type { ProjectProps } from '../../../API/Project';
-
-export default function Searchbar() {
- const [query, setQuery] = useState('');
- const navigate = useNavigate();
-
- const wrapperRef = useRef<HTMLDivElement>(null);
-
- const [isFocused, setIsFocused] = useState(false);
- const [isLoading, setIsLoading] = useState(false);
-
- // Dados brutos (cache local)
- const [allCommunities, setAllCommunities] = useState<CommunityProps[]>([]);
- const [allProjects, setAllProjects] = useState<ProjectProps[]>([]);
-
- // Dados filtrados para exibição
- const [filteredCommunities, setFilteredCommunities] = useState<CommunityProps[]>([]);
- const [filteredProjects, setFilteredProjects] = useState<ProjectProps[]>([]);
-
- const handleFocus = async () => {
- setIsFocused(true);
- Eif (allCommunities.length === 0 && allProjects.length === 0) {
- setIsLoading(true);
- try {
- // Busca em paralelo
- const [communitiesData, projectsData] = await Promise.all([
- GetAllCommunities().catch(() => []), // Se falhar, retorna array vazio
- GetFeedProjects().catch(() => [])
- ]);
-
- setAllCommunities(communitiesData);
- setAllProjects(projectsData);
- } catch (error) {
- console.error("Erro ao carregar dados para pesquisa", error);
- } finally {
- setIsLoading(false);
- }
- }
- };
-
- // Efeito para filtrar sempre que a query ou os dados mudarem
- useEffect(() => {
- if (!query.trim()) {
- setFilteredCommunities([]);
- setFilteredProjects([]);
- return;
- }
-
- const lowerQuery = query.toLowerCase();
-
- // Filtra Comunidades (pelo nome ou descrição ou tecnologias)
- const filteredComms = allCommunities.filter(comm =>
- comm.name.toLowerCase().includes(lowerQuery) ||
- comm.description?.toLowerCase().includes(lowerQuery) ||
- comm.technologies?.some(tech => tech.toLowerCase().includes(lowerQuery))
- );
-
- // Filtra Projetos (pelo título ou tecnologias)
- const filteredProjs = allProjects.filter(proj =>
- proj.title.toLowerCase().includes(lowerQuery) ||
- proj.technologies?.some(tech => tech.toLowerCase().includes(lowerQuery))
- );
-
- setFilteredCommunities(filteredComms.slice(0, 5)); // Limita a 5 resultados
- setFilteredProjects(filteredProjs.slice(0, 5)); // Limita a 5 resultados
-
- }, [query, allCommunities, allProjects]);
-
- // Fecha ao clicar fora
- useEffect(() => {
- function handleClickOutside(event: MouseEvent) {
- Eif (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
- setIsFocused(false);
- }
- }
- document.addEventListener('mousedown', handleClickOutside);
- return () => document.removeEventListener('mousedown', handleClickOutside);
- }, []);
-
- // Navegação
- const handleNavigateToCommunity = (communityId: string) => {
- navigate(`/r/${communityId}`);
- setIsFocused(false);
- setQuery('');
- };
-
- const handleNavigateToProject = (projectId: string) => {
- navigate(`/project/${projectId}`);
- console.log("Navegar para projeto:", projectId);
- setIsFocused(false);
- };
-
- const hasResults = filteredCommunities.length > 0 || filteredProjects.length > 0;
-
- return (
- <S.SearchWrapper ref={wrapperRef}>
- <FiSearch size={20} />
- <S.SearchInput
- type="text"
- placeholder="Busque comunidades e projetos..."
- value={query}
- onChange={(e) => setQuery(e.target.value)}
- onFocus={handleFocus}
- />
-
- {/* Renderiza o dropdown apenas se estiver focado e houver texto */}
- {isFocused && query.length > 0 && (
- <S.ResultsDropdown>
- {isLoading ? (
- <S.NoResults>Carregando...</S.NoResults>
- ) : !hasResults ? (
- <S.NoResults>Nenhum resultado encontrado.</S.NoResults>
- ) : (
- <>
- {/* Seção de Comunidades */}
- {filteredCommunities.length > 0 && (
- <S.ResultSection>
- <h4>Comunidades</h4>
- {filteredCommunities.map(comm => (
- <S.ResultItem
- key={comm.communityID}
- onClick={() => handleNavigateToCommunity(comm.communityID)}
- >
- <span>{comm.name}</span>
- {/* Opcional: mostrar tecnologia principal */}
- {comm.technologies?.[0] && <small>{comm.technologies[0]}</small>}
- </S.ResultItem>
- ))}
- </S.ResultSection>
- )}
-
- {/* Seção de Projetos */}
- {filteredProjects.length > 0 && (
- <S.ResultSection>
- <h4>Projetos</h4>
- {filteredProjects.map((proj: any) => (
- <S.ResultItem
- key={proj.id || proj.projectID}
- onClick={() => handleNavigateToProject(proj.id || proj.projectID)}
- >
- <span>{proj.title}</span>
- <small>por {proj.authorUsername || 'Usuário'}</small>
- </S.ResultItem>
- ))}
- </S.ResultSection>
- )}
- </>
- )}
- </S.ResultsDropdown>
- )}
- </S.SearchWrapper>
- );
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 94.28% | -33/35 | -76.19% | -16/21 | -92.85% | -13/14 | -93.93% | -31/33 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 | - - - - - - - - - - - - - - - - - - - - - -20x -20x -20x -20x - -20x -9x -3x -11x - - -3x - -6x - - - - -20x - - - - - -5x -5x -5x - - - - -20x - -2x -1x -1x - -1x -1x -1x -1x -1x - - - - -20x -2x -1x - - -20x - - - - -18x - -1x - - - - - - - - - - - - - -3x - - - - - - -4x - - - - - - - - - - | import React, { useState, useEffect, useRef } from 'react';
-import * as S from '../CreationForm/styles';
-import { Keyword, KeywordContainer } from '../../common/Keyword';
-
-interface TagInputProps {
- value: string[];
- onChange: (value: string[]) => void;
-
- searchList: string[];
- limit: number;
- placeholder: string;
-}
-
-
-export default function TagInput({
- value: selectedTags = [],
- onChange,
- searchList,
- limit,
- placeholder
-}: TagInputProps) {
-
- const [searchQuery, setSearchQuery] = useState('');
- const [searchResults, setSearchResults] = useState<string[]>([]);
- const [error, setError] = useState('');
- const wrapperRef = useRef<HTMLDivElement>(null);
-
- useEffect(() => {
- if (searchQuery.length > 0) {
- const filtered = searchList.filter(item =>
- item.toLowerCase().includes(searchQuery.toLowerCase()) &&
- !selectedTags.includes(item) // Não mostra o que já foi selecionado
- );
- setSearchResults(filtered);
- } else {
- setSearchResults([]);
- }
- }, [searchQuery, selectedTags, searchList]);
-
- // Lógica para fechar a lista de resultados ao clicar fora
- useEffect(() => {
- function handleClickOutside(event: MouseEvent) {
- if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
- setSearchResults([]); // Fecha a lista
- }
- }
- document.addEventListener('mousedown', handleClickOutside);
- return () => {
- document.removeEventListener('mousedown', handleClickOutside);
- };
- }, [wrapperRef]);
-
- // Adiciona uma tag
- const handleAddTag = (tag: string) => {
- // Usa o 'limit' da prop
- if (selectedTags.length >= limit) {
- setError(`Limite de ${limit} itens atingido.`);
- return;
- }
- Eif (!selectedTags.includes(tag)) {
- onChange([...selectedTags, tag]); // Atualiza o react-hook-form
- setSearchQuery('');
- setSearchResults([]);
- setError('');
- }
- };
-
- // Remove uma tag
- const handleRemoveTag = (tagToRemove: string) => {
- onChange(selectedTags.filter(tag => tag !== tagToRemove));
- setError('');
- };
-
- return (
- <S.SearchWrapper ref={wrapperRef}>
- {selectedTags.length > 0 && (
- <KeywordContainer>
- {selectedTags.map(tag => (
- <Keyword
- key={tag}
- onRemove={() => handleRemoveTag(tag)}
- >
- {tag}
- </Keyword>
- ))}
- </KeywordContainer>
- )}
-
- <div style={{ height: selectedTags.length > 0 ? '12px' : '0' }} />
-
- <S.Input
- type="text"
- placeholder={placeholder}
- value={searchQuery}
- onChange={(e) => setSearchQuery(e.target.value)}
- disabled={selectedTags.length >= limit}
- />
-
- {searchResults.length > 0 && (
- <S.SearchResultsList>
- {searchResults.map(tag => (
- <S.SearchResultItem key={tag} onClick={() => handleAddTag(tag)}>
- {tag}
- </S.SearchResultItem>
- ))}
- </S.SearchResultsList>
- )}
-
- {error && <S.ErrorMessage>{error}</S.ErrorMessage>}
- </S.SearchWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 | - - - - - - - - - -2x - - - - - - - - - - - - - - - - - | import { FiPlus } from 'react-icons/fi';
-import Searchbar from '../../domain/Searchbar';
-import * as S from './styles';
-
-
-interface HeaderProps {
- onCreateClick: () => void;
-}
-
-export default function Header({ onCreateClick }: HeaderProps) {
- return (
- <S.HeaderContainer>
- <S.SearchContainer>
- <Searchbar />
- </S.SearchContainer>
-
- <S.ActionsContainer>
- <S.CreateButton onClick={onCreateClick}>
- <FiPlus size={20} />
- <span>Create</span>
- </S.CreateButton>
-
- <S.ProfileIcon to={`/profile`}>
- </S.ProfileIcon>
- </S.ActionsContainer>
- </S.HeaderContainer>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 | - - -1x - - - - - - - - - - - - - - | import * as S from './styles';
-
-export default function HeaderHome() {
- return (
- <S.HeaderContainer>
-
- <S.ActionsContainer>
- <S.Button to="/login">
- Login
- </S.Button>
-
- <S.Button to="/register">
- Register
- </S.Button>
- </S.ActionsContainer>
- </S.HeaderContainer>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 93.75% | -15/16 | -75% | -3/4 | -100% | -5/5 | -93.75% | -15/16 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 | - - - - - - - - - -9x -9x -9x - -9x -2x - - -9x - -8x -8x - -8x -8x -8x - - - - - - -8x -8x - - -9x - - - - - - - - - - - - - - - - -4x - - - - - - - - - - - - - - - - - - | import { useState } from 'react';
-import { FiHome, FiChevronDown } from 'react-icons/fi';
-import { GetUserCommunities } from '../../../API/Community';
-import * as S from './styles';
-import type { CommunityProps } from '../../../API/Community';
-import { useAuth } from '../../../API/AuthContext';
-import { useEffect } from 'react';
-
-export default function Sidebar() {
- // Estado para controlar se a lista de comunidades está visível
- const [isCommunitiesOpen, setIsCommunitiesOpen] = useState(true);
- const { currentUser } = useAuth();
- const [userCommunities, setUserCommunities] = useState<CommunityProps[]>([]);
-
- const toggleCommunities = () => {
- setIsCommunitiesOpen(!isCommunitiesOpen);
- };
-
- useEffect(() => {
- // Função assíncrona para buscar todos os dados
- const fetchCommunities = async () => {
- try {;
-
- const apiUserCommunities = await GetUserCommunities();
- console.log("Comunidades do usuário:", apiUserCommunities);
- setUserCommunities(apiUserCommunities);
-
- } catch (error) {
- console.error("Falha ao buscar comunidades:", error);
- }
-
- };
- Eif(currentUser)
- fetchCommunities();
- }, [currentUser]);
-
- return (
- <S.SidebarContainer>
- <S.SidebarNav>
-
- <S.HomeLink to="/feed">
- <FiHome size={22} />
- <span>Home</span>
- </S.HomeLink>
-
- <S.CommunitiesHeader onClick={toggleCommunities} isOpen={isCommunitiesOpen}>
- <span>COMUNIDADES</span>
- <FiChevronDown size={20} />
- </S.CommunitiesHeader>
-
- {isCommunitiesOpen && (
- <S.CommunitiesList>
- {userCommunities.map((community) => (
- <S.CommunityLink
- to={`/r/${community.communityID}`}
- key={community.communityID}
- >
- <S.CommunityIcon
- alt={`${community.name} icon`}
- />
- <span>{community.name}</span>
- </S.CommunityLink>
- ))}
- </S.CommunitiesList>
- )}
-
- </S.SidebarNav>
- </S.SidebarContainer>
- );
-}
-
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| App.tsx | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 | - - - - - - - - - - - - - - -14x -14x - -14x -14x -14x - -14x -14x -14x - -14x - -14x - -4x -4x -4x -4x -4x -4x - - - - -4x - - -14x - - - - - -6x -6x - - -14x -1x - -1x -1x - - -1x - - - - - -1x - - - - - - - - -14x - - - -14x -1x -1x -1x -1x -1x - - -1x - - - - - - - - - - - -14x -1x - -1x -1x - - -1x - - - - - -1x -1x - - - - - - - - - -14x - -10x - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - -1x - - - - - - - - - - -1x -1x - - - - - - - - - - - - - -10x - - - - - - - - - - - - -10x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { useParams, useNavigate } from 'react-router-dom';
-import Sidebar from '../../components/layout/Sidebar';
-import Postcard from '../../components/domain/Postcard';
-import * as S from './styles';
-import { FiMoreHorizontal } from 'react-icons/fi';
-import { useEffect, useState, useRef } from 'react';
-import { GetCommunityById, JoinCommunity, DeleteCommunity, LeaveCommunity } from '../../API/Community';
-import type { NotificationState } from '../../components/common/Toast';
-import Toast from '../../components/common/Toast';
-import type { CommunityProps } from '../../API/Community';
-import * as D from '../../components/common/Dropdown/styles';
-import Modal from '../../components/common/Modal';
-import * as ModalS from '../../components/common/Modal/styles';
-
-export default function CommunityPage() {
- const { communityID } = useParams<{ communityID: string }>();
- const navigate = useNavigate();
-
- const [notification, setNotification] = useState<NotificationState | null>(null);
- const [community, setCommunity] = useState<any>(null);
- const [posts, setPosts] = useState<any[]>([]);
-
- const [isMenuOpen, setIsMenuOpen] = useState(false);
- const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
- const menuRef = useRef<HTMLDivElement>(null);
-
- const [isLeaveModalOpen, setIsLeaveModalOpen] = useState(false);
-
- useEffect(() => {
- async function loadData() {
- console.log("Carregando dados da comunidade para ID:", communityID);
- Iif (!communityID) return;
- try {
- const data = await GetCommunityById(communityID);
- setCommunity(data.community);
- setPosts(data.posts);
- } catch (error) {
- console.error(error);
- }
- }
- loadData();
- }, [communityID]);
-
- useEffect(() => {
- function handleClickOutside(event: MouseEvent) {
- if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
- setIsMenuOpen(false);
- }
- }
- if (isMenuOpen) document.addEventListener('mousedown', handleClickOutside);
- return () => document.removeEventListener('mousedown', handleClickOutside);
- }, [isMenuOpen]);
-
- const handleJoin = async () => {
- Iif (!community) return;
-
- try {
- await JoinCommunity(community.communityID);
-
- // Atualiza a interface após entrar na comunidade
- setCommunity((prev: CommunityProps | null) => prev ? ({
- ...prev,
- isMember: true, // Esconde o botão
- memberCount: (prev.memberCount || 0) + 1 // Atualiza o contador visualmente
- }) : null);
-
- setNotification({ message: 'Você entrou na comunidade!', type: 'success' });
-
- } catch (error) {
- if (error instanceof Error) {
- setNotification({ message: error.message, type: 'error' });
- }
- }
- };
-
- const handleEdit = () => {
- navigate('/editCommunity', { state: { communityToEdit: community } });
- };
-
- const handleDelete = async () => {
- Iif (!community) return;
- try {
- await DeleteCommunity(community.communityID);
- setNotification({ message: 'Comunidade excluída com sucesso.', type: 'success' });
- setIsDeleteModalOpen(false);
-
- // Redireciona para home após excluir
- setTimeout(() => {
- navigate('/feed');
- }, 1500);
-
- } catch (error) {
- if (error instanceof Error) {
- setNotification({ message: error.message, type: 'error' });
- }
- setIsDeleteModalOpen(false);
- }
- };
-
- const handleLeave = async () => {
- Iif (!community) return;
-
- try {
- await LeaveCommunity(community.communityID);
-
- // Atualiza a interface otimisticamente
- setCommunity((prev: CommunityProps | null) => prev ? ({
- ...prev,
- isMember: false, // O usuário não é mais membro
- memberCount: Math.max((prev.memberCount || 0) - 1, 0) // Decrementa contador
- }) : null);
-
- setNotification({ message: 'Você saiu da comunidade.', type: 'success' });
- setIsLeaveModalOpen(false); // Fecha o modal
-
- } catch (error) {
- if (error instanceof Error) {
- setNotification({ message: error.message, type: 'error' });
- }
- setIsLeaveModalOpen(false);
- }
- };
-
- if (!community) return <div>Comunidade não encontrada</div>;
-
- return (
- <S.PageWrapper>
- <Sidebar />
-
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
-
- <S.MainContent>
- <S.Banner />
-
- <S.HeaderContainer>
- <S.Avatar />
- <S.HeaderInfo>
- <h1>{community.name}</h1>
- <span>{community.memberCount} membros</span>
- </S.HeaderInfo>
-
- <S.HeaderActions>
- {!community.isMember && (
- <S.JoinButton onClick={handleJoin}>
- Join
- </S.JoinButton>
- )}
- {community.isMember && !community.isAdmin && (
- <S.LeaveButton onClick={() => setIsLeaveModalOpen(true)}>
- Sair
- </S.LeaveButton>
- )}
- {community.isAdmin && (
- <S.MenuWrapper ref={menuRef}>
- <S.OptionsButton onClick={() => setIsMenuOpen(!isMenuOpen)}>
- <FiMoreHorizontal />
- </S.OptionsButton>
-
- {isMenuOpen && (
- <D.DropdownMenu>
- <D.MenuItem onClick={handleEdit}>
- Editar Comunidade
- </D.MenuItem>
- <D.Separator />
- <D.DangerMenuItem onClick={() => {
- setIsMenuOpen(false);
- setIsDeleteModalOpen(true);
- }}>
- Excluir Comunidade
- </D.DangerMenuItem>
- </D.DropdownMenu>
- )}
- </S.MenuWrapper>
- )}
- </S.HeaderActions>
- </S.HeaderContainer>
-
- <S.ContentGrid>
- <S.FeedColumn>
- {posts.map(post => (
- <S.FeedCardWrapper key={post.projectID || post.id}>
- <Postcard post={post} showMenu={false} />
- </S.FeedCardWrapper>
- ))}
- </S.FeedColumn>
-
- <S.InfoSidebar>
- <h3>DESCRIPTION</h3>
- <p>{community.description}</p>
-
- <h3>KEYWORDS</h3>
- <S.KeywordsContainer>
- {community.technologies?.map((keyword: string) => (
- <S.KeywordTag key={keyword}>{keyword}</S.KeywordTag>
- ))}
- </S.KeywordsContainer>
- </S.InfoSidebar>
- </S.ContentGrid>
- </S.MainContent>
-
- <Modal
- isOpen={isDeleteModalOpen}
- onClose={() => setIsDeleteModalOpen(false)}
- title="Excluir Comunidade"
- >
- <div style={{ textAlign: 'center' }}>
- <p style={{ marginBottom: '24px', color: '#555' }}>
- Tem certeza que deseja excluir a comunidade <strong>{community.name}</strong>?<br/>
- Todos os posts e vínculos serão removidos.
- </p>
- <ModalS.ModalActions>
- <ModalS.ChoiceButton onClick={() => setIsDeleteModalOpen(false)}>
- Cancelar
- </ModalS.ChoiceButton>
- <ModalS.ChoiceButton onClick={handleDelete} style={{ backgroundColor: '#e74c3c' }}>
- Excluir
- </ModalS.ChoiceButton>
- </ModalS.ModalActions>
- </div>
- </Modal>
-
- <Modal
- isOpen={isLeaveModalOpen}
- onClose={() => setIsLeaveModalOpen(false)}
- title="Sair da Comunidade"
- >
- <div style={{ textAlign: 'center' }}>
- <p style={{ marginBottom: '24px', color: '#555' }}>
- Tem certeza que deseja sair da comunidade <strong>{community.name}</strong>?
- </p>
- <ModalS.ModalActions>
- <ModalS.ChoiceButton onClick={() => setIsLeaveModalOpen(false)}>
- Cancelar
- </ModalS.ChoiceButton>
- <ModalS.ChoiceButton
- onClick={handleLeave}
- style={{ backgroundColor: '#e74c3c' }} // Botão vermelho
- >
- Sair
- </ModalS.ChoiceButton>
- </ModalS.ModalActions>
- </div>
- </Modal>
- </S.PageWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 -421 -422 -423 -424 -425 -426 -427 -428 -429 -430 -431 -432 -433 -434 -435 -436 -437 -438 -439 -440 -441 -442 -443 -444 -445 -446 -447 -448 | - -1x - - -10x - - -1x - - - - - - - - - - - - - - - - - - - -1x - - -10x - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - -10x -10x - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - -10x - - - - - -10x - - - - - - - - - - - - - - - - -10x - - - - - -10x - - - -10x - - - - - - - - - - - - - - -1x - - - - - - -1x - - -3x -3x -3x - - - - -3x - - - - - - - - - - - - - - - - - - - - - -3x -3x - - - - - - - -1x - - -3x - -3x - - - - - - - - - - - - - - -3x - - - - - - - - - - - - -3x -3x -3x - - - - - - - - - - - - - -1x - - - -4x -4x -4x - - - - - - - - - -4x -4x - -4x - - - - - - - - - -1x - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - -1x -10x - - - - - - - - - - - - - -1x -10x -10x - - - - - - - - - - - - - - - - - - - - - - - - -10x - - - - - - - - - - - - - - - - - - -10x - - - - - - - - - -10x - - - - - - - - - - - -1x - - - - - - -1x -10x -10x - - - - -10x - - - - -10x - -10x - - - -1x - - - - - | import styled from 'styled-components';
-
-export const PageWrapper = styled.div`
- display: flex;
- min-height: 100vh;
- background: linear-gradient(135deg, ${props => props.theme.white} 0%, ${props => props.theme['gray-100'] || props.theme['gray-100']} 100%);
-`;
-
-export const MainContent = styled.main`
- flex: 1;
- margin-left: 250px;
- display: flex;
- flex-direction: column;
-
- animation: fadeIn 0.5s ease-out;
-
- @keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
-`;
-
-// --- Área do Topo (Banner + Avatar + Título) ---
-
-export const Banner = styled.div`
- width: 100%;
- height: 220px;
- background: linear-gradient(135deg, ${props => props.theme.button} 0%, ${props => props.theme['hover-button'] || props.theme.placeholder} 100%);
- position: relative;
- overflow: hidden;
-
- /* Padrão decorativo com formas geométricas */
- &::before {
- content: '';
- position: absolute;
- top: -50%;
- right: -10%;
- width: 600px;
- height: 600px;
- background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
- border-radius: 50%;
- }
-
- &::after {
- content: '';
- position: absolute;
- bottom: -30%;
- left: -5%;
- width: 400px;
- height: 400px;
- background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
- border-radius: 50%;
- }
-`;
-
-export const HeaderContainer = styled.div`
- display: flex;
- align-items: flex-end;
- padding: 0 40px;
- margin-top: -60px;
- margin-bottom: 32px;
- gap: 24px;
- position: relative;
- z-index: 2;
- flex-wrap: wrap;
-
- animation: slideUp 0.6s ease-out;
-
- @keyframes slideUp {
- from {
- opacity: 0;
- transform: translateY(30px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-`;
-
-export const Avatar = styled.div`
- width: 130px;
- height: 130px;
- border-radius: 24px;
- background: linear-gradient(135deg, ${props => props.theme.sidebar} 0%, ${props => props.theme.button} 100%);
- border: 5px solid ${props => props.theme.white};
- flex-shrink: 0;
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2),
- 0 4px 12px rgba(0, 0, 0, 0.15);
- position: relative;
-
- /* Efeito de brilho */
- &::after {
- content: '';
- position: absolute;
- top: 15%;
- left: 15%;
- width: 35%;
- height: 35%;
- background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
- border-radius: 50%;
- }
-
- transition: transform 0.3s ease, box-shadow 0.3s ease;
-
- &:hover {
- transform: scale(1.05) rotate(2deg);
- box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25),
- 0 6px 16px rgba(0, 0, 0, 0.2);
- }
-`;
-
-export const HeaderInfo = styled.div`
- display: flex;
- flex-direction: column;
- padding-bottom: 12px;
- flex: 1;
- gap: 14px;
- min-width: 0;
-
- h1 {
- font-size: 2.8rem;
- font-weight: 800;
- color: ${props => props.theme.black};
- margin: 0;
- margin-bottom: 8px;
- line-height: 1.1;
- letter-spacing: -0.02em;
-
- background: linear-gradient(135deg, ${props => props.theme.white} 0%, ${props => props.theme.button} 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-
- position: relative;
- word-wrap: break-word;
- overflow-wrap: break-word;
-
- /* Underline decorativo */
- &::after {
- content: '';
- position: absolute;
- bottom: -10px;
- left: 0;
- width: 80px;
- height: 5px;
- background: linear-gradient(90deg, ${props => props.theme.button} 0%, transparent 100%);
- border-radius: 3px;
- }
- }
-
- span {
- color: ${props => props.theme['gray-600'] || props.theme['gray-500']};
- font-size: 1rem;
- font-weight: 600;
- padding: 6px 14px;
- background: ${props => props.theme['gray-100']};
- border-radius: 20px;
- width: fit-content;
- display: flex;
- align-items: center;
- gap: 6px;
-
- /* Ícone decorativo */
- &::before {
- content: '👥';
- font-size: 0.9em;
- }
- }
-`;
-
-export const HeaderActions = styled.div`
- display: flex;
- align-items: center;
- gap: 12px;
- padding-bottom: 15px;
-`;
-
-export const JoinButton = styled.button`
- padding: 12px 32px;
- border-radius: 12px;
- border: 2px solid ${props => props.theme.button};
- background: ${props => props.theme.button};
- color: ${props => props.theme.white};
- font-weight: 700;
- font-size: 1rem;
- cursor: pointer;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- box-shadow: 0 4px 12px ${props => props.theme.button}40;
- position: relative;
- overflow: hidden;
-
- /* Efeito de brilho deslizante */
- &::before {
- content: '';
- position: absolute;
- top: 0;
- left: -100%;
- width: 100%;
- height: 100%;
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
- transition: left 0.5s;
- }
-
- &:hover::before {
- left: 100%;
- }
-
- &:hover {
- transform: translateY(-3px);
- box-shadow: 0 8px 20px ${props => props.theme.button}50;
- background: ${props => props.theme['hover-button'] || props.theme.button};
- }
-
- &:active {
- transform: translateY(-1px);
- }
-`;
-
-export const LeaveButton = styled.button`
- padding: 12px 32px;
- border-radius: 12px;
- border: 2px solid ${props => props.theme['red-500']};
- background: transparent;
- color: ${props => props.theme['red-500']};
- font-weight: 700;
- font-size: 1rem;
- cursor: pointer;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- position: relative;
- overflow: hidden;
-
- &::before {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- width: 0;
- height: 0;
- background: ${props => props.theme['red-500']};
- border-radius: 50%;
- transform: translate(-50%, -50%);
- transition: width 0.4s, height 0.4s;
- z-index: -1;
- }
-
- &:hover::before {
- width: 300%;
- height: 300%;
- }
-
- &:hover {
- color: ${props => props.theme.white};
- border-color: ${props => props.theme['red-500']};
- box-shadow: 0 4px 16px ${props => props.theme['red-500']}40;
- transform: translateY(-2px);
- }
-
- &:active {
- transform: translateY(0);
- }
-
- > * {
- position: relative;
- z-index: 1;
- }
-`;
-
-export const OptionsButton = styled.button`
- width: 48px;
- height: 48px;
- border-radius: 12px;
- border: 2px solid ${props => props.theme.button};
- background: ${props => props.theme.white};
- color: ${props => props.theme.button};
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- font-size: 1.3rem;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-
- &:hover {
- background-color: ${props => props.theme.button};
- color: ${props => props.theme.white};
- transform: scale(1.1) rotate(90deg);
- box-shadow: 0 4px 16px ${props => props.theme.button}30;
- }
-
- &:active {
- transform: scale(1.05) rotate(90deg);
- }
-`;
-
-// --- Grid de Conteúdo (Feed + Info Lateral) ---
-
-export const ContentGrid = styled.div`
- display: grid;
- grid-template-columns: 1fr 340px;
- gap: 28px;
- padding: 0 40px 40px 40px;
- max-width: 1400px;
- width: 100%;
- box-sizing: border-box;
-
- @media (max-width: 900px) {
- grid-template-columns: 1fr;
- }
-`;
-
-export const FeedColumn = styled.div`
- display: flex;
- flex-direction: column;
- gap: 20px;
-
- animation: slideInLeft 0.5s ease-out;
-
- @keyframes slideInLeft {
- from {
- opacity: 0;
- transform: translateX(-20px);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
- }
-`;
-
-export const FeedCardWrapper = styled.div`
- background: linear-gradient(135deg, ${props => props.theme.background} 0%, ${props => props.theme['gray-100'] || props.theme.background} 100%);
- border-radius: 18px;
- padding: 10px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
- transition: all 0.3s ease;
-
- &:hover {
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
- transform: translateY(-2px);
- }
-`;
-
-// --- Sidebar de Informações (Direita) ---
-
-export const InfoSidebar = styled.aside`
- background: ${props => props.theme.white};
- border: 2px solid ${props => props.theme.button}25;
- border-radius: 20px;
- padding: 28px;
- height: fit-content;
- position: sticky;
- top: 20px;
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
- overflow-wrap: break-word;
- word-wrap: break-word;
- word-break: break-word;
-
- animation: slideInRight 0.5s ease-out;
-
- @keyframes slideInRight {
- from {
- opacity: 0;
- transform: translateX(20px);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
- }
-
- h3 {
- color: ${props => props.theme.title};
- font-size: 0.85rem;
- font-weight: 800;
- letter-spacing: 1.5px;
- text-transform: uppercase;
- margin-bottom: 16px;
- margin-top: 28px;
- position: relative;
- padding-left: 12px;
-
- /* Barra lateral decorativa */
- &::before {
- content: '';
- position: absolute;
- left: 0;
- top: 50%;
- transform: translateY(-50%);
- width: 4px;
- height: 18px;
- background: linear-gradient(180deg, ${props => props.theme.button} 0%, ${props => props.theme['hover-button'] || props.theme.button} 100%);
- border-radius: 2px;
- }
- }
-
- h3:first-child {
- margin-top: 0;
- }
-
- p {
- color: ${props => props.theme['gray-700'] || props.theme.black};
- font-size: 0.95rem;
- line-height: 1.7;
- margin-bottom: 16px;
- padding-left: 12px;
- word-wrap: break-word;
- overflow-wrap: break-word;
- word-break: break-word;
- white-space: pre-wrap;
- }
-`;
-
-export const KeywordsContainer = styled.div`
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
- padding-left: 12px;
-`;
-
-export const KeywordTag = styled.span`
- border: 2px solid ${props => props.theme.keyword};
- color: ${props => props.theme.keyword};
- border-radius: 10px;
- padding: 8px 18px;
- font-size: 0.85rem;
- font-weight: 700;
- background: ${props => props.theme.keyword}10;
- transition: all 0.2s ease;
- cursor: default;
-
- &:hover {
- background: ${props => props.theme.keyword}20;
- transform: translateY(-2px);
- box-shadow: 0 4px 8px ${props => props.theme.keyword}20;
- }
-`;
-
-export const MenuWrapper = styled.div`
- position: relative;
- display: flex;
- align-items: center;
- z-index: 10;
-`; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 81.81% | -27/33 | -90.9% | -20/22 | -71.42% | -5/7 | -81.81% | -27/33 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 | - - - - - - - - - - - - - -7x -7x - -7x -7x - -7x - - - - - - - - - -7x -7x -7x -7x -7x - -7x - -2x -2x -2x - - - - -2x - - -7x -2x -2x - -1x -1x -1x - - -1x -1x -1x - - -2x - - - - - - - - - - - - -7x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -10x - - - - - - - - - - - - - - - - - | import {useState, useEffect} from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { useForm, Controller } from 'react-hook-form';
-import Sidebar from '../../components/layout/Sidebar';
-import { PageWrapper, ContentWrapper } from '../Feed/styles';
-import * as S from '../../components/domain/CreationForm/styles';
-import TagInput from '../../components/domain/TagInput';
-import type { NotificationState } from '../../components/common/Toast';
-import { GetKeywords } from '../../API/Keywords';
-import Toast from '../../components/common/Toast';
-import type { CommunityProps } from '../../API/Community';
-import { NewCommunity, UpdateCommunity } from '../../API/Community';
-
-export default function CreateCommunity() {
- const navigate = useNavigate();
- const location = useLocation();
-
- const communityToEdit = location.state?.communityToEdit as CommunityProps | undefined;
- const isEditMode = !!communityToEdit;
-
- const { register, handleSubmit, control, watch } = useForm<CommunityProps>({
- // Preenche os valores iniciais com os dados da comunidade se estiver editando
- defaultValues: {
- communityID: communityToEdit?.communityID || "",
- name: communityToEdit?.name || "",
- description: communityToEdit?.description || "",
- technologies: communityToEdit?.technologies || []
- }
- });
-
- const descriptionValue = watch('description');
- const descriptionLength = descriptionValue ? descriptionValue.length : 0;
- const MAX_CHARS = 500;
- const [notification, setNotification] = useState<NotificationState | null>(null);
- const [keywords, setKeywords] = useState<string[]>([]);
-
- useEffect(() => {
- async function loadTechs() {
- try {
- const techsFromDB = await GetKeywords();
- setKeywords(techsFromDB);
- } catch (error) {
- console.error("Falha ao carregar tecnologias:", error);
- }
- }
- loadTechs();
- }, []);
-
- const onSubmit = (data: CommunityProps) => {
- try{
- if (isEditMode && communityToEdit) {
- // --- MODO EDIÇÃO ---
- console.log("Atualizando Comunidade:", communityToEdit.communityID, data);
- UpdateCommunity(communityToEdit.communityID, data);
- setNotification({ message: 'Comunidade atualizada com sucesso!', type: 'success' });
- } else {
- // --- MODO CRIAÇÃO ---
- console.log("Criando Comunidade:", data);
- NewCommunity(data);
- setNotification({ message: 'Comunidade criada com sucesso!', type: 'success' });
- }
-
- setTimeout(() => {
- navigate('/feed');
- }, 1000);
-
- } catch (error) {
- console.error('Erro ao criar comunidade:', error);
- if (error instanceof Error){
- setNotification({ message: error.message, type: 'error' });
- }
- }
-
- };
-
- return (
- <PageWrapper>
- <Sidebar />
-
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
-
- <ContentWrapper>
- <S.FormContainer onSubmit={handleSubmit(onSubmit)}>
-
- <h2>{isEditMode ? 'Editar Comunidade' : 'Criar Comunidade'}</h2>
-
- <S.InputGroup>
- <S.Label htmlFor="name">Nome da Comunidade</S.Label>
- <S.Input id="name" {...register('name', { required: true })} />
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="description">Descrição do Projeto</S.Label>
- <S.TextArea
- id="description"
- placeholder="Descreva sua comunidade..."
- maxLength={MAX_CHARS}
- {...register('description', {
- maxLength: {
- value: MAX_CHARS,
- message: `A descrição não pode exceder ${MAX_CHARS} caracteres`
- }
- })}
- />
- <S.CharacterCount>
- {descriptionLength} / {MAX_CHARS}
- </S.CharacterCount>
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="keywords">Palavras-chave</S.Label>
-
- <Controller
- name="technologies"
- control={control}
- render={({ field }) => (
- <TagInput
- value={field.value}
- onChange={field.onChange}
- searchList={keywords}
- limit={10}
- placeholder="Adicione até 10 palavras-chave..."
- />
- )}
- />
- </S.InputGroup>
-
- <S.SubmitButton type="submit">{isEditMode ? 'Salvar Alterações' : 'Criar Comunidade'}</S.SubmitButton>
-
- </S.FormContainer>
- </ContentWrapper>
- </PageWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 84.44% | -38/45 | -87.09% | -27/31 | -80% | -8/10 | -86.04% | -37/43 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 | - - - - - - - - - - - - - - - - - - - -13x -13x -13x - -13x - - -13x - -13x - -13x - - - -13x -13x -6x - -6x -6x - - -13x - - - - - - - - - - -13x -13x -13x -13x - - -13x - -4x -4x -4x - - - - -4x - - - -13x - -2x - - - - -2x -2x - -1x -1x -1x - - -1x -1x -1x - - - -2x - - - - - - - - - - - -13x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -15x - - - - - -2x - - - - - - - - - - - - -15x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { useState, useEffect } from 'react';
-import { useForm, Controller } from 'react-hook-form';
-import Sidebar from '../../components/layout/Sidebar';
-import { PageWrapper, ContentWrapper } from '../Feed/styles';
-import * as S from '../../components/domain/CreationForm/styles';
-import TagInput from '../../components/domain/TagInput';
-import { IMaskInput } from 'react-imask';
-import { NewProject, UpdateProject } from '../../API/Project';
-import type { ProjectProps } from '../../API/Project';
-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();
- const location = useLocation(); // Hook para ler o state
- const [keywords, setKeywords] = useState<string[]>([]);
-
- const { projectId: paramId } = useParams<{ projectId?: string }>();
-
- // Recupera o projeto do estado
- const projectToEdit = location.state?.projectToEdit as (ProjectProps & { id?: string; projectID?: string }) | undefined;
- // Define se é modo edição
- const isEditMode = !!projectToEdit;
-
- const validProjectId = projectToEdit?.id
- || projectToEdit?.projectID
- || (paramId !== 'undefined' ? paramId : undefined);
-
- const formatDateToString = (date?: Date | string) => {
- if (!date) return "";
- const d = new Date(date);
- // Verifica se é data válida
- Iif (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: {
- title: projectToEdit?.title || "",
- description: projectToEdit?.description || "",
- technologies: projectToEdit?.technologies || [],
- status: projectToEdit?.status || "",
- startDate: formatDateToString(projectToEdit?.startDate)
- }
- });
-
- const descriptionValue = watch('description');
- const descriptionLength = descriptionValue ? descriptionValue.length : 0;
- const MAX_CHARS = 2500;
- const [notification, setNotification] = useState<NotificationState | null>(null);
-
- // Carrega as tecnologias disponíveis do backend
- useEffect(() => {
- async function loadTechs() {
- try {
- const techsFromDB = await GetKeywords();
- setKeywords(techsFromDB);
- } catch (error) {
- console.error("Falha ao carregar tecnologias:", error);
- }
- }
- loadTechs();
- }, []);
-
- // Lida com CRIAR ou ATUALIZAR
- const onSubmit = (data: ProjectFormProps) => {
-
- const finalData: ProjectProps = {
- ...data,
- startDate: parseDate(data.startDate)
- };
-
- try {
- if (isEditMode && validProjectId) {
- // MODO DE EDIÇÃO
- console.log("Atualizando Projeto:", validProjectId, finalData);
- UpdateProject(validProjectId, finalData);
- setNotification({ message: 'Projeto atualizado com sucesso!', type: 'success' });
- } else {
- // MODO DE CRIAÇÃO
- console.log("Criando Projeto:", finalData);
- NewProject(finalData);
- setNotification({ message: 'Projeto criado com sucesso!', type: 'success' });
- }
-
- // Redireciona após o sucesso
- setTimeout(() => {
- navigate('/feed');
- }, 1000);
-
- } catch(error) {
- console.error('Erro ao salvar projeto:', error);
- if (error instanceof Error){
- setNotification({ message: error.message, type: 'error' });
- }
- }
- };
-
- return (
- <PageWrapper>
- <Sidebar />
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
-
- <ContentWrapper>
- <S.FormContainer onSubmit={handleSubmit(onSubmit)}>
-
- <h2>{isEditMode ? 'Editar Projeto' : 'Criar Projeto'}</h2>
-
- <S.InputGroup>
- <S.Label htmlFor="title">Nome do Projeto</S.Label>
- <S.Input id="title" {...register('title', { required: true })} />
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="description">Descrição do Projeto</S.Label>
- <S.TextArea
- id="description"
- placeholder="Descreva seu projeto..."
- maxLength={MAX_CHARS}
- {...register('description', {
- maxLength: {
- value: MAX_CHARS,
- message: `A descrição não pode exceder ${MAX_CHARS} caracteres`
- }
- })}
- />
- <S.CharacterCount>
- {descriptionLength} / {MAX_CHARS}
- </S.CharacterCount>
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="startDate">Data de Início</S.Label>
- <Controller
- name="startDate"
- control={control}
- render={({ field: { onChange, value } }) => (
- <S.Input
- as={IMaskInput}
- mask="00/00/0000"
- id="startDate"
- placeholder="DD/MM/AAAA"
- value={value}
- onAccept={(value: string) => onChange(value)}
- disabled={isEditMode}
- />
- )}
- />
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="technologies">Tecnologias (Palavras-chave)</S.Label>
- <Controller
- name="technologies"
- control={control}
- render={({ field }) => (
- <TagInput
- value={field.value}
- onChange={field.onChange}
- searchList={keywords}
- limit={6}
- placeholder="Adicione até 6 tecnologias..."
- />
- )}
- />
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="status">Status</S.Label>
- <S.SelectWrapper>
- <S.Select
- id="status"
- {...register('status', { required: true })}
- required
- >
- <option value="" disabled>Selecione um status...</option>
- <option value="em-andamento">Em andamento</option>
- <option value="pausado">Pausado</option>
- <option value="finalizado">Finalizado</option>
- </S.Select>
- </S.SelectWrapper>
- </S.InputGroup>
-
- {/* 10. Botão de submit dinâmico */}
- <S.SubmitButton type="submit">
- {isEditMode ? 'Atualizar Projeto' : 'Criar Projeto'}
- </S.SubmitButton>
-
- </S.FormContainer>
- </ContentWrapper>
- </PageWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 87.09% | -27/31 | -55.55% | -10/18 | -66.66% | -4/6 | -93.1% | -27/29 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 | - - - - - - - - - - - - -8x -8x -8x - - -8x -3x -3x -3x -3x - - -8x - - -8x -3x -3x -3x -3x -3x -3x - - - -8x -2x -2x -2x - -1x - -1x - - -1x - - - - -1x -1x -1x - - - - -8x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { useState, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import Sidebar from '../../components/layout/Sidebar';
-import { PageWrapper, ContentWrapper } from '../Feed/styles';
-import * as S from '../../components/domain/CreationForm/styles';
-import Toast from '../../components/common/Toast';
-import type { NotificationState } from '../../components/common/Toast';
-import { useAuth } from '../../API/AuthContext';
-import { UpdateProfile } from '../../API/User';
-import type { UserProfileData } from '../../API/User';
-
-export default function EditProfile() {
- const { currentUser, updateUser } = useAuth();
- const navigate = useNavigate();
- const [notification, setNotification] = useState<NotificationState | null>(null);
-
- // Formata a data para o input (YYYY-MM-DD)
-const formatDateForInput = (dateString?: string) => {
- Iif (!dateString) return "";
- const date = new Date(dateString);
- Iif (isNaN(date.getTime())) return "";
- return date.toISOString().split('T')[0];
-};
-
- const { register, handleSubmit, setValue } = useForm<UserProfileData>();
-
- // Preenche o formulário com os dados atuais
- useEffect(() => {
- Eif (currentUser) {
- setValue('nomeCompleto', currentUser.nomeCompleto || '');
- setValue('username', currentUser.username || '');
- setValue('email', currentUser.email || '');
- setValue('telefone', (currentUser as any).phone || '');
- setValue('dataNascimento', formatDateForInput((currentUser as any).birthDate));
- }
- }, [currentUser, setValue]);
-
- const onSubmit = async (data: UserProfileData) => {
- try {
- console.log("Atualizando perfil:", data);
- await UpdateProfile(data);
-
- setNotification({ message: 'Perfil atualizado com sucesso!', type: 'success' });
-
- updateUser(data);
-
- // Redireciona
- setTimeout(() => {
- navigate('/profile');
- }, 1000);
-
- } catch (error) {
- console.error(error);
- Eif (error instanceof Error) {
- setNotification({ message: error.message, type: 'error' });
- }
- }
- };
-
- return (
- <PageWrapper>
- <Sidebar />
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
-
- <ContentWrapper>
- <S.FormContainer onSubmit={handleSubmit(onSubmit)}>
- <h2>Editar Perfil</h2>
-
- <S.InputGroup>
- <S.Label htmlFor="nomeCompleto">Nome Completo</S.Label>
- <S.Input
- id="nomeCompleto"
- {...register('nomeCompleto', { required: true })}
- />
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="username">Nome de Usuário</S.Label>
- <S.Input
- id="username"
- {...register('username', { required: true })}
- />
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="email">Email</S.Label>
- <S.Input
- id="email"
- type="email"
- {...register('email', { required: true })}
- />
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="telefone">Telefone</S.Label>
- <S.Input
- id="telefone"
- {...register('telefone')}
- />
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="dataNascimento">Data de Nascimento</S.Label>
- <S.Input
- id="dataNascimento"
- type="date"
- {...register('dataNascimento')}
- />
- </S.InputGroup>
-
- <S.SubmitButton type="submit">
- Salvar Alterações
- </S.SubmitButton>
-
- </S.FormContainer>
- </ContentWrapper>
- </PageWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 | - - - - - - - - - - - - - -18x -18x -18x -18x -18x - -18x - -6x -6x -6x -5x - -1x -1x -1x - - -6x - - -6x - - -18x -1x -1x - - -18x -1x -1x - - -18x - - - - - - - - - -2x - - - - - - - - - - - - -2x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import Modal from '../../components/common/Modal';
-import Postcard from '../../components/domain/Postcard';
-import Header from '../../components/layout/Header';
-import Sidebar from '../../components/layout/Sidebar';
-import * as S from './styles';
-import * as ModalS from '../../components/common/Modal/styles';
-import { GetFeedProjects } from '../../API/Project';
-import type { ProjectProps } from '../../API/Project';
-import Toast from '../../components/common/Toast';
-import type { NotificationState } from '../../components/common/Toast';
-
-export default function Feed() {
- const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
- const [isLoading, setIsLoading] = useState(true);
- const navigate = useNavigate();
- const [posts, setPosts] = useState<ProjectProps[]>([]);
- const [notification, setNotification] = useState<NotificationState | null>(null);
-
- useEffect(() => {
- async function loadFeed() {
- setIsLoading(true);
- try {
- const feedData = await GetFeedProjects();
- setPosts(feedData || []);
- } catch (error) {
- console.error("Erro ao carregar feed:", error);
- Eif (error instanceof Error) {
- setNotification({ message: "Não foi possível carregar o feed.", type: 'error' });
- }
- } finally {
- setIsLoading(false);
- }
- }
- loadFeed();
- }, []);
-
- const handleCreateProject = () => {
- setIsCreateModalOpen(false);
- navigate('/createProject');
- };
-
- const handleCreateCommunity = () => {
- setIsCreateModalOpen(false);
- navigate('/createCommunity');
- };
-
- return (
- <S.PageWrapper>
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
-
- <Header onCreateClick={() => setIsCreateModalOpen(true)}/>
- <Sidebar />
-
- <S.ContentWrapper>
- <S.FeedContainer>
- <S.PostList>
- {isLoading ? (
- <S.LoadingContainer>
- <div className="spinner"></div>
- <p>Carregando feed...</p>
- </S.LoadingContainer>
- ) : posts.length > 0 ? (
- posts.map((post, index) => (
- <Postcard
- key={(post as unknown as ProjectProps).id || (post as any).projectID || index}
- post={post}
- showMenu={false}
- />
- ))
- ) : (
- <S.EmptyFeedMessage>
- <svg
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- strokeWidth="2"
- strokeLinecap="round"
- strokeLinejoin="round"
- >
- <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
- <line x1="9" y1="9" x2="15" y2="15"/>
- <line x1="15" y1="9" x2="9" y2="15"/>
- </svg>
- <h3>Nenhum post encontrado</h3>
- <p style={{ color: '#ccc', textAlign: 'center', marginTop: '20px' }}>
- Nenhum post encontrado. Entre em comunidades para ver atualizações!
- </p>
- </S.EmptyFeedMessage>
- )}
- </S.PostList>
- </S.FeedContainer>
- </S.ContentWrapper>
-
- <Modal
- isOpen={isCreateModalOpen}
- onClose={() => setIsCreateModalOpen(false)}
- title="O que você deseja criar?"
- >
- <ModalS.ModalActions>
- <ModalS.ChoiceButton onClick={handleCreateProject}>
- Criar Projeto
- </ModalS.ChoiceButton>
- <ModalS.ChoiceButton onClick={handleCreateCommunity}>
- Criar Comunidade
- </ModalS.ChoiceButton>
- </ModalS.ModalActions>
- </Modal>
- </S.PageWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 | - - -4x -44x - - - - - - - - - - -44x -44x - - - - - - -4x - - - - - - - - - - - - - - - - - - - - - - - - - - -4x - - - -16x - - - - - - -16x - - - - - - - - - - - - - - - - - - - - - - - - -16x - - - - - - - - - -4x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -4x - - -5x - - - - - - - - - - - - - -5x - - - - - - -5x - - - - - - - - -4x - - - - - - - - - - - - - - - - - - - - - - - -4x - - - - - - - - - - -10x -10x - - - - - - - - - -10x - - - | import styled from 'styled-components';
-
-// Wrapper para a página inteira
-export const PageWrapper = styled.div`
- background: linear-gradient(135deg, ${props => props.theme['gray-100']} 0%, ${props => props.theme['gray-100']}f0 100%);
- min-height: 100vh;
- position: relative;
-
- &::before {
- content: '';
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: radial-gradient(circle at 20% 50%, ${props => props.theme.keyword}08 0%, transparent 50%),
- radial-gradient(circle at 80% 80%, ${props => props.theme.button}08 0%, transparent 50%);
- pointer-events: none;
- z-index: 0;
- }
-`;
-
-// Wrapper para o conteúdo principal
-export const ContentWrapper = styled.main`
- margin-left: 250px;
- margin-top: 60px;
- padding: 32px 24px;
- box-sizing: border-box;
- position: relative;
- z-index: 1;
- animation: fadeIn 0.5s ease-out;
-
- @keyframes fadeIn {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-
- @media (max-width: 768px) {
- margin-left: 0;
- padding: 20px 16px;
- }
-`;
-
-// Container principal do feed com posts
-export const FeedContainer = styled.main`
- width: 100%;
- max-width: 800px;
- margin: 0 auto;
- background: ${props => props.theme.background};
- backdrop-filter: blur(10px);
- border-radius: 20px;
- padding: 28px;
- box-sizing: border-box;
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
- 0 2px 8px rgba(0, 0, 0, 0.08),
- 0 0 0 1px ${props => props.theme.placeholder}15;
- position: relative;
- transition: all 0.3s ease;
-
- &::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- height: 3px;
-
- background-size: 200% 100%;
- border-radius: 20px 20px 0 0;
- animation: gradientShift 3s ease infinite;
- }
-
- @keyframes gradientShift {
- 0%, 100% { background-position: 0% 50%; }
- 50% { background-position: 100% 50%; }
- }
-
- &:hover {
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15),
- 0 4px 12px rgba(0, 0, 0, 0.1),
- 0 0 0 1px ${props => props.theme.placeholder}25;
- }
-
- @media (max-width: 768px) {
- padding: 20px;
- border-radius: 16px;
- }
-`;
-
-// Lista que agrupa os posts
-export const PostList = styled.div`
- display: flex;
- flex-direction: column;
- gap: 20px;
- position: relative;
-
- /* Animação de entrada para cada post */
- & > * {
- animation: slideInUp 0.4s ease-out backwards;
- }
-
- & > *:nth-child(1) { animation-delay: 0.05s; }
- & > *:nth-child(2) { animation-delay: 0.1s; }
- & > *:nth-child(3) { animation-delay: 0.15s; }
- & > *:nth-child(4) { animation-delay: 0.2s; }
- & > *:nth-child(5) { animation-delay: 0.25s; }
-
- @keyframes slideInUp {
- from {
- opacity: 0;
- transform: translateY(20px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-`;
-
-// Mensagem de feed vazio
-export const EmptyFeedMessage = styled.div`
- text-align: center;
- padding: 60px 24px;
- color: ${props => props.theme.placeholder};
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 16px;
-
- svg {
- width: 80px;
- height: 80px;
- opacity: 0.5;
- margin-bottom: 8px;
- }
-
- h3 {
- color: ${props => props.theme.subtitle};
- font-size: 1.3rem;
- font-weight: 600;
- margin: 0 0 8px 0;
- }
-
- p {
- color: ${props => props.theme.placeholder};
- font-size: 0.95rem;
- line-height: 1.5;
- max-width: 400px;
- margin: 0;
- }
-`;
-
-// Header do feed
-export const FeedHeader = styled.div`
- margin-bottom: 24px;
- padding-bottom: 20px;
- border-bottom: 1px solid ${props => props.theme.placeholder}20;
-
- h1 {
- color: ${props => props.theme.white};
- font-size: 1.8rem;
- font-weight: 700;
- margin: 0 0 8px 0;
- background: linear-gradient(135deg, ${props => props.theme.white}, ${props => props.theme.subtitle});
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- }
-
- p {
- color: ${props => props.theme.placeholder};
- font-size: 0.9rem;
- margin: 0;
- }
-`;
-
-// Container para loading state
-export const LoadingContainer = styled.div`
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 60px 24px;
- gap: 16px;
-
- .spinner {
- width: 40px;
- height: 40px;
- border: 3px solid ${props => props.theme.placeholder}30;
- border-top-color: ${props => props.theme.keyword};
- border-radius: 50%;
- animation: spin 0.8s linear infinite;
- }
-
- @keyframes spin {
- to { transform: rotate(360deg); }
- }
-
- p {
- color: ${props => props.theme.placeholder};
- font-size: 0.9rem;
- }
-`; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 | - - - -1x - - - - - - - - - | import HeaderHome from '../../components/layout/HeaderHome';
-import * as S from './styles';
-
-export default function Home() {
- return (
- <S.HomePageContainer>
- <HeaderHome />
- <S.ContentWrapper>
- <S.SiteTitle>CTable</S.SiteTitle>
- <S.Tagline>Descubra, compartilhe, aprenda, converse: um novo mundo se abre para os amantes de computação.</S.Tagline>
- </S.ContentWrapper>
- </S.HomePageContainer>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 87.5% | -14/16 | -75% | -3/4 | -50% | -2/4 | -87.5% | -14/16 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 | - - - - - - - - - - - - - - - - - -10x -10x - -10x -10x - - -2x -2x -2x - -1x - - -1x - -1x - - - - -1x - - -1x -1x - - - - -10x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import {useState} from 'react';
-import {
- FormPageContainer,
- FormWrapper,
- FormTitle,
- StyledForm,
- StyledInput,
- SubmitButton,
- RedirectLink
-} from '../../components/domain/Form/styles';
-import { useForm} from 'react-hook-form';
-import Toast from '../../components/common/Toast';
-import { useNavigate } from 'react-router-dom';
-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);
-
- console.log('Usuário registrado com sucesso');
-
- // Define estado para mostrar notificação de sucesso
- setNotification({ message: 'Usuário registrado com sucesso!', type: 'success' });
-
- setTimeout(() => {
- navigate('/feed'); // Navega para a página de feed
- }, 1000);
-
- } catch (error) {
- console.error('Erro ao registrar usuário:', error);
-
- // Define estado para mostrar notificação de erro
- Eif (error instanceof Error){
- setNotification({ message: error.message, type: 'error' });
- }
- }
- }
-
- return (
- <FormPageContainer>
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
- <FormWrapper>
- <FormTitle>Login</FormTitle>
-
- <StyledForm onSubmit={handleSubmit(onSubmit)}>
- <StyledInput
- type="text"
- placeholder="Email ou usuário"
- required
- {...register('username')}
- />
- <StyledInput
- type="password"
- placeholder="Senha"
- required
- {...register('senha')}
- />
-
- <SubmitButton disabled = {isSubmitting} type="submit">Entrar</SubmitButton>
- </StyledForm>
-
- <RedirectLink>
- Não tem uma conta? <a href="/register">Cadastre-se</a>
- </RedirectLink>
- </FormWrapper>
- </FormPageContainer>
- );
-}
-
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 | - - - - - - - - - - - - - - - - -1x -40x - - - - -1x -40x - - - -1x -40x - - - - - - - - -42x -42x -42x -42x - -42x - - -42x -42x - -42x -42x -42x - -42x - -40x -40x -40x - -40x -40x - -39x - -39x -39x - - -1x - - - -40x -40x - - - -42x - -1x -1x - - -25x -7x - -25x -25x - - - -42x -1x -1x - - -42x -1x - - -1x -1x - - - -42x -1x -1x - - -42x - -3x -3x - -3x -3x -1x - -1x - -1x - - - - - -2x -2x -1x -1x -1x - -1x - -1x - -3x -3x - - - - -42x -42x -37x -35x - - -2x -2x - - - - - -5x - -5x -2x - - - - - - - - - - - - - -1x - - - - - - - - -42x - - - - - - - - - - - - - - - - - - - - - - - - - - -2x - - - - - -7x - - - - - - - - - - - -4x -4x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - | import { useState, useRef, useEffect } from 'react';
-import Sidebar from '../../components/layout/Sidebar';
-import Postcard from '../../components/domain/Postcard';
-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';
-import { GetUserProjects } from '../../API/Project';
-import { GetUserComments, DeleteComment } from '../../API/Comment';
-import { useAuth } from '../../API/AuthContext';
-import { useNavigate } from 'react-router-dom';
-import { DeleteProfile } from '../../API/User';
-import Toast from '../../components/common/Toast';
-import Modal from '../../components/common/Modal';
-import * as ModalS from '../../components/common/Modal/styles';
-
-// --- ÍCONES ---
-const PostsIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
- <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
- <polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" /><line x1="10" y1="9" x2="8" y2="9" />
- </svg>
-);
-const CommentsIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
- <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
- </svg>
-);
-const SettingsIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
- <circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" />
- </svg>
-);
-// -----------------------
-
-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);
-
- const navigate = useNavigate();
-
- // Estados para os dados da API
- const [userPosts, setUserPosts] = useState<ProjectProps[]>([]);
- const [userComments, setUserComments] = useState<CommentProps[]>([]);
-
- const [isDeleting, setIsDeleting] = useState(false);
- const [isDeleteProfileModalOpen, setIsDeleteProfileModalOpen] = useState(false);
- const [notification, setNotification] = useState<{message: string, type: 'success' | 'error'} | null>(null);
-
- useEffect(() => {
- // Função assíncrona para buscar todos os dados
- console.log("Efeito de busca de dados do perfil disparado.");
- const fetchProfileData = async () => {
- try {;
-
- console.log("Usuário atual no Profile:", currentUser);
- const apiUserPosts = await GetUserProjects();
-
- const apiUserComments: CommentProps[] = await GetUserComments();
-
- setUserPosts(apiUserPosts);
- setUserComments(apiUserComments);
-
- } catch (error) {
- console.error("Falha ao buscar dados do perfil:", error);
- }
-
- };
- Eif(currentUser)
- fetchProfileData();
- }, [currentUser]);
-
- // Lógica para fechar o menu ao clicar fora
- useEffect(() => {
- function handleClickOutside(event: MouseEvent) {
- Eif (menuRef.current && !menuRef.current.contains(event.target as Node)) {
- setIsMenuOpen(false);
- }
- }
- if (isMenuOpen) {
- document.addEventListener('mousedown', handleClickOutside);
- }
- return () => {
- document.removeEventListener('mousedown', handleClickOutside);
- };
- }, [isMenuOpen]);
-
- const handleLogout = () => {
- logout(); // Limpa o estado e o localStorage
- navigate('/login'); // Redireciona para a tela de login
- };
-
- const handleDeleteComment = async (commentId: string) => {
- await DeleteComment(commentId);
-
- // Remove o comentário deletado do estado local para sumir da tela instantaneamente
- setUserComments((prevComments) =>
- prevComments.filter(comment => comment.commentID !== commentId)
- );
- };
-
- const handleEditProfile = () => {
- setIsMenuOpen(false);
- navigate('/editProfile');
- };
-
- const handleDeleteProfile = async () => {
-
- Iif (isDeleting) return;
- setIsDeleting(true);
-
- try {
- await DeleteProfile();
- setNotification({ message: "Perfil excluído com sucesso. Até logo!", type: 'success' });
-
- setIsDeleteProfileModalOpen(false);
-
- setTimeout(() => {
- logout(); // Desloga o usuário e limpa o storage
- navigate('/login'); // Manda para login
- }, 2000);
-
- } catch (error) {
- Eif (error instanceof Error) {
- if (error.message.includes("não encontrado") || error.message.includes("not found")) {
- setNotification({ message: "Conta já encerrada. Redirecionando...", type: 'success' });
- setTimeout(() => { logout(); navigate('/login'); }, 2000);
- return;
- }
- setNotification({ message: error.message, type: 'error' });
- }
- setIsDeleteProfileModalOpen(false);
- } finally {
- setIsDeleting(false);
- setIsDeleteProfileModalOpen(false);
- }
- };
-
- // Função para renderizar o feed (posts ou comentários)
- const renderFeed = () => {
- if (view === 'posts') {
- 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>
- ));
- }
-
- Eif (view === 'comments') {
- // Mapeia 'userComments'
- return userComments.map(comment => (
- <S.PostContainer key={comment.commentID || Math.random()}>
- <Postcard
- post={{
- id: comment.commentID,
- title: `Comentou em: ${comment.projectTitle || 'Projeto'}`,
- description: comment.content,
- technologies: [],
- status: '',
- startDate: comment.createdAt,
- // Passa o usuário atual como autor para o cabeçalho do card
- author: { title: currentUser?.username || 'Você' }
- } as unknown as ProjectProps}
- showMenu={true}
- deleteLabel="Comentário"
- onDelete={() => handleDeleteComment(comment.commentID!)}
- />
- </S.PostContainer>
- ));
- }
-
- return null;
- };
-
- return (
- <S.PageWrapper>
- <Sidebar />
-
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
-
- <S.ContentWrapper>
-
- <S.ProfileHeader>
- <S.ActionsWrapper ref={menuRef}>
- <S.ProfileActions>
- <S.IconButton
- title="Ver publicações"
- $active={view === 'posts'}
- onClick={() => setView('posts')}
- >
- <PostsIcon />
- </S.IconButton>
- <S.IconButton
- title="Ver comentários"
- $active={view === 'comments'}
- onClick={() => setView('comments')}
- >
- <CommentsIcon />
- </S.IconButton>
- <S.IconButton
- title="Configurações"
- onClick={() => setIsMenuOpen(prev => !prev)}
- >
- <SettingsIcon />
- </S.IconButton>
- </S.ProfileActions>
-
- {isMenuOpen && (
- <D.DropdownMenu>
- <D.MenuItem onClick={handleEditProfile}>Editar Perfil</D.MenuItem>
- <D.MenuItem onClick={handleLogout}>Sair</D.MenuItem>
- <D.Separator />
- <D.DangerMenuItem onClick={() => {
- setIsMenuOpen(false);
- setIsDeleteProfileModalOpen(true);
- }}>
- Excluir Perfil
- </D.DangerMenuItem>
- </D.DropdownMenu>
- )}
-
- </S.ActionsWrapper>
- </S.ProfileHeader>
-
- <S.ProfileInfo>
- <S.ProfileAvatar
- style={{
- backgroundImage: undefined
- }}
- />
- <S.Username>{currentUser?.username || 'Carregando...'}</S.Username>
- </S.ProfileInfo>
-
- <S.PostList>
- {renderFeed()}
- </S.PostList>
-
- </S.ContentWrapper>
-
- <Modal
- isOpen={isDeleteProfileModalOpen}
- onClose={() => !isDeleting && setIsDeleteProfileModalOpen(false)}
- title="Excluir Conta"
- >
- <div style={{ textAlign: 'center' }}>
- <p style={{ marginBottom: '24px', color: '#555' }}>
- Tem certeza que deseja excluir sua conta? <br/>
- <strong>Todos os seus projetos, comunidades e comentários serão apagados permanentemente.</strong>
- </p>
- <ModalS.ModalActions>
- <ModalS.ChoiceButton
- onClick={() => setIsDeleteProfileModalOpen(false)}
- disabled={isDeleting}>
- Cancelar
- </ModalS.ChoiceButton>
- <ModalS.ChoiceButton
- onClick={handleDeleteProfile}
- style={{ backgroundColor: '#e74c3c' }}
- disabled={isDeleting}
- >
- {isDeleting ? 'Excluindo...' : 'Excluir Conta'}
- </ModalS.ChoiceButton>
- </ModalS.ModalActions>
- </div>
- </Modal>
-
- </S.PageWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 | - - -1x -40x - - - - -1x - - - - - - -1x - - - - -3x - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - -1x -40x - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - -40x -40x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - -40x - - -40x - - - - - - - - - - - - - - - -40x - - - - - -1x - - - - - - - - - - - - - - - -1x - - - - - - - - - - - -120x - - -120x - - - -120x - - - - - - - - - - - - - - -120x - - - - - - - - - - - - - -120x - - -120x - - - - - - - - - - - - - - - - - -120x - - - - -1x - - - | import styled from 'styled-components';
-
-// Wrapper para a página inteira
-export const PageWrapper = styled.div`
- background: linear-gradient(135deg, ${props => props.theme['gray-100']} 0%, ${props => props.theme['gray-100'] || props.theme['gray-100']} 100%);
- min-height: 100vh;
-`;
-
-// Wrapper para o conteúdo principal
-export const ContentWrapper = styled.main`
- margin-left: 250px;
- box-sizing: border-box;
- padding-bottom: 60px;
-`;
-
-// Container principal com posts
-export const PostContainer = styled.main`
- width: 100%;
- max-width: 800px;
- margin: 0 auto;
-
- background-color: ${props => props.theme.background};
- border-radius: 16px;
- padding: 24px;
- box-sizing: border-box;
-
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04),
- 0 1px 2px rgba(0, 0, 0, 0.06);
-
- transition: all 0.3s ease;
-
- &:hover {
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08),
- 0 2px 4px rgba(0, 0, 0, 0.06);
- transform: translateY(-2px);
- }
-`;
-
-// Lista que agrupa os posts do perfil
-export const PostList = styled.div`
- display: flex;
- flex-direction: column;
- gap: 20px;
- padding: 32px 24px;
-
- animation: fadeIn 0.4s ease-out;
-
- @keyframes fadeIn {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-`;
-
-// Cabeçalho do perfil
-export const ProfileHeader = styled.header`
- background: linear-gradient(135deg, ${props => props.theme.button} 0%, ${props => props.theme['hover-button'] || props.theme.button} 100%);
- height: 160px;
- position: relative;
- z-index: 0;
-
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-
- /* Padrão decorativo sutil */
- &::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-image:
- radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
- radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
- pointer-events: none;
- }
-
- /* Posiciona os botões de ação */
- display: flex;
- justify-content: flex-end;
- align-items: flex-end;
- padding: 20px 32px;
-`;
-
-// Container da foto + nome
-export const ProfileInfo = styled.div`
- display: flex;
- align-items: flex-end;
- gap: 20px;
-
- margin-top: -70px;
- margin-left: 32px;
- padding-bottom: 24px;
- position: relative;
- z-index: 1;
- pointer-events: none;
-
- animation: slideUp 0.5s ease-out;
-
- @keyframes slideUp {
- from {
- opacity: 0;
- transform: translateY(20px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-
- /* Reativa pointer-events apenas nos elementos internos */
- > * {
- pointer-events: auto;
- }
-`;
-
-// A foto de perfil circular
-export const ProfileAvatar = styled.div`
- width: 120px;
- height: 120px;
- border-radius: 50%;
- background: linear-gradient(135deg, ${props => props.theme.sidebar} 0%, ${props => props.theme.button} 100%);
- border: 5px solid ${props => props.theme.background};
- background-size: cover;
- background-position: center;
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15),
- 0 2px 8px rgba(0, 0, 0, 0.1);
-
- position: relative;
- flex-shrink: 0;
-
- /* Efeito de brilho sutil */
- &::after {
- content: '';
- position: absolute;
- top: 10%;
- left: 10%;
- width: 40%;
- height: 40%;
- background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
- border-radius: 50%;
- }
-
- transition: transform 0.3s ease, box-shadow 0.3s ease;
-
- &:hover {
- transform: scale(1.05);
- box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2),
- 0 4px 12px rgba(0, 0, 0, 0.15);
- }
-`;
-
-// O nome do usuário
-export const Username = styled.h1`
- font-size: 2.5em;
- font-weight: 700;
- color: ${props => props.theme.title};
- margin: 0 0 10px 0; /* Margem inferior para alinhar com a base do avatar */
-
- background: linear-gradient(135deg, ${props => props.theme.title} 0%, ${props => props.theme.subtitle} 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-
- text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-
- position: relative;
-
- &::after {
- content: '';
- position: absolute;
- bottom: -8px;
- left: 0;
- width: 60px;
- height: 4px;
- background: linear-gradient(90deg, ${props => props.theme.button} 0%, transparent 100%);
- border-radius: 2px;
- }
-`;
-
-// Container dos 3 botões de ação (dentro do banner)
-export const ProfileActions = styled.div`
- display: flex;
- align-items: center;
- gap: 12px;
- position: relative;
- z-index: 3;
-
- /* Backdrop blur para destacar os botões */
- background: rgba(255, 255, 255, 0.1);
- backdrop-filter: blur(10px);
- padding: 8px;
- border-radius: 50px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-`;
-
-// Botão de ícone
-export const IconButton = styled.button<{ $active?: boolean }>`
- display: flex;
- align-items: center;
- justify-content: center;
- width: 48px;
- height: 48px;
- border-radius: 50%;
- border: none;
- cursor: pointer;
- position: relative;
- overflow: hidden;
-
- background-color: ${props => props.$active
- ? props.theme['hover-button'] || props.theme.button
- : props.theme.background};
- color: ${props => props.$active
- ? '#FFFFFF'
- : props.theme.button};
-
- box-shadow: ${props => props.$active
- ? '0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.1)'
- : '0 2px 8px rgba(0, 0, 0, 0.08)'};
-
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
- /* Efeito ripple */
- &::before {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- width: 0;
- height: 0;
- border-radius: 50%;
- background: ${props => props.$active
- ? 'rgba(255, 255, 255, 0.3)'
- : 'rgba(0, 0, 0, 0.1)'};
- transform: translate(-50%, -50%);
- transition: width 0.6s, height 0.6s;
- }
-
- &:hover::before {
- width: 100%;
- height: 100%;
- }
-
- &:hover {
- transform: translateY(-3px) scale(1.05);
- box-shadow: ${props => props.$active
- ? '0 6px 20px rgba(0, 0, 0, 0.2)'
- : '0 4px 16px rgba(0, 0, 0, 0.12)'};
- background-color: ${props => props.$active
- ? props.theme['hover-button'] || props.theme.button
- : props.theme['gray-500'] || props.theme.background};
- }
-
- &:active {
- transform: translateY(-1px) scale(1.02);
- }
-
- svg {
- width: 22px;
- height: 22px;
- position: relative;
- z-index: 1;
- transition: transform 0.2s ease;
- }
-
- &:hover svg {
- transform: ${props => props.$active ? 'rotate(5deg)' : 'scale(1.1)'};
- }
-`;
-
-// Menus de ações flutuantes
-export const ActionsWrapper = styled.div`
- position: relative;
- z-index: 5; /* Aumentado para ficar acima de tudo */
-`; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 90% | -18/20 | -75% | -6/8 | -100% | -4/4 | -94.11% | -16/17 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 | - - - - - - - - -4x -4x -4x - -4x - -2x -2x -2x -2x -2x - - - -2x - - -2x - - -4x -2x - - -1x - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -2x - - - - - - - - - - - | import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import Sidebar from '../../components/layout/Sidebar';
-import * as S from './styles';
-import { GetProjectById } from '../../API/Project';
-import type { ProjectProps } from '../../API/Project';
-import { FiCalendar, FiUser } from 'react-icons/fi';
-
-export default function ProjectPage() {
- const { projectId } = useParams<{ projectId: string }>();
- const [project, setProject] = useState<ProjectProps | null>(null);
- const [loading, setLoading] = useState(true);
-
- useEffect(() => {
- async function loadData() {
- Iif (!projectId) return;
- try {
- setLoading(true);
- const data = await GetProjectById(projectId);
- setProject(data);
- } catch (error) {
- console.error("Erro ao carregar projeto:", error);
- } finally {
- setLoading(false);
- }
- }
- loadData();
- }, [projectId]);
-
- if (loading) return <div>Carregando...</div>;
- if (!project) return <div>Projeto não encontrado</div>;
-
- // Formata data
- const startDate = new Date(project.startDate).toLocaleDateString('pt-BR');
-
- return (
- <S.PageWrapper>
- <Sidebar />
-
- <S.MainContent>
- <S.Banner />
-
- <S.HeaderContainer>
- {/* Ícone com a inicial do projeto */}
- <S.ProjectIcon>
- {project.title.charAt(0).toUpperCase()}
- </S.ProjectIcon>
-
- <S.HeaderInfo>
- <h1>{project.title}</h1>
- <span>
- <FiUser style={{ marginRight: 5, verticalAlign: 'middle' }}/>
- Criado por <strong>{project.authorUsername || project.authorName}</strong>
- </span>
- </S.HeaderInfo>
- </S.HeaderContainer>
-
- <S.ContentGrid>
-
- {/* Coluna Principal: Descrição */}
- <S.MainColumn>
- <h2>Sobre o Projeto</h2>
- <S.DescriptionBox>
- {project.description}
- </S.DescriptionBox>
-
- </S.MainColumn>
-
- <S.InfoSidebar>
- <h3>Status</h3>
- <S.StatusBadge status={project.status}>
- {project.status.replace('-', ' ')}
- </S.StatusBadge>
-
- <h3>Início</h3>
- <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#555' }}>
- <FiCalendar />
- <span>{startDate}</span>
- </div>
-
- <h3>Tecnologias</h3>
- <S.KeywordsContainer>
- {project.technologies?.map((tech) => (
- <S.KeywordTag key={tech}>
- {tech}
- </S.KeywordTag>
- ))}
- </S.KeywordsContainer>
- </S.InfoSidebar>
-
- </S.ContentGrid>
- </S.MainContent>
- </S.PageWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 87.5% | -14/16 | -75% | -3/4 | -60% | -3/5 | -87.5% | -14/16 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 | - - - - - - - - - - - -8x - - -8x -8x - - -2x -2x -2x - -1x - - -1x -1x - - - - -1x - - -1x -1x - - - - -8x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -10x - - - - - - - - - - - - - - - - - - - - - | import { useState } from 'react';
-import { FormPageContainer, FormWrapper, FormTitle, StyledForm, StyledInput, SubmitButton, RedirectLink } from '../../components/domain/Form/styles';
-import { useForm, Controller} from 'react-hook-form';
-import { IMaskInput } from 'react-imask';
-import Toast from '../../components/common/Toast';
-import { useNavigate } from 'react-router-dom';
-import {Register as RegisterAPI} from '../../API/Auth'
-import type { RegisterProps } from '../../API/Auth';
-import type { NotificationState } from '../../components/common/Toast';
-
-export default function Register() {
- // Estado para a notificação - usado no Toast
- const [notification, setNotification] = useState<NotificationState | null>(null);
-
-
- const { register, handleSubmit, formState: {isSubmitting}, control } = useForm<RegisterProps>();
- const navigate = useNavigate();
-
- async function onSubmit(data: RegisterProps) {
- console.log(data);
- try{
- await RegisterAPI(data);
-
- console.log('Usuário registrado com sucesso:');
-
- // Define estado para mostrar notificação de sucesso
- setNotification({ message: 'Usuário registrado com sucesso!', type: 'success' });
- setTimeout(() => {
- navigate('/feed'); // Navega para a página de feed
- }, 1000);
-
- } catch (error) {
- console.error('Erro ao registrar usuário:', error);
-
- // Define estado para mostrar notificação de erro
- Eif (error instanceof Error){
- setNotification({ message: error.message, type: 'error' });
- }
- }
- }
-
- return (
- <FormPageContainer>
-
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
-
- <FormWrapper>
- <FormTitle>Criar conta</FormTitle>
-
- <StyledForm onSubmit={handleSubmit(onSubmit)}>
- <StyledInput
- type="text"
- placeholder="Nome completo"
- required
- {...register('nomeCompleto')}
- />
- <StyledInput
- type="text"
- placeholder="Nome de usuário (user)"
- required
- {...register('username')}
- />
- <StyledInput
- type="email"
- placeholder="Email"
- required
- {...register('email')}
- />
- <StyledInput
- type="password"
- placeholder="Senha"
- required
- {...register('senha')}
- />
- <StyledInput
- type="tel"
- placeholder="Telefone"
- required
- {...register('telefone')}
- />
- <Controller
- name="dataNascimento"
- control={control}
- rules={{ required: true }}
- render={({ field }) => (
- <StyledInput
- {...field}
- as={IMaskInput}
- mask="00/00/0000"
- placeholder="Data de nascimento"
- required
- />
- )}
- />
-
- <SubmitButton disabled = {isSubmitting} type="submit">Cadastrar</SubmitButton>
- </StyledForm>
-
- <RedirectLink>
- Já tem uma conta? <a href="/login">Faça login</a>
- </RedirectLink>
- </FormWrapper>
- </FormPageContainer>
- );
-}
-
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 | - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import api from './api';
-import { isAxiosError } from 'axios';
-export interface CommentProps {
- projectTitle?: string;
- commentID?: string;
- content: string;
- createdAt?: string;
- authorID?: string;
- projectID?: string;
- username?: string;
- fullName?: string;
-}
-
-const getAuthHeader = () => {
- return {
- headers: {
- 'Authorization': `Bearer ${localStorage.getItem('token')}`
- }
- };
-};
-
-export async function CreateComment(projectId: string, content: string) {
- try{
-
- const response = await api.post(`/api/project/${projectId}/comments`,
- {content},
- getAuthHeader()
- );
-
- return response.data;
-
- }catch(error){
-
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao enviar comentário.");
-
- }
-}
-
-export async function GetComments(projectId: string): Promise<CommentProps[]> {
- try{
-
- const response = await api.get(`/api/project/${projectId}/comments`, getAuthHeader());
-
- return await response.data;
- }catch(error){
- console.error("Erro ao buscar comentários:", error);
- throw new Error("Erro ao carregar comentários.");
- }
-
-
-}
-
-export async function GetUserComments(): Promise<CommentProps[]> {
- try{
- const response = await api.get('/api/user/comments', getAuthHeader());
-
- return response.data;
- }catch(error){
- console.error("Erro ao buscar comentários do usuário:", error);
- throw new Error("Erro ao carregar comentários do usuário.");
- }
-}
-
-export async function DeleteComment(commentId: string) {
- try{
-
- const response = await api.delete(`/api/project/${commentId}/deletecomment`, getAuthHeader());
-
- return response.data;
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao excluir comentário.");
- }
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 | - - - - - - - - - - - - - - -2x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import api from './api';
-import { isAxiosError } from 'axios';
-
-export interface CommunityProps {
- communityID: string;
- name: string;
- description: string;
- technologies: string[];
- createdAt: Date;
- updatedAt: Date;
- memberCount?: number;
- isMember?: boolean;
- isAdmin?: boolean;
-}
-
-const getAuthHeader = () => {
- return {
- headers: {
- 'Authorization': `Bearer ${localStorage.getItem('token')}`
- }
- };
-};
-
-export async function NewCommunity(data: CommunityProps) {
-
- try{
- console.log("Enviando dados da comunidade:", data);
- const response = await api.post('/api/newcommunity', data, getAuthHeader());
- return response.data
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao criar comunidade.");
- }
-}
-
-export async function GetUserCommunities(): Promise<CommunityProps[]> {
- try{
- const response = await api.get<CommunityProps[]>('/api/user/communities', getAuthHeader());
- return response.data
- }catch(error){
- console.error("Erro ao obter comunidades:", error);
- throw new Error('Erro ao obter comunidades');
- }
-}
-
-export async function GetCommunityById(communityId: string) {
- try{
- const response = await api.get(`/api/communities/data/${communityId}`, getAuthHeader());
-
- return await response.data;
- }catch(error){
- if (isAxiosError(error) && error.response?.status === 404) {
- throw new Error('Comunidade não encontrada');
- }
- throw new Error('Erro ao carregar a comunidade');
- }
-}
-
-export async function JoinCommunity(communityId: string) {
- try{
- const response = await api.post(`/api/communities/${communityId}/join`, {}, getAuthHeader());
-
- return await response.data;
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error('Erro ao entrar na comunidade');
- }
-}
-
-export async function DeleteCommunity(communityId: string) {
- try{
- const response = await api.delete(`/api/communities/deletecommunity/${communityId}`, getAuthHeader());
- return response.data
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao excluir comunidade.");
- }
-}
-
-export async function UpdateCommunity(communityId: string, data: CommunityProps) {
- try{
- const response = await api.put(`/api/communities/updatecommunity/${communityId}`,
- data,
- getAuthHeader()
- );
-
- return response.data;
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao atualizar comunidade.");
- }
-}
-
-export async function LeaveCommunity(communityId: string) {
- try{
- const response = await api.delete(`/api/user/leavecommunity/${communityId}`, getAuthHeader());
-
- return await response.data;
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao sair da comunidade.");
- }
-}
-
-export async function GetAllCommunities(): Promise<CommunityProps[]> {
- try{
- const response = await api.get<CommunityProps[]>('/api/communities', getAuthHeader());
- return response.data
- }catch(error){
- console.error("Erro ao obter todas as comunidades:", error);
- throw new Error('Erro ao obter todas as comunidades');
- }
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 | - - - - - - - - - - - - - - - - -2x - - -2x - - -4x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import api from './api';
-import { isAxiosError } from 'axios';
-
-export interface ProjectProps {
- id?: string;
- title: string;
- description: string;
- technologies: string[];
- status: string;
- startDate: Date;
- authorUsername?: string;
- authorName?: string;
- creatorID?: number;
-}
-
-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));
-}
-
-const getAuthHeader = () => {
- return {
- headers: {
- 'Authorization': `Bearer ${localStorage.getItem('token')}`
- }
- };
-};
-
-export async function NewProject(data: ProjectProps) {
- try{
- const response = await api.post('/api/user/newproject', data, getAuthHeader());
-
- return response.data;
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao criar projeto.");
- }
-}
-
-export async function UpdateProject(projectId: string, data: ProjectProps) {
- try{
- const response = await api.put(`/api/user/updateproject/${projectId}`,
- data,
- getAuthHeader()
- );
- return response.data;
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao atualizar projeto.");
- }
-
-}
-
-export async function GetFeedProjects(): Promise<ProjectProps[]> {
-
- try{
- const response = await api.get('/api/user/home', getAuthHeader());
-
- console.log("Dados do feed de projetos:", response.data);
-
- return response.data.feed;
- }catch(error){
- console.error("Erro ao buscar feed:", error);
- throw new Error("Erro ao carregar o feed de projetos.");
- }
-}
-
-export async function DeleteProject(projectId: string) {
- try{
- await api.delete(`/api/user/deleteproject/${projectId}`, getAuthHeader());
- }
- catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao excluir projeto.");
- }
-}
-
-export async function GetUserProjects(): Promise<ProjectProps[]> {
- try{
- const response = await api.get('/api/user/projects', getAuthHeader());
-
- console.log("Dados dos projetos do usuário:", response.data.projects);
-
- return response.data.projects;
- }catch(error){
- if (isAxiosError(error) && error.response) {
- throw new Error(error.response.data.message);
- }
- throw new Error("Erro ao buscar projetos do usuário.");
- }
-}
-
-export async function GetProjectById(projectId: string): Promise<ProjectProps> {
- try{
- const response = await api.get(`/api/projects/${projectId}`, getAuthHeader());
-
- return await response.data;
- }catch(error){
- console.error("Erro ao buscar projeto:", error);
- throw new Error('Erro ao carregar projeto');
- }
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 | - -5x - - - - | import axios from 'axios';
-
-const api = axios.create({
- baseURL: import.meta.env.VITE_API_URL || 'http://localhost:3000',
-});
-
-export default api; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Comment.ts | -
-
- |
- 4.16% | -1/24 | -0% | -0/8 | -0% | -0/5 | -4.16% | -1/24 | -
| Community.ts | -
-
- |
- 2.04% | -1/49 | -0% | -0/24 | -0% | -0/9 | -2.04% | -1/49 | -
| Project.ts | -
-
- |
- 7.69% | -3/39 | -0% | -0/16 | -12.5% | -1/8 | -7.69% | -3/39 | -
| api.ts | -
-
- |
- 100% | -1/1 | -100% | -2/2 | -100% | -0/0 | -100% | -1/1 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 | - - - - - - - -2x - - - - - - - - - - - | import { ThemeProvider } from "styled-components"
-import { defaultTheme } from './styles/themes/default'
-import { GlobalStyle } from './styles/global'
-import { Router } from "./Router"
-import { BrowserRouter } from "react-router-dom"
-
-function App() {
-
- return (
- <ThemeProvider theme={defaultTheme}>
- <BrowserRouter>
- <GlobalStyle/>
- <Router />
- </BrowserRouter>
- </ThemeProvider>
- )
-}
-
-export default App
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 100% | -3/3 | -100% | -0/0 | -100% | -1/1 | -100% | -3/3 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 | - - - - - - - - -1x -2x - - - - - - - - - -1x | import React from 'react';
-import * as S from './styles';
-
-// Props que o componente Keyword aceita
-interface KeywordProps {
- children: React.ReactNode;
- onRemove: () => void;
-}
-
-export const Keyword: React.FC<KeywordProps> = ({ children, onRemove }) => {
- return (
- <S.KeywordTag>
- {children}
- <S.KeywordRemoveButton onClick={onRemove} aria-label={`Remover ${children}`}>
- ×
- </S.KeywordRemoveButton>
- </S.KeywordTag>
- );
-};
-
-export const KeywordContainer = S.KeywordContainer; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 100% | -12/12 | -100% | -4/4 | -100% | -4/4 | -100% | -12/12 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 | - - - - - - - - - - -1x - -5x -5x -4x - -1x - - -5x -5x - - - -5x -1x - - - -4x -2x - - -4x - - - - - - - - - - - - | import React, { useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import * as S from './styles';
-
-interface ModalProps {
- isOpen: boolean;
- onClose: () => void;
- children: React.ReactNode;
- title: string;
-}
-
-const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children }) => {
- // Bloqueia o scroll do body quando o modal está aberto
- useEffect(() => {
- if (isOpen) {
- document.body.style.overflow = 'hidden';
- } else {
- document.body.style.overflow = 'unset';
- }
-
- return () => {
- document.body.style.overflow = 'unset';
- };
- }, [isOpen]);
-
- if (!isOpen) {
- return null;
- }
-
- // Impede que o clique no modal feche o modal (só o overlay)
- const handleContentClick = (e: React.MouseEvent) => {
- e.stopPropagation();
- };
-
- return createPortal(
- <S.ModalOverlay onClick={onClose}>
- <S.ModalContent onClick={handleContentClick}>
- <S.CloseButton onClick={onClose}>×</S.CloseButton>
- <S.ModalTitle>{title}</S.ModalTitle>
- {children}
- </S.ModalContent>
- </S.ModalOverlay>,
- document.body
- );
-};
-
-export default Modal; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 100% | -7/7 | -100% | -0/0 | -100% | -4/4 | -100% | -7/7 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 | - - - - - - - - - - - - - -1x - - -4x -4x -1x - - - -4x -4x - - - -4x - - - - - - - - - - | import React, { useEffect } from 'react';
-import { ToastContainer, ToastMessage, CloseButton } from './styles';
-
-interface ToastProps {
- message: string;
- type: 'success' | 'error';
- onClose: () => void; // Função para fechar o toast
-}
-
-export interface NotificationState {
- message: string;
- type: 'success' | 'error';
-}
-
-const Toast: React.FC<ToastProps> = ({ message, type, onClose }) => {
-
- // Efeito para fechar o toast automaticamente após 5 segundos
- useEffect(() => {
- const timer = setTimeout(() => {
- onClose();
- }, 5000);
-
- // Limpa o timer se o componente for desmontado
- return () => {
- clearTimeout(timer);
- };
- }, [onClose]);
-
- return (
- <ToastContainer type={type}>
- <ToastMessage>{message}</ToastMessage>
- <CloseButton onClick={onClose}>
- ×
- </CloseButton>
- </ToastContainer>
- );
-};
-
-export default Toast; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| styles.ts | -
-
- |
- 87.32% | -62/71 | -85.71% | -12/14 | -84.48% | -49/58 | -86.95% | -60/69 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 -421 -422 -423 -424 -425 -426 -427 -428 -429 -430 -431 -432 -433 -434 -435 -436 | - - -2x -20x - - - - - - - -20x - - - - - - - - - - - - - - - - -2x - - - - - - - - - - - - - - - - - - - -2x - - - -86x - - - - - - - - - - - - - - - - - -86x - - - - - - - - - - - -2x - - - - -33x - - -33x - - - - - -33x - - - - -33x -33x - - - - -33x -33x -33x - - - - - -2x - - - - - - - -13x - - - - - - - - - -13x - - - -13x - - - - - -2x - - - - -13x - - -13x - - - - - - - - - - - - -13x -13x - - - - -13x -13x -13x - - - - - -13x - - - - -13x -13x - - - - -2x - - - - - -2x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -2x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -2x - - - - - - - - - - - - - - - - - -2x - - - -20x -20x - - - - - -20x - - - - - - - - - - - - - - - - - - - - - -20x - - - - - - - - - - -20x - - - - - - - - -2x - - - - - - -20x - - -20x - - - - - - - -20x - - - - -20x -20x - - - - -20x -20x -20x - - - - - - - - - - -20x - - - - -20x - - - - -20x - - - - -2x - - -20x - - - - -20x - - - - - - -20x -20x - - - -20x -20x - - | import styled from 'styled-components';
-
-// O <form> container
-export const FormContainer = styled.form`
- background: ${props => props.theme.white};
- border-radius: 24px;
- padding: 40px;
- width: 100%;
- max-width: 800px;
- margin: 0 auto;
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
- 0 2px 8px rgba(0, 0, 0, 0.04);
- border: 1px solid ${props => props.theme.placeholder}20;
-
- animation: slideUp 0.5s ease-out;
-
- @keyframes slideUp {
- from {
- opacity: 0;
- transform: translateY(20px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-`;
-
-// Wrapper para cada par de (label + input)
-export const InputGroup = styled.div`
- margin-bottom: 28px;
- width: 100%;
-
- animation: fadeIn 0.4s ease-out backwards;
- animation-delay: calc(var(--index, 0) * 0.05s);
-
- @keyframes fadeIn {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-`;
-
-// Label
-export const Label = styled.label`
- display: block;
- font-size: 0.95em;
- font-weight: 700;
- color: ${props => props.theme.title};
- margin-bottom: 10px;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- font-size: 0.85rem;
- padding-left: 4px;
-
- /* Indicador visual opcional */
- position: relative;
-
- &::after {
- content: '';
- position: absolute;
- left: -12px;
- top: 50%;
- transform: translateY(-50%);
- width: 3px;
- height: 14px;
- background: linear-gradient(180deg, ${props => props.theme.button} 0%, ${props => props.theme['hover-button'] || props.theme.button} 100%);
- border-radius: 2px;
- opacity: 0;
- transition: opacity 0.2s ease;
- }
-
- ${InputGroup}:focus-within &::after {
- opacity: 1;
- }
-`;
-
-// Input
-export const Input = styled.input`
- width: 100%;
- padding: 14px 20px;
- font-size: 1em;
-
- background-color: ${props => props.theme['gray-100']};
- border: 2px solid transparent;
- border-radius: 12px;
- color: ${props => props.theme.title};
- box-sizing: border-box;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- font-weight: 500;
-
- &::placeholder {
- color: ${props => props.theme.placeholder};
- font-weight: 400;
- }
-
- &:hover {
- background-color: ${props => props.theme.white};
- border-color: ${props => props.theme.placeholder}40;
- }
-
- &:focus {
- outline: none;
- background-color: ${props => props.theme.white};
- border-color: ${props => props.theme.button};
- box-shadow: 0 0 0 4px ${props => props.theme.button}15,
- 0 2px 8px rgba(0, 0, 0, 0.04);
- transform: translateY(-1px);
- }
-`;
-
-export const SelectWrapper = styled.div`
- position: relative;
- width: 100%;
-
- /* A seta de seleção (CSS) */
- &::after {
- content: '▼';
- font-size: 0.85em;
- color: ${props => props.theme.placeholder};
- position: absolute;
- right: 20px;
- top: 50%;
- transform: translateY(-50%);
- pointer-events: none;
- transition: all 0.3s ease;
- }
-
- &:hover::after {
- color: ${props => props.theme.button};
- }
-
- &:focus-within::after {
- color: ${props => props.theme.button};
- transform: translateY(-50%) rotate(180deg);
- }
-`;
-
-// Componente de Select
-export const Select = styled.select`
- width: 100%;
- padding: 14px 20px;
- font-size: 1em;
-
- background-color: ${props => props.theme['gray-100']};
- border: 2px solid transparent;
- border-radius: 12px;
- color: ${props => props.theme.title};
- box-sizing: border-box;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- font-weight: 500;
- cursor: pointer;
-
- appearance: none;
- -webkit-appearance: none;
- -moz-appearance: none;
-
- padding-right: 50px;
-
- &:hover {
- background-color: ${props => props.theme.white};
- border-color: ${props => props.theme.placeholder}40;
- }
-
- &:focus {
- outline: none;
- background-color: ${props => props.theme.white};
- border-color: ${props => props.theme.button};
- box-shadow: 0 0 0 4px ${props => props.theme.button}15,
- 0 2px 8px rgba(0, 0, 0, 0.04);
- transform: translateY(-1px);
- }
-
- &:invalid {
- color: ${props => props.theme.placeholder};
- }
-
- option {
- padding: 10px;
- background: ${props => props.theme.white};
- color: ${props => props.theme.title};
- }
-`;
-
-// Wrapper para o input de busca E a lista de resultados
-export const SearchWrapper = styled.div`
- position: relative;
- width: 100%;
-`;
-
-// Lista de resultados de busca que aparece abaixo do input
-export const SearchResultsList = styled.ul`
- position: absolute;
- top: calc(100% + 4px);
- left: 0;
- right: 0;
- background: ${props => props.theme.white};
- border: 2px solid ${props => props.theme.button}20;
- border-radius: 12px;
- max-height: 240px;
- overflow-y: auto;
- margin: 0;
- padding: 6px;
- z-index: 100;
- list-style: none;
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12),
- 0 2px 8px rgba(0, 0, 0, 0.08);
-
- animation: slideDown 0.2s ease-out;
-
- @keyframes slideDown {
- from {
- opacity: 0;
- transform: translateY(-8px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-
- /* Estilização da scrollbar */
- &::-webkit-scrollbar {
- width: 8px;
- }
-
- &::-webkit-scrollbar-track {
- background: transparent;
- }
-
- &::-webkit-scrollbar-thumb {
- background: ${props => props.theme['gray-300']};
- border-radius: 4px;
- }
-
- &::-webkit-scrollbar-thumb:hover {
- background: ${props => props.theme['gray-400']};
- }
-`;
-
-// Item individual na lista de resultados
-export const SearchResultItem = styled.li`
- padding: 12px 16px;
- cursor: pointer;
- border-radius: 8px;
- color: ${props => props.theme.title};
- font-weight: 500;
- transition: all 0.2s ease;
- position: relative;
-
- /* Barra lateral que aparece no hover */
- &::before {
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- width: 3px;
- background: ${props => props.theme.button};
- border-radius: 0 2px 2px 0;
- transform: scaleY(0);
- transition: transform 0.2s ease;
- }
-
- &:hover {
- background-color: ${props => props.theme['gray-100']};
- padding-left: 20px;
-
- &::before {
- transform: scaleY(1);
- }
- }
-
- &:active {
- background-color: ${props => props.theme['gray-100']};
- }
-`;
-
-// Mensagem de erro
-export const ErrorMessage = styled.span`
- font-size: 0.85em;
- margin-top: 8px;
- color: ${props => props.theme['red-500'] || '#ef4444'};
- font-weight: 600;
- display: flex;
- align-items: center;
- gap: 6px;
- padding-left: 4px;
-
- /* Ícone de alerta */
- &::before {
- content: '⚠';
- font-size: 1.1em;
- }
-`;
-
-// Botão de submissão
-export const SubmitButton = styled.button`
- padding: 16px 40px;
- font-size: 1.05em;
- font-weight: 700;
- color: ${props => props.theme.white};
- background: linear-gradient(135deg, ${props => props.theme.button} 0%, ${props => props.theme['hover-button'] || props.theme.button} 100%);
- border: none;
- border-radius: 12px;
- cursor: pointer;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- margin-top: 16px;
- box-shadow: 0 4px 16px ${props => props.theme.button}40;
- position: relative;
- overflow: hidden;
-
- /* Efeito de brilho deslizante */
- &::before {
- content: '';
- position: absolute;
- top: 0;
- left: -100%;
- width: 100%;
- height: 100%;
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
- transition: left 0.5s;
- }
-
- &:hover::before {
- left: 100%;
- }
-
- &:hover {
- transform: translateY(-3px);
- box-shadow: 0 8px 24px ${props => props.theme.button}50;
- }
-
- &:active {
- transform: translateY(-1px);
- }
-
- &:disabled {
- opacity: 0.6;
- cursor: not-allowed;
- transform: none;
- box-shadow: 0 2px 8px ${props => props.theme.button}20;
-
- &:hover {
- transform: none;
- }
- }
-`;
-
-// Estilo para o campo de texto de várias linhas (Descrição)
-export const TextArea = styled.textarea`
- width: 100%;
- padding: 16px 20px;
- font-size: 1em;
- font-family: inherit;
- line-height: 1.6;
-
- background-color: ${props => props.theme['gray-100']};
- border: 2px solid transparent;
- border-radius: 12px;
- color: ${props => props.theme.title};
- box-sizing: border-box;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- resize: vertical;
- min-height: 150px;
- font-weight: 500;
-
- &::placeholder {
- color: ${props => props.theme.placeholder};
- font-weight: 400;
- }
-
- &:hover {
- background-color: ${props => props.theme.white};
- border-color: ${props => props.theme.placeholder}40;
- }
-
- &:focus {
- outline: none;
- background-color: ${props => props.theme.white};
- border-color: ${props => props.theme.button};
- box-shadow: 0 0 0 4px ${props => props.theme.button}15,
- 0 2px 8px rgba(0, 0, 0, 0.04);
- transform: translateY(-1px);
- }
-
- /* Estilização da scrollbar */
- &::-webkit-scrollbar {
- width: 10px;
- }
-
- &::-webkit-scrollbar-track {
- background: ${props => props.theme['gray-100']};
- border-radius: 0 10px 10px 0;
- }
-
- &::-webkit-scrollbar-thumb {
- background: ${props => props.theme['gray-300']};
- border-radius: 10px;
- }
-
- &::-webkit-scrollbar-thumb:hover {
- background: ${props => props.theme.button};
- }
-`;
-
-// Contador de caracteres
-export const CharacterCount = styled.div`
- text-align: right;
- font-size: 0.85em;
- color: ${props => props.theme['gray-500'] || props.theme.placeholder};
- margin-top: 6px;
- margin-right: 4px;
- font-weight: 600;
- padding: 4px 8px;
- background: ${props => props.theme['gray-100']};
- border-radius: 6px;
- display: inline-block;
- float: right;
-
- /* Muda de cor quando próximo do limite */
- &[data-warning="true"] {
- color: ${props => props.theme['yellow-600'] || '#d97706'};
- background: ${props => props.theme['yellow-50'] || '#fef3c7'};
- }
-
- &[data-limit="true"] {
- color: ${props => props.theme['red-500'] || '#ef4444'};
- background: ${props => '#fee2e2'};
- }
-`; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 69.23% | -72/104 | -58.9% | -43/73 | -64.28% | -18/28 | -72.16% | -70/97 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 | - - - - - - - - - - - - - -1x - - - - - - - -1x -21x - - - - - - -1x -12x - - - - - - - - - - - - - -21x - -21x -21x -21x -21x -21x - - -21x -21x -21x -21x -21x - -21x - -21x - -21x -10x -2x - - - - -2x -2x -2x - - - - - - -21x - - - - - -13x -4x - -13x -13x - - - -21x -1x - -1x -1x - - - - - -21x -2x -2x - -2x - -2x - - -2x -1x - - -1x -1x - - -1x - - - -21x -1x - -1x - - - - -1x - -1x -1x -1x - -1x -1x -1x - - - - - - -1x - - - -21x - - - - - - - - - - - - -21x - -12x - - -12x - - -12x - - - - - - -12x - - - - - - - - -21x -1x - - - - - -21x - - - - - - - - - - - - - - - - - - -4x - - - - - - - - - -2x -2x - - - - - - - - - - -2x - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - -1x - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React, { useState, useRef, useEffect } from 'react';
-import * as S from './styles';
-import * as D from '../../common/Dropdown/styles';
-import { useNavigate } from 'react-router-dom';
-import type { ProjectProps } from '../../../API/Project';
-import { DeleteProject } from '../../../API/Project';
-import Modal from '../../common/Modal';
-import type { NotificationState } from '../../common/Toast';
-import Toast from '../../common/Toast';
-import * as ModalS from '../../common/Modal/styles';
-import { CreateComment, GetComments, DeleteComment } from '../../../API/Comment';
-import type { CommentProps } from '../../../API/Comment';
-import { useAuth } from '../../../API/AuthContext';
-
-const TrashIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
- <polyline points="3 6 5 6 21 6"></polyline>
- <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
- </svg>
-);
-
-// Ícone de Comentário (Balão)
-const CommentIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
- <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
- </svg>
-);
-
-
-// --- Ícone de Menu (Ellipsis) ---
-const EllipsisIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
- <circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" />
- </svg>
-);
-
-interface PostcardProps {
- post: ProjectProps;
- showMenu: boolean; // Verifica se o menu deve ser mostrado (se é dono do post)
- onDelete?: (id: string) => Promise<void>;
- deleteLabel?: string;
-}
-
-// --- Componente Postcard ---
-export default function Postcard({ post, showMenu, onDelete, deleteLabel = 'Projeto' }: PostcardProps) {
- const { currentUser } = useAuth();
-
- const [isMenuOpen, setIsMenuOpen] = useState(false);
- const menuRef = useRef<HTMLDivElement>(null);
- const navigate = useNavigate(); // Inicialize o hook de navegação
- const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); // Estado para o modal de exclusão
- const [notification, setNotification] = useState<NotificationState | null>(null);
-
- // Estados para o formulário de comentário
- const [isCommentBoxOpen, setIsCommentBoxOpen] = useState(false);
- const [commentText, setCommentText] = useState("");
- const [isSubmittingComment, setIsSubmittingComment] = useState(false);
- const MAX_COMMENT_CHARS = 500;
- const [comments, setComments] = useState<CommentProps[]>([]);
-
- const [commentToDelete, setCommentToDelete] = useState<string | null>(null);
-
- const projectId = (post as any).id || (post as any).projectID;
-
- useEffect(() => {
- if (isCommentBoxOpen && projectId) {
- loadComments();
- }
- }, [isCommentBoxOpen, projectId]);
-
- async function loadComments() {
- try {
- const data = await GetComments(projectId);
- setComments(data);
- } catch (error) {
- console.error("Erro ao carregar comentários", error);
- }
- }
-
- // Lógica para fechar o menu ao clicar fora (sem alterações)
- useEffect(() => {
- function handleClickOutside(event: MouseEvent) {
- if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
- setIsMenuOpen(false);
- }
- }
- if (isMenuOpen) {
- document.addEventListener('mousedown', handleClickOutside);
- }
- return () => {
- document.removeEventListener('mousedown', handleClickOutside);
- };
- }, [isMenuOpen]);
-
- const handleEditClick = () => {
- const projectId = (post as any).id || (post as any).projectID;
-
- if (projectId) {
- navigate(`/editProject/${projectId}`, { state: { projectToEdit: post } });
- } else E{
- console.error("Erro: ID do projeto não encontrado no objeto:", post);
- }
- };
-
- const handleDeleteMainItem = async () => {
- try {
- const id = (post as any).id || (post as any).projectID || (post as any).commentID;
-
- Iif (!id) throw new Error("ID não encontrado.");
-
- Iif (onDelete) {
- await onDelete(id);
- } else {
- await DeleteProject(id);
- setTimeout(() => navigate('/feed'), 1000);
- }
-
- setNotification({ message: `${deleteLabel} excluído com sucesso!`, type: 'success' });
- setIsDeleteModalOpen(false);
-
- } catch (error) {
- setNotification({ message: `Erro ao excluir ${deleteLabel?.toLowerCase()}.`, type: 'error' });
- }
- };
-
- const handleCommentSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
-
- Iif (!projectId) {
- setNotification({ message: 'Erro: Projeto sem ID.', type: 'error' });
- return;
- }
-
- Iif (!commentText.trim()) return;
-
- try {
- setIsSubmittingComment(true);
- await CreateComment(projectId, commentText);
-
- setNotification({ message: 'Comentário enviado!', type: 'success' });
- setCommentText(""); // Limpa o campo
- setIsCommentBoxOpen(false);
-
- } catch (error) {
- if (error instanceof Error) {
- setNotification({ message: error.message, type: 'error' });
- }
- } finally {
- setIsSubmittingComment(false);
- }
- };
-
- const handleConfirmDeleteInternalComment = async () => {
- if (!commentToDelete) return;
- try {
- await DeleteComment(commentToDelete);
- setNotification({ message: 'Comentário excluído.', type: 'success' });
- setCommentToDelete(null);
- await loadComments();
- } catch (error: any) {
- setNotification({ message: error.message, type: 'error' });
- setCommentToDelete(null);
- }
- };
-
- const handleCardClick = (e: React.MouseEvent) => {
- // Não navega se estiver na aba de comentários do perfil (deleteLabel 'Comentário')
- Iif (deleteLabel !== 'Projeto') return;
-
- // Não navega se o clique foi em um elemento interativo
- const target = e.target as HTMLElement;
-
- // Verifica se clicou em botões, inputs, links ou no próprio menu
- Eif (
- target.closest('button') ||
- target.closest('input') ||
- target.closest('textarea') ||
- target.closest('a') ||
- target.closest(D.DropdownMenu as any) // Garante que itens do dropdown não disparem
- ) {
- return;
- }
-
- // Realiza a navegação
- if (projectId) {
- navigate(`/project/${projectId}`);
- }
- };
-
- const formatDate = (dateString?: string) => {
- Eif (!dateString) return "";
- return new Date(dateString).toLocaleDateString('pt-BR', {
- day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit'
- });
- };
-
- return (
- <S.PostCardWrapper onClick={handleCardClick}>
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
-
- <S.PostHeader>
- <img src={(post as any).avatarUrl || 'url_placeholder_avatar.png'} alt={post.title} />
- <span>{post.title}</span>
- <small>• {(post as any).author?.title || 'Autor'}</small>
- </S.PostHeader>
-
- <S.PostContent>
- {showMenu && (
- <S.MenuWrapper ref={menuRef}>
- <S.MenuButton onClick={() => setIsMenuOpen(prev => !prev)}>
- <EllipsisIcon />
- </S.MenuButton>
-
- {isMenuOpen && (
- <D.DropdownMenu>
- {deleteLabel === 'Projeto' && (
- <D.MenuItem onClick={handleEditClick}>Editar</D.MenuItem>
- )}
- <D.DangerMenuItem onClick={() => {
- setIsMenuOpen(false);
- setIsDeleteModalOpen(true);}}>
- Excluir
- </D.DangerMenuItem>
- </D.DropdownMenu>
- )}
- </S.MenuWrapper>
- )}
-
- <p>{post.description}</p>
-
- <S.ActionRow>
- <S.ActionButton onClick={() => setIsCommentBoxOpen(!isCommentBoxOpen)}>
- <CommentIcon />
- <span>Comentar</span>
- </S.ActionButton>
- </S.ActionRow>
-
- {isCommentBoxOpen && (
- <>
- <S.CommentForm onSubmit={handleCommentSubmit}>
- <S.CommentTextArea
- placeholder="Escreva seu comentário..."
- value={commentText}
- onChange={(e) => setCommentText(e.target.value)}
- maxLength={MAX_COMMENT_CHARS}
- disabled={isSubmittingComment}
- />
- <S.CommentFooter>
- <S.CharacterCount isLimit={commentText.length >= MAX_COMMENT_CHARS}>
- {commentText.length} / {MAX_COMMENT_CHARS}
- </S.CharacterCount>
- <S.SubmitCommentButton
- type="submit"
- disabled={isSubmittingComment || !commentText.trim()}
- >
- {isSubmittingComment ? 'Enviando...' : 'Enviar'}
- </S.SubmitCommentButton>
- </S.CommentFooter>
- </S.CommentForm>
-
- {/* LISTA DE COMENTÁRIOS */}
- {comments.length > 0 && (
- <S.CommentsSection>
- {comments.map((comment) => {
- // Verifica se o usuário atual é o autor do comentário
- const isAuthor = currentUser?.id && String(currentUser.id) === String(comment.authorID);
-
- return (
- <S.CommentItem key={comment.commentID || Math.random()}>
- <S.CommentAvatar />
- <S.CommentBubble>
- <S.CommentHeader>
- <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
- <strong>{comment.username || "Usuário"}</strong>
- <span>{formatDate(comment.createdAt)}</span>
- </div>
-
- {/* Botão de Deletar (Só aparece para o dono) */}
- {isAuthor && (
- <S.DeleteCommentButton
- onClick={() => setCommentToDelete(comment.commentID!)}
- title="Excluir comentário"
- >
- <TrashIcon />
- </S.DeleteCommentButton>
- )}
- </S.CommentHeader>
- <S.CommentText>{comment.content}</S.CommentText>
- </S.CommentBubble>
- </S.CommentItem>
- );
- })}
- </S.CommentsSection>
- )}
- </>
- )}
-
- </S.PostContent>
- <Modal
- isOpen={isDeleteModalOpen}
- onClose={() => setIsDeleteModalOpen(false)}
- title={`Excluir ${deleteLabel}`}
- >
- <div style={{ textAlign: 'center' }}>
- <p style={{ marginBottom: '24px', color: '#555' }}>
- Tem certeza que deseja excluir este {deleteLabel?.toLowerCase()}?
- </p>
- <ModalS.ModalActions>
- <ModalS.ChoiceButton onClick={() => setIsDeleteModalOpen(false)}>
- Cancelar
- </ModalS.ChoiceButton>
- <ModalS.ChoiceButton onClick={handleDeleteMainItem} style={{ backgroundColor: '#e74c3c' }}>
- Excluir
- </ModalS.ChoiceButton>
- </ModalS.ModalActions>
- </div>
- </Modal>
-
- <Modal
- isOpen={!!commentToDelete}
- onClose={() => setCommentToDelete(null)}
- title="Excluir Comentário"
- >
- <div style={{ textAlign: 'center' }}>
- <p style={{ marginBottom: '24px', color: '#555' }}>
- Deseja realmente apagar este comentário?
- </p>
- <ModalS.ModalActions>
- <ModalS.ChoiceButton onClick={() => setCommentToDelete(null)}>
- Cancelar
- </ModalS.ChoiceButton>
- <ModalS.ChoiceButton
- onClick={handleConfirmDeleteInternalComment}
- style={{ backgroundColor: '#e74c3c' }}
- >
- Excluir
- </ModalS.ChoiceButton>
- </ModalS.ModalActions>
- </div>
- </Modal>
-
- </S.PostCardWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 91.07% | -51/56 | -83.33% | -30/36 | -78.94% | -15/19 | -90.9% | -50/55 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 | - - - - - - - - - - -47x -47x - -47x - -47x -47x - - -47x -47x - - -47x -47x - -47x -6x -6x -6x -6x - -6x - - - - -6x -6x - - - -6x - - - - - -47x -20x -8x -8x -8x - - -12x - - -12x -3x - - - - - -12x -3x - - - -12x -12x - - - - -47x - -1x -1x - - -6x -6x - - - -47x -1x -1x -1x - - -47x -1x -1x -1x - - -47x - -47x - - - - - - -7x - - - - - - - - - - - - - - - - - -1x - -1x - - - - - - - - - - - - - - -3x - -1x - - - - - - - - - - - - - - - | import React, { useState, useEffect, useRef } from 'react';
-import { FiSearch } from 'react-icons/fi';
-import * as S from './styles';
-import { useNavigate } from 'react-router-dom';
-
-import { GetAllCommunities } from '../../../API/Community';
-import { GetFeedProjects } from '../../../API/Project';
-import type { CommunityProps } from '../../../API/Community';
-import type { ProjectProps } from '../../../API/Project';
-
-export default function Searchbar() {
- const [query, setQuery] = useState('');
- const navigate = useNavigate();
-
- const wrapperRef = useRef<HTMLDivElement>(null);
-
- const [isFocused, setIsFocused] = useState(false);
- const [isLoading, setIsLoading] = useState(false);
-
- // Dados brutos (cache local)
- const [allCommunities, setAllCommunities] = useState<CommunityProps[]>([]);
- const [allProjects, setAllProjects] = useState<ProjectProps[]>([]);
-
- // Dados filtrados para exibição
- const [filteredCommunities, setFilteredCommunities] = useState<CommunityProps[]>([]);
- const [filteredProjects, setFilteredProjects] = useState<ProjectProps[]>([]);
-
- const handleFocus = async () => {
- setIsFocused(true);
- Eif (allCommunities.length === 0 && allProjects.length === 0) {
- setIsLoading(true);
- try {
- // Busca em paralelo
- const [communitiesData, projectsData] = await Promise.all([
- GetAllCommunities().catch(() => []), // Se falhar, retorna array vazio
- GetFeedProjects().catch(() => [])
- ]);
-
- setAllCommunities(communitiesData);
- setAllProjects(projectsData);
- } catch (error) {
- console.error("Erro ao carregar dados para pesquisa", error);
- } finally {
- setIsLoading(false);
- }
- }
- };
-
- // Efeito para filtrar sempre que a query ou os dados mudarem
- useEffect(() => {
- if (!query.trim()) {
- setFilteredCommunities([]);
- setFilteredProjects([]);
- return;
- }
-
- const lowerQuery = query.toLowerCase();
-
- // Filtra Comunidades (pelo nome ou descrição ou tecnologias)
- const filteredComms = allCommunities.filter(comm =>
- comm.name.toLowerCase().includes(lowerQuery) ||
- comm.description?.toLowerCase().includes(lowerQuery) ||
- comm.technologies?.some(tech => tech.toLowerCase().includes(lowerQuery))
- );
-
- // Filtra Projetos (pelo título ou tecnologias)
- const filteredProjs = allProjects.filter(proj =>
- proj.title.toLowerCase().includes(lowerQuery) ||
- proj.technologies?.some(tech => tech.toLowerCase().includes(lowerQuery))
- );
-
- setFilteredCommunities(filteredComms.slice(0, 5)); // Limita a 5 resultados
- setFilteredProjects(filteredProjs.slice(0, 5)); // Limita a 5 resultados
-
- }, [query, allCommunities, allProjects]);
-
- // Fecha ao clicar fora
- useEffect(() => {
- function handleClickOutside(event: MouseEvent) {
- Eif (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
- setIsFocused(false);
- }
- }
- document.addEventListener('mousedown', handleClickOutside);
- return () => document.removeEventListener('mousedown', handleClickOutside);
- }, []);
-
- // Navegação
- const handleNavigateToCommunity = (communityId: string) => {
- navigate(`/r/${communityId}`);
- setIsFocused(false);
- setQuery('');
- };
-
- const handleNavigateToProject = (projectId: string) => {
- navigate(`/project/${projectId}`);
- console.log("Navegar para projeto:", projectId);
- setIsFocused(false);
- };
-
- const hasResults = filteredCommunities.length > 0 || filteredProjects.length > 0;
-
- return (
- <S.SearchWrapper ref={wrapperRef}>
- <FiSearch size={20} />
- <S.SearchInput
- type="text"
- placeholder="Busque comunidades e projetos..."
- value={query}
- onChange={(e) => setQuery(e.target.value)}
- onFocus={handleFocus}
- />
-
- {/* Renderiza o dropdown apenas se estiver focado e houver texto */}
- {isFocused && query.length > 0 && (
- <S.ResultsDropdown>
- {isLoading ? (
- <S.NoResults>Carregando...</S.NoResults>
- ) : !hasResults ? (
- <S.NoResults>Nenhum resultado encontrado.</S.NoResults>
- ) : (
- <>
- {/* Seção de Comunidades */}
- {filteredCommunities.length > 0 && (
- <S.ResultSection>
- <h4>Comunidades</h4>
- {filteredCommunities.map(comm => (
- <S.ResultItem
- key={comm.communityID}
- onClick={() => handleNavigateToCommunity(comm.communityID)}
- >
- <span>{comm.name}</span>
- {/* Opcional: mostrar tecnologia principal */}
- {comm.technologies?.[0] && <small>{comm.technologies[0]}</small>}
- </S.ResultItem>
- ))}
- </S.ResultSection>
- )}
-
- {/* Seção de Projetos */}
- {filteredProjects.length > 0 && (
- <S.ResultSection>
- <h4>Projetos</h4>
- {filteredProjects.map((proj: any) => (
- <S.ResultItem
- key={proj.id || proj.projectID}
- onClick={() => handleNavigateToProject(proj.id || proj.projectID)}
- >
- <span>{proj.title}</span>
- <small>por {proj.authorUsername || 'Usuário'}</small>
- </S.ResultItem>
- ))}
- </S.ResultSection>
- )}
- </>
- )}
- </S.ResultsDropdown>
- )}
- </S.SearchWrapper>
- );
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 94.28% | -33/35 | -76.19% | -16/21 | -92.85% | -13/14 | -93.93% | -31/33 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 | - - - - - - - - - - - - - - - - - - - - - -20x -20x -20x -20x - -20x -9x -3x -11x - - -3x - -6x - - - - -20x - - - - - -5x -5x -5x - - - - -20x - -2x -1x -1x - -1x -1x -1x -1x -1x - - - - -20x -2x -1x - - -20x - - - - -18x - -1x - - - - - - - - - - - - - -3x - - - - - - -4x - - - - - - - - - - | import React, { useState, useEffect, useRef } from 'react';
-import * as S from '../CreationForm/styles';
-import { Keyword, KeywordContainer } from '../../common/Keyword';
-
-interface TagInputProps {
- value: string[];
- onChange: (value: string[]) => void;
-
- searchList: string[];
- limit: number;
- placeholder: string;
-}
-
-
-export default function TagInput({
- value: selectedTags = [],
- onChange,
- searchList,
- limit,
- placeholder
-}: TagInputProps) {
-
- const [searchQuery, setSearchQuery] = useState('');
- const [searchResults, setSearchResults] = useState<string[]>([]);
- const [error, setError] = useState('');
- const wrapperRef = useRef<HTMLDivElement>(null);
-
- useEffect(() => {
- if (searchQuery.length > 0) {
- const filtered = searchList.filter(item =>
- item.toLowerCase().includes(searchQuery.toLowerCase()) &&
- !selectedTags.includes(item) // Não mostra o que já foi selecionado
- );
- setSearchResults(filtered);
- } else {
- setSearchResults([]);
- }
- }, [searchQuery, selectedTags, searchList]);
-
- // Lógica para fechar a lista de resultados ao clicar fora
- useEffect(() => {
- function handleClickOutside(event: MouseEvent) {
- if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
- setSearchResults([]); // Fecha a lista
- }
- }
- document.addEventListener('mousedown', handleClickOutside);
- return () => {
- document.removeEventListener('mousedown', handleClickOutside);
- };
- }, [wrapperRef]);
-
- // Adiciona uma tag
- const handleAddTag = (tag: string) => {
- // Usa o 'limit' da prop
- if (selectedTags.length >= limit) {
- setError(`Limite de ${limit} itens atingido.`);
- return;
- }
- Eif (!selectedTags.includes(tag)) {
- onChange([...selectedTags, tag]); // Atualiza o react-hook-form
- setSearchQuery('');
- setSearchResults([]);
- setError('');
- }
- };
-
- // Remove uma tag
- const handleRemoveTag = (tagToRemove: string) => {
- onChange(selectedTags.filter(tag => tag !== tagToRemove));
- setError('');
- };
-
- return (
- <S.SearchWrapper ref={wrapperRef}>
- {selectedTags.length > 0 && (
- <KeywordContainer>
- {selectedTags.map(tag => (
- <Keyword
- key={tag}
- onRemove={() => handleRemoveTag(tag)}
- >
- {tag}
- </Keyword>
- ))}
- </KeywordContainer>
- )}
-
- <div style={{ height: selectedTags.length > 0 ? '12px' : '0' }} />
-
- <S.Input
- type="text"
- placeholder={placeholder}
- value={searchQuery}
- onChange={(e) => setSearchQuery(e.target.value)}
- disabled={selectedTags.length >= limit}
- />
-
- {searchResults.length > 0 && (
- <S.SearchResultsList>
- {searchResults.map(tag => (
- <S.SearchResultItem key={tag} onClick={() => handleAddTag(tag)}>
- {tag}
- </S.SearchResultItem>
- ))}
- </S.SearchResultsList>
- )}
-
- {error && <S.ErrorMessage>{error}</S.ErrorMessage>}
- </S.SearchWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 | - - - - - - - - - -2x - - - - - - - - - - - - - - - - - | import { FiPlus } from 'react-icons/fi';
-import Searchbar from '../../domain/Searchbar';
-import * as S from './styles';
-
-
-interface HeaderProps {
- onCreateClick: () => void;
-}
-
-export default function Header({ onCreateClick }: HeaderProps) {
- return (
- <S.HeaderContainer>
- <S.SearchContainer>
- <Searchbar />
- </S.SearchContainer>
-
- <S.ActionsContainer>
- <S.CreateButton onClick={onCreateClick}>
- <FiPlus size={20} />
- <span>Create</span>
- </S.CreateButton>
-
- <S.ProfileIcon to={`/profile`}>
- </S.ProfileIcon>
- </S.ActionsContainer>
- </S.HeaderContainer>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 | - - -1x - - - - - - - - - - - - - - | import * as S from './styles';
-
-export default function HeaderHome() {
- return (
- <S.HeaderContainer>
-
- <S.ActionsContainer>
- <S.Button to="/login">
- Login
- </S.Button>
-
- <S.Button to="/register">
- Register
- </S.Button>
- </S.ActionsContainer>
- </S.HeaderContainer>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 93.75% | -15/16 | -75% | -3/4 | -100% | -5/5 | -93.75% | -15/16 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 | - - - - - - - - - -9x -9x -9x - -9x -2x - - -9x - -8x -8x - -8x -8x -8x - - - - - - -8x -8x - - -9x - - - - - - - - - - - - - - - - -4x - - - - - - - - - - - - - - - - - - | import { useState } from 'react';
-import { FiHome, FiChevronDown } from 'react-icons/fi';
-import { GetUserCommunities } from '../../../API/Community';
-import * as S from './styles';
-import type { CommunityProps } from '../../../API/Community';
-import { useAuth } from '../../../API/AuthContext';
-import { useEffect } from 'react';
-
-export default function Sidebar() {
- // Estado para controlar se a lista de comunidades está visível
- const [isCommunitiesOpen, setIsCommunitiesOpen] = useState(true);
- const { currentUser } = useAuth();
- const [userCommunities, setUserCommunities] = useState<CommunityProps[]>([]);
-
- const toggleCommunities = () => {
- setIsCommunitiesOpen(!isCommunitiesOpen);
- };
-
- useEffect(() => {
- // Função assíncrona para buscar todos os dados
- const fetchCommunities = async () => {
- try {;
-
- const apiUserCommunities = await GetUserCommunities();
- console.log("Comunidades do usuário:", apiUserCommunities);
- setUserCommunities(apiUserCommunities);
-
- } catch (error) {
- console.error("Falha ao buscar comunidades:", error);
- }
-
- };
- Eif(currentUser)
- fetchCommunities();
- }, [currentUser]);
-
- return (
- <S.SidebarContainer>
- <S.SidebarNav>
-
- <S.HomeLink to="/feed">
- <FiHome size={22} />
- <span>Home</span>
- </S.HomeLink>
-
- <S.CommunitiesHeader onClick={toggleCommunities} isOpen={isCommunitiesOpen}>
- <span>COMUNIDADES</span>
- <FiChevronDown size={20} />
- </S.CommunitiesHeader>
-
- {isCommunitiesOpen && (
- <S.CommunitiesList>
- {userCommunities.map((community) => (
- <S.CommunityLink
- to={`/r/${community.communityID}`}
- key={community.communityID}
- >
- <S.CommunityIcon
- alt={`${community.name} icon`}
- />
- <span>{community.name}</span>
- </S.CommunityLink>
- ))}
- </S.CommunitiesList>
- )}
-
- </S.SidebarNav>
- </S.SidebarContainer>
- );
-}
-
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| App.tsx | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 | - - - - - - - - - - - - - - -14x -14x - -14x -14x -14x - -14x -14x -14x - -14x - -14x - -4x -4x -4x -4x -4x -4x - - - - -4x - - -14x - - - - - -6x -6x - - -14x -1x - -1x -1x - - -1x - - - - - -1x - - - - - - - - -14x - - - -14x -1x -1x -1x -1x -1x - - -1x - - - - - - - - - - - -14x -1x - -1x -1x - - -1x - - - - - -1x -1x - - - - - - - - - -14x - -10x - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - -1x - - - - - - - - - - -1x -1x - - - - - - - - - - - - - -10x - - - - - - - - - - - - -10x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { useParams, useNavigate } from 'react-router-dom';
-import Sidebar from '../../components/layout/Sidebar';
-import Postcard from '../../components/domain/Postcard';
-import * as S from './styles';
-import { FiMoreHorizontal } from 'react-icons/fi';
-import { useEffect, useState, useRef } from 'react';
-import { GetCommunityById, JoinCommunity, DeleteCommunity, LeaveCommunity } from '../../API/Community';
-import type { NotificationState } from '../../components/common/Toast';
-import Toast from '../../components/common/Toast';
-import type { CommunityProps } from '../../API/Community';
-import * as D from '../../components/common/Dropdown/styles';
-import Modal from '../../components/common/Modal';
-import * as ModalS from '../../components/common/Modal/styles';
-
-export default function CommunityPage() {
- const { communityID } = useParams<{ communityID: string }>();
- const navigate = useNavigate();
-
- const [notification, setNotification] = useState<NotificationState | null>(null);
- const [community, setCommunity] = useState<any>(null);
- const [posts, setPosts] = useState<any[]>([]);
-
- const [isMenuOpen, setIsMenuOpen] = useState(false);
- const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
- const menuRef = useRef<HTMLDivElement>(null);
-
- const [isLeaveModalOpen, setIsLeaveModalOpen] = useState(false);
-
- useEffect(() => {
- async function loadData() {
- console.log("Carregando dados da comunidade para ID:", communityID);
- Iif (!communityID) return;
- try {
- const data = await GetCommunityById(communityID);
- setCommunity(data.community);
- setPosts(data.posts);
- } catch (error) {
- console.error(error);
- }
- }
- loadData();
- }, [communityID]);
-
- useEffect(() => {
- function handleClickOutside(event: MouseEvent) {
- if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
- setIsMenuOpen(false);
- }
- }
- if (isMenuOpen) document.addEventListener('mousedown', handleClickOutside);
- return () => document.removeEventListener('mousedown', handleClickOutside);
- }, [isMenuOpen]);
-
- const handleJoin = async () => {
- Iif (!community) return;
-
- try {
- await JoinCommunity(community.communityID);
-
- // Atualiza a interface após entrar na comunidade
- setCommunity((prev: CommunityProps | null) => prev ? ({
- ...prev,
- isMember: true, // Esconde o botão
- memberCount: (prev.memberCount || 0) + 1 // Atualiza o contador visualmente
- }) : null);
-
- setNotification({ message: 'Você entrou na comunidade!', type: 'success' });
-
- } catch (error) {
- if (error instanceof Error) {
- setNotification({ message: error.message, type: 'error' });
- }
- }
- };
-
- const handleEdit = () => {
- navigate('/editCommunity', { state: { communityToEdit: community } });
- };
-
- const handleDelete = async () => {
- Iif (!community) return;
- try {
- await DeleteCommunity(community.communityID);
- setNotification({ message: 'Comunidade excluída com sucesso.', type: 'success' });
- setIsDeleteModalOpen(false);
-
- // Redireciona para home após excluir
- setTimeout(() => {
- navigate('/feed');
- }, 1500);
-
- } catch (error) {
- if (error instanceof Error) {
- setNotification({ message: error.message, type: 'error' });
- }
- setIsDeleteModalOpen(false);
- }
- };
-
- const handleLeave = async () => {
- Iif (!community) return;
-
- try {
- await LeaveCommunity(community.communityID);
-
- // Atualiza a interface otimisticamente
- setCommunity((prev: CommunityProps | null) => prev ? ({
- ...prev,
- isMember: false, // O usuário não é mais membro
- memberCount: Math.max((prev.memberCount || 0) - 1, 0) // Decrementa contador
- }) : null);
-
- setNotification({ message: 'Você saiu da comunidade.', type: 'success' });
- setIsLeaveModalOpen(false); // Fecha o modal
-
- } catch (error) {
- if (error instanceof Error) {
- setNotification({ message: error.message, type: 'error' });
- }
- setIsLeaveModalOpen(false);
- }
- };
-
- if (!community) return <div>Comunidade não encontrada</div>;
-
- return (
- <S.PageWrapper>
- <Sidebar />
-
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
-
- <S.MainContent>
- <S.Banner />
-
- <S.HeaderContainer>
- <S.Avatar />
- <S.HeaderInfo>
- <h1>{community.name}</h1>
- <span>{community.memberCount} membros</span>
- </S.HeaderInfo>
-
- <S.HeaderActions>
- {!community.isMember && (
- <S.JoinButton onClick={handleJoin}>
- Join
- </S.JoinButton>
- )}
- {community.isMember && !community.isAdmin && (
- <S.LeaveButton onClick={() => setIsLeaveModalOpen(true)}>
- Sair
- </S.LeaveButton>
- )}
- {community.isAdmin && (
- <S.MenuWrapper ref={menuRef}>
- <S.OptionsButton onClick={() => setIsMenuOpen(!isMenuOpen)}>
- <FiMoreHorizontal />
- </S.OptionsButton>
-
- {isMenuOpen && (
- <D.DropdownMenu>
- <D.MenuItem onClick={handleEdit}>
- Editar Comunidade
- </D.MenuItem>
- <D.Separator />
- <D.DangerMenuItem onClick={() => {
- setIsMenuOpen(false);
- setIsDeleteModalOpen(true);
- }}>
- Excluir Comunidade
- </D.DangerMenuItem>
- </D.DropdownMenu>
- )}
- </S.MenuWrapper>
- )}
- </S.HeaderActions>
- </S.HeaderContainer>
-
- <S.ContentGrid>
- <S.FeedColumn>
- {posts.map(post => (
- <S.FeedCardWrapper key={post.projectID || post.id}>
- <Postcard post={post} showMenu={false} />
- </S.FeedCardWrapper>
- ))}
- </S.FeedColumn>
-
- <S.InfoSidebar>
- <h3>DESCRIPTION</h3>
- <p>{community.description}</p>
-
- <h3>KEYWORDS</h3>
- <S.KeywordsContainer>
- {community.technologies?.map((keyword: string) => (
- <S.KeywordTag key={keyword}>{keyword}</S.KeywordTag>
- ))}
- </S.KeywordsContainer>
- </S.InfoSidebar>
- </S.ContentGrid>
- </S.MainContent>
-
- <Modal
- isOpen={isDeleteModalOpen}
- onClose={() => setIsDeleteModalOpen(false)}
- title="Excluir Comunidade"
- >
- <div style={{ textAlign: 'center' }}>
- <p style={{ marginBottom: '24px', color: '#555' }}>
- Tem certeza que deseja excluir a comunidade <strong>{community.name}</strong>?<br/>
- Todos os posts e vínculos serão removidos.
- </p>
- <ModalS.ModalActions>
- <ModalS.ChoiceButton onClick={() => setIsDeleteModalOpen(false)}>
- Cancelar
- </ModalS.ChoiceButton>
- <ModalS.ChoiceButton onClick={handleDelete} style={{ backgroundColor: '#e74c3c' }}>
- Excluir
- </ModalS.ChoiceButton>
- </ModalS.ModalActions>
- </div>
- </Modal>
-
- <Modal
- isOpen={isLeaveModalOpen}
- onClose={() => setIsLeaveModalOpen(false)}
- title="Sair da Comunidade"
- >
- <div style={{ textAlign: 'center' }}>
- <p style={{ marginBottom: '24px', color: '#555' }}>
- Tem certeza que deseja sair da comunidade <strong>{community.name}</strong>?
- </p>
- <ModalS.ModalActions>
- <ModalS.ChoiceButton onClick={() => setIsLeaveModalOpen(false)}>
- Cancelar
- </ModalS.ChoiceButton>
- <ModalS.ChoiceButton
- onClick={handleLeave}
- style={{ backgroundColor: '#e74c3c' }} // Botão vermelho
- >
- Sair
- </ModalS.ChoiceButton>
- </ModalS.ModalActions>
- </div>
- </Modal>
- </S.PageWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 -421 -422 -423 -424 -425 -426 -427 -428 -429 -430 -431 -432 -433 -434 -435 -436 -437 -438 -439 -440 -441 -442 -443 -444 -445 -446 -447 -448 | - -1x - - -10x - - -1x - - - - - - - - - - - - - - - - - - - -1x - - -10x - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - -10x -10x - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - -10x - - - - - -10x - - - - - - - - - - - - - - - - -10x - - - - - -10x - - - -10x - - - - - - - - - - - - - - -1x - - - - - - -1x - - -3x -3x -3x - - - - -3x - - - - - - - - - - - - - - - - - - - - - -3x -3x - - - - - - - -1x - - -3x - -3x - - - - - - - - - - - - - - -3x - - - - - - - - - - - - -3x -3x -3x - - - - - - - - - - - - - -1x - - - -4x -4x -4x - - - - - - - - - -4x -4x - -4x - - - - - - - - - -1x - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - -1x -10x - - - - - - - - - - - - - -1x -10x -10x - - - - - - - - - - - - - - - - - - - - - - - - -10x - - - - - - - - - - - - - - - - - - -10x - - - - - - - - - -10x - - - - - - - - - - - -1x - - - - - - -1x -10x -10x - - - - -10x - - - - -10x - -10x - - - -1x - - - - - | import styled from 'styled-components';
-
-export const PageWrapper = styled.div`
- display: flex;
- min-height: 100vh;
- background: linear-gradient(135deg, ${props => props.theme.white} 0%, ${props => props.theme['gray-100'] || props.theme['gray-100']} 100%);
-`;
-
-export const MainContent = styled.main`
- flex: 1;
- margin-left: 250px;
- display: flex;
- flex-direction: column;
-
- animation: fadeIn 0.5s ease-out;
-
- @keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
-`;
-
-// --- Área do Topo (Banner + Avatar + Título) ---
-
-export const Banner = styled.div`
- width: 100%;
- height: 220px;
- background: linear-gradient(135deg, ${props => props.theme.button} 0%, ${props => props.theme['hover-button'] || props.theme.placeholder} 100%);
- position: relative;
- overflow: hidden;
-
- /* Padrão decorativo com formas geométricas */
- &::before {
- content: '';
- position: absolute;
- top: -50%;
- right: -10%;
- width: 600px;
- height: 600px;
- background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
- border-radius: 50%;
- }
-
- &::after {
- content: '';
- position: absolute;
- bottom: -30%;
- left: -5%;
- width: 400px;
- height: 400px;
- background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
- border-radius: 50%;
- }
-`;
-
-export const HeaderContainer = styled.div`
- display: flex;
- align-items: flex-end;
- padding: 0 40px;
- margin-top: -60px;
- margin-bottom: 32px;
- gap: 24px;
- position: relative;
- z-index: 2;
- flex-wrap: wrap;
-
- animation: slideUp 0.6s ease-out;
-
- @keyframes slideUp {
- from {
- opacity: 0;
- transform: translateY(30px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-`;
-
-export const Avatar = styled.div`
- width: 130px;
- height: 130px;
- border-radius: 24px;
- background: linear-gradient(135deg, ${props => props.theme.sidebar} 0%, ${props => props.theme.button} 100%);
- border: 5px solid ${props => props.theme.white};
- flex-shrink: 0;
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2),
- 0 4px 12px rgba(0, 0, 0, 0.15);
- position: relative;
-
- /* Efeito de brilho */
- &::after {
- content: '';
- position: absolute;
- top: 15%;
- left: 15%;
- width: 35%;
- height: 35%;
- background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
- border-radius: 50%;
- }
-
- transition: transform 0.3s ease, box-shadow 0.3s ease;
-
- &:hover {
- transform: scale(1.05) rotate(2deg);
- box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25),
- 0 6px 16px rgba(0, 0, 0, 0.2);
- }
-`;
-
-export const HeaderInfo = styled.div`
- display: flex;
- flex-direction: column;
- padding-bottom: 12px;
- flex: 1;
- gap: 14px;
- min-width: 0;
-
- h1 {
- font-size: 2.8rem;
- font-weight: 800;
- color: ${props => props.theme.black};
- margin: 0;
- margin-bottom: 8px;
- line-height: 1.1;
- letter-spacing: -0.02em;
-
- background: linear-gradient(135deg, ${props => props.theme.white} 0%, ${props => props.theme.button} 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-
- position: relative;
- word-wrap: break-word;
- overflow-wrap: break-word;
-
- /* Underline decorativo */
- &::after {
- content: '';
- position: absolute;
- bottom: -10px;
- left: 0;
- width: 80px;
- height: 5px;
- background: linear-gradient(90deg, ${props => props.theme.button} 0%, transparent 100%);
- border-radius: 3px;
- }
- }
-
- span {
- color: ${props => props.theme['gray-600'] || props.theme['gray-500']};
- font-size: 1rem;
- font-weight: 600;
- padding: 6px 14px;
- background: ${props => props.theme['gray-100']};
- border-radius: 20px;
- width: fit-content;
- display: flex;
- align-items: center;
- gap: 6px;
-
- /* Ícone decorativo */
- &::before {
- content: '👥';
- font-size: 0.9em;
- }
- }
-`;
-
-export const HeaderActions = styled.div`
- display: flex;
- align-items: center;
- gap: 12px;
- padding-bottom: 15px;
-`;
-
-export const JoinButton = styled.button`
- padding: 12px 32px;
- border-radius: 12px;
- border: 2px solid ${props => props.theme.button};
- background: ${props => props.theme.button};
- color: ${props => props.theme.white};
- font-weight: 700;
- font-size: 1rem;
- cursor: pointer;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- box-shadow: 0 4px 12px ${props => props.theme.button}40;
- position: relative;
- overflow: hidden;
-
- /* Efeito de brilho deslizante */
- &::before {
- content: '';
- position: absolute;
- top: 0;
- left: -100%;
- width: 100%;
- height: 100%;
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
- transition: left 0.5s;
- }
-
- &:hover::before {
- left: 100%;
- }
-
- &:hover {
- transform: translateY(-3px);
- box-shadow: 0 8px 20px ${props => props.theme.button}50;
- background: ${props => props.theme['hover-button'] || props.theme.button};
- }
-
- &:active {
- transform: translateY(-1px);
- }
-`;
-
-export const LeaveButton = styled.button`
- padding: 12px 32px;
- border-radius: 12px;
- border: 2px solid ${props => props.theme['red-500']};
- background: transparent;
- color: ${props => props.theme['red-500']};
- font-weight: 700;
- font-size: 1rem;
- cursor: pointer;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- position: relative;
- overflow: hidden;
-
- &::before {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- width: 0;
- height: 0;
- background: ${props => props.theme['red-500']};
- border-radius: 50%;
- transform: translate(-50%, -50%);
- transition: width 0.4s, height 0.4s;
- z-index: -1;
- }
-
- &:hover::before {
- width: 300%;
- height: 300%;
- }
-
- &:hover {
- color: ${props => props.theme.white};
- border-color: ${props => props.theme['red-500']};
- box-shadow: 0 4px 16px ${props => props.theme['red-500']}40;
- transform: translateY(-2px);
- }
-
- &:active {
- transform: translateY(0);
- }
-
- > * {
- position: relative;
- z-index: 1;
- }
-`;
-
-export const OptionsButton = styled.button`
- width: 48px;
- height: 48px;
- border-radius: 12px;
- border: 2px solid ${props => props.theme.button};
- background: ${props => props.theme.white};
- color: ${props => props.theme.button};
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- font-size: 1.3rem;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-
- &:hover {
- background-color: ${props => props.theme.button};
- color: ${props => props.theme.white};
- transform: scale(1.1) rotate(90deg);
- box-shadow: 0 4px 16px ${props => props.theme.button}30;
- }
-
- &:active {
- transform: scale(1.05) rotate(90deg);
- }
-`;
-
-// --- Grid de Conteúdo (Feed + Info Lateral) ---
-
-export const ContentGrid = styled.div`
- display: grid;
- grid-template-columns: 1fr 340px;
- gap: 28px;
- padding: 0 40px 40px 40px;
- max-width: 1400px;
- width: 100%;
- box-sizing: border-box;
-
- @media (max-width: 900px) {
- grid-template-columns: 1fr;
- }
-`;
-
-export const FeedColumn = styled.div`
- display: flex;
- flex-direction: column;
- gap: 20px;
-
- animation: slideInLeft 0.5s ease-out;
-
- @keyframes slideInLeft {
- from {
- opacity: 0;
- transform: translateX(-20px);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
- }
-`;
-
-export const FeedCardWrapper = styled.div`
- background: linear-gradient(135deg, ${props => props.theme.background} 0%, ${props => props.theme['gray-100'] || props.theme.background} 100%);
- border-radius: 18px;
- padding: 10px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
- transition: all 0.3s ease;
-
- &:hover {
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
- transform: translateY(-2px);
- }
-`;
-
-// --- Sidebar de Informações (Direita) ---
-
-export const InfoSidebar = styled.aside`
- background: ${props => props.theme.white};
- border: 2px solid ${props => props.theme.button}25;
- border-radius: 20px;
- padding: 28px;
- height: fit-content;
- position: sticky;
- top: 20px;
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
- overflow-wrap: break-word;
- word-wrap: break-word;
- word-break: break-word;
-
- animation: slideInRight 0.5s ease-out;
-
- @keyframes slideInRight {
- from {
- opacity: 0;
- transform: translateX(20px);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
- }
-
- h3 {
- color: ${props => props.theme.title};
- font-size: 0.85rem;
- font-weight: 800;
- letter-spacing: 1.5px;
- text-transform: uppercase;
- margin-bottom: 16px;
- margin-top: 28px;
- position: relative;
- padding-left: 12px;
-
- /* Barra lateral decorativa */
- &::before {
- content: '';
- position: absolute;
- left: 0;
- top: 50%;
- transform: translateY(-50%);
- width: 4px;
- height: 18px;
- background: linear-gradient(180deg, ${props => props.theme.button} 0%, ${props => props.theme['hover-button'] || props.theme.button} 100%);
- border-radius: 2px;
- }
- }
-
- h3:first-child {
- margin-top: 0;
- }
-
- p {
- color: ${props => props.theme['gray-700'] || props.theme.black};
- font-size: 0.95rem;
- line-height: 1.7;
- margin-bottom: 16px;
- padding-left: 12px;
- word-wrap: break-word;
- overflow-wrap: break-word;
- word-break: break-word;
- white-space: pre-wrap;
- }
-`;
-
-export const KeywordsContainer = styled.div`
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
- padding-left: 12px;
-`;
-
-export const KeywordTag = styled.span`
- border: 2px solid ${props => props.theme.keyword};
- color: ${props => props.theme.keyword};
- border-radius: 10px;
- padding: 8px 18px;
- font-size: 0.85rem;
- font-weight: 700;
- background: ${props => props.theme.keyword}10;
- transition: all 0.2s ease;
- cursor: default;
-
- &:hover {
- background: ${props => props.theme.keyword}20;
- transform: translateY(-2px);
- box-shadow: 0 4px 8px ${props => props.theme.keyword}20;
- }
-`;
-
-export const MenuWrapper = styled.div`
- position: relative;
- display: flex;
- align-items: center;
- z-index: 10;
-`; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 81.81% | -27/33 | -90.9% | -20/22 | -71.42% | -5/7 | -81.81% | -27/33 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 | - - - - - - - - - - - - - -7x -7x - -7x -7x - -7x - - - - - - - - - -7x -7x -7x -7x -7x - -7x - -2x -2x -2x - - - - -2x - - -7x -2x -2x - -1x -1x -1x - - -1x -1x -1x - - -2x - - - - - - - - - - - - -7x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -10x - - - - - - - - - - - - - - - - - | import {useState, useEffect} from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { useForm, Controller } from 'react-hook-form';
-import Sidebar from '../../components/layout/Sidebar';
-import { PageWrapper, ContentWrapper } from '../Feed/styles';
-import * as S from '../../components/domain/CreationForm/styles';
-import TagInput from '../../components/domain/TagInput';
-import type { NotificationState } from '../../components/common/Toast';
-import { GetKeywords } from '../../API/Keywords';
-import Toast from '../../components/common/Toast';
-import type { CommunityProps } from '../../API/Community';
-import { NewCommunity, UpdateCommunity } from '../../API/Community';
-
-export default function CreateCommunity() {
- const navigate = useNavigate();
- const location = useLocation();
-
- const communityToEdit = location.state?.communityToEdit as CommunityProps | undefined;
- const isEditMode = !!communityToEdit;
-
- const { register, handleSubmit, control, watch } = useForm<CommunityProps>({
- // Preenche os valores iniciais com os dados da comunidade se estiver editando
- defaultValues: {
- communityID: communityToEdit?.communityID || "",
- name: communityToEdit?.name || "",
- description: communityToEdit?.description || "",
- technologies: communityToEdit?.technologies || []
- }
- });
-
- const descriptionValue = watch('description');
- const descriptionLength = descriptionValue ? descriptionValue.length : 0;
- const MAX_CHARS = 500;
- const [notification, setNotification] = useState<NotificationState | null>(null);
- const [keywords, setKeywords] = useState<string[]>([]);
-
- useEffect(() => {
- async function loadTechs() {
- try {
- const techsFromDB = await GetKeywords();
- setKeywords(techsFromDB);
- } catch (error) {
- console.error("Falha ao carregar tecnologias:", error);
- }
- }
- loadTechs();
- }, []);
-
- const onSubmit = (data: CommunityProps) => {
- try{
- if (isEditMode && communityToEdit) {
- // --- MODO EDIÇÃO ---
- console.log("Atualizando Comunidade:", communityToEdit.communityID, data);
- UpdateCommunity(communityToEdit.communityID, data);
- setNotification({ message: 'Comunidade atualizada com sucesso!', type: 'success' });
- } else {
- // --- MODO CRIAÇÃO ---
- console.log("Criando Comunidade:", data);
- NewCommunity(data);
- setNotification({ message: 'Comunidade criada com sucesso!', type: 'success' });
- }
-
- setTimeout(() => {
- navigate('/feed');
- }, 1000);
-
- } catch (error) {
- console.error('Erro ao criar comunidade:', error);
- if (error instanceof Error){
- setNotification({ message: error.message, type: 'error' });
- }
- }
-
- };
-
- return (
- <PageWrapper>
- <Sidebar />
-
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
-
- <ContentWrapper>
- <S.FormContainer onSubmit={handleSubmit(onSubmit)}>
-
- <h2>{isEditMode ? 'Editar Comunidade' : 'Criar Comunidade'}</h2>
-
- <S.InputGroup>
- <S.Label htmlFor="name">Nome da Comunidade</S.Label>
- <S.Input id="name" {...register('name', { required: true })} />
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="description">Descrição do Projeto</S.Label>
- <S.TextArea
- id="description"
- placeholder="Descreva sua comunidade..."
- maxLength={MAX_CHARS}
- {...register('description', {
- maxLength: {
- value: MAX_CHARS,
- message: `A descrição não pode exceder ${MAX_CHARS} caracteres`
- }
- })}
- />
- <S.CharacterCount>
- {descriptionLength} / {MAX_CHARS}
- </S.CharacterCount>
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="keywords">Palavras-chave</S.Label>
-
- <Controller
- name="technologies"
- control={control}
- render={({ field }) => (
- <TagInput
- value={field.value}
- onChange={field.onChange}
- searchList={keywords}
- limit={10}
- placeholder="Adicione até 10 palavras-chave..."
- />
- )}
- />
- </S.InputGroup>
-
- <S.SubmitButton type="submit">{isEditMode ? 'Salvar Alterações' : 'Criar Comunidade'}</S.SubmitButton>
-
- </S.FormContainer>
- </ContentWrapper>
- </PageWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 84.44% | -38/45 | -87.09% | -27/31 | -80% | -8/10 | -86.04% | -37/43 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 | - - - - - - - - - - - - - - - - - - - -13x -13x -13x - -13x - - -13x - -13x - -13x - - - -13x -13x -6x - -6x -6x - - -13x - - - - - - - - - - -13x -13x -13x -13x - - -13x - -4x -4x -4x - - - - -4x - - - -13x - -2x - - - - -2x -2x - -1x -1x -1x - - -1x -1x -1x - - - -2x - - - - - - - - - - - -13x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -15x - - - - - -2x - - - - - - - - - - - - -15x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { useState, useEffect } from 'react';
-import { useForm, Controller } from 'react-hook-form';
-import Sidebar from '../../components/layout/Sidebar';
-import { PageWrapper, ContentWrapper } from '../Feed/styles';
-import * as S from '../../components/domain/CreationForm/styles';
-import TagInput from '../../components/domain/TagInput';
-import { IMaskInput } from 'react-imask';
-import { NewProject, UpdateProject } from '../../API/Project';
-import type { ProjectProps } from '../../API/Project';
-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();
- const location = useLocation(); // Hook para ler o state
- const [keywords, setKeywords] = useState<string[]>([]);
-
- const { projectId: paramId } = useParams<{ projectId?: string }>();
-
- // Recupera o projeto do estado
- const projectToEdit = location.state?.projectToEdit as (ProjectProps & { id?: string; projectID?: string }) | undefined;
- // Define se é modo edição
- const isEditMode = !!projectToEdit;
-
- const validProjectId = projectToEdit?.id
- || projectToEdit?.projectID
- || (paramId !== 'undefined' ? paramId : undefined);
-
- const formatDateToString = (date?: Date | string) => {
- if (!date) return "";
- const d = new Date(date);
- // Verifica se é data válida
- Iif (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: {
- title: projectToEdit?.title || "",
- description: projectToEdit?.description || "",
- technologies: projectToEdit?.technologies || [],
- status: projectToEdit?.status || "",
- startDate: formatDateToString(projectToEdit?.startDate)
- }
- });
-
- const descriptionValue = watch('description');
- const descriptionLength = descriptionValue ? descriptionValue.length : 0;
- const MAX_CHARS = 2500;
- const [notification, setNotification] = useState<NotificationState | null>(null);
-
- // Carrega as tecnologias disponíveis do backend
- useEffect(() => {
- async function loadTechs() {
- try {
- const techsFromDB = await GetKeywords();
- setKeywords(techsFromDB);
- } catch (error) {
- console.error("Falha ao carregar tecnologias:", error);
- }
- }
- loadTechs();
- }, []);
-
- // Lida com CRIAR ou ATUALIZAR
- const onSubmit = (data: ProjectFormProps) => {
-
- const finalData: ProjectProps = {
- ...data,
- startDate: parseDate(data.startDate)
- };
-
- try {
- if (isEditMode && validProjectId) {
- // MODO DE EDIÇÃO
- console.log("Atualizando Projeto:", validProjectId, finalData);
- UpdateProject(validProjectId, finalData);
- setNotification({ message: 'Projeto atualizado com sucesso!', type: 'success' });
- } else {
- // MODO DE CRIAÇÃO
- console.log("Criando Projeto:", finalData);
- NewProject(finalData);
- setNotification({ message: 'Projeto criado com sucesso!', type: 'success' });
- }
-
- // Redireciona após o sucesso
- setTimeout(() => {
- navigate('/feed');
- }, 1000);
-
- } catch(error) {
- console.error('Erro ao salvar projeto:', error);
- if (error instanceof Error){
- setNotification({ message: error.message, type: 'error' });
- }
- }
- };
-
- return (
- <PageWrapper>
- <Sidebar />
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
-
- <ContentWrapper>
- <S.FormContainer onSubmit={handleSubmit(onSubmit)}>
-
- <h2>{isEditMode ? 'Editar Projeto' : 'Criar Projeto'}</h2>
-
- <S.InputGroup>
- <S.Label htmlFor="title">Nome do Projeto</S.Label>
- <S.Input id="title" {...register('title', { required: true })} />
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="description">Descrição do Projeto</S.Label>
- <S.TextArea
- id="description"
- placeholder="Descreva seu projeto..."
- maxLength={MAX_CHARS}
- {...register('description', {
- maxLength: {
- value: MAX_CHARS,
- message: `A descrição não pode exceder ${MAX_CHARS} caracteres`
- }
- })}
- />
- <S.CharacterCount>
- {descriptionLength} / {MAX_CHARS}
- </S.CharacterCount>
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="startDate">Data de Início</S.Label>
- <Controller
- name="startDate"
- control={control}
- render={({ field: { onChange, value } }) => (
- <S.Input
- as={IMaskInput}
- mask="00/00/0000"
- id="startDate"
- placeholder="DD/MM/AAAA"
- value={value}
- onAccept={(value: string) => onChange(value)}
- disabled={isEditMode}
- />
- )}
- />
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="technologies">Tecnologias (Palavras-chave)</S.Label>
- <Controller
- name="technologies"
- control={control}
- render={({ field }) => (
- <TagInput
- value={field.value}
- onChange={field.onChange}
- searchList={keywords}
- limit={6}
- placeholder="Adicione até 6 tecnologias..."
- />
- )}
- />
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="status">Status</S.Label>
- <S.SelectWrapper>
- <S.Select
- id="status"
- {...register('status', { required: true })}
- required
- >
- <option value="" disabled>Selecione um status...</option>
- <option value="em-andamento">Em andamento</option>
- <option value="pausado">Pausado</option>
- <option value="finalizado">Finalizado</option>
- </S.Select>
- </S.SelectWrapper>
- </S.InputGroup>
-
- {/* 10. Botão de submit dinâmico */}
- <S.SubmitButton type="submit">
- {isEditMode ? 'Atualizar Projeto' : 'Criar Projeto'}
- </S.SubmitButton>
-
- </S.FormContainer>
- </ContentWrapper>
- </PageWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 87.09% | -27/31 | -55.55% | -10/18 | -66.66% | -4/6 | -93.1% | -27/29 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 | - - - - - - - - - - - - -8x -8x -8x - - -8x -3x -3x -3x -3x - - -8x - - -8x -3x -3x -3x -3x -3x -3x - - - -8x -2x -2x -2x - -1x - -1x - - -1x - - - - -1x -1x -1x - - - - -8x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { useState, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import Sidebar from '../../components/layout/Sidebar';
-import { PageWrapper, ContentWrapper } from '../Feed/styles';
-import * as S from '../../components/domain/CreationForm/styles';
-import Toast from '../../components/common/Toast';
-import type { NotificationState } from '../../components/common/Toast';
-import { useAuth } from '../../API/AuthContext';
-import { UpdateProfile } from '../../API/User';
-import type { UserProfileData } from '../../API/User';
-
-export default function EditProfile() {
- const { currentUser, updateUser } = useAuth();
- const navigate = useNavigate();
- const [notification, setNotification] = useState<NotificationState | null>(null);
-
- // Formata a data para o input (YYYY-MM-DD)
-const formatDateForInput = (dateString?: string) => {
- Iif (!dateString) return "";
- const date = new Date(dateString);
- Iif (isNaN(date.getTime())) return "";
- return date.toISOString().split('T')[0];
-};
-
- const { register, handleSubmit, setValue } = useForm<UserProfileData>();
-
- // Preenche o formulário com os dados atuais
- useEffect(() => {
- Eif (currentUser) {
- setValue('nomeCompleto', currentUser.nomeCompleto || '');
- setValue('username', currentUser.username || '');
- setValue('email', currentUser.email || '');
- setValue('telefone', (currentUser as any).phone || '');
- setValue('dataNascimento', formatDateForInput((currentUser as any).birthDate));
- }
- }, [currentUser, setValue]);
-
- const onSubmit = async (data: UserProfileData) => {
- try {
- console.log("Atualizando perfil:", data);
- await UpdateProfile(data);
-
- setNotification({ message: 'Perfil atualizado com sucesso!', type: 'success' });
-
- updateUser(data);
-
- // Redireciona
- setTimeout(() => {
- navigate('/profile');
- }, 1000);
-
- } catch (error) {
- console.error(error);
- Eif (error instanceof Error) {
- setNotification({ message: error.message, type: 'error' });
- }
- }
- };
-
- return (
- <PageWrapper>
- <Sidebar />
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
-
- <ContentWrapper>
- <S.FormContainer onSubmit={handleSubmit(onSubmit)}>
- <h2>Editar Perfil</h2>
-
- <S.InputGroup>
- <S.Label htmlFor="nomeCompleto">Nome Completo</S.Label>
- <S.Input
- id="nomeCompleto"
- {...register('nomeCompleto', { required: true })}
- />
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="username">Nome de Usuário</S.Label>
- <S.Input
- id="username"
- {...register('username', { required: true })}
- />
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="email">Email</S.Label>
- <S.Input
- id="email"
- type="email"
- {...register('email', { required: true })}
- />
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="telefone">Telefone</S.Label>
- <S.Input
- id="telefone"
- {...register('telefone')}
- />
- </S.InputGroup>
-
- <S.InputGroup>
- <S.Label htmlFor="dataNascimento">Data de Nascimento</S.Label>
- <S.Input
- id="dataNascimento"
- type="date"
- {...register('dataNascimento')}
- />
- </S.InputGroup>
-
- <S.SubmitButton type="submit">
- Salvar Alterações
- </S.SubmitButton>
-
- </S.FormContainer>
- </ContentWrapper>
- </PageWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 | - - - - - - - - - - - - - -18x -18x -18x -18x -18x - -18x - -6x -6x -6x -5x - -1x -1x -1x - - -6x - - -6x - - -18x -1x -1x - - -18x -1x -1x - - -18x - - - - - - - - - -2x - - - - - - - - - - - - -2x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import Modal from '../../components/common/Modal';
-import Postcard from '../../components/domain/Postcard';
-import Header from '../../components/layout/Header';
-import Sidebar from '../../components/layout/Sidebar';
-import * as S from './styles';
-import * as ModalS from '../../components/common/Modal/styles';
-import { GetFeedProjects } from '../../API/Project';
-import type { ProjectProps } from '../../API/Project';
-import Toast from '../../components/common/Toast';
-import type { NotificationState } from '../../components/common/Toast';
-
-export default function Feed() {
- const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
- const [isLoading, setIsLoading] = useState(true);
- const navigate = useNavigate();
- const [posts, setPosts] = useState<ProjectProps[]>([]);
- const [notification, setNotification] = useState<NotificationState | null>(null);
-
- useEffect(() => {
- async function loadFeed() {
- setIsLoading(true);
- try {
- const feedData = await GetFeedProjects();
- setPosts(feedData || []);
- } catch (error) {
- console.error("Erro ao carregar feed:", error);
- Eif (error instanceof Error) {
- setNotification({ message: "Não foi possível carregar o feed.", type: 'error' });
- }
- } finally {
- setIsLoading(false);
- }
- }
- loadFeed();
- }, []);
-
- const handleCreateProject = () => {
- setIsCreateModalOpen(false);
- navigate('/createProject');
- };
-
- const handleCreateCommunity = () => {
- setIsCreateModalOpen(false);
- navigate('/createCommunity');
- };
-
- return (
- <S.PageWrapper>
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
-
- <Header onCreateClick={() => setIsCreateModalOpen(true)}/>
- <Sidebar />
-
- <S.ContentWrapper>
- <S.FeedContainer>
- <S.PostList>
- {isLoading ? (
- <S.LoadingContainer>
- <div className="spinner"></div>
- <p>Carregando feed...</p>
- </S.LoadingContainer>
- ) : posts.length > 0 ? (
- posts.map((post, index) => (
- <Postcard
- key={(post as unknown as ProjectProps).id || (post as any).projectID || index}
- post={post}
- showMenu={false}
- />
- ))
- ) : (
- <S.EmptyFeedMessage>
- <svg
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- strokeWidth="2"
- strokeLinecap="round"
- strokeLinejoin="round"
- >
- <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
- <line x1="9" y1="9" x2="15" y2="15"/>
- <line x1="15" y1="9" x2="9" y2="15"/>
- </svg>
- <h3>Nenhum post encontrado</h3>
- <p style={{ color: '#ccc', textAlign: 'center', marginTop: '20px' }}>
- Nenhum post encontrado. Entre em comunidades para ver atualizações!
- </p>
- </S.EmptyFeedMessage>
- )}
- </S.PostList>
- </S.FeedContainer>
- </S.ContentWrapper>
-
- <Modal
- isOpen={isCreateModalOpen}
- onClose={() => setIsCreateModalOpen(false)}
- title="O que você deseja criar?"
- >
- <ModalS.ModalActions>
- <ModalS.ChoiceButton onClick={handleCreateProject}>
- Criar Projeto
- </ModalS.ChoiceButton>
- <ModalS.ChoiceButton onClick={handleCreateCommunity}>
- Criar Comunidade
- </ModalS.ChoiceButton>
- </ModalS.ModalActions>
- </Modal>
- </S.PageWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 | - - -4x -44x - - - - - - - - - - -44x -44x - - - - - - -4x - - - - - - - - - - - - - - - - - - - - - - - - - - -4x - - - -16x - - - - - - -16x - - - - - - - - - - - - - - - - - - - - - - - - -16x - - - - - - - - - -4x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -4x - - -5x - - - - - - - - - - - - - -5x - - - - - - -5x - - - - - - - - -4x - - - - - - - - - - - - - - - - - - - - - - - -4x - - - - - - - - - - -10x -10x - - - - - - - - - -10x - - - | import styled from 'styled-components';
-
-// Wrapper para a página inteira
-export const PageWrapper = styled.div`
- background: linear-gradient(135deg, ${props => props.theme['gray-100']} 0%, ${props => props.theme['gray-100']}f0 100%);
- min-height: 100vh;
- position: relative;
-
- &::before {
- content: '';
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: radial-gradient(circle at 20% 50%, ${props => props.theme.keyword}08 0%, transparent 50%),
- radial-gradient(circle at 80% 80%, ${props => props.theme.button}08 0%, transparent 50%);
- pointer-events: none;
- z-index: 0;
- }
-`;
-
-// Wrapper para o conteúdo principal
-export const ContentWrapper = styled.main`
- margin-left: 250px;
- margin-top: 60px;
- padding: 32px 24px;
- box-sizing: border-box;
- position: relative;
- z-index: 1;
- animation: fadeIn 0.5s ease-out;
-
- @keyframes fadeIn {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-
- @media (max-width: 768px) {
- margin-left: 0;
- padding: 20px 16px;
- }
-`;
-
-// Container principal do feed com posts
-export const FeedContainer = styled.main`
- width: 100%;
- max-width: 800px;
- margin: 0 auto;
- background: ${props => props.theme.background};
- backdrop-filter: blur(10px);
- border-radius: 20px;
- padding: 28px;
- box-sizing: border-box;
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
- 0 2px 8px rgba(0, 0, 0, 0.08),
- 0 0 0 1px ${props => props.theme.placeholder}15;
- position: relative;
- transition: all 0.3s ease;
-
- &::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- height: 3px;
-
- background-size: 200% 100%;
- border-radius: 20px 20px 0 0;
- animation: gradientShift 3s ease infinite;
- }
-
- @keyframes gradientShift {
- 0%, 100% { background-position: 0% 50%; }
- 50% { background-position: 100% 50%; }
- }
-
- &:hover {
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15),
- 0 4px 12px rgba(0, 0, 0, 0.1),
- 0 0 0 1px ${props => props.theme.placeholder}25;
- }
-
- @media (max-width: 768px) {
- padding: 20px;
- border-radius: 16px;
- }
-`;
-
-// Lista que agrupa os posts
-export const PostList = styled.div`
- display: flex;
- flex-direction: column;
- gap: 20px;
- position: relative;
-
- /* Animação de entrada para cada post */
- & > * {
- animation: slideInUp 0.4s ease-out backwards;
- }
-
- & > *:nth-child(1) { animation-delay: 0.05s; }
- & > *:nth-child(2) { animation-delay: 0.1s; }
- & > *:nth-child(3) { animation-delay: 0.15s; }
- & > *:nth-child(4) { animation-delay: 0.2s; }
- & > *:nth-child(5) { animation-delay: 0.25s; }
-
- @keyframes slideInUp {
- from {
- opacity: 0;
- transform: translateY(20px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-`;
-
-// Mensagem de feed vazio
-export const EmptyFeedMessage = styled.div`
- text-align: center;
- padding: 60px 24px;
- color: ${props => props.theme.placeholder};
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 16px;
-
- svg {
- width: 80px;
- height: 80px;
- opacity: 0.5;
- margin-bottom: 8px;
- }
-
- h3 {
- color: ${props => props.theme.subtitle};
- font-size: 1.3rem;
- font-weight: 600;
- margin: 0 0 8px 0;
- }
-
- p {
- color: ${props => props.theme.placeholder};
- font-size: 0.95rem;
- line-height: 1.5;
- max-width: 400px;
- margin: 0;
- }
-`;
-
-// Header do feed
-export const FeedHeader = styled.div`
- margin-bottom: 24px;
- padding-bottom: 20px;
- border-bottom: 1px solid ${props => props.theme.placeholder}20;
-
- h1 {
- color: ${props => props.theme.white};
- font-size: 1.8rem;
- font-weight: 700;
- margin: 0 0 8px 0;
- background: linear-gradient(135deg, ${props => props.theme.white}, ${props => props.theme.subtitle});
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- }
-
- p {
- color: ${props => props.theme.placeholder};
- font-size: 0.9rem;
- margin: 0;
- }
-`;
-
-// Container para loading state
-export const LoadingContainer = styled.div`
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 60px 24px;
- gap: 16px;
-
- .spinner {
- width: 40px;
- height: 40px;
- border: 3px solid ${props => props.theme.placeholder}30;
- border-top-color: ${props => props.theme.keyword};
- border-radius: 50%;
- animation: spin 0.8s linear infinite;
- }
-
- @keyframes spin {
- to { transform: rotate(360deg); }
- }
-
- p {
- color: ${props => props.theme.placeholder};
- font-size: 0.9rem;
- }
-`; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -1/1 | -100% | -1/1 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 | - - - -1x - - - - - - - - - | import HeaderHome from '../../components/layout/HeaderHome';
-import * as S from './styles';
-
-export default function Home() {
- return (
- <S.HomePageContainer>
- <HeaderHome />
- <S.ContentWrapper>
- <S.SiteTitle>CTable</S.SiteTitle>
- <S.Tagline>Descubra, compartilhe, aprenda, converse: um novo mundo se abre para os amantes de computação.</S.Tagline>
- </S.ContentWrapper>
- </S.HomePageContainer>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 87.5% | -14/16 | -75% | -3/4 | -50% | -2/4 | -87.5% | -14/16 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 | - - - - - - - - - - - - - - - - - -10x -10x - -10x -10x - - -2x -2x -2x - -1x - - -1x - -1x - - - - -1x - - -1x -1x - - - - -10x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import {useState} from 'react';
-import {
- FormPageContainer,
- FormWrapper,
- FormTitle,
- StyledForm,
- StyledInput,
- SubmitButton,
- RedirectLink
-} from '../../components/domain/Form/styles';
-import { useForm} from 'react-hook-form';
-import Toast from '../../components/common/Toast';
-import { useNavigate } from 'react-router-dom';
-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);
-
- console.log('Usuário registrado com sucesso');
-
- // Define estado para mostrar notificação de sucesso
- setNotification({ message: 'Usuário registrado com sucesso!', type: 'success' });
-
- setTimeout(() => {
- navigate('/feed'); // Navega para a página de feed
- }, 1000);
-
- } catch (error) {
- console.error('Erro ao registrar usuário:', error);
-
- // Define estado para mostrar notificação de erro
- Eif (error instanceof Error){
- setNotification({ message: error.message, type: 'error' });
- }
- }
- }
-
- return (
- <FormPageContainer>
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
- <FormWrapper>
- <FormTitle>Login</FormTitle>
-
- <StyledForm onSubmit={handleSubmit(onSubmit)}>
- <StyledInput
- type="text"
- placeholder="Email ou usuário"
- required
- {...register('username')}
- />
- <StyledInput
- type="password"
- placeholder="Senha"
- required
- {...register('senha')}
- />
-
- <SubmitButton disabled = {isSubmitting} type="submit">Entrar</SubmitButton>
- </StyledForm>
-
- <RedirectLink>
- Não tem uma conta? <a href="/register">Cadastre-se</a>
- </RedirectLink>
- </FormWrapper>
- </FormPageContainer>
- );
-}
-
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 | - - - - - - - - - - - - - - - - -1x -40x - - - - -1x -40x - - - -1x -40x - - - - - - - - -42x -42x -42x -42x - -42x - - -42x -42x - -42x -42x -42x - -42x - -40x -40x -40x - -40x -40x - -39x - -39x -39x - - -1x - - - -40x -40x - - - -42x - -1x -1x - - -25x -7x - -25x -25x - - - -42x -1x -1x - - -42x -1x - - -1x -1x - - - -42x -1x -1x - - -42x - -3x -3x - -3x -3x -1x - -1x - -1x - - - - - -2x -2x -1x -1x -1x - -1x - -1x - -3x -3x - - - - -42x -42x -37x -35x - - -2x -2x - - - - - -5x - -5x -2x - - - - - - - - - - - - - -1x - - - - - - - - -42x - - - - - - - - - - - - - - - - - - - - - - - - - - -2x - - - - - -7x - - - - - - - - - - - -4x -4x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - | import { useState, useRef, useEffect } from 'react';
-import Sidebar from '../../components/layout/Sidebar';
-import Postcard from '../../components/domain/Postcard';
-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';
-import { GetUserProjects } from '../../API/Project';
-import { GetUserComments, DeleteComment } from '../../API/Comment';
-import { useAuth } from '../../API/AuthContext';
-import { useNavigate } from 'react-router-dom';
-import { DeleteProfile } from '../../API/User';
-import Toast from '../../components/common/Toast';
-import Modal from '../../components/common/Modal';
-import * as ModalS from '../../components/common/Modal/styles';
-
-// --- ÍCONES ---
-const PostsIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
- <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
- <polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" /><line x1="10" y1="9" x2="8" y2="9" />
- </svg>
-);
-const CommentsIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
- <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
- </svg>
-);
-const SettingsIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
- <circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" />
- </svg>
-);
-// -----------------------
-
-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);
-
- const navigate = useNavigate();
-
- // Estados para os dados da API
- const [userPosts, setUserPosts] = useState<ProjectProps[]>([]);
- const [userComments, setUserComments] = useState<CommentProps[]>([]);
-
- const [isDeleting, setIsDeleting] = useState(false);
- const [isDeleteProfileModalOpen, setIsDeleteProfileModalOpen] = useState(false);
- const [notification, setNotification] = useState<{message: string, type: 'success' | 'error'} | null>(null);
-
- useEffect(() => {
- // Função assíncrona para buscar todos os dados
- console.log("Efeito de busca de dados do perfil disparado.");
- const fetchProfileData = async () => {
- try {;
-
- console.log("Usuário atual no Profile:", currentUser);
- const apiUserPosts = await GetUserProjects();
-
- const apiUserComments: CommentProps[] = await GetUserComments();
-
- setUserPosts(apiUserPosts);
- setUserComments(apiUserComments);
-
- } catch (error) {
- console.error("Falha ao buscar dados do perfil:", error);
- }
-
- };
- Eif(currentUser)
- fetchProfileData();
- }, [currentUser]);
-
- // Lógica para fechar o menu ao clicar fora
- useEffect(() => {
- function handleClickOutside(event: MouseEvent) {
- Eif (menuRef.current && !menuRef.current.contains(event.target as Node)) {
- setIsMenuOpen(false);
- }
- }
- if (isMenuOpen) {
- document.addEventListener('mousedown', handleClickOutside);
- }
- return () => {
- document.removeEventListener('mousedown', handleClickOutside);
- };
- }, [isMenuOpen]);
-
- const handleLogout = () => {
- logout(); // Limpa o estado e o localStorage
- navigate('/login'); // Redireciona para a tela de login
- };
-
- const handleDeleteComment = async (commentId: string) => {
- await DeleteComment(commentId);
-
- // Remove o comentário deletado do estado local para sumir da tela instantaneamente
- setUserComments((prevComments) =>
- prevComments.filter(comment => comment.commentID !== commentId)
- );
- };
-
- const handleEditProfile = () => {
- setIsMenuOpen(false);
- navigate('/editProfile');
- };
-
- const handleDeleteProfile = async () => {
-
- Iif (isDeleting) return;
- setIsDeleting(true);
-
- try {
- await DeleteProfile();
- setNotification({ message: "Perfil excluído com sucesso. Até logo!", type: 'success' });
-
- setIsDeleteProfileModalOpen(false);
-
- setTimeout(() => {
- logout(); // Desloga o usuário e limpa o storage
- navigate('/login'); // Manda para login
- }, 2000);
-
- } catch (error) {
- Eif (error instanceof Error) {
- if (error.message.includes("não encontrado") || error.message.includes("not found")) {
- setNotification({ message: "Conta já encerrada. Redirecionando...", type: 'success' });
- setTimeout(() => { logout(); navigate('/login'); }, 2000);
- return;
- }
- setNotification({ message: error.message, type: 'error' });
- }
- setIsDeleteProfileModalOpen(false);
- } finally {
- setIsDeleting(false);
- setIsDeleteProfileModalOpen(false);
- }
- };
-
- // Função para renderizar o feed (posts ou comentários)
- const renderFeed = () => {
- if (view === 'posts') {
- 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>
- ));
- }
-
- Eif (view === 'comments') {
- // Mapeia 'userComments'
- return userComments.map(comment => (
- <S.PostContainer key={comment.commentID || Math.random()}>
- <Postcard
- post={{
- id: comment.commentID,
- title: `Comentou em: ${comment.projectTitle || 'Projeto'}`,
- description: comment.content,
- technologies: [],
- status: '',
- startDate: comment.createdAt,
- // Passa o usuário atual como autor para o cabeçalho do card
- author: { title: currentUser?.username || 'Você' }
- } as unknown as ProjectProps}
- showMenu={true}
- deleteLabel="Comentário"
- onDelete={() => handleDeleteComment(comment.commentID!)}
- />
- </S.PostContainer>
- ));
- }
-
- return null;
- };
-
- return (
- <S.PageWrapper>
- <Sidebar />
-
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
-
- <S.ContentWrapper>
-
- <S.ProfileHeader>
- <S.ActionsWrapper ref={menuRef}>
- <S.ProfileActions>
- <S.IconButton
- title="Ver publicações"
- $active={view === 'posts'}
- onClick={() => setView('posts')}
- >
- <PostsIcon />
- </S.IconButton>
- <S.IconButton
- title="Ver comentários"
- $active={view === 'comments'}
- onClick={() => setView('comments')}
- >
- <CommentsIcon />
- </S.IconButton>
- <S.IconButton
- title="Configurações"
- onClick={() => setIsMenuOpen(prev => !prev)}
- >
- <SettingsIcon />
- </S.IconButton>
- </S.ProfileActions>
-
- {isMenuOpen && (
- <D.DropdownMenu>
- <D.MenuItem onClick={handleEditProfile}>Editar Perfil</D.MenuItem>
- <D.MenuItem onClick={handleLogout}>Sair</D.MenuItem>
- <D.Separator />
- <D.DangerMenuItem onClick={() => {
- setIsMenuOpen(false);
- setIsDeleteProfileModalOpen(true);
- }}>
- Excluir Perfil
- </D.DangerMenuItem>
- </D.DropdownMenu>
- )}
-
- </S.ActionsWrapper>
- </S.ProfileHeader>
-
- <S.ProfileInfo>
- <S.ProfileAvatar
- style={{
- backgroundImage: undefined
- }}
- />
- <S.Username>{currentUser?.username || 'Carregando...'}</S.Username>
- </S.ProfileInfo>
-
- <S.PostList>
- {renderFeed()}
- </S.PostList>
-
- </S.ContentWrapper>
-
- <Modal
- isOpen={isDeleteProfileModalOpen}
- onClose={() => !isDeleting && setIsDeleteProfileModalOpen(false)}
- title="Excluir Conta"
- >
- <div style={{ textAlign: 'center' }}>
- <p style={{ marginBottom: '24px', color: '#555' }}>
- Tem certeza que deseja excluir sua conta? <br/>
- <strong>Todos os seus projetos, comunidades e comentários serão apagados permanentemente.</strong>
- </p>
- <ModalS.ModalActions>
- <ModalS.ChoiceButton
- onClick={() => setIsDeleteProfileModalOpen(false)}
- disabled={isDeleting}>
- Cancelar
- </ModalS.ChoiceButton>
- <ModalS.ChoiceButton
- onClick={handleDeleteProfile}
- style={{ backgroundColor: '#e74c3c' }}
- disabled={isDeleting}
- >
- {isDeleting ? 'Excluindo...' : 'Excluir Conta'}
- </ModalS.ChoiceButton>
- </ModalS.ModalActions>
- </div>
- </Modal>
-
- </S.PageWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 | - - -1x -40x - - - - -1x - - - - - - -1x - - - - -3x - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - -1x -40x - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - -40x -40x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - -40x - - -40x - - - - - - - - - - - - - - - -40x - - - - - -1x - - - - - - - - - - - - - - - -1x - - - - - - - - - - - -120x - - -120x - - - -120x - - - - - - - - - - - - - - -120x - - - - - - - - - - - - - -120x - - -120x - - - - - - - - - - - - - - - - - -120x - - - - -1x - - - | import styled from 'styled-components';
-
-// Wrapper para a página inteira
-export const PageWrapper = styled.div`
- background: linear-gradient(135deg, ${props => props.theme['gray-100']} 0%, ${props => props.theme['gray-100'] || props.theme['gray-100']} 100%);
- min-height: 100vh;
-`;
-
-// Wrapper para o conteúdo principal
-export const ContentWrapper = styled.main`
- margin-left: 250px;
- box-sizing: border-box;
- padding-bottom: 60px;
-`;
-
-// Container principal com posts
-export const PostContainer = styled.main`
- width: 100%;
- max-width: 800px;
- margin: 0 auto;
-
- background-color: ${props => props.theme.background};
- border-radius: 16px;
- padding: 24px;
- box-sizing: border-box;
-
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04),
- 0 1px 2px rgba(0, 0, 0, 0.06);
-
- transition: all 0.3s ease;
-
- &:hover {
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08),
- 0 2px 4px rgba(0, 0, 0, 0.06);
- transform: translateY(-2px);
- }
-`;
-
-// Lista que agrupa os posts do perfil
-export const PostList = styled.div`
- display: flex;
- flex-direction: column;
- gap: 20px;
- padding: 32px 24px;
-
- animation: fadeIn 0.4s ease-out;
-
- @keyframes fadeIn {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-`;
-
-// Cabeçalho do perfil
-export const ProfileHeader = styled.header`
- background: linear-gradient(135deg, ${props => props.theme.button} 0%, ${props => props.theme['hover-button'] || props.theme.button} 100%);
- height: 160px;
- position: relative;
- z-index: 0;
-
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-
- /* Padrão decorativo sutil */
- &::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-image:
- radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
- radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
- pointer-events: none;
- }
-
- /* Posiciona os botões de ação */
- display: flex;
- justify-content: flex-end;
- align-items: flex-end;
- padding: 20px 32px;
-`;
-
-// Container da foto + nome
-export const ProfileInfo = styled.div`
- display: flex;
- align-items: flex-end;
- gap: 20px;
-
- margin-top: -70px;
- margin-left: 32px;
- padding-bottom: 24px;
- position: relative;
- z-index: 1;
- pointer-events: none;
-
- animation: slideUp 0.5s ease-out;
-
- @keyframes slideUp {
- from {
- opacity: 0;
- transform: translateY(20px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-
- /* Reativa pointer-events apenas nos elementos internos */
- > * {
- pointer-events: auto;
- }
-`;
-
-// A foto de perfil circular
-export const ProfileAvatar = styled.div`
- width: 120px;
- height: 120px;
- border-radius: 50%;
- background: linear-gradient(135deg, ${props => props.theme.sidebar} 0%, ${props => props.theme.button} 100%);
- border: 5px solid ${props => props.theme.background};
- background-size: cover;
- background-position: center;
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15),
- 0 2px 8px rgba(0, 0, 0, 0.1);
-
- position: relative;
- flex-shrink: 0;
-
- /* Efeito de brilho sutil */
- &::after {
- content: '';
- position: absolute;
- top: 10%;
- left: 10%;
- width: 40%;
- height: 40%;
- background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
- border-radius: 50%;
- }
-
- transition: transform 0.3s ease, box-shadow 0.3s ease;
-
- &:hover {
- transform: scale(1.05);
- box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2),
- 0 4px 12px rgba(0, 0, 0, 0.15);
- }
-`;
-
-// O nome do usuário
-export const Username = styled.h1`
- font-size: 2.5em;
- font-weight: 700;
- color: ${props => props.theme.title};
- margin: 0 0 10px 0; /* Margem inferior para alinhar com a base do avatar */
-
- background: linear-gradient(135deg, ${props => props.theme.title} 0%, ${props => props.theme.subtitle} 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-
- text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-
- position: relative;
-
- &::after {
- content: '';
- position: absolute;
- bottom: -8px;
- left: 0;
- width: 60px;
- height: 4px;
- background: linear-gradient(90deg, ${props => props.theme.button} 0%, transparent 100%);
- border-radius: 2px;
- }
-`;
-
-// Container dos 3 botões de ação (dentro do banner)
-export const ProfileActions = styled.div`
- display: flex;
- align-items: center;
- gap: 12px;
- position: relative;
- z-index: 3;
-
- /* Backdrop blur para destacar os botões */
- background: rgba(255, 255, 255, 0.1);
- backdrop-filter: blur(10px);
- padding: 8px;
- border-radius: 50px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-`;
-
-// Botão de ícone
-export const IconButton = styled.button<{ $active?: boolean }>`
- display: flex;
- align-items: center;
- justify-content: center;
- width: 48px;
- height: 48px;
- border-radius: 50%;
- border: none;
- cursor: pointer;
- position: relative;
- overflow: hidden;
-
- background-color: ${props => props.$active
- ? props.theme['hover-button'] || props.theme.button
- : props.theme.background};
- color: ${props => props.$active
- ? '#FFFFFF'
- : props.theme.button};
-
- box-shadow: ${props => props.$active
- ? '0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.1)'
- : '0 2px 8px rgba(0, 0, 0, 0.08)'};
-
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
- /* Efeito ripple */
- &::before {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- width: 0;
- height: 0;
- border-radius: 50%;
- background: ${props => props.$active
- ? 'rgba(255, 255, 255, 0.3)'
- : 'rgba(0, 0, 0, 0.1)'};
- transform: translate(-50%, -50%);
- transition: width 0.6s, height 0.6s;
- }
-
- &:hover::before {
- width: 100%;
- height: 100%;
- }
-
- &:hover {
- transform: translateY(-3px) scale(1.05);
- box-shadow: ${props => props.$active
- ? '0 6px 20px rgba(0, 0, 0, 0.2)'
- : '0 4px 16px rgba(0, 0, 0, 0.12)'};
- background-color: ${props => props.$active
- ? props.theme['hover-button'] || props.theme.button
- : props.theme['gray-500'] || props.theme.background};
- }
-
- &:active {
- transform: translateY(-1px) scale(1.02);
- }
-
- svg {
- width: 22px;
- height: 22px;
- position: relative;
- z-index: 1;
- transition: transform 0.2s ease;
- }
-
- &:hover svg {
- transform: ${props => props.$active ? 'rotate(5deg)' : 'scale(1.1)'};
- }
-`;
-
-// Menus de ações flutuantes
-export const ActionsWrapper = styled.div`
- position: relative;
- z-index: 5; /* Aumentado para ficar acima de tudo */
-`; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 90% | -18/20 | -75% | -6/8 | -100% | -4/4 | -94.11% | -16/17 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 | - - - - - - - - -4x -4x -4x - -4x - -2x -2x -2x -2x -2x - - - -2x - - -2x - - -4x -2x - - -1x - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -2x - - - - - - - - - - - | import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import Sidebar from '../../components/layout/Sidebar';
-import * as S from './styles';
-import { GetProjectById } from '../../API/Project';
-import type { ProjectProps } from '../../API/Project';
-import { FiCalendar, FiUser } from 'react-icons/fi';
-
-export default function ProjectPage() {
- const { projectId } = useParams<{ projectId: string }>();
- const [project, setProject] = useState<ProjectProps | null>(null);
- const [loading, setLoading] = useState(true);
-
- useEffect(() => {
- async function loadData() {
- Iif (!projectId) return;
- try {
- setLoading(true);
- const data = await GetProjectById(projectId);
- setProject(data);
- } catch (error) {
- console.error("Erro ao carregar projeto:", error);
- } finally {
- setLoading(false);
- }
- }
- loadData();
- }, [projectId]);
-
- if (loading) return <div>Carregando...</div>;
- if (!project) return <div>Projeto não encontrado</div>;
-
- // Formata data
- const startDate = new Date(project.startDate).toLocaleDateString('pt-BR');
-
- return (
- <S.PageWrapper>
- <Sidebar />
-
- <S.MainContent>
- <S.Banner />
-
- <S.HeaderContainer>
- {/* Ícone com a inicial do projeto */}
- <S.ProjectIcon>
- {project.title.charAt(0).toUpperCase()}
- </S.ProjectIcon>
-
- <S.HeaderInfo>
- <h1>{project.title}</h1>
- <span>
- <FiUser style={{ marginRight: 5, verticalAlign: 'middle' }}/>
- Criado por <strong>{project.authorUsername || project.authorName}</strong>
- </span>
- </S.HeaderInfo>
- </S.HeaderContainer>
-
- <S.ContentGrid>
-
- {/* Coluna Principal: Descrição */}
- <S.MainColumn>
- <h2>Sobre o Projeto</h2>
- <S.DescriptionBox>
- {project.description}
- </S.DescriptionBox>
-
- </S.MainColumn>
-
- <S.InfoSidebar>
- <h3>Status</h3>
- <S.StatusBadge status={project.status}>
- {project.status.replace('-', ' ')}
- </S.StatusBadge>
-
- <h3>Início</h3>
- <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#555' }}>
- <FiCalendar />
- <span>{startDate}</span>
- </div>
-
- <h3>Tecnologias</h3>
- <S.KeywordsContainer>
- {project.technologies?.map((tech) => (
- <S.KeywordTag key={tech}>
- {tech}
- </S.KeywordTag>
- ))}
- </S.KeywordsContainer>
- </S.InfoSidebar>
-
- </S.ContentGrid>
- </S.MainContent>
- </S.PageWrapper>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | -
-
- |
- 87.5% | -14/16 | -75% | -3/4 | -60% | -3/5 | -87.5% | -14/16 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 | - - - - - - - - - - - -8x - - -8x -8x - - -2x -2x -2x - -1x - - -1x -1x - - - - -1x - - -1x -1x - - - - -8x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -10x - - - - - - - - - - - - - - - - - - - - - | import { useState } from 'react';
-import { FormPageContainer, FormWrapper, FormTitle, StyledForm, StyledInput, SubmitButton, RedirectLink } from '../../components/domain/Form/styles';
-import { useForm, Controller} from 'react-hook-form';
-import { IMaskInput } from 'react-imask';
-import Toast from '../../components/common/Toast';
-import { useNavigate } from 'react-router-dom';
-import {Register as RegisterAPI} from '../../API/Auth'
-import type { RegisterProps } from '../../API/Auth';
-import type { NotificationState } from '../../components/common/Toast';
-
-export default function Register() {
- // Estado para a notificação - usado no Toast
- const [notification, setNotification] = useState<NotificationState | null>(null);
-
-
- const { register, handleSubmit, formState: {isSubmitting}, control } = useForm<RegisterProps>();
- const navigate = useNavigate();
-
- async function onSubmit(data: RegisterProps) {
- console.log(data);
- try{
- await RegisterAPI(data);
-
- console.log('Usuário registrado com sucesso:');
-
- // Define estado para mostrar notificação de sucesso
- setNotification({ message: 'Usuário registrado com sucesso!', type: 'success' });
- setTimeout(() => {
- navigate('/feed'); // Navega para a página de feed
- }, 1000);
-
- } catch (error) {
- console.error('Erro ao registrar usuário:', error);
-
- // Define estado para mostrar notificação de erro
- Eif (error instanceof Error){
- setNotification({ message: error.message, type: 'error' });
- }
- }
- }
-
- return (
- <FormPageContainer>
-
- {notification && (
- <Toast
- message={notification.message}
- type={notification.type}
- onClose={() => setNotification(null)}
- />
- )}
-
- <FormWrapper>
- <FormTitle>Criar conta</FormTitle>
-
- <StyledForm onSubmit={handleSubmit(onSubmit)}>
- <StyledInput
- type="text"
- placeholder="Nome completo"
- required
- {...register('nomeCompleto')}
- />
- <StyledInput
- type="text"
- placeholder="Nome de usuário (user)"
- required
- {...register('username')}
- />
- <StyledInput
- type="email"
- placeholder="Email"
- required
- {...register('email')}
- />
- <StyledInput
- type="password"
- placeholder="Senha"
- required
- {...register('senha')}
- />
- <StyledInput
- type="tel"
- placeholder="Telefone"
- required
- {...register('telefone')}
- />
- <Controller
- name="dataNascimento"
- control={control}
- rules={{ required: true }}
- render={({ field }) => (
- <StyledInput
- {...field}
- as={IMaskInput}
- mask="00/00/0000"
- placeholder="Data de nascimento"
- required
- />
- )}
- />
-
- <SubmitButton disabled = {isSubmitting} type="submit">Cadastrar</SubmitButton>
- </StyledForm>
-
- <RedirectLink>
- Já tem uma conta? <a href="/login">Faça login</a>
- </RedirectLink>
- </FormWrapper>
- </FormPageContainer>
- );
-}
-
- |