Aula 5 - Finalizada

lucasrmagalhaes · Jan 30, 2022 · ff4691f · ff4691f
1 parent 66b4df5
commit ff4691f
Show file tree

Hide file tree

Showing 6 changed files with 237 additions and 77 deletions.
diff --git a/README.md b/README.md
@@ -66,4 +66,20 @@ supabaseClient
 
 ```
 
-<hr>
+<hr>
+
+#### Aula 05 - Adicionando suporte para Stickers
+
+
+#### ENV
+```
+NEXT_PUBLIC_WALLPAPER
+```
+
+```
+NEXT_PUBLIC_SUPABASE_URL
+```
+
+```
+NEXT_PUBLIC_SUPABASE_ANON_KEY
+```
diff --git a/env.example b/env.example
diff --git a/src/components/ButtonSendSticker.js 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 (
+    <Box
+      styleSheet={{
+        position: 'relative'
+      }}
+    >
+      <Button
+        styleSheet={{
+          borderRadius: '50%',
+          padding: '0 3px 0 0',
+          minWidth: '50px',
+          minHeight: '50px',
+          fontSize: '20px',
+          marginBottom: '8px',
+          lineHeight: '0',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: appConfig.theme.colors.neutrals[300],
+          filter: isOpen ? 'grayscale(0)' : 'grayscale(1)',
+          hover: {
+            filter: 'grayscale(0)',
+          }
+        }}
+        label="👻"
+        onClick={() => setOpenState(!isOpen)}
+      />
+      {isOpen && (
+        <Box
+          styleSheet={{
+            display: 'flex',
+            flexDirection: 'column',
+            borderRadius: '5px',
+            position: 'absolute',
+            backgroundColor: appConfig.theme.colors.neutrals[800],
+            width: {
+              xs: '200px',
+              sm: '290px',
+            },
+            height: '300px',
+            right: '30px',
+            bottom: '30px',
+            padding: '16px',
+            boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px',
+          }}
+          onClick={() => setOpenState(false)}
+        >
+          <Text
+            styleSheet={{
+              color: appConfig.theme.colors.neutrals["000"],
+              fontWeight: 'bold',
+            }}
+          >
+            Stickers
+          </Text>
+
+          <Box
+            tag="ul"
+            styleSheet={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              justifyContent: 'space-between',
+              flex: 1,
+              paddingTop: '16px',
+              overflow: 'auto',
+            }}
+          >
+            {appConfig.stickers.map((sticker) => (
+              <Text
+                onClick={() => {
+                  if (Boolean(props.onStickerClick)) {
+                    props.onStickerClick(sticker);
+                  }
+                }}
+                tag="li" key={sticker}
+                styleSheet={{
+                  width: '50%',
+                  borderRadius: '5px',
+                  padding: '10px',
+                  focus: {
+                    backgroundColor: appConfig.theme.colors.neutrals[600],
+                  },
+                  hover: {
+                    backgroundColor: appConfig.theme.colors.neutrals[600],
+                  }
+                }}
+              >
+                <Image src={sticker} />
+              </Text>
+            ))}
+          </Box>
+        </Box>
+      )}
+    </Box>
+  )
+}
diff --git a/pages/_app.js → src/pages/_app.js b/pages/_app.js → src/pages/_app.js
diff --git a/pages/chat.js → src/pages/chat.js b/pages/chat.js → src/pages/chat.js
@@ -1,15 +1,29 @@
 import { Box, Text, TextField, Image, Button } from '@skynexui/components';
 import React from 'react';
-import appConfig from '../config.json';
+import Head from "next/head"
+import appConfig from '../../config.json';
+import { useRouter } from 'next/router';
 import { createClient } from '@supabase/supabase-js';
+import { ButtonSendSticker } from '../components/ButtonSendSticker';
 
 const wallpaper = process.env.NEXT_PUBLIC_WALLPAPER;
 const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
 const anonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
 
 const supabaseClient = createClient(url, anonKey);
 
+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([]);
 
@@ -21,110 +35,124 @@ export default function ChatPage() {
             .then(({ data }) => {
                 setListaDeMensagens(data);
             });
+
+        const subscription = escutaMensagensEmTempoReal((novaMensagem) => {
+            setListaDeMensagens((valorAtualDaLista) => {
+                return [
+                    novaMensagem,
+                    ...valorAtualDaLista,
+                ]
+            });
+        });
+
+        return () => {
+            subscription.unsubscribe();
+        }
     }, []);
 
     function handleNovaMensagem(novaMensagem) {
         const mensagem = {
-            de: 'lucasrmagalhaes',
+            de: usuarioLogado,
             texto: novaMensagem
         }
 
         supabaseClient
             .from('mensagens')
-            .insert([mensagem])
+            .insert([ mensagem ])
             .then(({ data }) => {
-                setListaDeMensagens([
-                    data[0],
-                    ...listaDeMensagens
-                ]);
+                console.log('Criando Mensagem: ', data);
             });
 
         setMensagem('');
     }
 
     return (
-        <Box
-            styleSheet={{
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                backgroundImage: `url(${wallpaper})`,
-                backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundBlendMode: 'multiply',
-                color: appConfig.theme.colors.neutrals['000']
-            }}
-        >
+        <>
+            <Head>
+                <title>Aluracord - Chat</title>
+            </Head>
+
             <Box
                 styleSheet={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    flex: 1,
-                    boxShadow: '0 2px 10px 0 rgb(0 0 0 / 20%)',
-                    borderRadius: '5px',
-                    backgroundColor: appConfig.theme.colors.neutrals[700],
-                    height: '100%',
-                    maxWidth: '95%',
-                    maxHeight: '95vh',
-                    padding: '32px',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    backgroundImage: `url(${wallpaper})`,
+                    backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundBlendMode: 'multiply',
+                    color: appConfig.theme.colors.neutrals['000']
                 }}
             >
-                <Header />
-
                 <Box
                     styleSheet={{
-                        position: 'relative',
                         display: 'flex',
-                        flex: 1,
-                        height: '80%',
-                        backgroundColor: appConfig.theme.colors.neutrals[600],
                         flexDirection: 'column',
+                        flex: 1,
+                        boxShadow: '0 2px 10px 0 rgb(0 0 0 / 20%)',
                         borderRadius: '5px',
-                        padding: '16px',
+                        backgroundColor: appConfig.theme.colors.neutrals[700],
+                        height: '100%',
+                        maxWidth: '95%',
+                        maxHeight: '95vh',
+                        padding: '32px',
                     }}
                 >
-                    <MessageList mensagens={listaDeMensagens} />
-
-                    {/* {listaDeMensagens.map((mensagemAtual) => {
-                        return (
-                            <li key={mensagemAtual.id}>
-                                {mensagemAtual.de}: {mensagemAtual.texto}
-                            </li>
-                        )
-                    })} */}
+                    <Header />
 
                     <Box
-                        as="form"
                         styleSheet={{
+                            position: 'relative',
                             display: 'flex',
-                            alignItems: 'center',
+                            flex: 1,
+                            height: '80%',
+                            backgroundColor: appConfig.theme.colors.neutrals[600],
+                            flexDirection: 'column',
+                            borderRadius: '5px',
+                            padding: '16px',
                         }}
                     >
-                        <TextField
-                            value={mensagem}
-                            onChange={(event) => {
-                                const valor = event.target.value
-                                setMensagem(valor);
-                            }}
-                            onKeyPress={(event) => {
-                                if (event.key == 'Enter') {
-                                    event.preventDefault();
-                                    handleNovaMensagem(mensagem);
-                                }
-                            }}
-                            placeholder="Insira sua mensagem aqui..."
-                            type="textarea"
+                        <MessageList mensagens={listaDeMensagens} />
+
+                        <Box
+                            as="form"
                             styleSheet={{
-                                width: '100%',
-                                border: '0',
-                                resize: 'none',
-                                borderRadius: '5px',
-                                padding: '6px 8px',
-                                backgroundColor: appConfig.theme.colors.neutrals[800],
-                                marginRight: '12px',
-                                color: appConfig.theme.colors.neutrals[200],
+                                display: 'flex',
+                                alignItems: 'center',
                             }}
-                        />
+                        >
+                            <TextField
+                                value={mensagem}
+                                onChange={(event) => {
+                                    const valor = event.target.value
+                                    setMensagem(valor);
+                                }}
+                                onKeyPress={(event) => {
+                                    if (event.key == 'Enter') {
+                                        event.preventDefault();
+                                        handleNovaMensagem(mensagem);
+                                    }
+                                }}
+                                placeholder="Insira sua mensagem aqui..."
+                                type="textarea"
+                                styleSheet={{
+                                    width: '100%',
+                                    border: '0',
+                                    resize: 'none',
+                                    borderRadius: '5px',
+                                    padding: '6px 8px',
+                                    backgroundColor: appConfig.theme.colors.neutrals[800],
+                                    marginRight: '12px',
+                                    color: appConfig.theme.colors.neutrals[200],
+                                }}
+                            />
+
+                            <ButtonSendSticker
+                                onStickerClick={(sticker) => {
+                                    handleNovaMensagem(':sticker:' + sticker);
+                                }}
+                            />
+                        </Box>
                     </Box>
                 </Box>
             </Box>
-        </Box>
+        </>
     )
 }
 
@@ -152,7 +180,7 @@ function MessageList(props) {
         <Box
             tag="ul"
             styleSheet={{
-                // overflow: 'scroll',
+                overflow: 'auto',
                 display: 'flex',
                 flexDirection: 'column-reverse',
                 flex: 1,
@@ -206,7 +234,20 @@ function MessageList(props) {
                                 {(new Date().toLocaleDateString())}
                             </Text>
                         </Box>
-                        {mensagem.texto}
+
+
+                        {mensagem.texto.startsWith(':sticker:')
+                            ? (
+                                <Image 
+                                    src={mensagem.texto.replace(':sticker:', '')} 
+                                    styleSheet={{
+                                        width: '150px'
+                                    }}
+                                />
+                            ) : (
+                                mensagem.texto
+                            )
+                        }
                     </Text>
                 );
             })}