Skip to content

Commit

Permalink
Merge pull request #64 from alura-challenges/aula02
Browse files Browse the repository at this point in the history
ajutes aula 02
  • Loading branch information
omariosouto authored Jan 26, 2021
2 parents e107981 + 9f5fd51 commit 0ab6091
Show file tree
Hide file tree
Showing 10 changed files with 108 additions and 35 deletions.
23 changes: 23 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
},
};
12 changes: 10 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
"start": "next start",
"eslint:init": "eslint --init",
"lint": "eslint ./ --fix"
},
"dependencies": {
"next": "latest",
Expand All @@ -14,7 +16,13 @@
"styled-components": "^5.0.0"
},
"devDependencies": {
"babel-plugin-styled-components": "^1.8.0"
"babel-plugin-styled-components": "^1.8.0",
"eslint": "^7.16.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0"
},
"license": "MIT"
}
16 changes: 12 additions & 4 deletions pages/_app.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { createGlobalStyle, ThemeProvider } from 'styled-components'
import React from 'react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import Head from 'next/head';
import db from '../db.json';

const GlobalStyle = createGlobalStyle`
Expand All @@ -23,17 +25,23 @@ const GlobalStyle = createGlobalStyle`
display: flex;
flex-direction: column;
}
`
`;

const theme = db.theme;
const { theme } = db;

// eslint-disable-next-line react/prop-types
export default function App({ Component, pageProps }) {
return (
<>
<Head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet" />
</Head>
<ThemeProvider theme={theme}>
<GlobalStyle />
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
<Component {...pageProps} />
</ThemeProvider>
</>
)
);
}
22 changes: 10 additions & 12 deletions pages/_document.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'
import Document from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet()
const originalRenderPage = ctx.renderPage
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;

try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
})
ctx.renderPage = () => originalRenderPage({
enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
});

const initialProps = await Document.getInitialProps(ctx)
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
Expand All @@ -22,9 +20,9 @@ export default class MyDocument extends Document {
{sheet.getStyleElement()}
</>
),
}
};
} finally {
sheet.seal()
sheet.seal();
}
}
}
45 changes: 37 additions & 8 deletions pages/index.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import styled from 'styled-components'
import React from 'react';
import styled from 'styled-components';
import Head from 'next/head';
import { useRouter } from 'next/router';

import db from '../db.json';
import Widget from '../src/components/Widget'
import QuizLogo from '../src/components/QuizLogo'
import QuizBackground from '../src/components/QuizBackground'
import Footer from '../src/components/Footer'
import GitHubCorner from '../src/components/GitHubCorner'
import Widget from '../src/components/Widget';
import QuizLogo from '../src/components/QuizLogo';
import QuizBackground from '../src/components/QuizBackground';
import Footer from '../src/components/Footer';
import GitHubCorner from '../src/components/GitHubCorner';

// const BackgroundImage = styled.div`
// background-image: url(${db.bg});
Expand All @@ -25,16 +29,41 @@ export const QuizContainer = styled.div`
`;

export default function Home() {
const router = useRouter();
const [name, setName] = React.useState('');

return (
<QuizBackground backgroundImage={db.bg}>
<Head>
<title>AluraQuiz - Modelo Base</title>
</Head>
<QuizContainer>
<QuizLogo />
<Widget>
<Widget.Header>
<h1>{db.title}</h1>
<h1>The legend of zelda</h1>
</Widget.Header>
<Widget.Content>
<p>{db.description}</p>
<form onSubmit={function (infosDoEvento) {
infosDoEvento.preventDefault();
router.push(`/quiz?name=${name}`);
console.log('Fazendo uma submissão por meio do react');
}}
>
<input
onChange={function (infosDoEvento) {
console.log(infosDoEvento.target.value);
// State
// name = infosDoEvento.target.value;
setName(infosDoEvento.target.value);
}}
placeholder="Diz ai seu nome"
/>
<button type="submit" disabled={name.length === 0}>
Jogar
{name}
</button>
</form>
</Widget.Content>
</Widget>

Expand Down
9 changes: 9 additions & 0 deletions pages/quiz.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react';

export default function PudimComBatata() {
return (
<div>
Página de quiz
</div>
);
}
4 changes: 2 additions & 2 deletions src/components/Footer/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import styled from 'styled-components'
import styled from 'styled-components';

// src/components/Footer/index.js
const FooterWrapper = styled.footer`
Expand Down Expand Up @@ -43,4 +43,4 @@ export default function Footer(props) {
</p>
</FooterWrapper>
);
}
}
2 changes: 1 addition & 1 deletion src/components/GitHubCorner/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,4 @@ export default function GitHubCorner({ projectUrl }) {
</a>
</Wrapper>
);
}
}
2 changes: 1 addition & 1 deletion src/components/QuizLogo/index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 3 additions & 5 deletions src/components/Widget/index.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import styled from 'styled-components'
import styled from 'styled-components';

const Widget = styled.div`
margin-top: 24px;
margin-bottom: 24px;
border: 1px solid ${({ theme }) => theme.colors.primary};
background-color: ${({ theme }) => {
return theme.colors.mainBg;
}};
background-color: ${({ theme }) => theme.colors.mainBg};
border-radius: 4px;
overflow: hidden;
Expand Down Expand Up @@ -49,4 +47,4 @@ Widget.Content = styled.div`
}
`;

export default Widget;
export default Widget;

1 comment on commit 0ab6091

@vercel
Copy link

@vercel vercel bot commented on 0ab6091 Jan 26, 2021

Choose a reason for hiding this comment

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

Please sign in to comment.