Implementando Modal

williamdlm · Oct 19, 2021 · c6d9562 · c6d9562
1 parent 7be54c0
commit c6d9562
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 44 deletions.
diff --git a/pages/index.js b/pages/index.js
@@ -6,35 +6,29 @@ import {
  ExperienceContext,
  ExperienceProvider,
 } from "../src/contexts/ExperienceContext";
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import GoogleLogIn from "../src/components/GoogleLogIn";
 import Facebook from "../src/components/Facebook";
-
-function LogOnScreen() {
- return (
- <>
- <Header />
- <MainComplete />
- </>
- );
-}
+import ModalComplete from "../src/components/Modal";
 
 export default function Home(props) {
- const { isLogged } = useContext(ExperienceContext);
- console.log(props);
-
  const [screenState, setScreenState] = React.useState(props.isLogged);
+ const [isModalVisible, setIsModalVisible] = React.useState(false);
+
+ function handleModal(param) {
+ if (param === 0) {
+ setIsModalVisible(false);
+ } else {
+ setIsModalVisible(true);
+ }
+ }
 
  function handleStatusLogged(event) {
  console.log("event " + event);
  setScreenState(event);
  }
  useEffect(() => {}, []);
- useEffect(() => {
- //if (props.isLogged == 1) {
- //setScreenState(1);
- // }
- }, [screenState]);
+ useEffect(() => {}, [screenState]);
  return (
  <ExperienceProvider
  level={props.level}
@@ -56,6 +50,7 @@ export default function Home(props) {
  content="etEJ5pGxXGSqGyGM_OOMKO4UWHWrkJQ2TqDxRcR2iwY"
  />
  </Head>
+ {isModalVisible && <ModalComplete />}
  {/* {screenState === 0 ? (
  <GoogleLogIn handleStatusLogged={handleStatusLogged} />
  ) : (
@@ -64,7 +59,12 @@ export default function Home(props) {
  {screenState !== 1 && (
  <Facebook handleStatusLogged={handleStatusLogged} />
  )}
- {screenState === 1 && <LogOnScreen />}
+ {screenState === 1 && (
+ <>
+ <Header />
+ <MainComplete handleModal={handleModal} />
+ </>
+ )}
  </Background>
  </ExperienceProvider>
  );

diff --git a/src/components/Facebook/index.js b/src/components/Facebook/index.js
@@ -34,8 +34,6 @@ export default function Facebook({ handleStatusLogged }) {
  changePlayerName(response.name);
  };
 
- const componentClicked = () => console.log("clicked");
-
  const FbContent = (
  <div
  style={{
@@ -53,17 +51,6 @@ export default function Facebook({ handleStatusLogged }) {
 
  return (
  <>
- {/* {state.isLoggedIn ? (
- <FbContent />
- ) : (
- <FacebookLogin
- appId="632902014369254"
- //autoLoad={true}
- fields="name,email,picture"
- onClick={componentClicked}
- callback={responseFacebook}
- />
- )} */}
  <div
  style={{
  width: "100%",
@@ -74,10 +61,9 @@ export default function Facebook({ handleStatusLogged }) {
  }}
  >
  <FacebookLogin
- appId="632902014369254"
+ appId="283520543647320"
  // autoLoad={true}
  fields="name,email,picture"
- onClick={componentClicked}
  callback={responseFacebook}
  />
  </div>

diff --git a/src/components/Main/index.js b/src/components/Main/index.js
@@ -133,9 +133,10 @@ Main.MiniCard = styled.div`
  }
 `;
 
-export function MainComplete() {
+export function MainComplete({ handleModal }) {
  const router = useRouter();
- const { handleRounds } = useContext(ExperienceContext);
+ const handleModalMain = () => handleModal(1);
+
  return (
  <Main>
  <Main.PlayerArea
@@ -163,7 +164,7 @@ export function MainComplete() {
  />
  <p>Classico</p>
  </Main.MiniCard>
- <Main.MiniCard>
+ <Main.MiniCard onClick={() => handleModalMain()}>
  <img
  className="icon"
  src="https://res.cloudinary.com/dhmkfekt2/image/upload/v1633054930/scroll_jbw9wv.png"

diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
@@ -0,0 +1,52 @@
+import React from "react";
+import styled from "styled-components";
+import Button from "../Button";
+import db from "../../../db.json";
+
+const ContainerModal = styled.div`
+ justify-content: center;
+ align-items: center;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ position: absolute;
+ z-index: 99;
+`;
+
+const Modal = styled.div`
+ /* position: absolute; */
+ text-align: center;
+ display: flex;
+ width: 15rem;
+ height: 20rem;
+ background-color: ${db.theme.colors.yellow};
+ color: black;
+ padding: 3rem 1rem;
+ flex-wrap: wrap;
+`;
+
+export default function ModalComplete() {
+ return (
+ <ContainerModal>
+ <Modal>
+ <div>
+ <h1>Titulo</h1>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+ pulvinar sem augue, quis convallis odio ornare vel. Cras fringilla
+ lorem.
+ </p>
+ </div>
+ <Button
+ style={{
+ backgroundColor: `${db.theme.colors.blue}`,
+ alignSelf: "flex-end",
+ }}
+ >
+ Continuar
+ </Button>
+ </Modal>
+ </ContainerModal>
+ );
+}
diff --git a/src/contexts/ExperienceContext.js b/src/contexts/ExperienceContext.js
@@ -1,7 +1,6 @@
 import { createContext, useState, useEffect } from "react";
 import Cookies from "js-cookie";
 import db from "../../db.json";
-import { typeOf } from "react-is";
 
 export const ExperienceContext = createContext({});
 
@@ -33,7 +32,7 @@ export function ExperienceProvider({ children, ...rest }) {
  "https://st2.depositphotos.com/1009634/7235/v/950/depositphotos_72350117-stock-illustration-no-user-profile-picture-hand.jpg"
  );
 
- console.log(rest.isLogged);
+ console.log(`Status: ${rest.isLogged ? "Logado" : "Não Logado"} `);
 
  function changePlayerImage(url) {
  setPlayerImage(url);
@@ -63,9 +62,6 @@ export function ExperienceProvider({ children, ...rest }) {
  }
  }
 
- // useEffect(() => {
- // console.log(totalRounds);
- // }, [totalRounds]);
  useEffect(() => {
  Cookies.set("level", String(level));
  Cookies.set("currentExperience", String(currentExperience));
@@ -90,8 +86,6 @@ export function ExperienceProvider({ children, ...rest }) {
  playerImage,
  ]);
 
- // console.log(typeof Cookies.get("pointsBarType"));
-
  function handleIsLogged() {
  setIsLogged(1);
  }