From c06f108d6e51e93dc5c7770d3040dece718eca4c Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Sat, 21 Jun 2025 14:50:28 +0000 Subject: [PATCH] Refactor: Split CreateGroupForm.tsx Refactors CreateGroupForm.tsx into smaller, more manageable components and hooks to improve code organization and readability. This includes creating new files for specific functionalities and logic, enhancing maintainability. --- .../whatsappGroups/CreateGroupForm.tsx | 286 ++---------------- .../whatsappGroups/GroupCreationForm.tsx | 91 ++++++ .../whatsappGroups/LoadingState.tsx | 20 ++ .../whatsappGroups/NoInstanceState.tsx | 49 +++ src/hooks/whatsappGroups/useGroupCreation.ts | 106 +++++++ .../useWhatsAppInstanceVerification.ts | 72 +++++ 6 files changed, 357 insertions(+), 267 deletions(-) create mode 100644 src/components/whatsappGroups/GroupCreationForm.tsx create mode 100644 src/components/whatsappGroups/LoadingState.tsx create mode 100644 src/components/whatsappGroups/NoInstanceState.tsx create mode 100644 src/hooks/whatsappGroups/useGroupCreation.ts create mode 100644 src/hooks/whatsappGroups/useWhatsAppInstanceVerification.ts diff --git a/src/components/whatsappGroups/CreateGroupForm.tsx b/src/components/whatsappGroups/CreateGroupForm.tsx index ccf928a..39e22b2 100644 --- a/src/components/whatsappGroups/CreateGroupForm.tsx +++ b/src/components/whatsappGroups/CreateGroupForm.tsx @@ -1,15 +1,9 @@ -import { useState, useEffect } from 'react'; -import { Button } from '@/components/ui/button'; -import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'; -import { Input } from '@/components/ui/input'; -import { Label } from '@/components/ui/label'; -import { Loader2, Plus, AlertCircle } from 'lucide-react'; -import { Alert, AlertDescription } from '@/components/ui/alert'; -import { findOrCreateWhatsAppGroup } from '@/services/whatsAppGroupsService'; -import { getUserWhatsAppInstance } from '@/services/whatsAppInstanceService'; -import { createWhatsAppGroup, updateGroupRemoteJid } from '@/services/whatsAppGroupCreationService'; -import { useToast } from '@/hooks/use-toast'; +import { useWhatsAppInstanceVerification } from '@/hooks/whatsappGroups/useWhatsAppInstanceVerification'; +import { useGroupCreation } from '@/hooks/whatsappGroups/useGroupCreation'; +import LoadingState from './LoadingState'; +import NoInstanceState from './NoInstanceState'; +import GroupCreationForm from './GroupCreationForm'; interface CreateGroupFormProps { userEmail: string; @@ -17,270 +11,28 @@ interface CreateGroupFormProps { } const CreateGroupForm = ({ userEmail, onSuccess }: CreateGroupFormProps) => { - const { toast } = useToast(); - const [cadastrando, setCadastrando] = useState(false); - const [nomeGrupo, setNomeGrupo] = useState(''); - const [hasWhatsAppInstance, setHasWhatsAppInstance] = useState(false); - const [checkingInstance, setCheckingInstance] = useState(true); - const [userInstance, setUserInstance] = useState<{ - instancia_zap: string | null; - status_instancia: string | null; - whatsapp: string | null; - } | null>(null); - - // Verificar se o usuário tem instância WhatsApp CONECTADA - useEffect(() => { - const checkUserInstance = async () => { - if (!userEmail) { - console.log('❌ Email do usuário não fornecido'); - setCheckingInstance(false); - return; - } - - setCheckingInstance(true); - try { - console.log('🔍 Verificando instância para criação de grupo:', userEmail); - - const instanceData = await getUserWhatsAppInstance(userEmail); - console.log('📋 Dados da instância encontrados:', instanceData); - - if (instanceData) { - // Verificação rigorosa: deve ter instancia_zap válida E status conectado - const hasValidInstance = !!( - instanceData && - instanceData.instancia_zap && - instanceData.instancia_zap.trim() !== '' && - instanceData.instancia_zap !== 'null' && - instanceData.instancia_zap !== null && - instanceData.status_instancia === 'conectado' - ); - - console.log('✅ Instância válida para criar grupos:', hasValidInstance, { - instancia_zap: instanceData.instancia_zap, - status_instancia: instanceData.status_instancia, - hasValidInstance - }); - - setHasWhatsAppInstance(hasValidInstance); - setUserInstance(instanceData); - } else { - console.log('❌ Nenhuma instância encontrada'); - setHasWhatsAppInstance(false); - setUserInstance(null); - } - } catch (error) { - console.error('❌ Erro ao verificar instância do usuário:', error); - setHasWhatsAppInstance(false); - setUserInstance(null); - } finally { - setCheckingInstance(false); - } - }; - - checkUserInstance(); - }, [userEmail]); - - // Cadastrar novo grupo - const handleCadastrarGrupo = async () => { - if (!userEmail) { - toast({ - title: 'Erro', - description: 'Você precisa estar logado para cadastrar um grupo', - variant: 'destructive', - }); - return; - } - - if (!nomeGrupo.trim()) { - toast({ - title: 'Atenção', - description: 'Digite um nome para o grupo', - variant: 'destructive', - }); - return; - } - - if (!userInstance || !userInstance.instancia_zap || userInstance.status_instancia !== 'conectado') { - toast({ - title: 'Erro', - description: 'Instância WhatsApp não está conectada', - variant: 'destructive', - }); - return; - } - - setCadastrando(true); - try { - console.log("Iniciando processo de cadastro de grupo..."); - - // 1. Cadastrar grupo no banco de dados local - const grupo = await findOrCreateWhatsAppGroup(nomeGrupo.trim()); - - if (!grupo) { - throw new Error('Não foi possível cadastrar o grupo no banco de dados'); - } - - // 2. Criar grupo no WhatsApp via API com o nome escolhido pelo usuário - try { - const groupResponse = await createWhatsAppGroup(userEmail, nomeGrupo.trim()); - - console.log('Resposta da criação do grupo:', groupResponse); - - // 3. Atualizar remote_jid no banco de dados - if (groupResponse.id) { - await updateGroupRemoteJid(grupo.id, groupResponse.id); - - toast({ - title: 'Sucesso!', - description: `Grupo "${nomeGrupo}" criado com sucesso no seu WhatsApp!`, - variant: 'default', - }); - } else { - toast({ - title: 'Atenção', - description: 'Grupo cadastrado no sistema, mas não foi possível criar no WhatsApp', - variant: 'destructive', - }); - } - - } catch (apiError) { - console.error('Erro ao criar grupo via API:', apiError); - toast({ - title: 'Atenção', - description: 'Grupo cadastrado no sistema, mas houve erro ao criar no WhatsApp. Verifique sua conexão.', - variant: 'destructive', - }); - } - - // Resetar o campo de nome - setNomeGrupo(''); - - // Atualizar a lista de grupos - onSuccess(); - - } catch (error) { - console.error('Erro ao cadastrar grupo:', error); - let errorMsg = 'Erro desconhecido'; - if (error instanceof Error) { - errorMsg = error.message; - } - - toast({ - title: 'Erro', - description: `Não foi possível registrar o grupo: ${errorMsg}`, - variant: 'destructive', - }); - } finally { - setCadastrando(false); - } - }; + const { hasWhatsAppInstance, checkingInstance, userInstance } = useWhatsAppInstanceVerification(userEmail); + const { cadastrando, handleCadastrarGrupo } = useGroupCreation(userEmail, onSuccess); if (checkingInstance) { - return ( - - - - Verificando instância WhatsApp... - - - ); + return ; } if (!hasWhatsAppInstance) { - return ( - - - Cadastrar novo grupo - - Para criar um grupo é necessário ter uma instância do WhatsApp conectada - - - - - - - {userInstance && userInstance.instancia_zap && userInstance.status_instancia !== 'conectado' ? ( - <> - Sua instância WhatsApp {userInstance.instancia_zap} está desconectada. - Acesse o menu "Conectar WhatsApp" e escaneie o QR Code para conectar sua instância. -
- - Status atual: {userInstance.status_instancia} - - - ) : ( - <> - Para criar um grupo é necessário ter sua instância do WhatsApp conectada. - Acesse o menu "Conectar WhatsApp" e realize a conexão primeiro. - - )} - - - - - ); + return ; } + const handleSubmit = (nomeGrupo: string) => { + handleCadastrarGrupo(nomeGrupo, userInstance); + }; + return ( - - - Cadastrar novo grupo - - Preencha as informações abaixo para cadastrar um novo grupo do WhatsApp - - - - {/* Mostrar informações da instância conectada */} -
-

- ✓ Instância conectada: {userInstance?.instancia_zap} -

-

- Status: {userInstance?.status_instancia} -

-
- -
- - setNomeGrupo(e.target.value)} - /> -

