[DÚVIDA] Efeito em cascata.

Dúvida

Gostaria de sabe como funciona esse efeito de cascata dos comentários do TabNews. por exemplo:

Tópico:
    Comentário 1
        Comentário 1.1
            Comentário 1.1.1
        Comentário 1.2
        Comentário 1.3
        
   Comentário 2
   ...

Techs

Estou tentando criar uma aplicação que tem esse conceito. Estou usando mongoDB e Next (no front e no back) e o ORM: mongoose.

Toda ajuda é valida

Ficarei muito grato em receber opiniões, principalmente se forem relacionadas diretamente às tecnologias citadas, projetos similares e afins.

khthá 2 anos

como funciona esse efeito de cascata dos comentários

O que exatamente vc quer saber? A resposta mais rápida - e preguiçosa - que posso dar é: veja no código fonte :-)

Se for só para imaginar, nem precisaria consultar o código, pois não tem muito o que reinventar nesse caso. Mas enfim, cada post pode ter um "pai" (por exemplo, o comentário 1.1.1 é uma resposta ao comentário 1.1, então o primeiro é "filho" do "segundo"). Se não tiver um pai, então é o que vc chamou de "tópico".

Depois, uma forma de trazer o post e todos os seus descendentes é usando uma query recursiva. Com isso temos uma árvore contendo toda a hierarquia.

Por fim, basta estilizar isso na página da maneira que achar melhor. Uma forma bem comum é colocar as respostas em um nível de alinhamento diferente, como é feito aqui:

+----------------------------+
|  tópico                    |
+----------------------------+
|  | comentário 1            |
|  |  | comentário 1.1       |
|  |  |  | comentário 1.1.1  |
|  |  | comentário 1.2       |
|  | comentário 2            |
|  |  | comentário 2.1       |
...

E aí também tem várias formas de fazer (exemplo).

AntonioNetohá 2 anos
Estou tentando criar esse efeito em um projeto. Só que no caso dele, ele usa mongodb, e não sei como fazer essa `query recursiva` em mongoose.
lljotallhá 2 anos
kht, com uma resposta apontando exatamente pro código da plataforma e com tudo explicadinho, vc não merece só Palmas, mas o Tocantins inteiro! Numa humilde tentativa de colaborar com a resposta, aqui vai uma explicação do próprio Deschamps de como isso é implementado: https://www.youtube.com/shorts/DT-C5SCwqEg
khthá 2 anos
Obrigado! Achei que ficaria melhor por um link direto do que dar exemplos, aí ele já pode ver na prática como é :-)
AntonioNetohá 2 anos
Não sei como a base deve tá organizada pra eu conseguir fazer isso, e nem quais campos eu devo incluir, nem a lógica por trás
urielhá 2 anos

Depende de como é o relacionamento que você fez no MongoDB. Pois se for relacionamento como um banco de dados relacional não é muito legal usar o Mongo.

Você pode fazer de algumas formas que eu lembro.

Subdocumentos, ou seja, cada comentário é um subdocumento do artigo. Depois é só chamar o artigo e com

const childSchema = new Schema({ name: 'string' });
const Child = mongoose.model('Child', childSchema);

const parentSchema = new Schema({
  child: {
    type: mongoose.ObjectId,
    ref: 'Child'
  }
});
const Parent = mongoose.model('Parent', parentSchema);

const doc = await Parent.findOne().populate('child');

Um subdocumento pode ter um subdocumento. https://mongoosejs.com/docs/subdocs.html

O outro jeito é fazer um relacionamento muito parecido com um banco relacional(tabelas separadas) e usar o aggregate com $lookup para relacionar! Também funciona com populate

Ou pode fazer no código com recursão. Busca o artigo acha os comentários, entra em cada um deles e verifica seus filhos e assim vai! Criando um grade Array ou Objeto.

Ou ainda, guardando tudo no mesmo documento. Cada documento aguenta 16 mega(o que é muita coisa par texto) Nesse post abaixo tem algumas https://stackoverflow.com/questions/60792830/how-to-aggregate-nested-comments-using-mongodb

AntonioNetohá 2 anos
Obrigado mano, era isso mesmo que eu tava proucurando! 🙂🙂