deploy

package.json

@@ -9,12 +9,14 @@
  "lint": "next lint"
  },
  "dependencies": {
+ "js-cookie": "^3.0.0",
  "next": "11.1.0",
  "react": "17.0.2",
  "react-dom": "17.0.2",
  "sass": "^1.38.1"
  },
  "devDependencies": {
+ "@types/js-cookie": "^2.2.7",
  "@types/react": "^17.0.19",
  "@types/react-dom": "^17.0.9",
  "eslint": "7.32.0",

src/components/LevelUpModal/index.tsx

@@ -0,0 +1,22 @@
+import useChallenge from '../../hooks/useChallenge';
+import styles from './styles.module.scss';
+
+export function LevelUpModal(){
+ const { level, setIsLevelUpModalOpen } = useChallenge();
+
+ return(
+ <div className={styles.overlay}>
+ <div className={styles.container}>
+ <header>{level}</header>
+
+ <strong>Parabéns</strong>
+
+ <p>Você alcançou um novo level.</p>
+
+ <button type="button" onClick={()=>setIsLevelUpModalOpen(false)}>
+ <img src="/icons/close.svg" alt="Fechar" />
+ </button>
+ </div>
+ </div>
+ );
+}

src/components/LevelUpModal/styles.module.scss

@@ -0,0 +1,52 @@
+
+.overlay {
+ background-color: rgba(242, 243, 245, 0.8);
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .container {
+ background-color: var(--white);
+ width: 100%;
+ max-width: 400px;
+ padding: 2rem 3rem;
+ border-radius: 5px;
+ box-shadow: 0 0 60px rgba(0, 0, 0, 0.05);
+ text-align: center;
+ position: relative;
+
+ header {
+ font-size: 8.75rem;
+ font-weight: 600;
+ color: var(--blue);
+ background: url('/icons/modalIcon.svg') no-repeat center;
+ background-size: contain;
+ }
+
+ strong {
+ font-size: 2.25rem;
+ color: var(--text);
+ }
+
+ p {
+ font-size: 1.25rem;
+ color: var(--text);
+ margin-top: 0.25rem;
+ }
+
+ button {
+ position: absolute;
+ right: 0.5rem;
+ top: 0.5rem;
+ background: transparent;
+ border: 0;
+ font-size: 0;
+ }
+ }
+}

src/context/ChallengeContext.tsx

@@ -1,10 +1,13 @@
-import challenges from '../../challenges.json';
-
 import { createContext, ReactNode, useEffect, useState } from 'react';
-import useCountdown from '../hooks/useCountdown';
+import { LevelUpModal } from '../components/LevelUpModal';
+import challenges from '../../challenges.json';
+import Cookies from 'js-cookie';
 
 type ReactChildrenProps = {
  children: ReactNode;
+ level: number;
+ currentXP: number;
+ challengesCompleted: number;
 }
 
 type ChallengeProps = {
@@ -19,6 +22,8 @@ type ChallengeContextProps = {
  challengesCompleted: number;
  currentChallenge: ChallengeProps | null;
  experienceToNextLevel: number;
+ isLevelUpModalOpen: boolean;
+ setIsLevelUpModalOpen: (key:boolean)=>void;
  levelUp: ()=>void;
  startNewChallenge: ()=>void;
  resetChallenge: ()=>void;
@@ -27,21 +32,29 @@ type ChallengeContextProps = {
 
 const ChallengeContext = createContext({} as ChallengeContextProps);
 
-
-function ChallengeContextProvider({children}:ReactChildrenProps){
- const [level, setLevel] = useState(1);
- const [currentXP, setCurrentXP] = useState(0);
- const [challengesCompleted, setChallengesCompleted] = useState(0);
+function ChallengeContextProvider({children, ...rest}:ReactChildrenProps){
+ const [level, setLevel] = useState(rest.level?? 1);
+ const [currentXP, setCurrentXP] = useState(rest.currentXP?? 0);
+ const [challengesCompleted, setChallengesCompleted] = useState(rest.challengesCompleted?? 0);
  const [currentChallenge, setCurrentChallenge] = useState<ChallengeProps>(null);
+ const [ isLevelUpModalOpen, setIsLevelUpModalOpen ] = useState(false);
 
  const experienceToNextLevel = Math.pow((level + 1) * 4, 2)
 
  useEffect(() => {
  Notification.requestPermission();
  }, [])
 
+ useEffect(() => {
+ Cookies.set('level', String(level));
+ Cookies.set('currentXP', String(currentXP));
+ Cookies.set('challengesCompleted', String(challengesCompleted));
+
+ }, [level, currentXP, challengesCompleted])
+
  function levelUp(){
  setLevel(prev=>(prev+1));
+ setIsLevelUpModalOpen(true);
  }
 
  function startNewChallenge(){
@@ -91,12 +104,15 @@ function ChallengeContextProvider({children}:ReactChildrenProps){
  challengesCompleted,
  currentChallenge,
  experienceToNextLevel,
+ isLevelUpModalOpen,
+ setIsLevelUpModalOpen,
  levelUp,
  startNewChallenge,
  resetChallenge,
  completeChallenge
  }}>
  {children}
+ {isLevelUpModalOpen && <LevelUpModal />}
  </ChallengeContext.Provider>
  )
 }

src/pages/_app.tsx

@@ -3,9 +3,7 @@ import '../styles/globals.scss';
 
 function MyApp({ Component, pageProps }) {
  return(
- <ChallengeContextProvider>
- <Component {...pageProps} />
- </ChallengeContextProvider>
+ <Component {...pageProps} />
  ) 
 }
 

src/pages/index.tsx

@@ -7,28 +7,52 @@ import Head from 'next/head';
 
 import styles from '../styles/pages/Home.module.scss';
 import { CountdownContextProvider } from '../context/CountdownContext';
+import { GetServerSideProps } from 'next';
+import Cookies from 'js-cookie';
+import { ChallengeContextProvider } from '../context/ChallengeContext';
+
+type HomeProps = {
+ level: number;
+ currentXP: number;
+ challengesCompleted: number;
+}
+
+export default function Home({level,currentXP,challengesCompleted}:HomeProps) {
 
-export default function Home() {
  return (
- <div className={styles.container}>
- <Head>
- <title>Home | Moveit</title>
- </Head>
+ <ChallengeContextProvider level={level} currentXP={currentXP} challengesCompleted={challengesCompleted}>
+ <div className={styles.container}>
+ <Head>
+ <title>Home | Moveit</title>
+ </Head>
 
- <ExperienceBar />
-
- <CountdownContextProvider>
- <section>
- <div>
- <Profile />
- <CompletedChallenges />
- <Countdown />
- </div>
- <div>
- <ChallengeBox />
- </div>
- </section>
- </CountdownContextProvider>
- </div>
+ <ExperienceBar />
+
+ <CountdownContextProvider>
+ <section>
+ <div>
+ <Profile />
+ <CompletedChallenges />
+ <Countdown />
+ </div>
+ <div>
+ <ChallengeBox />
+ </div>
+ </section>
+ </CountdownContextProvider>
+ </div>
+ </ChallengeContextProvider>
  )
 }
+
+export const getServerSideProps:GetServerSideProps = async ({req}) => {
+ const {level, currentXP, challengesCompleted} = req.cookies;
+
+ return{
+ props:{
+ level: Number(level),
+ currentXP: Number(currentXP),
+ challengesCompleted: Number(challengesCompleted)
+ }
+ }
+}