Merge pull request #270 from alura-challenges/aula05

final aula 05
alura-challenges · Jan 29, 2021 · 7c4e704 · 7c4e704 · vercel · Jan 29, 2021
2 parents f41c6c5 + 567f81a
commit 7c4e704
Show file tree

Hide file tree

Showing 11 changed files with 2,287 additions and 47 deletions.
diff --git a/db.json b/db.json
@@ -1,43 +1,61 @@
 {
-  "bg": "https://i2.wp.com/css-tricks.com/wp-content/uploads/2017/06/css-is-awesome-scaled.jpg?resize=1536%2C1208&ssl=1",
-  "title": "Quiz CSS da Alura",
-  "description": "Teste os seus conhecimentos sobre CSS e vamos ver quantos layouts você vai deixar de quebrar",
+  "bg": "https://www.hitalent.co/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMmJDQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--1452099b706ad7d079f7a3a4dd5d702ebeeae45f/HiTalent.png",
+  "title": "Quiz JavaScript #AluraQuiz",
+  "description": "Um quiz rápido sobre o mundo do JavaScript",
   "questions": [
     {
-      "image": "https://media.giphy.com/media/xUOxf3yDKCuwpOlT3i/giphy.gif",
-      "title": "Como fazer um seletor por id via CSS?",
-      "description": "Essa é pra aquecer",
-      "answer": 2,
+      "image": "https://media.giphy.com/media/j5P0DQIOf4PonLi55G/giphy.gif",
+      "title": "Qual a diferença entre = , == e === ?",
+      "description": "Pergunta fácil em!",
+      "answer": 1,
       "alternatives": [
-        ".elemento",
-        "*elemento",
-        "#elemento",
-        "%elemento"
+        "São a mesma coisa",
+        "O = significa atribuição de valor. Já == verifica a igualdade do valor, enquanto === verifica valor e tipo de variável."
       ]
     },
     {
-      "image": "https://media.giphy.com/media/13FrpeVH09Zrb2/giphy.gif",
-      "title": "Como fazer um background gradiente com css?",
-      "description": "Faz tempo em haha",
+      "image": "https://media.giphy.com/media/Ie2Hs3A0uJRtK/giphy.gif",
+      "title": "Que tipos de dados são suportados em JavaScript?",
+      "description": "E agora? Você sabe?",
       "answer": 0,
       "alternatives": [
-         "background: linear-gradient(#e66465, #9198e5);",
-         "background: gradient(#e66465, #9198e5);"
+        "Number, String, Undefined, Null e Bool.",
+        "Int, String, Undefined, Null e Bool."
+      ]
+    },
+    {
+      "image": "https://media.giphy.com/media/iI4vhciiVh2b3j9sgo/giphy.gif",
+      "title": "Qual a diferença de window e global?",
+      "answer": 1,
+      "alternatives": [
+        "São a mesma coisa",
+        "window é o escopo global no browser, e global no node"
+      ]
+    },
+    {
+      "image": "https://media.giphy.com/media/iI4vhciiVh2b3j9sgo/giphy.gif",
+      "title": "Qual a forma antiga de trabalhar com AJAX na Web?",
+      "answer": 1,
+      "alternatives": [
+        "JSONHttpRequest",
+        "XMLHttpRequest",
+        "fetch"
       ]
     }
   ],
   "external": [
-    ""
+    "https://aluraquiz-css.omariosouto.vercel.app/",
+    "https://aluraquiz-devsoutinho.omariosouto.vercel.app/"
   ],
   "theme": {
     "colors": {
-      "primary": "#0d47a1",
-      "secondary": "#29b6f6",
-      "mainBg": "#171B35",
+      "primary": "#222222",
+      "secondary": "#e89c3f",
+      "mainBg": "#213f4e",
       "contrastText": "#FFFFFF",
       "wrong": "#FF5722",
       "success": "#4CAF50"
     },
     "borderRadius": "4px"
   }
-}
+}
diff --git a/package.json b/package.json
@@ -9,7 +9,10 @@
     "lint": "eslint ./ --fix"
   },
   "dependencies": {
+    "@crello/react-lottie": "^0.0.11",
+    "framer-motion": "^3.2.1",
     "next": "latest",
+    "prop-types": "^15.7.2",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-is": "^16.8.0",

diff --git a/pages/index.js b/pages/index.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 import Head from 'next/head';
+import { motion } from 'framer-motion';
 import { useRouter } from 'next/router';
 
 import db from '../db.json';
 import Widget from '../src/components/Widget';
+import Link from '../src/components/Link';
 import QuizLogo from '../src/components/QuizLogo';
 import QuizBackground from '../src/components/QuizBackground';
 import Footer from '../src/components/Footer';
@@ -37,11 +39,23 @@ export default function Home() {
   return (
     <QuizBackground backgroundImage={db.bg}>
       <Head>
-        <title>{db.title}</title>
+        <title>
+          AluraQuiz -
+          {db.title}
+        </title>
       </Head>
       <QuizContainer>
         <QuizLogo />
-        <Widget>
+        <Widget
+          as={motion.section}
+          transition={{ delay: 0, duration: 0.5 }}
+          variants={{
+            show: { opacity: 1, y: '0' },
+            hidden: { opacity: 0, y: '100%' },
+          }}
+          initial="hidden"
+          animate="show"
+        >
           <Widget.Header>
             <h1>{db.title}</h1>
           </Widget.Header>
@@ -66,14 +80,51 @@ export default function Home() {
           </Widget.Content>
         </Widget>
 
-        <Widget>
+        <Widget
+          as={motion.section}
+          transition={{ delay: 0.5, duration: 0.5 }}
+          variants={{
+            show: { opacity: 1 },
+            hidden: { opacity: 0 },
+          }}
+          initial="hidden"
+          animate="show"
+        >
           <Widget.Content>
             <h1>Quizes da Galera</h1>
 
-            <p>lorem ipsum dolor sit amet...</p>
+            <ul>
+              {db.external.map((linkExterno) => {
+                const [projectName, githubUser] = linkExterno
+                  .replace(/\//g, '')
+                  .replace('https:', '')
+                  .replace('.vercel.app', '')
+                  .split('.');
+
+                return (
+                  <li key={linkExterno}>
+                    <Widget.Topic
+                      as={Link}
+                      href={`/quiz/${projectName}___${githubUser}`}
+                    >
+                      {`${githubUser}/${projectName}`}
+                    </Widget.Topic>
+                  </li>
+                );
+              })}
+            </ul>
           </Widget.Content>
         </Widget>
-        <Footer />
+        <Footer
+          as={motion.footer}
+          transition={{ delay: 0.5, duration: 0.5 }}
+          variants={{
+            show: { opacity: 1 },
+            hidden: { opacity: 0 },
+          }}
+          initial="hidden"
+          animate="show"
+        />
       </QuizContainer>
       <GitHubCorner projectUrl="https://github.com/omariosouto" />
     </QuizBackground>

diff --git a/pages/quiz/[id].js b/pages/quiz/[id].js
@@ -1,9 +1,50 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable no-unused-vars */
 import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import QuizScreen from '../../src/screens/Quiz';
 
-export default function QuizDaGaleraPage() {
+export default function QuizDaGaleraPage({ dbExterno }) {
+  // const [db, setDb] React.useState({})
+  // React.useEffect(() => {
+  // });
   return (
-    <div>
-      Desafio da próxima aula junto com as animações
-    </div>
+    <ThemeProvider theme={dbExterno.theme}>
+      <QuizScreen
+        externalQuestions={dbExterno.questions}
+        externalBg={dbExterno.bg}
+      />
+    </ThemeProvider>
+    // {/* <pre style={{ color: 'black' }}>
+    //   {JSON.stringify(dbExterno.questions, null, 4)}
+    // </pre> */}
   );
 }
+
+export async function getServerSideProps(context) {
+  const [projectName, githubUser] = context.query.id.split('___');
+
+  try {
+    const dbExterno = await fetch(`https://${projectName}.${githubUser}.vercel.app/api/db`)
+      .then((respostaDoServer) => {
+        if (respostaDoServer.ok) {
+          return respostaDoServer.json();
+        }
+        throw new Error('Falha em pegar os dados');
+      })
+      .then((respostaConvertidaEmObjeto) => respostaConvertidaEmObjeto)
+      // .catch((err) => {
+      //   // console.error(err);
+      // });
+
+    // console.log('dbExterno', dbExterno);
+    // console.log('Infos que o Next da para nós', context.query.id);
+    return {
+      props: {
+        dbExterno,
+      },
+    };
+  } catch(err) {
+    throw new Error(err);
+  }
+}
diff --git a/pages/quiz/index.js b/pages/quiz/index.js
@@ -0,0 +1,16 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import QuizScreen from '../../src/screens/Quiz';
+import db from '../../db.json';
+
+export default function QuizDaGaleraPage() {
+  return (
+    <ThemeProvider theme={db.theme}>
+      <QuizScreen
+        externalQuestions={db.questions}
+        externalBg={db.bg}
+      />
+    </ThemeProvider>
+  );
+}
diff --git a/src/components/BackLinkArrow/index.js b/src/components/BackLinkArrow/index.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import Link from '../Link';
+
+const StyledLink = styled(Link)`
+  transition: .3s;
+  &:hover {
+    opacity: .5;
+  }
+`;
+
+const SVG = styled.svg`
+  vertical-align: middle;
+`;
+
+export default function BackLinkArrow({ href }) {
+  return (
+    <StyledLink href={href} style={{ width: '24px', height: '24px', display: 'inline-block' }}>
+      <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path fillRule="evenodd" clipRule="evenodd" d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z" fill="white" fillOpacity="0.87" />
+      </SVG>
+    </StyledLink>
+  );
+}
+
+BackLinkArrow.propTypes = {
+  href: PropTypes.string.isRequired,
+};
diff --git a/src/components/Input/index.js b/src/components/Input/index.js
@@ -12,6 +12,11 @@ const InputBase = styled.input`
   border-radius: ${({ theme }) => theme.borderRadius};
   outline: 0;
   margin-bottom: 25px;
+  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: ${({ theme }) => theme.colors.contrastText}DD;
+    opacity: 1; /* Firefox */
+  }
+
 `;
 
 export default function Input({ onChange, placeholder, ...props }) {

diff --git a/src/components/Link/index.js b/src/components/Link/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import NextLink from 'next/link';
+
+export default function Link({ children, href, ...props }) {
+  return (
+    <NextLink href={href} passHref>
+      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+      <a {...props}>
+        {children}
+      </a>
+    </NextLink>
+  );
+}