From c3437c67d27c854905c7f61b2172df3cbd836f45 Mon Sep 17 00:00:00 2001 From: Mario Souto <13791385+omariosouto@users.noreply.github.com> Date: Mon, 17 Jan 2022 16:15:44 -0300 Subject: [PATCH 1/4] Update README.md --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 1444944..f393cd9 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,6 @@ Seja bem vindo ao projeto base do Aluracord!!! Passos fundamentais: | --- | --- | | | [](aluracord.vercel.app) | [](aluracord.vercel.app) -| [](aluracord-mario.vercel.app) | [](aluracord-mario.vercel.app) | [](aluracord-matrix.vercel.app) | [](aluracord-matrix.vercel.app) | [](https://github.com/alura-challenges/aluracord-matrix) | [](https://github.com/alura-challenges/aluracord-matrix) | [](react-discord-jet.vercel.app) | [](react-discord-jet.vercel.app) From bf0fd91f09909c2b9d5e4900d1e160955929b442 Mon Sep 17 00:00:00 2001 From: blog-post-bot Date: Mon, 17 Jan 2022 19:15:57 +0000 Subject: [PATCH 2/4] Updated with the latest blog posts --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index f393cd9..1444944 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,7 @@ Seja bem vindo ao projeto base do Aluracord!!! Passos fundamentais: | --- | --- | | | [](aluracord.vercel.app) | [](aluracord.vercel.app) +| [](aluracord-mario.vercel.app) | [](aluracord-mario.vercel.app) | [](aluracord-matrix.vercel.app) | [](aluracord-matrix.vercel.app) | [](https://github.com/alura-challenges/aluracord-matrix) | [](https://github.com/alura-challenges/aluracord-matrix) | [](react-discord-jet.vercel.app) | [](react-discord-jet.vercel.app) From a949ee756cdbc014dbba6f3295d827755f75d895 Mon Sep 17 00:00:00 2001 From: Mario Souto <13791385+omariosouto@users.noreply.github.com> Date: Tue, 18 Jan 2022 11:35:05 -0300 Subject: [PATCH 3/4] aula05 --- pages/chat.js | 67 +++++++++++++++--- pages/index.js | 3 +- src/components/ButtonSendSticker.js | 103 ++++++++++++++++++++++++++++ 3 files changed, 164 insertions(+), 9 deletions(-) create mode 100644 src/components/ButtonSendSticker.js diff --git a/pages/chat.js b/pages/chat.js index f4ef45c..a19bb5a 100644 --- a/pages/chat.js +++ b/pages/chat.js @@ -1,15 +1,27 @@ import { Box, Text, TextField, Image, Button } from '@skynexui/components'; import React from 'react'; import appConfig from '../config.json'; +import { useRouter } from 'next/router'; import { createClient } from '@supabase/supabase-js' +import { ButtonSendSticker } from '../src/components/ButtonSendSticker'; // Como fazer AJAX: https://medium.com/@omariosouto/entendendo-como-fazer-ajax-com-a-fetchapi-977ff20da3c6 const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTY0MDg2OTA3MywiZXhwIjoxOTU2NDQ1MDczfQ.343ibq7UYFPDdyfsfGmEqUma01RW7P7KC9U2MDAGSkI'; const SUPABASE_URL = 'https://kysxypdmtxjlkdysdlas.supabase.co'; const supabaseClient = createClient(SUPABASE_URL, SUPABASE_ANON_KEY); +function escutaMensagensEmTempoReal(adicionaMensagem) { + return supabaseClient + .from('mensagens') + .on('INSERT', (respostaLive) => { + adicionaMensagem(respostaLive.new); + }) + .subscribe(); +} export default function ChatPage() { + const roteamento = useRouter(); + const usuarioLogado = roteamento.query.username; const [mensagem, setMensagem] = React.useState(''); const [listaDeMensagens, setListaDeMensagens] = React.useState([]); @@ -19,15 +31,38 @@ export default function ChatPage() { .select('*') .order('id', { ascending: false }) .then(({ data }) => { - console.log('Dados da consulta:', data); + // console.log('Dados da consulta:', data); setListaDeMensagens(data); }); + + const subscription = escutaMensagensEmTempoReal((novaMensagem) => { + console.log('Nova mensagem:', novaMensagem); + console.log('listaDeMensagens:', listaDeMensagens); + // Quero reusar um valor de referencia (objeto/array) + // Passar uma função pro setState + + // setListaDeMensagens([ + // novaMensagem, + // ...listaDeMensagens + // ]) + setListaDeMensagens((valorAtualDaLista) => { + console.log('valorAtualDaLista:', valorAtualDaLista); + return [ + novaMensagem, + ...valorAtualDaLista, + ] + }); + }); + + return () => { + subscription.unsubscribe(); + } }, []); function handleNovaMensagem(novaMensagem) { const mensagem = { // id: listaDeMensagens.length + 1, - de: 'vanessametonini', + de: usuarioLogado, texto: novaMensagem, }; @@ -39,10 +74,6 @@ export default function ChatPage() { ]) .then(({ data }) => { console.log('Criando mensagem: ', data); - setListaDeMensagens([ - data[0], - ...listaDeMensagens, - ]); }); setMensagem(''); @@ -125,6 +156,13 @@ export default function ChatPage() { color: appConfig.theme.colors.neutrals[200], }} /> + {/* CallBack */} + { + // console.log('[USANDO O COMPONENTE] Salva esse sticker no banco', sticker); + handleNovaMensagem(':sticker: ' + sticker); + }} + /> @@ -151,7 +189,7 @@ function Header() { } function MessageList(props) { - console.log(props); + // console.log(props); return ( - {mensagem.texto} + {/* [Declarativo] */} + {/* Condicional: {mensagem.texto.startsWith(':sticker:').toString()} */} + {mensagem.texto.startsWith(':sticker:') + ? ( + + ) + : ( + mensagem.texto + )} + {/* if mensagem de texto possui stickers: + mostra a imagem + else + mensagem.texto */} + {/* {mensagem.texto} */} ); })} diff --git a/pages/index.js b/pages/index.js index 40d1bde..dd5e682 100644 --- a/pages/index.js +++ b/pages/index.js @@ -68,7 +68,8 @@ export default function PaginaInicial() { onSubmit={function (infosDoEvento) { infosDoEvento.preventDefault(); console.log('Alguém submeteu o form'); - roteamento.push('/chat'); + // roteamento.push('/chat?username=' + username); + roteamento.push(`/chat?username=${username}`); // window.location.href = '/chat'; }} styleSheet={{ diff --git a/src/components/ButtonSendSticker.js b/src/components/ButtonSendSticker.js new file mode 100644 index 0000000..1d17e62 --- /dev/null +++ b/src/components/ButtonSendSticker.js @@ -0,0 +1,103 @@ +import React from 'react'; +import { Box, Button, Text, Image } from '@skynexui/components'; +import appConfig from '../../config.json'; + +export function ButtonSendSticker(props) { + const [isOpen, setOpenState] = React.useState(''); + + return ( + +