future4code · franciane-brito · Mar 23, 2021 · Mar 24, 2021
diff --git a/semana10/labex/package-lock.json b/semana10/labex/package-lock.json
diff --git a/semana12/labeddit/.gitignore b/semana12/labeddit/.gitignore
@@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
diff --git a/semana12/labeddit/README.md b/semana12/labeddit/README.md
diff --git a/semana12/labeddit/package-lock.json b/semana12/labeddit/package-lock.json
diff --git a/semana12/labeddit/package.json b/semana12/labeddit/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "labeddit",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.57",
+    "axios": "^0.21.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "0.9.5",
+    "styled-components": "^5.2.1"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/semana12/labeddit/public/favicon.ico b/semana12/labeddit/public/favicon.ico
diff --git a/semana12/labeddit/public/index.html b/semana12/labeddit/public/index.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,700;1,400&display=swap');
+  </style>
+  <!--
+      Notice the use of %PUBLIC_URL% in the tag above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+  <title>LabEddit</title>
+  <style>
+    html,
+    body,
+    #root {
+      /* font-family: 'Roboto', sans-serif; */
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      min-height: 100vh;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start`.
+      To create a production bundle, use `npm run build`.
+    -->
+</body>
+
+</html>
diff --git a/semana12/labeddit/src/App.js b/semana12/labeddit/src/App.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import Router from './Router/Router'
+/* import Header from './Components/Header/Header' */
+import { ThemeProvider } from '@material-ui/core/styles';
+import theme from './Contants/theme'
+import Card from './Components/CardComment'
+import GlobalState from './Global/GlobalState'
+
+const App = () => {
+  return (
+      <GlobalState>
+    <ThemeProvider theme={theme}>
+      <Router />
+   {/*  <Card/> */}
+    </ThemeProvider>
+      </GlobalState>
+  );
+}
+
+export default App;
diff --git a/semana12/labeddit/src/Components/CardComment.js b/semana12/labeddit/src/Components/CardComment.js
@@ -0,0 +1,127 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import styled from 'styled-components'
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import ModeCommentIcon from '@material-ui/icons/ModeComment';
+import ThumbUpAltIcon from '@material-ui/icons/ThumbUpAlt';
+import ThumbDownAltIcon from '@material-ui/icons/ThumbDownAlt';
+
+const StyledCard = styled(Card)`
+display: flex;
+margin: 20px;
+width: 70vw;
+border: 1px solid #fff;
+&:hover{ 
+    border-bottom: 1px solid #c0c0c0;
+}
+@media screen and (max-width: 500px) {
+  width: 90vw;
+  }
+`
+const Linha = styled.div`
+margin: 10px;
+height: 10vh;
+width: 4px;
+background-color: #b0b0b0;
+&:hover {
+  background-color: #333;
+}
+`
+const StyledCardActions = styled.div`
+display: flex;
+flex-direction: column;
+align-items: center;
+padding: 25px;
+background-color: #f0f0f0;
+width: 2vw;
+/* width: 66vw;
+padding: 7px;
+word-wrap: break-word; */
+`
+const StyledCardContent = styled(CardContent)`
+min-height: 8vh; 
+width: 66vw;
+padding: 10px;
+word-wrap: break-word;
+`
+
+const ContainerVotes = styled.div`
+padding-top: 10px;
+height: 40px;
+display: flex;
+align-items: center;
+width: 80vw;
+`
+const CountVotes = styled.div`
+padding: 10px;
+display: flex;
+align-items: center;
+`
+const StyledThumbUpAltIcon = styled(ThumbUpAltIcon)`
+  color: ${(props) => {
+    if (props.vote === 1) {
+      return "#3b5998"
+    } else {
+      return "#9f9f9f"
+
+    }
+}}
+`
+const StyledThumbDownAltIcon = styled(ThumbDownAltIcon)`
+  color: ${(props) => {
+    if (props.vote === -1) {
+      return "#FF0000"
+    } else {
+      return "#9f9f9f"
+
+    }
+}}
+`
+
+const CardComment = (props) => {
+  return (
+    <StyledCard>
+      <StyledCardActions>
+        <AccountCircleIcon fontSize='large' color="primary" />
+        <Linha></Linha>
+      </StyledCardActions>
+
+
+      <div>
+        <CardActionArea>
+          <CardActions>
+
+            <Button size="small" color="primary">
+              {props.name}
+            </Button>
+          </CardActions>
+
+          <StyledCardContent>
+            <Typography gutterBottom variant="h5" component="h2">
+            {props.title}
+          </Typography>
+            <Typography variant="h6" color="textSecondary" component="h3">
+            {props.text}
+          </Typography>
+          </StyledCardContent>
+        </CardActionArea>
+
+        <ContainerVotes>
+                <StyledThumbUpAltIcon fontSize='large' onClick={props.positive} vote={props.vote}/>
+                    <CountVotes>{props.voteCount}</CountVotes>
+                    <StyledThumbDownAltIcon fontSize='large'onClick={props.negative} vote={props.vote}/>
+
+        </ContainerVotes>
+      </div>
+    </StyledCard>
+  );
+}
+
+export default CardComment
diff --git a/semana12/labeddit/src/Components/CardPost.js b/semana12/labeddit/src/Components/CardPost.js
@@ -0,0 +1,128 @@
+import React from 'react'
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import styled from 'styled-components'
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import ModeCommentIcon from '@material-ui/icons/ModeComment';
+import ThumbUpAltIcon from '@material-ui/icons/ThumbUpAlt';
+import ThumbDownAltIcon from '@material-ui/icons/ThumbDownAlt';
+
+const StyledCard = styled(Card)`
+display: flex;
+margin: 20px 0;
+width: 70vw;
+border: 1px solid #fff;
+&:hover{
+   /*  transition-duration: 3s; */
+   /*  border: 1px solid #c0c0c0; */
+}
+@media screen and (max-width: 500px) {
+  width: 95vw;
+  flex-direction: column;
+  }
+`
+const StyledCardActions = styled(CardActions)`
+  display: flex;
+flex-direction: column;
+@media screen and (max-width: 500px) {
+  flex-direction: row;
+  height: 60px;
+  }
+`
+const StyledCardActionArea = styled.div`
+width: 66vw;
+padding: 7px;
+word-wrap: break-word;
+&:hover {
+  background-color: #f0f0f0;
+}
+@media screen and (max-width: 500px) {
+  width: 95vw;
+  flex-direction: row;
+  font-size: 10px;
+  }
+`
+const StyledThumbUpAltIcon = styled(ThumbUpAltIcon)`
+  color: ${(props) => {
+    if (props.vote === 1) {
+      return "#3b5998"
+    } else {
+      return "#9f9f9f"
+
+    }
+  }}
+`
+const StyledThumbDownAltIcon = styled(ThumbDownAltIcon)`
+  color: ${(props) => {
+    if (props.vote === -1) {
+      return "#FF0000"
+    } else {
+      return "#9f9f9f"
+
+    }
+  }}
+`
+const StyledTypography = styled(Typography)`
+@media screen and (max-width: 500px) {
+  font-size: 20px;
+  }
+`
+
+
+const CardPost = (props) => {
+  let hours = Math.floor(Math.random() * 24)
+
+  return (
+
+    <StyledCard>
+      <StyledCardActions>
+        <StyledThumbUpAltIcon fontSize='large' onClick={props.positive} vote={props.vote} />
+        <h3>{props.voteCount}</h3>
+        <StyledThumbDownAltIcon fontSize='large' onClick={props.negative} vote={props.vote} />
+
+      </StyledCardActions>
+
+      <div onClick={props.click}>
+
+        <StyledCardActionArea>
+          <CardActions>
+            <Button size="small" color="primary">
+              <AccountCircleIcon fontSize={'large'} />
+
+            </Button>
+            <Typography size="small" color="primary">
+              {props.name}
+            </Typography>
+            <p>Postado poru / HistoricRevisionist {hours} horas atrás</p>
+          </CardActions>
+          <CardMedia
+            image="/static/images/cards/contemplative-reptile.jpg"
+            title="Contemplative Reptile"
+          />
+          <CardContent>
+            <StyledTypography gutterBottom variant="h3" component="h2">
+              {props.title}
+            </StyledTypography>
+            <StyledTypography variant="h4" color="textSecondary" component="p">
+              {props.text}
+            </StyledTypography>
+          </CardContent>
+        </StyledCardActionArea>
+        <CardActions>
+
+          <Button size="small" color="primary" >
+            <ModeCommentIcon fontSize='large' margin='normal' />
+            <p>{props.comments} Comentários</p>
+          </Button>
+        </CardActions>
+      </div>
+    </StyledCard>
+
+  );
+}
+export default CardPost
+
diff --git a/semana12/labeddit/src/Components/Footer.js b/semana12/labeddit/src/Components/Footer.js