Desafio CP Front

.gitignore

@@ -1 +1,23 @@
-node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1,93 +1,21 @@
-![Logo](http://cafeepixel.com.br/assinaturas/logo_color_git.png)
-# Desafio CP - Frontend
+## 🚀 Executando locamente
 
-A **Café e Pixel** é uma empresa que oferece diversos serviços, desde consultoria de software ao desenvolvimento completo de uma aplicação robusta.
+Faça um clone do repositório do github
 
-Nossos desenvolvedores procuram estar sempre em aprendizado contínuo, pois amam o que fazem. Nossos processos de desenvolvimento ágil e nossa busca por melhores práticas de desenvolvimento nos proporcionam um ótimo ambiente para profissionais que gostam de criar softwares de qualidade em boa companhia.
+`$ git clone https://github.com/abnerborgonha/desafio-cp-front.git`
 
-Estamos sempre procurando por profissionais que gostam de otimizar seu trabalho, por isso damos preferência a times pequenos com profissionais qualificados, ao invés de times grandes com profissionais medianos.
+Acesse a pasta que foi criada
 
-Este repositório contém um problema usado para avaliar as skills do candidato. É importante ressaltar que resolver o desafio de forma satisfatória é apenas parte do que será avaliado. Nós consideramos disciplinas como documentação, testing, linha do tempo dos commits, tempo de entrega e melhores práticas de design e desenvolvimento.
+`$  cd .\desafio-cp-front\ `
 
-### Dicas
+Execute o comando para poder instalar os pacotes baixados
 
-- Leia cuidadosamente as especificações, se não compreender algo, sinta-se livre para falar com a gente;
-- Observe as recomendações e materiais de referência;
-- Apreciamos a simplicidade, então defina bem o setup do projeto para nos auxiliar na sua avaliação;
-- Se possível faça testes, eles fazem do mundo um lugar melhor :D
+`$  yarn `
 
-## Como participar
+Executando servidor fake
 
-1. Faça um fork desse repositório no github e adicione permissão de leitura para **todos** os usuários abaixo:
-- [Marcelo](https://github.com/marcelomoreles)
-- [Édipo](http://github.com/shuhikari)
-- [Jailton](https://github.com/jlandim)
-- [Manoel](https://github.com/Manogel)
-
-2. Siga as instruções do README.md (este arquivo);
-3. Faça o deploy do seu projeto em algum serviço de hospedagem (Heroku, Firebase, etc);
-4. Ao finalizar uma das entregas, abra **um pull request nesse repositório para cada etapa das entregas** com o título da mesma;
-5. Códigos plagiados serão desclassificados;
-5. Não se preocupe com o PR sendo rejeitado, usaremos ele como referência, mas não podemos fazer o merge para não comprometer a resposta de outros candidatos.
-
-## Prazo para entrega
-O projeto deverá ser entregue até 20:00 de domingo (06/09).
-
-# Especificações - Frontend
-
-Você deve implementar as telas de um ecommerce de livros, disponibilzadas [neste link](https://www.figma.com/file/umDLjMwMnxe4N68mQnucBN/ecommerce-desafio-cp?node-id=0%3A1).
-
-O principal objetivo desse desafio é **construir o fluxo de um usuário que deseja comprar um livro nessa store**.
-
-
-### 1. Histórias
-1. O usuário pode visualizar os livros na home
-2. O usuário pode buscar os livros pelo título e filtrar por categoria
-3. O usuário pode adicionar um livro ao carrinho
-
-### 2. Dados dos livros
-Os dados dos livros estão disponibilizados em um `json-server` neste repositório. Há instruções para rodá-lo no fim dessa página.
-
-
-### 3. Requerimentos do projeto
-
-- Deixar a aplicação disponível online (Heroku, Firebase, ou outro de sua preferência);
-- A aplicação deve ser escrita usando `reactjs`;
-- Escreva no readme do seu projeto uma breve documentação de como rodá-lo localmente;
-- Quaisquer outras funcionalidades extras podem contribuir para sua avaliação. Mas lembre-se: Qualidade > Quantidade;
-- As telas **devem ser navegáveis**;
-- **Todos os commits deverão estar em inglês**;
-- **O nome das variáveis internas, funções e métodos da API deve ser escritas em inglês**.
-
-
-# Recomendações
-
-- Escreva testes;
-- Use boas práticas de programação;
-- Utilize os princípios [SOLID](https://en.wikipedia.org/wiki/SOLID);
-- Não se esqueça de ler com atenção aos requerimentos, cada detalhe conta :wink:.
-
----
-
-# JSON SERVER
-
-
-Para rodar um server json 'fake' e conseguir consumir os dados no endereço `http://localhost:3333/books`, basta seguir os passos abaixo:
-
-### Rodar o server localmente para consumir os dados
-
-Considerando que já tenha o `node` na versão mais atualizada, rode o seguinte comando
-
-`npx json-server server.json -p 3333`
-
----
-
-# ❗❗❗ Para os candidatos à vaga de Fullstack ❗❗❗
-
-Caso você esteja concorrendo à vaga de fullstack, **não utilize o json, mas integre a API do desafio de backend com este repositório na listagem de livros.**
-
-O fluxo de adicionar o livro ao carrinho será controlado localmente.
-
-[Desafio de Backend](https://github.com/cafeepixel/desafio-cp-back)
+`$  npx json-server server.json -p 3333 `
 
+Executando a aplicação
 
+`$  yarn start `

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "desafio-cp-front",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.20.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-icons": "^3.11.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.3",
+    "styled-components": "^5.2.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+
+    <title>Bookstore</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

server.json

@@ -16,7 +16,7 @@
       "author" : "Margaret Atwood",
       "title": "The handmaid’s tale",
       "description" : "This novel can be interpreted as a double narrative, Offred's tale and the handmaids' tales. The night...",
-      "image_url": "",
+      "image_url": "src/assets/the_handmaids_tale.svg",
       "price": 18.99,
       "prince_discount": 6.99,
       "stars" : 4.1,
@@ -27,7 +27,7 @@
       "author" : "Aldous Huxley",
       "title": "Brave new world",
       "description" : "Dystopian novel written in 1931 by English author Aldous Huxley, and published in 1932. Largely set in...",
-      "image_url": "",
+      "image_url": "src/assets/brave_new_world.svg",
       "price": 42.50,
       "prince_discount": 12.43,
       "stars" : 4,
@@ -38,7 +38,7 @@
       "author" : "Tara Westover",
       "title": "Educated",
       "description" : "It is a tale of fierce family loyalty and of the grief that comes with severing the closest of ties. With...",
-      "image_url": "",
+      "image_url": "src/assets/educated.svg",
       "price": 34.20,
       "prince_discount": 12.68,
       "stars" : 4.2,

src/App.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+
+import Header from './components/Header';
+import Footer from './components/Footer';
+import Router from './routes';
+
+import { BooksContextProvider } from './context/contextBooks';
+import { GlobalStyle, Container, ContentPages } from './styles';
+
+
+function App() {
+  return (
+    <>
+      <GlobalStyle />
+      <BooksContextProvider>
+        <BrowserRouter>
+          <Container>
+            <Header />
+            <ContentPages>
+              <Router />
+            </ContentPages>
+          </Container>
+        </BrowserRouter>
+      </BooksContextProvider>
+    </>
+
+  );
+}
+
+export default App;

src/components/BookItem/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Container, Cover } from './styles';
+
+function BookItem({srcImage}) {
+  return (
+      <Container>
+          <Cover src={srcImage}/>
+      </Container>
+
+  );
+}
+
+export default BookItem;

src/components/BookItem/styles.js

@@ -0,0 +1,13 @@
+
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: grid;
+  grid-column: 1fr 1fr;
+`;
+
+export const Cover = styled.img`
+    object-fit: cover;
+    height: auto;
+    width: 100%;
+`;

src/components/Category/index.js

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+
+import { Container, Title, ListText } from './styles';
+
+function Category() {
+    const [categories, setCategories] = useState([
+        {
+            id: 1,
+            name: 'Art & Fashion'
+        },
+        {
+            id: 2,
+            name: 'Biography'
+        },
+        {
+            id: 3,
+            name: 'Business'
+        },
+        {
+            id: 4,
+            name: `Children's`
+        },
+        {
+            id: 5,
+            name: 'Education'
+        },
+        {
+            id: 6,
+            name: 'Fiction & Poetry'
+        },
+        {
+            id: 7,
+            name: 'Education'
+        },
+        {
+            id: 8,
+            name: 'Film, TV & Drama'
+        },
+        {
+            id: 9,
+            name: 'Food & Drink'
+        },
+        {
+            id: 10,
+            name: 'Health & Wellbeing'
+        },
+        {
+            id: 11,
+            name: 'Home & Garden'
+        },
+
+    ]);
+
+    return (
+        <Container>
+            <Title>Categories</Title>
+            {categories.map(item => (
+                <ListText key={item.id}>{item.name}</ListText>
+            ))}
+        </Container>
+    );
+}
+
+export default Category;