Atividades desenvolvidas da aula 3 da imersão React

db.json

@@ -39,6 +39,6 @@
         "wrong": "#FF5722",
         "success": "#4CAF50"
       },
-      "borderRadius": "5px"
+      "borderRadius": "4px"
     }
   }

pages/_app.js

@@ -17,16 +17,11 @@ const GlobalStyle = createGlobalStyle`
     // Deixa branco no começo
     color: ${({ theme }) => theme.colors.contrastText};
   }
+
   html, body {
     min-height: 100vh;
   }
 
-  form,
-  form label{
-    display:flex;
-    flex-direction: column;
-  }
-
   #__next {
     flex: 1;
     display: flex;

pages/index.js

@@ -3,10 +3,11 @@ 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 QuizForm from '../src/components/QuizForm';
+import Input from '../src/components/Input';
+import Button from '../src/components/Button';
 import Footer from '../src/components/Footer';
 import GitHubCorner from '../src/components/GitHubCorner';
-import { Router, useRouter } from 'next/router';
+import { useRouter } from 'next/router';
 
 export default function Home() {
   const router = useRouter();
@@ -22,19 +23,22 @@ export default function Home() {
           </Widget.Header>
           <Widget.Content>
             <p>{db.description}</p>
-            <QuizForm onSubmit={
-              function(e){
+            <form onSubmit={
+              (e) => {
                 e.preventDefault();
                 router.push(`/quiz?name=${name}`);
               }
             }>
-              <QuizForm.Label>Digite seu nome para jogar:
-                <QuizForm.Input placeholder="Digite o seu nome para jogar" onChange={function(e){
-                  setName(e.target.value);
-                }} />
-              </QuizForm.Label>
-              <QuizForm.Button type="submit" disabled={name.length === 0}> Jogar {name} </QuizForm.Button>
-            </QuizForm>
+              <label>Digite seu nome para jogar:
+                <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>

pages/quiz.js

@@ -5,29 +5,110 @@ 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 Button from '../src/components/Button';
 import Footer from '../src/components/Footer';
 import GitHubCorner from '../src/components/GitHubCorner';
-
 import { useRouter } from 'next/router';
 
-export default function Home() {
+function LoadingWidget() {
+    return (
+        <Widget>
+            <Widget.Header>
+                Carregando...
+            </Widget.Header>
+            <Widget.Content>
+                [Desafio do loading...]
+            </Widget.Content>
+        </Widget>
+    );
+}
+
+function ResultWidget() {
+    return (
+        <Widget>
+            <Widget.Header>
+                Final de jogo!
+            </Widget.Header>
+            <Widget.Content>
+                Parabéns, você acertou X perguntas!!!
+            </Widget.Content>
+        </Widget>
+    );
+}
+
+function QuestionWidget({ question, questionIndex, totalQuestions, name, onSubmit }) {
+    const questionId = `question_${questionIndex}`;
+    return (
+        <Widget>
+            <Widget.Header>
+                <h1>{`Pergunta ${questionIndex + 1} de ${totalQuestions}`}</h1>
+            </Widget.Header>
+            <QuizImage src={question.image} />
+            <Widget.Content>
+                <form onSubmit={(e) => {
+                    e.preventDefault();
+                    onSubmit();
+                }
+                }>
+                    <h1>[Jogador: {name}]</h1>
+                    <h2>{question.title}</h2>
+                    <p>{question.description}</p>
+                    {question.alternatives.map((alternative, alternativeIndex) => {
+                        const alternativeId = `alternative_${alternativeIndex}`;
+                        return (
+                            <Widget.Topic as="label" htmlFor={alternativeId}>
+                                <input id={alternativeId} type="radio" name={questionId} />
+                                {alternative}
+                            </Widget.Topic>
+                        );
+                    })}
+                    <Button type="submit"> Confirmar </Button>
+                </form>
+            </Widget.Content>
+        </Widget>
+    );
+}
+
+const screenStates = {
+    QUIZ: 'QUIZ',
+    LOADING: 'LOADING',
+    RESULT: 'RESULT'
+};
+
+export default function QuizPage() {
     const router = useRouter();
     const { name } = router.query;
 
+    const [screenState, setScreenState] = React.useState(screenStates.LOADING);
+    const totalQuestions = db.questions.length;
+    const [questionIndex, setQuestionIndex] = React.useState(0);
+    const question = db.questions[questionIndex];
+
+    React.useEffect(() => {
+        setTimeout(() => setScreenState(screenStates.QUIZ), 1 * 1000);
+    }, []);
+
+    function handleSubmitQuiz() {
+        const nextQuestion = questionIndex + 1;
+        nextQuestion < totalQuestions?setQuestionIndex(nextQuestion):setScreenState(screenStates.RESULT);
+    }
+
     return (
         <QuizBackground backgroundImage={db.bg}>
             <QuizContainer>
                 <QuizLogo />
-                <Widget>
-                    <Widget.Header>
-                        <h1>{db.title}</h1>                        
-                    </Widget.Header>
-                    <QuizImage />
-                    <Widget.Content>
-                        <p>Jogador: {name} </p>                      
-                        <p>Perguntas em desenvolvimento</p>                        
-                    </Widget.Content>
-                </Widget>
+                {screenState === screenStates.QUIZ && (
+                    <QuestionWidget
+                        name={name}
+                        question={question}
+                        questionIndex={questionIndex}
+                        totalQuestions={totalQuestions}
+                        onSubmit={handleSubmitQuiz}
+                    />
+                )}
+                {screenState === screenStates.LOADING && <LoadingWidget />}
+
+                {screenState === screenStates.RESULT && <ResultWidget />}
                 <Footer />
             </QuizContainer>
             <GitHubCorner projectUrl="https://github.com/ewerton-augusto" />

src/components/Button/index.js

@@ -2,11 +2,10 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const Button = styled.button`
+  color: #FFF;
   background-color: ${({ theme }) => theme.colors.secondary};
