Atividades aula 5, finalização da API e Animações

contributors/ewerton-augusto.txt

@@ -0,0 +1,2 @@
+ewerton-augusto
+https://aluraquiz-inclusao-git-main.ewerton-augusto.vercel.app/

db.json

@@ -98,7 +98,9 @@
  }
  ],
  "external": [
- ""
+ "https://aluraquiz-base.alura-challenges.vercel.app/",
+ "https://tibiaquiz-base.lubrum.vercel.app/",
+ "https://poderosochefaoquiz.admsilva.vercel.app/"
  ],
  "theme": {
  "colors": {

package.json

@@ -8,6 +8,7 @@
  "eslint:init": "eslint --init"
  },
  "dependencies": {
+ "framer-motion": "^3.2.2-rc.1",
  "next": "latest",
  "react": "^16.8.0",
  "react-dom": "^16.8.0",

pages/_app.js

@@ -22,6 +22,14 @@ const GlobalStyle = createGlobalStyle`
  min-height: 100vh;
  }
 
+ ul{
+ padding: 0;
+ }
+
+ li { 
+ list-style-type:none; 
+ }
+
  #__next {
  flex: 1;
  display: flex;

pages/index.js

@@ -5,8 +5,10 @@ import QuizContainer from '../src/components/QuizContainer';
 import Widget from '../src/components/Widget';
 import Input from '../src/components/Input';
 import Button from '../src/components/Button';
+import Link from '../src/components/Link';
 import Footer from '../src/components/Footer';
 import GitHubCorner from '../src/components/GitHubCorner';
+import { motion } from 'framer-motion';
 import { useRouter } from 'next/router';
 
 export default function Home() {
@@ -17,7 +19,15 @@ export default function Home() {
  <QuizBackground backgroundImage={db.bg}>
  <QuizContainer>
  <QuizLogo />
- <Widget>
+ <Widget
+ as={motion.section}
+ transition={{ delay: 0.4, duration: 0.4 }}
+ variants={{
+ show: { opacity: 1, y: '0' },
+ hidden: { opacity: 0, y: '100%' },
+ }}
+ initial="hidden"
+ animate="show">
  <Widget.Header>
  <h1>{db.title}</h1>
  </Widget.Header>
@@ -30,26 +40,63 @@ export default function Home() {
  }
  }>
  <label>Digite seu nome para jogar:
- <Input 
- placeholder={'Digite o seu nome para jogar'} 
- onChange={(e) => setName(e.target.value)}
- name="nomeDoUsuario"
- value={name}
+ <Input
+  placeholder={'Digite o seu nome para jogar'}
+  onChange={(e) => setName(e.target.value)}
+  name="nomeDoUsuario"
+  value={name}
  />
  </label>
  <Button type="submit" disabled={name.length === 0}> Jogar {name} </Button>
  </form>
  </Widget.Content>
  </Widget>
- <Widget>
+ <Widget
+ as={motion.section}
+ transition={{ delay: 0.5, duration: 0.5 }}
+ variants={{
+ show: { opacity: 1, y: '0' },
+ hidden: { opacity: 0, y: '100%' },
+ }}
+ initial="hidden"
+ animate="show"
+ >
  <Widget.Content>
- <h1>Quiz da galera</h1>
- <p>Em breve</p>
+ <h1>Quizes da Galera</h1>
+ <ul>
+ {db.external.map((externalLink) => {
+ const [projectName, githubUser] = externalLink
+ .replace(/\//g, '')
+ .replace('https:', '')
+ .replace('.vercel.app', '')
+ .split('.');
+
+ return (
+ <li key={externalLink}>
+ <Widget.Topic
+ as={Link}
+ href={`/quiz/${projectName}___${githubUser}`}
+ disabled={name.length === 0}
+ >
+ {`${githubUser}/${projectName}`}
+ </Widget.Topic>
+ </li>
+ );
+ })}
+ </ul>
  </Widget.Content>
  </Widget>
- <Footer />
+ <Footer
+ as={motion.footer}
+ transition={{ delay: 0.6, duration: 0.6 }}
+ variants={{
+ show: { opacity: 1, y: '0' },
+ hidden: { opacity: 0, y: '100%' },
+ }}
+ initial="hidden"
+ animate="show" />
  </QuizContainer>
  <GitHubCorner projectUrl="https://github.com/ewerton-augusto" />
- </QuizBackground>
+ </QuizBackground >
  );
 }

pages/quiz/[id].js

@@ -1,9 +1,33 @@
 import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import QuizPage from '../quiz';
+
+export default function QuizDaGaleraPage({ dbExtern }) {
+ console.log(dbExtern);
+ return (
+ <ThemeProvider theme={dbExtern.theme}>
+ <QuizPage database={dbExtern} />
+ </ThemeProvider>
 
-export default function QuizDaGalera(){
- return(
- <div>
- Desafio da próxima aula com animações!
- </div>
  );
+}
+
+export async function getServerSideProps(context) {
+ const [projetctName, githubUser] = context.query.id.split('___');
+
+ const dbExtern = await fetch(`https://${projetctName}.${githubUser}.vercel.app/api/db`)
+ .then((serverResponse) => {
+ if (serverResponse.ok) {
+ return serverResponse.json();
+ }
+ throw new Error('Falha ao acessar a API para pegar os dados do Quiz.');
+ })
+ .then((convertedResponseInObject) => convertedResponseInObject)
+ .catch((err) => { throw new Error(err) });
+
+ return ({
+ props: {
+ dbExtern,
+ },
+ });
 }

pages/quiz.js → pages/quiz/index.js

@@ -1,21 +1,32 @@
 import React from 'react';
-import db from '../db.json';
-import QuizLogo from '../src/components/QuizLogo';
-import QuizBackground from '../src/components/QuizBackground';
-import QuizContainer from '../src/components/QuizContainer';
-import Widget from '../src/components/Widget';
-import QuizImage from '../src/components/QuizImage';
-import AlternativesForm from '../src/components/AlternativesForm';
-import Button from '../src/components/Button';
-import Footer from '../src/components/Footer';
-import GitHubCorner from '../src/components/GitHubCorner';
+import db from '../../db.json';
+import QuizLogo from '../../src/components/QuizLogo';
+import QuizBackground from '../../src/components/QuizBackground';
+import QuizContainer from '../../src/components/QuizContainer';
+import Widget from '../../src/components/Widget';
+import QuizImage from '../../src/components/QuizImage';
+import BackLinkArrow from '../../src/components/BackLinkArrow';
+import AlternativesForm from '../../src/components/AlternativesForm';
+import Button from '../../src/components/Button';
+import Footer from '../../src/components/Footer';
+import GitHubCorner from '../../src/components/GitHubCorner';
+import { motion } from 'framer-motion';
 import { useRouter } from 'next/router';
+import Link from '../../src/components/Link';
 
 function LoadingWidget() {
  return (
- <Widget>
+ <Widget
+ as={motion.section}
+ transition={{ delay: 0.1, duration: 0.1 }}
+ variants={{
+ show: { opacity: 1, y: '0' },
+ hidden: { opacity: 0, y: '40%' },
+ }}
+ initial="hidden"
+ animate="show">
  <Widget.Header>
- Carregando dados - {db.title}
+ Carregando dados {db.title}
  </Widget.Header>
  <QuizImage src={'/loading.gif'} />
  <Widget.Content>
@@ -27,7 +38,16 @@ function LoadingWidget() {
 
 function ResultWidget({ results, nome }) {
  return (
- <Widget>
+ <Widget
+ as={motion.section}
+ transition={{ delay: 0.7, duration: 0.7 }}
+ variants={{
+ show: { opacity: 1, y: '0' },
+ hidden: { opacity: 0, y: '100%' },
+ }}
+ initial="hidden"
+ animate="show"
+ >
  <Widget.Header>
  <h1>{nome}</h1>
  <p>Final de jogo. Parabéns pela participação!</p>
@@ -40,6 +60,9 @@ function ResultWidget({ results, nome }) {
  <ul>
  {results.map((result, i) => <li key={`result__${result}`}> {`#Pergunta ${i + 1}: ${result === true ? 'Acertou' : 'Errou'}`} </li>)}
  </ul>
+ <Widget.Topic as={Link} href="/">
+ Jogar Novamente
+ </Widget.Topic>
  </Widget.Content>
  </Widget>
  );
@@ -53,9 +76,18 @@ function QuestionWidget({ question, questionIndex, totalQuestions, name, onSubmi
  const isCorrect = selectedAlternative === question.answer;
 
  return (
- <Widget>
+ <Widget
+ as={motion.section}
+ transition={{ delay: 0.2, duration: 0.5 }}
+ variants={{
+ show: { opacity: 1, y: '0' },
+ hidden: { opacity: 0, y: '100%' },
+ }}
+ initial="hidden"
+ animate="show"
+ >
  <Widget.Header>
- <h1>{`Pergunta ${questionIndex + 1} de ${totalQuestions}`}</h1>
+ <BackLinkArrow href="/" /> {`Pergunta ${questionIndex + 1} de ${totalQuestions}`}
  </Widget.Header>
  <QuizImage src={question.image} />
  <Widget.Content>
@@ -110,15 +142,19 @@ const screenStates = {
  RESULT: 'RESULT'
 };
 
-export default function QuizPage() {
+export default function QuizPage({database}) {
+ if(!database){
+ database = db;
+ }
+
  const router = useRouter();
  const { name } = router.query;
 
  const [results, setresults] = React.useState([]);
  const [screenState, setScreenState] = React.useState(screenStates.LOADING);
- const totalQuestions = db.questions.length;
+ const totalQuestions = database.questions.length;
  const [questionIndex, setQuestionIndex] = React.useState(0);
- const question = db.questions[questionIndex];
+ const question = database.questions[questionIndex];
 
  const addResult = (result) => {
  setresults([...results, result]);
@@ -134,7 +170,7 @@ export default function QuizPage() {
  }
 
  return (
- <QuizBackground backgroundImage={db.bg}>
+ <QuizBackground backgroundImage={database.bg}>
  <QuizContainer>
  <QuizLogo />
  {screenState === screenStates.QUIZ && (
@@ -149,7 +185,14 @@ export default function QuizPage() {
  )}
  {screenState === screenStates.LOADING && <LoadingWidget />}
  {screenState === screenStates.RESULT && <ResultWidget results={results} name={name} />}
- <Footer />
+ <Footer as={motion.footer}
+ transition={{ delay: 0.6, duration: 0.6 }}
+ variants={{
+ show: { opacity: 1, y: '0' },
+ hidden: { opacity: 0, y: '100%' },
+ }}
+ initial="hidden"
+ animate="show" />
  </QuizContainer>
  <GitHubCorner projectUrl="https://github.com/ewerton-augusto" />
  </QuizBackground>