Skip to content

Commit

Permalink
Persistencia de informacoes para level e experience funcionando
Browse files Browse the repository at this point in the history
  • Loading branch information
@williamdlm
williamdlm committed Oct 12, 2021
1 parent 51cfc3b commit 6868e81
Show file tree
Hide file tree
Showing 8 changed files with 158 additions and 114 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
},
"dependencies": {
"framer-motion": "^4.1.17",
"js-cookie": "^3.0.1",
"next": "latest",
"react": "^17.0.2",
"react-dom": "^17.0.2",
Expand Down
12 changes: 4 additions & 8 deletions pages/_app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,9 @@ const theme = db.theme;

export default function App({ Component, pageProps }) {
return (
<>
<ExperienceProvider>
<ThemeProvider theme={theme}>
<GlobalStyle />
<Component {...pageProps} />
</ThemeProvider>
</ExperienceProvider>
</>
<ThemeProvider theme={theme}>
<GlobalStyle />
<Component {...pageProps} />
</ThemeProvider>
);
}
33 changes: 25 additions & 8 deletions pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,32 @@ import Header from "../src/components/Header";
import Background from "../src/components/Background";
import Head from "next/head";
import { MainComplete } from "../src/components/Main";
import { ExperienceProvider } from "../src/contexts/ExperienceContext";

export default function Home() {
export default function Home(props) {
console.log(props);
return (
<Background>
<Head>
<title>TCC</title>
</Head>
<Header />
<MainComplete />
</Background>
<ExperienceProvider
level={props.level}
currentExperience={props.currentExperience}
>
<Background>
<Head>
<title>TCC</title>
</Head>
<Header />
<MainComplete />
</Background>
</ExperienceProvider>
);
}

export const getServerSideProps = async (ctx) => {
const { level, currentExperience } = ctx.req.cookies;
return {
props: {
level: Number(level),
currentExperience: Number(currentExperience),
},
};
};
196 changes: 106 additions & 90 deletions pages/quiz.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ import Button from "../src/components/Button";
import AlternativesForm from "../src/components/AlternativeForms";
import BackLinkArrow from "../src/components/BackLinkArrow";
import { useRouter } from "next/router";
import { ExperienceContext } from "../src/contexts/ExperienceContext";
import {
ExperienceContext,
ExperienceProvider,
} from "../src/contexts/ExperienceContext";

function ResultWidget({ results }) {
const router = useRouter();
Expand Down Expand Up @@ -62,80 +65,78 @@ function QuestionWidget({
const hasAlternativeSelected = selectedAlternative !== undefined;
const { completeQuestion } = useContext(ExperienceContext);
return (
<>
<Widget style={{ margin: "0 auto" }}>
<Widget.Header>
<BackLinkArrow href="/" />
<h3>
{/* <BackLinkArrow href="/" /> */}
Pergunta {`${questionIndex + 1}`} de {`${totalQuestions}`}
</h3>
</Widget.Header>
<Widget style={{ margin: "0 auto" }}>
<Widget.Header>
<BackLinkArrow href="/" />
<h3>
{/* <BackLinkArrow href="/" /> */}
Pergunta {`${questionIndex + 1}`} de {`${totalQuestions}`}
</h3>
</Widget.Header>

<img
alt="Descrição"
style={{
width: "100%",
height: "200px",
objectFit: "cover",
}}
src={question.image}
/>
<img
alt="Descrição"
style={{
width: "100%",
height: "200px",
objectFit: "cover",
}}
src={question.image}
/>

<Widget.Content>
<h2>{question.title}</h2>
<p>{question.description}</p>
<Widget.Content>
<h2>{question.title}</h2>
<p>{question.description}</p>

<AlternativesForm
onSubmit={(event) => {
event.preventDefault();
setIsQuestionSubmited(true);
addResult(isCorrect);
setTimeout(() => {
{
isCorrect && completeQuestion(1);
}
onSubmit();
setIsQuestionSubmited(false);
setSelectedAlternative(undefined);
}, 1 * 2000);
}}
>
{question.alternatives.map((alternative, alternativeIndex) => {
const alternativeId = `alternative__${alternativeIndex}`;
const alternativeStatus = isCorrect ? "SUCCESS" : "ERROR";
const isSelect = selectedAlternative === alternativeIndex;
return (
<Widget.Topic
as="label"
htmlFor={alternativeId}
key={alternativeId}
data-selected={isSelect}
data-status={isQuestionSubmited && alternativeStatus}
>
<input
style={{
display: "none",
}}
id={alternativeId}
type="radio"
name={questId}
onChange={() => setSelectedAlternative(alternativeIndex)}
/>
{alternative}
</Widget.Topic>
);
})}
<Button type="submit" disabled={!hasAlternativeSelected}>
Confirmar
</Button>
{isQuestionSubmited && isCorrect && <p>Você acertou!</p>}
{isQuestionSubmited && !isCorrect && <p>Você errou!</p>}
</AlternativesForm>
{/* <pre>{JSON.stringify(question, null, 4)}</pre> */}
</Widget.Content>
</Widget>
</>
<AlternativesForm
onSubmit={(event) => {
event.preventDefault();
setIsQuestionSubmited(true);
addResult(isCorrect);
setTimeout(() => {
{
isCorrect && completeQuestion(1);
}
onSubmit();
setIsQuestionSubmited(false);
setSelectedAlternative(undefined);
}, 1 * 2000);
}}
>
{question.alternatives.map((alternative, alternativeIndex) => {
const alternativeId = `alternative__${alternativeIndex}`;
const alternativeStatus = isCorrect ? "SUCCESS" : "ERROR";
const isSelect = selectedAlternative === alternativeIndex;
return (
<Widget.Topic
as="label"
htmlFor={alternativeId}
key={alternativeId}
data-selected={isSelect}
data-status={isQuestionSubmited && alternativeStatus}
>
<input
style={{
display: "none",
}}
id={alternativeId}
type="radio"
name={questId}
onChange={() => setSelectedAlternative(alternativeIndex)}
/>
{alternative}
</Widget.Topic>
);
})}
<Button type="submit" disabled={!hasAlternativeSelected}>
Confirmar
</Button>
{isQuestionSubmited && isCorrect && <p>Você acertou!</p>}
{isQuestionSubmited && !isCorrect && <p>Você errou!</p>}
</AlternativesForm>
{/* <pre>{JSON.stringify(question, null, 4)}</pre> */}
</Widget.Content>
</Widget>
);
}

Expand All @@ -145,7 +146,7 @@ const screenStates = {
RESULT: "RESULT",
};

export default function QuizPage() {
export default function QuizPage(props) {
const [screenState, setScreenState] = React.useState(screenStates.LOADING);
const [results, setResult] = React.useState([]);
const [currentQuestion, setCurrentQuestion] = React.useState(0);
Expand All @@ -172,22 +173,37 @@ export default function QuizPage() {
}
}
return (
<Background>
<QuizContainer>
{screenState === screenStates.QUIZ && (
<QuestionWidget
question={question}
totalQuestions={totalQuestions}
questionIndex={questionIndex}
onSubmit={handleSubmitQuiz}
addResult={addResult}
/>
)}
{screenState === screenStates.LOADING && <LoadingWidget />}
{screenState === screenStates.RESULT && (
<ResultWidget results={results} />
)}
</QuizContainer>
</Background>
<ExperienceProvider
level={props.level}
currentExperience={props.currentExperience}
>
<Background>
<QuizContainer>
{screenState === screenStates.QUIZ && (
<QuestionWidget
question={question}
totalQuestions={totalQuestions}
questionIndex={questionIndex}
onSubmit={handleSubmitQuiz}
addResult={addResult}
/>
)}
{screenState === screenStates.LOADING && <LoadingWidget />}
{screenState === screenStates.RESULT && (
<ResultWidget results={results} />
)}
</QuizContainer>
</Background>
</ExperienceProvider>
);
}

export const getServerSideProps = async (ctx) => {
const { level, currentExperience } = ctx.req.cookies;
return {
props: {
level: Number(level),
currentExperience: Number(currentExperience),
},
};
};
3 changes: 2 additions & 1 deletion src/components/ExperienceBar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const Span = styled.span`
margin: 0 1%;
display: block;
width: 5%;
text-align: center;
`;

function ExpBar() {
Expand All @@ -37,7 +38,7 @@ function ExpBar() {
const percentToNextLevel = Math.round(
(currentExperience * 100) / experienceToNextLevel
);
// console.log(level);
// console.log(experienceToNextLevel);
return (
<div style={{ width: "100%", display: "flex", alignItems: "baseline" }}>
<Span
Expand Down
1 change: 0 additions & 1 deletion src/components/Header/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,6 @@ Header.InfoBar = styled.div`
function HeaderComplete() {
const { level, currentExperience, experienceToNextLevel, name } =
useContext(ExperienceContext);
console.log(`ExperienceToNextLevel: ${experienceToNextLevel}`);
const namePart = name.split(" ");
return (
<Header>
Expand Down
21 changes: 15 additions & 6 deletions src/contexts/ExperienceContext.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,29 @@
import { createContext, useState } from "react";
import { createContext, useState, useEffect } from "react";
import Cookies from "js-cookie";

export const ExperienceContext = createContext({});

export function ExperienceProvider({ children }) {
const [level, setLevel] = useState(1);
const [currentExperience, setCurrentExperience] = useState(0);
export function ExperienceProvider({ children, ...rest }) {
const [level, setLevel] = useState(rest.level ?? 1);
const [currentExperience, setCurrentExperience] = useState(
rest.currentExperience ?? 0
);
// prettier-ignore
const experienceToNextLevel = Math.pow((level + 1) * 4, 2);
const name = "William Mota";

useEffect(() => {
Cookies.set("level", String(level));
Cookies.set("currentExperience", String(currentExperience));
}, [level, currentExperience]);

function levelUp() {
setLevel(level + 1);
}
const amount = 50;

// prettier-ignore
function completeQuestion(questionsCorrect) {
let finalExperience = currentExperience + amount * questionsCorrect;
let finalExperience = currentExperience + (amount * questionsCorrect);
if (finalExperience >= experienceToNextLevel) {
finalExperience = finalExperience - experienceToNextLevel;
levelUp();
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1219,6 +1219,11 @@ [email protected]:
merge-stream "^2.0.0"
supports-color "^8.0.0"

js-cookie@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==

"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
Expand Down

1 comment on commit 6868e81

@vercel
Copy link

@vercel vercel bot commented on 6868e81 Oct 12, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.