Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Problema no código passado em preparando o ambiente

Alguns códigos como o do 'ModalComment' não apareceram e outros estão incompletos. Assim não estou consiguindo ter acesso ao código completo e atualizado...

3 respostas
solução!

Salve, Rafael!

Dei uma olhada na transcrição do video e encontrei:

import { useRef, useState } from "react"
import { IconButton } from "../IconButton"
import { Modal } from "../Modal"
import { Textarea } from "../Textarea"
import { Subheading } from "../Subheading"
import { IconChat } from "../icons/IconChat"
import { IconArrowFoward } from "../icons/IconArrowFoward"
import { Spinner } from "../Spinner"
import styles from './commentmodal.module.css'
import { Button } from "../Button"

export const ModalComment = ({ isEditing }) => {
    const modalRef = useRef(null)
    const [loading, setLoading] = useState(false)

    const onSubmit = async (formData) => {
        const text = formData.get('text')

        if (!text.trim()) return

        try {
            setLoading(true)
            setTimeout(() => {
                setLoading(false)
            }, 2000)
            modalRef.current.closeModal()
        } catch (error) {
            console.error('Erro ao criar/atualizar comentário:', error)
        }
    }
    return (
        <>
            <Modal ref={modalRef}>
                <form action={onSubmit}>
                    <Subheading>{isEditing ? 'Editar comentário:' : 'Deixe seu comentário sobre o post:'}</Subheading>
                    <Textarea required rows={8} name="text" placeholder="Digite aqui..." />
                    <div className={styles.footer}>
                        <Button disabled={loading} type="submit">
                            {loading ? <Spinner /> : <>
                                {isEditing ? 'Atualizar' : 'Comentar'} <IconArrowFoward />
                            </>}
                        </Button>
                    </div>
                </form>
            </Modal>
            <IconButton
                onClick={() => modalRef.current.openModal()}
            >
                <IconChat fill={isEditing ? '#000' : '#888888'} />
            </IconButton>
        </>
    )
}

E o css (src/components/ModalComment/commentmodal.module.css):

.footer {
    display: flex;
    justify-content: flex-end;
}

Veja se consegue localizar, qualquer coisa me fala aqui!

Fala Vinicios,
Certinho, não sei porque não apareceu no preparando o ambiente, mas era só esse que faltava. Valeu!

Tava faltando mesmo no "preparando o ambiente", tava só na transcrição do vídeo. Mas já ajustei pra ficar nos dois ;)

Obrigado por avisar, Rafael!

Bons estudos, e conta comigo se precisar ;)