-  color: ${({ theme }) => theme.colors.contrastText};
   border-radius: ${({ theme }) => theme.borderRadius};
   border: 0;
-
   width: 100%;
   padding: 10px 16px;
   font-weight: bold;
@@ -19,11 +18,11 @@ const Button = styled.button`
 
   &:hover,
   &:focus {
-    opacity: .5;
+    opacity: .8;
   }
 
   &:disabled {
-    background-color: #979797;
+    opacity: .6;
     cursor: not-allowed;
   }
 `;
@@ -33,4 +32,4 @@ Button.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-export default Button;
+export default Button;

src/components/Input/index.js

@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const InputBase = styled.input`
+  margin-top: 1rem;
   width: 100%;
   padding: 15px;
   font-size: 14px;
   border: 1px solid ${({ theme }) => theme.colors.primary};
-  color: ${({ theme }) => theme.colors.contrastText};
-  background-color: ${({ theme }) => theme.colors.mainBg};
   border-radius: ${({ theme }) => theme.borderRadius};
   outline: 0;
   margin-bottom: 25px;
@@ -36,4 +35,4 @@ Input.propTypes = {
   placeholder: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   value: PropTypes.string,
-};
+};

src/components/QuizImage/index.js

@@ -1,11 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-const Image = styled.div`
+const ImageBase = styled.img`
     width: 100%;
+    height: 150px;
+    object-fit: cover;
 `;
 
-export default function QuizImage() {
-    return(
-        <Image></Image>
-    )
+export default function QuizImage({ src, ...props }) {
+  return (
+      <ImageBase
+        src={src}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+      />
+  );
+}
+
+QuizImage.propTypes = {
+  src: PropTypes.string.isRequired,
 };

src/components/Widget/index.js

@@ -37,4 +37,22 @@ Widget.Content = styled.div`
   }
 `;
 
+Widget.Topic = styled.a`
+  outline: 0;
+  text-decoration: none;
+  color: ${({ theme }) => theme.colors.contrastText};
+  background-color: ${({ theme }) => `${theme.colors.primary}99`};
+  padding: 10px 15px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  border-radius: ${({ theme }) => theme.borderRadius};
+  transition: .3s;
+  display: block;
+
+  &:hover,
+  &:focus {
+    opacity: .8;
+  }
+`;
+
 export default Widget;