- Digite um nome descritivo para o grupo que você irá criar -

-
- - - -
-

Informações importantes:

-
    -
  • O grupo será criado automaticamente no seu WhatsApp
    • -
  • Você será adicionado como participante do grupo
    • -
  • O grupo terá o nome que você escolheu: {nomeGrupo || 'Digite um nome acima'}
    • -
-
- - + ); }; diff --git a/src/components/whatsappGroups/GroupCreationForm.tsx b/src/components/whatsappGroups/GroupCreationForm.tsx new file mode 100644 index 0000000..b2976e2 --- /dev/null +++ b/src/components/whatsappGroups/GroupCreationForm.tsx @@ -0,0 +1,91 @@ + +import { useState } from 'react'; +import { Button } from '@/components/ui/button'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Loader2, Plus } from 'lucide-react'; + +interface GroupCreationFormProps { + userInstance: { + instancia_zap: string | null; + status_instancia: string | null; + whatsapp: string | null; + }; + userEmail: string; + cadastrando: boolean; + onSubmit: (nomeGrupo: string) => void; +} + +const GroupCreationForm = ({ userInstance, userEmail, cadastrando, onSubmit }: GroupCreationFormProps) => { + const [nomeGrupo, setNomeGrupo] = useState(''); + + const handleSubmit = () => { + onSubmit(nomeGrupo); + setNomeGrupo(''); // Reset form after submission + }; + + return ( + + + Cadastrar novo grupo + + Preencha as informações abaixo para cadastrar um novo grupo do WhatsApp + + + + {/* Mostrar informações da instância conectada */} +
+

+ ✓ Instância conectada: {userInstance?.instancia_zap} +

+

+ Status: {userInstance?.status_instancia} +

+
+ +
+ + setNomeGrupo(e.target.value)} + /> +

+ Digite um nome descritivo para o grupo que você irá criar +

+
+ + + +
+

Informações importantes:

+
    +
  • O grupo será criado automaticamente no seu WhatsApp
    • +
  • Você será adicionado como participante do grupo
    • +
  • O grupo terá o nome que você escolheu: {nomeGrupo || 'Digite um nome acima'}
    • +
+
+ + + ); +}; + +export default GroupCreationForm; diff --git a/src/components/whatsappGroups/LoadingState.tsx b/src/components/whatsappGroups/LoadingState.tsx new file mode 100644 index 0000000..d2312f5 --- /dev/null +++ b/src/components/whatsappGroups/LoadingState.tsx @@ -0,0 +1,20 @@ + +import { Card, CardContent } from '@/components/ui/card'; +import { Loader2 } from 'lucide-react'; + +interface LoadingStateProps { + message: string; +} + +const LoadingState = ({ message }: LoadingStateProps) => { + return ( + + + + {message} + + + ); +}; + +export default LoadingState; diff --git a/src/components/whatsappGroups/NoInstanceState.tsx b/src/components/whatsappGroups/NoInstanceState.tsx new file mode 100644 index 0000000..eaf701e --- /dev/null +++ b/src/components/whatsappGroups/NoInstanceState.tsx @@ -0,0 +1,49 @@ + +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Alert, AlertDescription } from '@/components/ui/alert'; +import { AlertCircle } from 'lucide-react'; + +interface NoInstanceStateProps { + userInstance: { + instancia_zap: string | null; + status_instancia: string | null; + whatsapp: string | null; + } | null; +} + +const NoInstanceState = ({ userInstance }: NoInstanceStateProps) => { + return ( + + + Cadastrar novo grupo + + Para criar um grupo é necessário ter uma instância do WhatsApp conectada + + + + + + + {userInstance && userInstance.instancia_zap && userInstance.status_instancia !== 'conectado' ? ( + <> + Sua instância WhatsApp {userInstance.instancia_zap} está desconectada. + Acesse o menu "Conectar WhatsApp" e escaneie o QR Code para conectar sua instância. +
+ + Status atual: {userInstance.status_instancia} + + + ) : ( + <> + Para criar um grupo é necessário ter sua instância do WhatsApp conectada. + Acesse o menu "Conectar WhatsApp" e realize a conexão primeiro. + + )} + + + + + ); +}; + +export default NoInstanceState; diff --git a/src/hooks/whatsappGroups/useGroupCreation.ts b/src/hooks/whatsappGroups/useGroupCreation.ts new file mode 100644 index 0000000..376c2d1 --- /dev/null +++ b/src/hooks/whatsappGroups/useGroupCreation.ts @@ -0,0 +1,106 @@ + +import { useState } from 'react'; +import { useToast } from '@/hooks/use-toast'; +import { findOrCreateWhatsAppGroup } from '@/services/whatsAppGroupsService'; +import { createWhatsAppGroup, updateGroupRemoteJid } from '@/services/whatsAppGroupCreationService'; + +export const useGroupCreation = (userEmail: string, onSuccess: () => void) => { + const { toast } = useToast(); + const [cadastrando, setCadastrando] = useState(false); + + const handleCadastrarGrupo = async (nomeGrupo: string, userInstance: any) => { + if (!userEmail) { + toast({ + title: 'Erro', + description: 'Você precisa estar logado para cadastrar um grupo', + variant: 'destructive', + }); + return; + } + + if (!nomeGrupo.trim()) { + toast({ + title: 'Atenção', + description: 'Digite um nome para o grupo', + variant: 'destructive', + }); + return; + } + + if (!userInstance || !userInstance.instancia_zap || userInstance.status_instancia !== 'conectado') { + toast({ + title: 'Erro', + description: 'Instância WhatsApp não está conectada', + variant: 'destructive', + }); + return; + } + + setCadastrando(true); + try { + console.log("Iniciando processo de cadastro de grupo..."); + + // 1. Cadastrar grupo no banco de dados local + const grupo = await findOrCreateWhatsAppGroup(nomeGrupo.trim()); + + if (!grupo) { + throw new Error('Não foi possível cadastrar o grupo no banco de dados'); + } + + // 2. Criar grupo no WhatsApp via API com o nome escolhido pelo usuário + try { + const groupResponse = await createWhatsAppGroup(userEmail, nomeGrupo.trim()); + + console.log('Resposta da criação do grupo:', groupResponse); + + // 3. Atualizar remote_jid no banco de dados + if (groupResponse.id) { + await updateGroupRemoteJid(grupo.id, groupResponse.id); + + toast({ + title: 'Sucesso!', + description: `Grupo "${nomeGrupo}" criado com sucesso no seu WhatsApp!`, + variant: 'default', + }); + } else { + toast({ + title: 'Atenção', + description: 'Grupo cadastrado no sistema, mas não foi possível criar no WhatsApp', + variant: 'destructive', + }); + } + + } catch (apiError) { + console.error('Erro ao criar grupo via API:', apiError); + toast({ + title: 'Atenção', + description: 'Grupo cadastrado no sistema, mas houve erro ao criar no WhatsApp. Verifique sua conexão.', + variant: 'destructive', + }); + } + + // Atualizar a lista de grupos + onSuccess(); + + } catch (error) { + console.error('Erro ao cadastrar grupo:', error); + let errorMsg = 'Erro desconhecido'; + if (error instanceof Error) { + errorMsg = error.message; + } + + toast({ + title: 'Erro', + description: `Não foi possível registrar o grupo: ${errorMsg}`, + variant: 'destructive', + }); + } finally { + setCadastrando(false); + } + }; + + return { + cadastrando, + handleCadastrarGrupo + }; +}; diff --git a/src/hooks/whatsappGroups/useWhatsAppInstanceVerification.ts b/src/hooks/whatsappGroups/useWhatsAppInstanceVerification.ts new file mode 100644 index 0000000..5ba0681 --- /dev/null +++ b/src/hooks/whatsappGroups/useWhatsAppInstanceVerification.ts @@ -0,0 +1,72 @@ + +import { useState, useEffect } from 'react'; +import { getUserWhatsAppInstance } from '@/services/whatsAppInstanceService'; + +interface WhatsAppInstanceData { + instancia_zap: string | null; + status_instancia: string | null; + whatsapp: string | null; +} + +export const useWhatsAppInstanceVerification = (userEmail: string) => { + const [hasWhatsAppInstance, setHasWhatsAppInstance] = useState(false); + const [checkingInstance, setCheckingInstance] = useState(true); + const [userInstance, setUserInstance] = useState(null); + + useEffect(() => { + const checkUserInstance = async () => { + if (!userEmail) { + console.log('❌ Email do usuário não fornecido'); + setCheckingInstance(false); + return; + } + + setCheckingInstance(true); + try { + console.log('🔍 Verificando instância para criação de grupo:', userEmail); + + const instanceData = await getUserWhatsAppInstance(userEmail); + console.log('📋 Dados da instância encontrados:', instanceData); + + if (instanceData) { + // Verificação rigorosa: deve ter instancia_zap válida E status conectado + const hasValidInstance = !!( + instanceData && + instanceData.instancia_zap && + instanceData.instancia_zap.trim() !== '' && + instanceData.instancia_zap !== 'null' && + instanceData.instancia_zap !== null && + instanceData.status_instancia === 'conectado' + ); + + console.log('✅ Instância válida para criar grupos:', hasValidInstance, { + instancia_zap: instanceData.instancia_zap, + status_instancia: instanceData.status_instancia, + hasValidInstance + }); + + setHasWhatsAppInstance(hasValidInstance); + setUserInstance(instanceData); + } else { + console.log('❌ Nenhuma instância encontrada'); + setHasWhatsAppInstance(false); + setUserInstance(null); + } + } catch (error) { + console.error('❌ Erro ao verificar instância do usuário:', error); + setHasWhatsAppInstance(false); + setUserInstance(null); + } finally { + setCheckingInstance(false); + } + }; + + checkUserInstance(); + }, [userEmail]); + + return { + hasWhatsAppInstance, + checkingInstance, + userInstance + }; +};