32 separar server e cliente

README.md

@@ -6,13 +6,17 @@
 
 - [1. Sumário](#1-sumário)
 - [2. O Projeto](#2-funcionando)
-- [3. O Design](#3-0-design)
-     - [3.1. Feed](#31-feed)
-- [4. Dependências](#5-dependências)
+- [3. Inicialização](#3-funcionando)
+- [4. O Design](#3-0-design)
+- [5. Dependências](#5-dependências)
 
 ## 2. Sobre o projeto
 O projeto consiste na criação de um biblioteca virtual como desafio do processo de seleção de estágio da empresa [App Masters](https://appmasters.io/en/)
 
+### Backend Node
+
+Foi utilizada a [API](https://github.com/caiocesaroliveira/api-node-express-mongo) para Backend Node do repositório do [caiocesaroliveira](https://github.com/caiocesaroliveira).
+
 
 ## 3. Inicialização
 
@@ -35,7 +39,7 @@ Para o design da aplicação, decidi utilizar padrões simples mas moderno,utili
 Para execução do projeto, utilizei as seguintes dependência: 
 utilizei a biblioteca visual Matirial-UI, por uma questão de afinidade.  
 
-### 5.1. [Material-UI](https://material-ui.com/)
+#### 5.1. [Material-UI](https://material-ui.com/)
 Utilizei a biblioteca visual por uma questão de afinidade.  
 #### 5.2. [React Router Dom](https://reactrouter.com/)
 O React Router Dom é uma das bibliotecas mais utilizadas para configurar navegação. 

client/.env.sample

@@ -0,0 +1 @@
+REACT_APP_API_BOOKS_NODE=

.gitignore → client/.gitignore

@@ -13,11 +13,14 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+

package.json → client/package.json

@@ -8,9 +8,13 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.20.0",
+    "dotenv": "^8.2.0",
     "moment": "^2.29.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-loading": "^2.0.3",
+    "react-qr-reader": "^2.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "styled-components": "^5.2.0"
@@ -35,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "axios": "^0.20.0"
   }
 }

client/src/About.js

@@ -0,0 +1,211 @@
+import React from "react";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
+import Container from "@material-ui/core/Container";
+import Box from "@material-ui/core/Box";
+import { makeStyles } from "@material-ui/core/styles";
+
+import gabrielSilvaImg from "./assets/img/gabriel-silva.png";
+import jonathanThomazImg from "./assets/img/jonathan-thomaz.jpg";
+import brunoMarcosImg from "./assets/img/bruno-marcos.jpg";
+import laviniaBeghiniImg from "./assets/img/lavinia-beghini.jpg";
+import caioCesarImg from "./assets/img/caio-cesar.jpg";
+
+const useStyles = makeStyles((theme) => ({
+    icon: {
+      marginRight: theme.spacing(2),
+    },
+    heroContent: {
+      backgroundColor: theme.palette.background.paper,
+      paddingTop: 40,
+      height: "50vh",
+    },
+    heroText: {
+      fontFamily: "Poppins, sans-serif",
+      color: "#000000",
+      fontSize: 50,
+      marginTop: 20,
+    },
+    description: {
+        fontFamily: "Poppins, sans-serif",
+        color: "#000000",
+        fontSize: 18,
+        marginTop: 5,
+        padding: 15,
+    },
+    heroDev: {
+        fontFamily: "Poppins, sans-serif",
+        color: "#000000",
+        fontSize: 30,
+        padding: 15,
+        marginTop: 5,
+    },
+    link: {
+        fontFamily: "Poppins, sans-serif",
+        fontSize: 15,
+        paddingLeft: 15,
+    },
+    spacing: {
+        marginBottom: 5,
+    },
+    secondBox: {
+        backgroundColor: "#ffffff",
+    }
+  }));
+
+
+export default function About() {
+    const classes = useStyles();
+
+    return (
+        <React.Fragment>
+            <CssBaseline />
+            <Container fluid>
+                <Box
+                    className={classes.heroContent}>
+                    <Typography
+                        className={classes.heroText}
+                        display="flex"
+                        component="h1"
+                        align="center"
+                    >
+                        Sobre
+                    </Typography>
+                    <Typography
+                        className={classes.description}
+                        display="flex"
+                        align="justify"    
+                    >
+                        Este projeto foi desenvolvido como projeto de seleção de estágio da App Masters.
+                        Temos como objetivo montar uma biblioteca pública, onde todos podem usufruir e adquirir
+                        conhecimento!
+                    </Typography> 
+                    <Typography
+                        className={classes.heroDev}
+                        display="flex"
+                        component="h1"
+                        align="justify"
+                    >
+                        Desenvolvedores    
+                    </Typography>
+                </Box>  
+            </Container>
+            <Container fluid>
+                <Box
+                    className={classes.secondBox}>
+                    <Grid container className={classes.spacing}>
+                        <Grid item xs={12} md={3}>
+                            <img width="200" height="200" src={gabrielSilvaImg}></img>
+                        </Grid>
+                        <Grid item xs={12} md={6}>
+                            <Typography
+                                className={classes.heroDev}
+                                display="flex"
+                                component="h3"
+                                align="justify"
+                            >
+                                Gabriel Silva
+                            </Typography>
+                            <Typography
+                                className={classes.link}
+                                display="flex"
+                                align="justify"
+                            >
+                                <a target="_blank" href="https://bit.ly/2GAYt2E">https://bit.ly/2GAYt2E</a>
+                            </Typography>
+                        </Grid>
+                    </Grid>
+                    <Grid container className={classes.spacing}>
+                        <Grid item xs={12} md={3}>
+                            <img width="200" height="200" src={jonathanThomazImg}></img>
+                        </Grid>
+                        <Grid item xs={12} md={6}>
+                            <Typography
+                                className={classes.heroDev}
+                                display="flex"
+                                component="h3"
+                                align="justify"
+                            >
+                                Jonathan Thomaz
+                            </Typography>
+                            <Typography
+                                className={classes.link}
+                                display="flex"
+                                align="justify"
+                            >
+                                <a target="_blank" href="https://bit.ly/3nrod2a">https://bit.ly/3nrod2a</a>
+                            </Typography>
+                        </Grid>
+                    </Grid>
+                    <Grid container className={classes.spacing}>
+                        <Grid item xs={12} md={3}>
+                            <img width="200" height="200" src={brunoMarcosImg}></img>
+                        </Grid>
+                        <Grid item xs={12} md={6}>
+                            <Typography
+                                className={classes.heroDev}
+                                display="flex"
+                                component="h3"
+                                align="justify"
+                            >
+                                Bruno Marcos
+                            </Typography>
+                            <Typography
+                                className={classes.link}
+                                display="flex"
+                                align="justify"
+                            >
+                                <a target="_blank" href="https://bit.ly/3iFg0E4">https://bit.ly/3iFg0E4</a>
+                            </Typography>
+                        </Grid>
+                    </Grid>
+                    <Grid container className={classes.spacing}>
+                        <Grid item xs={12} md={3}>
+                            <img width="200" height="200" src={laviniaBeghiniImg}></img>
+                        </Grid>
+                        <Grid item xs={12} md={6}>
+                            <Typography
+                                className={classes.heroDev}
+                                display="flex"
+                                component="h3"
+                                align="justify"
+                            >
+                                Lavínia Beghini
+                            </Typography>
+                            <Typography
+                                className={classes.link}
+                                display="flex"
+                                align="justify"
+                            >
+                                <a target="_blank" href="https://bit.ly/3lrFLJO">https://bit.ly/3lrFLJO</a>
+                            </Typography>
+                        </Grid>
+                    </Grid>
+                    <Grid container className={classes.spacing}>
+                        <Grid item xs={12} md={3}>
+                            <img width="200" height="200" src={caioCesarImg}></img>
+                        </Grid>
+                        <Grid item xs={12} md={6}>
+                            <Typography
+                                className={classes.heroDev}
+                                display="flex"
+                                component="h3"
+                                align="justify"
+                            >
+                                Caio César
+                            </Typography>
+                            <Typography
+                                className={classes.link}
+                                display="flex"
+                                align="justify"
+                            >
+                                <a target="_blank" href="https://bit.ly/3lqd8MV">https://bit.ly/3lqd8MV</a>
+                            </Typography>
+                        </Grid>
+                    </Grid>
+                </Box>     
+            </Container>
+        </React.Fragment>    
+    );
+}    

client/src/Books.js

@@ -0,0 +1,107 @@
+import React, { Component } from "react";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Grid from "@material-ui/core/Grid";
+import Container from "@material-ui/core/Container";
+import BookCardAlugado from "./Components/BookCardAlugado";
+import BookCardDisponivel from "./Components/BookCardDisponivel";
+import api from "./services/api";
+import LoadingSpinner from "./Components/LoadingSpinner";
+
+class Books extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      errorMessage: '',
+      isLoaded: false,
+      livros: [],
+    };
+  }
+
+
+  async fetchBooks() {
+    return await api.get('/books/');
+
+  }
+
+
+  async componentDidMount() {
+    try {
+      const response = await this.fetchBooks();
+      //console.log(response)
+      if (response.status !== 200) {
+        throw Error(response.statusText);
+      }
+
+      const json = await response.data;
+
+      const sortedBooks = json.sort((bookA, bookB) => {
+        if(bookA.status === bookB.status){
+          if(bookA.title < bookB.title ){return -1;}
+          if(bookA.title > bookB.title ){return 1;}
+          return 0;
+        } else {
+          return bookA.status === bookB.status ? 0 : bookA.status? 1 : -1;
+        }
+      });
+
+      this.setState({
+        errorMessage: '',
+        isLoaded: true,
+        livros: sortedBooks
+      });
+
+    } catch (error) {
+
+      this.setState({
+        errorMessage: error.message,
+        isLoaded: false,
+        livros: []
+      });
+
+      console.log(error);
+    }
+
+  }
+
+
+
+  render() {
+    if(this.state.errorMessage != ''){
+      return <h3>{this.state.errorMessage}</h3>
+    }
+    if(!this.state.isLoaded){
+      //console.log(this.state.isLoaded)
+      return <LoadingSpinner/>
+    }
+
+    let booksCards = this.state.livros.map((book) => {
+      console.log("teste", book);
+      return (book.status === "true") ? (
+        <Grid item xs={12} sm={6} md={4}>
+          <BookCardAlugado book={book} />
+        </Grid>
+      ) : (
+        <Grid item xs={12} sm={6} md={4}>
+          <BookCardDisponivel book={book} />
+        </Grid>
+      );
+    });
+
+
+    return (
+      <React.Fragment>
+        <CssBaseline />
+        <Container maxWidth="md">
+          <Grid
+            container
+            spacing={2}
+            style={{ marginTop: "24px", marginBottom: "24px" }}
+          >
+            {booksCards}
+          </Grid>
+        </Container>
+      </React.Fragment>
+    );
+  }
+}
+export default Books;