auth 1.0

.gitignore

@@ -32,3 +32,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+config.js

package.json

@@ -9,6 +9,7 @@
  "lint": "next lint"
  },
  "dependencies": {
+ "firebase": "^9.0.0-beta.8",
  "js-cookie": "^3.0.0",
  "next": "11.1.0",
  "react": "17.0.2",

service/index.tsx

@@ -0,0 +1,19 @@
+import { initializeApp } from "firebase/app";
+import { getFirestore, getDocs, getDoc, doc } from 'firebase/firestore'
+import { getAuth, signInWithPopup, signOut, GithubAuthProvider } from 'firebase/auth';
+
+const FirebaseConfig = {
+ apiKey: process.env.NEXT_PUBLIC_API_KEY,
+ authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
+ projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
+ storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
+ messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
+ appId: process.env.NEXT_PUBLIC_APP_ID
+};
+
+// Initialize Firebase
+const app = initializeApp(FirebaseConfig);
+const auth = getAuth();
+const database = getFirestore();
+
+export { auth, signInWithPopup, GithubAuthProvider, signOut, database, getDocs, getDoc, doc };

src/components/ChallengeBox/index.tsx

@@ -27,7 +27,7 @@ export default function ChallengeBox(){
 
  <main>
  <img src={`icons/${currentChallenge.type}.svg`} alt="Body" />
- <strong>Novo desafio</strong>
+ <strong>{currentChallenge.type === 'eye'? 'Mova os olhos':'Exercite-se'}</strong>
  <p>{currentChallenge.description}</p>
  </main>
 

src/components/Countdown/styles.module.scss

@@ -105,5 +105,6 @@
  > div {
  background: var(--green);
  height: inherit;
+ transition: width 1s linear;
  }
 }

src/components/ExperienceBar/ExperienceBar.module.scss

@@ -46,7 +46,7 @@
  height: 4px;
  border-radius: 4px;
  background: var(--green);
-
+ transition: width 1s ease;
  }
 
  span.currentExperience {

src/components/LevelUpModal/styles.module.scss

@@ -15,7 +15,7 @@
  background-color: var(--white);
  width: 100%;
  max-width: 400px;
- padding: 2rem 3rem;
+ padding: 2.5rem 3.5rem;
  border-radius: 5px;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.05);
  text-align: center;

src/components/NavBar/styles.module.scss

@@ -15,6 +15,8 @@
  padding: 1rem;
  height: 4.5rem;
  width: 4.5rem;
