├── src ├── images │ ├── exemple.png │ └── segunda-vesao.png ├── components │ ├── HeadPages.js │ ├── Title.js │ ├── CustomButtonOne.js │ ├── Form │ │ ├── FormHeader.js │ │ ├── FormInput.js │ │ └── Form.js │ ├── MessagePopup.js │ ├── ThemeChangeButton.js │ ├── HeaderComponet.js │ ├── Loading.js │ ├── Avatar.js │ ├── ButtonSendSticker.js │ ├── Account.js │ └── MessageList.js └── Styles │ └── GlobalStyle.js ├── public ├── images │ ├── 5549789.gif │ ├── Frame-2.jpg │ ├── favicon.ico │ ├── Frame-Small.jpg │ ├── Android-Small.jpg │ ├── Unknown_person.jpg │ ├── Screenshot (205).png │ ├── logotipo-github.png │ ├── send.svg │ └── trash2.svg └── Fonts │ └── Retro-Gaming.ttf ├── services └── supabase.js ├── pages ├── _app.js ├── index.js ├── 404.js └── chat.js ├── package.json ├── hooks └── UserContext │ └── index.js ├── README.md ├── .gitignore └── config.json /src/images/exemple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parlandin/Imersao-React-Aluracord/HEAD/src/images/exemple.png -------------------------------------------------------------------------------- /public/images/5549789.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parlandin/Imersao-React-Aluracord/HEAD/public/images/5549789.gif -------------------------------------------------------------------------------- /public/images/Frame-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parlandin/Imersao-React-Aluracord/HEAD/public/images/Frame-2.jpg -------------------------------------------------------------------------------- /public/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parlandin/Imersao-React-Aluracord/HEAD/public/images/favicon.ico -------------------------------------------------------------------------------- /public/Fonts/Retro-Gaming.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parlandin/Imersao-React-Aluracord/HEAD/public/Fonts/Retro-Gaming.ttf -------------------------------------------------------------------------------- /public/images/Frame-Small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parlandin/Imersao-React-Aluracord/HEAD/public/images/Frame-Small.jpg -------------------------------------------------------------------------------- /src/images/segunda-vesao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parlandin/Imersao-React-Aluracord/HEAD/src/images/segunda-vesao.png -------------------------------------------------------------------------------- /public/images/Android-Small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parlandin/Imersao-React-Aluracord/HEAD/public/images/Android-Small.jpg -------------------------------------------------------------------------------- /public/images/Unknown_person.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parlandin/Imersao-React-Aluracord/HEAD/public/images/Unknown_person.jpg -------------------------------------------------------------------------------- /public/images/Screenshot (205).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parlandin/Imersao-React-Aluracord/HEAD/public/images/Screenshot (205).png -------------------------------------------------------------------------------- /public/images/logotipo-github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parlandin/Imersao-React-Aluracord/HEAD/public/images/logotipo-github.png -------------------------------------------------------------------------------- /services/supabase.js: -------------------------------------------------------------------------------- 1 | import { createClient } from '@supabase/supabase-js' 2 | 3 | 4 | const baseUrl = process.env.NEXT_PUBLIC_SUPERBASE_URL 5 | const anonKey = process.env.NEXT_PUBLIC_SUPERBASE_ANON_KEY 6 | 7 | const supabase = createClient(baseUrl, anonKey ) 8 | 9 | export default supabase -------------------------------------------------------------------------------- /public/images/send.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/HeadPages.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head" 2 | 3 | export default function HeadPage() { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | 11 | 12 | ) 13 | } -------------------------------------------------------------------------------- /public/images/trash2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import GlobalStyle from '../src/Styles/GlobalStyle'; 2 | import HeadPage from '../src/components/HeadPages'; 3 | import { AuthContextProvider } from '../hooks/UserContext'; 4 | 5 | export default function CustomApp({ Component, pageProps }) { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | 12 | 13 | 14 | ) 15 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aluracord", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "next dev", 8 | "build": "next build", 9 | "start": "next start", 10 | "lint": "next lint" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "@skynexui/components": "^1.23.2", 17 | "@supabase/supabase-js": "^1.29.4", 18 | "next": "^12.0.8", 19 | "react": "^17.0.2", 20 | "react-dom": "^17.0.2" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/components/Title.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | function Titulo(props) { 4 | const Tag = props.tag || 'h1'; 5 | 6 | return ( 7 | <> 8 | {props.children} 9 | 18 | 19 | ); 20 | } 21 | 22 | 23 | export default Titulo -------------------------------------------------------------------------------- /src/components/CustomButtonOne.js: -------------------------------------------------------------------------------- 1 | 2 | function CustomButtonOne( { children , onClick} ) { 3 | return ( 4 | <> 5 | 8 | 21 | 22 | ) 23 | } 24 | 25 | export default CustomButtonOne -------------------------------------------------------------------------------- /hooks/UserContext/index.js: -------------------------------------------------------------------------------- 1 | import React, { createContext, useState , useContext, useEffect} from "react" 2 | import supabase from "../../services/supabase" 3 | 4 | export const AuthContext = createContext({}) 5 | 6 | export const AuthContextProvider = ({ children }) => { 7 | 8 | const [user, setUser] = useState() 9 | 10 | useEffect(() => { 11 | const user = supabase.auth.user() 12 | if(user){ 13 | setUser(user) 14 | } 15 | }) 16 | 17 | return ( 18 | 19 | {children} 20 | 21 | ) 22 | } 23 | 24 | export function useAuth(){ 25 | return useContext(AuthContext) 26 | } -------------------------------------------------------------------------------- /src/components/Form/FormHeader.js: -------------------------------------------------------------------------------- 1 | import Title from "../Title" 2 | 3 | 4 | function FormHeader(){ 5 | return ( 6 | <> 7 |
8 | 9 | Bem vindo! 10 | 11 | Discord - Alura Gaming 12 |
13 | 27 | 28 | 29 | ) 30 | } 31 | 32 | 33 | export default FormHeader -------------------------------------------------------------------------------- /src/components/MessagePopup.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | function MessagePopup({type, message} ){ 4 | const cor = type == "error" ? "#c44040" : "#265d2bdb" 5 | 6 | return ( 7 | <> 8 |
9 |

{message}

10 |
11 | 12 | 31 | 32 | ) 33 | } 34 | 35 | 36 | export default MessagePopup -------------------------------------------------------------------------------- /src/components/ThemeChangeButton.js: -------------------------------------------------------------------------------- 1 | 2 | export default function ThemeChangeButton(props) { 3 | const color = props.color 4 | const handerClick = props.event 5 | const theme = props.theme 6 | 7 | return ( 8 | <> 9 | handerClick(theme)}> 10 | 30 | 31 | ) 32 | } 33 | -------------------------------------------------------------------------------- /src/Styles/GlobalStyle.js: -------------------------------------------------------------------------------- 1 | function GlobalStyle() { 2 | return ( 3 | 52 | ); 53 | } 54 | 55 | export default GlobalStyle -------------------------------------------------------------------------------- /src/components/HeaderComponet.js: -------------------------------------------------------------------------------- 1 | import { Box, Text, Button } from '@skynexui/components'; 2 | 3 | function Header({router, defaultTheme , supabase }) { 4 | 5 | return ( 6 | <> 7 | 17 | 18 | Chat 19 | 20 | 106 | 107 | 108 | 134 | 135 | ) 136 | } 137 | -------------------------------------------------------------------------------- /src/components/Form/FormInput.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from "react" 2 | 3 | 4 | function FormInput({type, handleOnSubmit, handleChangeLogin}){ 5 | const [values, setValues ] = useState({email: "", senha: ""}) 6 | 7 | function handleChange(e){ 8 | const name = e.target.name 9 | setValues({...values, [name]: e.target.value}) 10 | } 11 | 12 | function handleSubmit(e){ 13 | e.preventDefault() 14 | if(values.email < 0|| values.senha < 6){ 15 | return alert("dados inválido , revise e tente novamente") 16 | } 17 | handleOnSubmit(values) 18 | } 19 | return ( 20 | <> 21 | 22 |
23 | 24 | 28 |
29 | 30 |
31 | 32 | 37 | 38 | 39 | minimo 6 caracteres 40 | 41 |
42 | 43 | 44 | 45 | 46 | 48 | 49 | 107 | 108 | ) 109 | } 110 | 111 | export default FormInput -------------------------------------------------------------------------------- /src/components/Form/Form.js: -------------------------------------------------------------------------------- 1 | import FormHeader from "./FormHeader" 2 | import FormInput from "./FormInput" 3 | import React, {useState} from "react" 4 | import supabase from "../../../services/supabase" 5 | import { useAuth } from "../../../hooks/UserContext" 6 | import { useRouter } from "next/router" 7 | import Loading from "../Loading" 8 | import MessagePopup from "../MessagePopup" 9 | 10 | 11 | 12 | function Form(){ 13 | const [stateLogin, setStateLogin] = useState({ 14 | loading: false, 15 | PopupMessage: false, 16 | message: "", 17 | type: "success" 18 | }) 19 | 20 | const router = useRouter() 21 | const [user, setUser] = useAuth() 22 | 23 | 24 | async function handleLogin(date){ 25 | setStateLogin({...stateLogin, loading: true}) 26 | let { user, error } = await supabase.auth.signIn({ 27 | email: date.email, 28 | password: date.senha, 29 | }) 30 | 31 | if (error){ 32 | setStateLogin({...stateLogin, loading: false}) 33 | setStateLogin({...stateLogin, PopupMessage: true, message: error.message, type: "error"}) 34 | 35 | const inteval = setTimeout(() => setStateLogin({...stateLogin, PopupMessage: false}), 1500) 36 | return () => clearInterval(inteval) 37 | } 38 | setUser(user) 39 | router.push("/chat") 40 | } 41 | 42 | async function handleRegistre(date){ 43 | setStateLogin({...stateLogin, loading: true}) 44 | let { user, error } = await supabase.auth.signUp({ 45 | email: date.email, 46 | password: date.senha 47 | }) 48 | 49 | if (error){ 50 | setStateLogin({...stateLogin, loading: false}) 51 | setStateLogin({...stateLogin, PopupMessage: true, message: error.message, type: "error"}) 52 | 53 | const inteval = setTimeout(() => setStateLogin({...stateLogin, PopupMessage: false}), 1500) 54 | return () => clearInterval(inteval) 55 | } 56 | 57 | 58 | setStateLogin({...stateLogin, loading: false, PopupMessage: true, message: " Confirme seu email para continuar ", type: "success"}) 59 | 60 | const inteval = setTimeout(() => setStateLogin({...stateLogin, PopupMessage: false}), 1500) 61 | return () => clearInterval(inteval) 62 | } 63 | 64 | 65 | function handleChangeLogin(){ 66 | setStateLogin(!stateLogin) 67 | 68 | } 69 | 70 | 71 | return ( 72 | <> 73 | {stateLogin.PopupMessage ? : 74 | stateLogin.loading ? : 75 | user || stateLogin 76 | ?
77 | 78 | 82 |
83 | 84 | :
85 | 86 | 90 |
91 | 92 | } 93 | 94 | 105 | 106 | ) 107 | 108 | } 109 | 110 | export default Form 111 | 112 | -------------------------------------------------------------------------------- /pages/404.js: -------------------------------------------------------------------------------- 1 | import { Box, Button, Text, Image } from '@skynexui/components'; 2 | import Head from "next/head" 3 | import { useRouter } from "next/router" 4 | 5 | 6 | 7 | 8 | 9 | 10 | function Page404() { 11 | //jsx 12 | const roteamento = useRouter() 13 | return ( 14 | <> 15 | 16 | 17 | 18 | 19 | 404-Page not found 20 | 21 | 22 | 23 | 35 | 38 | 46 | 404 47 | 48 | 49 | 57 | Você Perdeu o Caminho de Casa 58 | 59 | 60 | 69 | Não se preocupe, você não está só, volte para o inicio. 70 | 71 | 72 |