+
+ cursor: pointer;
  }
 
  > div {
@@ -52,11 +54,19 @@
 @media screen and (max-width: 800px){
  .nav {
  width: 100vw;
- height: 6rem;
+ height: 4rem;
 
  flex-direction: row;
  > div {
  flex-direction: row;
+
+ > div {
+ &.selected::before {
+ left: initial;
+ top: - 1.35rem;
+ transform: rotate(-90deg);
+ }
+ }
  }
  }
 }

src/components/Profile/index.tsx

@@ -1,13 +1,18 @@
+
+import { useAuth } from '../../hooks/useAuth';
 import useChallenge from '../../hooks/useChallenge';
 import styles from './Profile.module.scss';
 
+
 export default function Profile(){
  const { level } = useChallenge();
+ const { user } = useAuth();
+
  return(
  <div className={styles.profileContainer}>
- <img src="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/edgarxongas.png" alt="Edgar Jonas" />
+ <img src={user? user.avatar: 'icons/avatar.svg'} alt={user? user.name: 'avatar'} />
  <div>
- <strong>Edgar Jonas</strong>
+ <strong>{user? user.name:'Player 1'}</strong>
  <p>
  <img src="icons/Up.svg" alt="Up" /> 
  Level {level}

src/context/AuthContext.tsx

@@ -0,0 +1,72 @@
+import { createContext, ReactNode, useEffect, useState } from 'react';
+import { auth, signInWithPopup, GithubAuthProvider } from '../../service';
+
+type ReactChildren = {
+ children: ReactNode;
+}
+
+type UserProps = {
+ id: string;
+ name: string;
+ avatar: string;
+
+}
+
+type AuthContextProps = {
+ user: UserProps;
+ signInWithGithub: ()=>void;
+}
+
+const AuthContext = createContext({}as AuthContextProps);
+
+function AuthContextProvider({children}:ReactChildren){
+ const [user, setUser] = useState<UserProps>()
+
+ async function signInWithGithub(){
+ try {
+ //const auth = getAuth();
+ const provider = new GithubAuthProvider();
+ const { user } = await signInWithPopup(auth,provider);
+ console.log({user});
+ const _user = {
+ id: user.uid,
+ name: user.displayName,
+ avatar: user.photoURL
+ }
+ setUser(_user);
+ console.log(_user);
+
+ } catch (error) { 
+ console.error(error);
+ }
+ }
+
+ useEffect(() => {
+ const subscribe = auth.onAuthStateChanged(user=>{
+ if(user){
+ const { displayName, photoURL, uid } = user;
+ const _user = {
+ id: uid,
+ name: displayName,
+ avatar: photoURL
+ }
+ setUser(_user);
+ }
+ })
+
+ return () => {
+ subscribe();
+ }
+ }, [])
+
+ return(
+ <AuthContext.Provider value={{
+ user,
+ signInWithGithub
+ }}>
+ {children}
+ </AuthContext.Provider>
+ )
+}
+
+export { AuthContext, AuthContextProvider }

src/context/ChallengeContext.tsx

@@ -5,9 +5,9 @@ import Cookies from 'js-cookie';
 
 type ReactChildrenProps = {
  children: ReactNode;
- level: number;
- currentXP: number;
- challengesCompleted: number;
+ level?: number;
+ currentXP?: number;
+ challengesCompleted?: number;
 }
 
 type ChallengeProps = {
@@ -23,6 +23,9 @@ type ChallengeContextProps = {
  currentChallenge: ChallengeProps | null;
  experienceToNextLevel: number;
  isLevelUpModalOpen: boolean;
+ setLevel:(value:number)=>void;
+ setCurrentXP: (value:number)=>void;
+ setChallengesCompleted: (value:number)=>void;
  setIsLevelUpModalOpen: (key:boolean)=>void;
  levelUp: ()=>void;
  startNewChallenge: ()=>void;
@@ -106,6 +109,9 @@ function ChallengeContextProvider({children, ...rest}:ReactChildrenProps){
  currentChallenge,
  experienceToNextLevel,
  isLevelUpModalOpen,
+ setChallengesCompleted,
+ setLevel,
+ setCurrentXP,
  setIsLevelUpModalOpen,
  levelUp,
  startNewChallenge,

src/hooks/useAuth.ts

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { AuthContext } from "../context/AuthContext";
+
+export function useAuth(){
+ return useContext(AuthContext);
+}

src/pages/_app.tsx

@@ -1,12 +1,19 @@
 import { NavBar } from '../components/NavBar';
+import { CountdownContextProvider } from '../context/CountdownContext';
+import { ChallengeContextProvider } from '../context/ChallengeContext';
 import '../styles/globals.scss';
+import { AuthContextProvider } from '../context/AuthContext';
 
 function MyApp({ Component, pageProps }) {
  return(
- <>
- <NavBar />
- <Component {...pageProps} />
- </>
+ <AuthContextProvider>
+ <ChallengeContextProvider>
+ <CountdownContextProvider>
+ <NavBar />
+ <Component {...pageProps} />
+ </CountdownContextProvider>
+ </ChallengeContextProvider>
+ </AuthContextProvider>
  ) 
 }
 

src/pages/index.tsx

@@ -1,51 +1,54 @@
+import { useEffect } from 'react';
+import { GetServerSideProps } from 'next';
 import ExperienceBar from '../components/ExperienceBar';
 import Profile from '../components/Profile';
 import CompletedChallenges from '../components/CompletedChallenges';
 import Countdown from '../components/Countdown';
 import ChallengeBox from '../components/ChallengeBox';
 import Head from 'next/head';
-
+import useChallenge from '../hooks/useChallenge';
 import styles from '../styles/pages/Home.module.scss';
-import { CountdownContextProvider } from '../context/CountdownContext';
-import { GetServerSideProps } from 'next';
-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({level,currentXP, challengesCompleted}:HomeProps) {
+ const { setLevel, setCurrentXP, setChallengesCompleted} = useChallenge();
+ useEffect(() => {
+ setLevel(level)
+ setCurrentXP(currentXP)
+ setChallengesCompleted(challengesCompleted)
+
+ }, [level,currentXP,challengesCompleted])
 
  return (
-  <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>
+ <section>
+ <div>
+ <Profile />
+ <CompletedChallenges />
+ <Countdown />
+ </div>
+ <div>
+ <ChallengeBox />
+ </div>
+ </section>
  </div>
- </ChallengeContextProvider>
+ </>
  )
 }
 
 export const getServerSideProps:GetServerSideProps = async ({req}) => {
- const {level, currentXP, challengesCompleted} = req.cookies;
+ const { level, currentXP, challengesCompleted } = req.cookies;
 
  return{
  props:{