Merge pull request #29 from danvitoriano/List

List
danvitoriano · Sep 6, 2018 · ffdb763 · ffdb763
2 parents a7980a8 + b18fa5b
commit ffdb763
Show file tree

Hide file tree

Showing 11 changed files with 243 additions and 87 deletions.
diff --git a/cypress/integration/list_zap_all_spec.js b/cypress/integration/list_zap_all_spec.js
@@ -15,65 +15,67 @@ describe("test list all products", function() {
     it("contains list first page", function() {
       cy.wait(1000);
       cy.get("[data-cy=list-container]")
-        .find("a")
+        .find("> div")
         .should("have.length", 20);
       cy.get("[data-cy=7baf2775d4a2]").should("not.be.visible");
       cy.get("[data-cy=a0f9d9647551]").should("not.be.visible");
-      cy.contains("fed26dbe5881");
-      cy.contains("3e1b5315da17");
+      cy.contains("Apartamento para Locação, 77m²");
+      cy.contains("Apartamento para Locação, 656m²");
     });
     it("click next page", function() {
       cy.get("[data-cy=next]").click();
     });
     it("contains page 2", function() {
       cy.get("[data-cy=b154e19dcf71]").should("not.be.visible");
-      cy.contains("45e188400618");
+      cy.contains("Apartamento à Venda, 150m²");
       cy.get("[data-cy=list-container]")
-        .find("a")
+        .find("> div")
         .should("have.length", 20);
     });
     it("click last page", function() {
       cy.get("[data-cy=last]").click();
     });
     it("contains last page", function() {
       cy.get("[data-cy=c8bcd9880342]").should("be.visible");
-      cy.contains("3a1de7365c7b");
+      cy.contains("Apartamento à Venda, 360m²");
       cy.get("[data-cy=list-container]")
-        .find("a")
+        .find("> div")
         .should("have.length", 20);
     });
     it("click previous page", function() {
       cy.get("[data-cy=previous]").click();
     });
     it("contains page 19", function() {
       cy.get("[data-cy=5d63d877585f]").should("be.visible");
-      cy.contains("ff064a715bad");
+      cy.contains("Apartamento para Locação, 140m²");
       cy.get("[data-cy=list-container]")
-        .find("a")
+        .find("> div")
         .should("have.length", 20);
     });
     it("click first page", function() {
       cy.get("[data-cy=first]").click();
     });
     it("contains first page", function() {
       cy.get("[data-cy=7baf2775d4a2]").should("not.be.visible");
-      cy.contains("3e1b5315da17");
+      cy.contains("Apartamento para Locação, 656m²");
       cy.get("[data-cy=list-container]")
-        .find("a")
+        .find("> div")
         .should("have.length", 20);
     });
     it("click next page", function() {
       cy.get("[data-cy=next]").click();
     });
     it("contains page 2", function() {
       cy.get("[data-cy=b154e19dcf71]").should("not.be.visible");
-      cy.contains("45e188400618");
+      cy.contains("Apartamento à Venda, 150m²");
       cy.get("[data-cy=list-container]")
-        .find("a")
+        .find("> div")
         .should("have.length", 20);
     });
     it("click one item", function() {
-      cy.get("[data-cy=168c4f8d0a2e]").click();
+      cy.get("[data-cy=168c4f8d0a2e]")
+        .find("[data-cy=link-detail]")
+        .click();
       cy.url().should("include", "zap/168c4f8d0a2e");
     });
     it("contains text", function() {
@@ -82,25 +84,25 @@ describe("test list all products", function() {
       cy.contains("900000");
     });
     it("contains slider", function() {
-      cy.get("#slider-slides")
+      cy.get(".slider-slides")
         .should("be.visible")
         .find("img")
         .should("have.length", 5);
     });
     it("navigate slider", function() {
-      cy.get("#next").click();
+      cy.get(".next").click();
       cy.wait(300);
-      cy.get("#next").click();
+      cy.get(".next").click();
       cy.wait(300);
-      cy.get("#next").click();
+      cy.get(".next").click();
       cy.wait(300);
-      cy.get("#previous").click();
+      cy.get(".previous").click();
       cy.wait(300);
-      cy.get("#previous").click();
+      cy.get(".previous").click();
       cy.wait(300);
-      cy.get("#previous").click();
+      cy.get(".previous").click();
       cy.wait(300);
-      cy.get("#previous").click();
+      cy.get(".previous").click();
     });
   });
 });
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { Switch, Route } from "react-router-dom";
 import Home from "./components/Home";
-import ZapList from "./components/ZapList";
+import List from "./components/List";
 import ZapItemDetail from "./components/ZapItemDetail";
 import { css } from "glamor";
 
@@ -19,7 +19,7 @@ const App = () => (
   <main>
     <Switch>
       <Route exact path="/" component={Home} />
-      <Route exact path="/zap" component={ZapList} />
+      <Route exact path="/zap" component={List} />
       <Route exact path="/zap/:id" component={ZapItemDetail} />
     </Switch>
   </main>

diff --git a/src/components/Card.js b/src/components/Card.js
@@ -1,52 +1,134 @@
 import React from "react";
+import Slider from "./Slider";
+import Text from "./Text";
+import { css } from "glamor";
+import Link from "./Link";
 
-const style = {
-  borderBottom: "1px solid gray"
-};
-
-const padding = {
-  padding: "10px",
-  minWidth: "150px",
-  display: "inline-block"
+const styles = {
+  card: css({
+    display: "grid",
+    gridTemplateColumns: "auto",
+    padding: 16,
+    margin: 25,
+    transition: ".3s",
+    backgroundColor: "whitesmoke",
+    "&:hover": {
+      boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2)"
+    },
+    "> img": {
+      width: "100%"
+    },
+    "@media(min-width: 570px)": {
+      gridTemplateColumns: "450px auto",
+      maxWidth: 1024,
+      margin: "25px auto"
+    }
+  }),
+  detail: css({
+    display: "grid",
+    gridTemplateColumns: "auto",
+    padding: 16,
+    backgroundColor: "white",
+    maxWidth: 300,
+    margin: "0 auto",
+    "@media(min-width: 570px)": {
+      gridTemplateColumns: "450px auto",
+      maxWidth: 1024,
+      margin: "0 auto"
+    }
+  }),
+  link: css({
+    display: "block",
+    textDecoration: "none",
+    transition: 0.1,
+    color: "green",
+    "&:after": {
+      content: "''",
+      display: "inline-block",
+      width: "100%",
+      borderBottom: "2px solid",
+      opacity: "0",
+      WebkitTransition: "opacity 0.35s, -webkit-transform 0.35s",
+      transition: "opacity 0.35s, transform 0.35s",
+      WebkitTransform: "scale(0,1)",
+      transform: "scale(0,1)"
+    },
+    "&:hover": {
+      color: "black",
+      textShadow: "0 0 2px gainsboro",
+      "&:after": {
+        opacity: "1",
+        WebkitTransform: "scale(1)",
+        transform: "scale(1)"
+      }
+    }
+  })
 };
 
 function ZapItem(props) {
   var discount = 0;
+  var bathrooms = props.data.bathrooms;
+  var bedrooms = props.data.bedrooms;
+  var parkingSpaces = props.data.parkingSpaces;
+  var header = "";
+  var businessType = props.data.pricingInfos.businessType;
+  var boundingBox = "";
+
+  // translate business type
+  businessType === "SALE"
+    ? (businessType = "à Venda")
+    : (businessType = "para Locação");
+  header = "Apartamento " + businessType + ", " + props.data.usableAreas + "m²";
+
+  // plurals
+  bedrooms <= 1 ? (bedrooms += " Quarto | ") : (bedrooms += " Quartos | ");
+  bathrooms <= 1
+    ? (bathrooms += " Banheiro | ")
+    : (bathrooms += " Banheiros | ");
+  parkingSpaces <= 1 ? (parkingSpaces += " Vaga") : (parkingSpaces += " Vagas");
+
+  // calculate bounding box
   if (props.data.pricingInfos.price) {
     discount =
       props.data.pricingInfos.price - props.data.pricingInfos.price * 0.1;
   }
+
+  // show price with bounding box
+  props.boundinBoxZap
+    ? (boundingBox = "OFFER R$ " + discount.toLocaleString())
+    : (boundingBox = "Fora do Bounding Box");
+
+  // return card
   return (
-    <div style={style}>
-      <a style={padding} data-cy={props.data.id} href={"/zap/" + props.data.id}>
-        {props.data.id}
-      </a>
-      <span style={padding}>
-        {props.data.pricingInfos.businessType
-          ? props.data.pricingInfos.businessType
-          : null}
-      </span>
-      <span style={padding}>
-        price:
-        {props.data.pricingInfos.price ? props.data.pricingInfos.price : null}
-      </span>
-      <span style={padding}>
-        discount:
-        {props.boundinBoxZap ? props.boundinBoxZap : null}
-        {props.boundinBoxZap ? " por: R$ " + discount : null}
-      </span>
-      <span style={padding}>
-        lon:
-        {props.data.address.geoLocation.location.lon
-          ? props.data.address.geoLocation.location.lon
-          : null}
-      </span>
-      <span style={padding}>
-        lat:
-        {props.data.address.geoLocation.location.lat
-          ? props.data.address.geoLocation.location.lat
-          : null}
-      </span>
+    <div data-cy={props.dataCy} {...styles.card}>
+      <Slider images={props.data.images} />
+      <div>
+        <Text
+          label={
+            props.data.address.neighborhood + ", " + props.data.address.city
+          }
+        />
+        <Text type="h1" label={header} />
+        <Text
+          label={
+            bedrooms +
+            bathrooms +
+            props.data.usableAreas +
+            "m² | " +
+            parkingSpaces
+          }
+        />
+        <Text label={boundingBox} />
+        <Text label={props.data.pricingInfos.price} type="price" />
+        <Text
+          label={"Condomínio: " + props.data.pricingInfos.monthlyCondoFee}
+        />
+        <Link
+          dataCy={props.data.id}
+          label="Detalhes"
+          href={"/zap/" + props.data.id}
+        />
+      </div>
     </div>
   );
 }

diff --git a/src/components/Link.js b/src/components/Link.js
@@ -0,0 +1,34 @@
+import React from "react";
+import { css } from "glamor";
+
+const styles = {
+  wrapper: css({
+    display: "block"
+  }),
+  link: css({
+    display: "inline-block",
+    margin: 10,
+    padding: "20px 30px",
+    fontSize: 16,
+    backgroundColor: "blue",
+    background: "linear-gradient(#0000FF, #0000CC)",
+    borderRadius: "4px",
+    color: "white",
+    cursor: "pointer",
+    textAlign: "center",
+    fontFamily: "Open Sans",
+    textDecoration: "none"
+  })
+};
+
+function Link(props) {
+  return (
+    <div {...styles.wrapper}>
+      <a data-cy="link-detail" href={props.href} {...styles.link}>
+        {props.label}
+      </a>
+    </div>
+  );
+}
+
+export default Link;
diff --git a/src/components/ZapList.js → src/components/List.js b/src/components/ZapList.js → src/components/List.js
@@ -14,7 +14,7 @@ const boundinBoxZap = {
   maxlat: -23.546686
 };
 
-class ZapList extends React.Component {
+class List extends React.Component {
   constructor() {
     super();
 
@@ -142,13 +142,15 @@ var ProductList = props => {
           lat >= boundinBoxZap.minlat &&
           lat <= boundinBoxZap.maxlat
         ) {
-          return <Card key={c.id} data={c} boundinBoxZap="true" />;
+          return (
+            <Card key={c.id} dataCy={c.id} data={c} boundinBoxZap="true" />
+          );
         } else {
-          return <Card key={c.id} data={c} />;
+          return <Card key={c.id} dataCy={c.id} data={c} />;
         }
       })}
     </div>
   );
 };
 
-export default withRouter(ZapList);
+export default withRouter(List);
diff --git a/src/components/Slider.js b/src/components/Slider.js
@@ -46,18 +46,18 @@ class Slider extends React.Component {
   }
   render() {
     return (
-      <div id="slider-container">
-        <a className="nav" id="previous" onClick={this.previousSlide}>
+      <div className="slider-container">
+        <a className="nav previous" onClick={this.previousSlide}>
           <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAB/0lEQVRoQ+3YTU4bMRQH8Pcml4BFb1Cx5uMAqIuKsSNxAjZhgRChpAt2XYAUPlZwCTR+MuIGSC10U0F7hB6hLGOjQYmUBZB5z56Moybb2DP/n5/t8QzCjP9wxvPDHNB0BecV+F8qgFrrjvd+xzm3gIg/W61WryiKX6EDMI0phHme9xGxOx4WEZ8Gg8Ena+1tCKJuwKvhR4FLhPd+jYgepIg6Ae+GHwt8Q0SfUwNUDQ/Oub/W2g8pASqHH4b+QUSrqQC44QERtTGGUgCwwwPAHhGdS8OX/WIt4kbCxwI0Fj4GoNHwoYDGw4cAkggvBSQTXgJIKjwboJQ6BoAeY98O3ucn3avyc6Ddbi855zinxtrDsyqgtd723l9MGpHh/1MJzwLked5BxMuZBSilPgLA74qAstlUqlB5DZSJtNbfvPeHDESXiM4Y7dlNWYDy8KeUOmLuRLUiuICXdZMSQgIQIRBx3xhzyp4jEzpIAckgQgBJIEIBIgQAfCGikxjTKQagUUQsgBRxQET9kErEBEgRm0R0JUXEBrARiHhvjFlOCcBCpPhpcTSYVZ/Y10S0kVoFKiGcc/+yLFshoj+pAt6cTmV4AFi31n6Xhme90ITcZHgA3AKAXQBYBIC7LMu+FkXxGHjdaN9GQ3OI+9exjYrDSDrOAZJRi9lnXoGYoym51jMpKNsx9gutjgAAAABJRU5ErkJggg==" />
         </a>
-        <div id="slider">
-          <div id="slider-slides" style={this.state.style}>
+        <div className="slider">
+          <div className="slider-slides" style={this.state.style}>
             {this.props.images.map((slide, index) => {
               return <Image key={index} src={slide} />;
             })}
           </div>
         </div>
-        <a className="nav" id="next" onClick={this.nextSlide}>
+        <a className="nav next" onClick={this.nextSlide}>
           <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACIklEQVRoQ+2ZPW4UQRCFX/VsBITIR7AIjbDICIgIp2uWjAAOAcZCQtgIycbIN3ACIkPb3QES5BAicQDLmRPkO3RZg3YlCxmmZ/pnvGgn3Zrq971XPX9LWPKDllw/VgBjJ7hK4L9IQGt9l4gOvPd3AJxWVXVojDkqARc9Qk3T3BeRzwCuXRRMRG+MMS9zQ0QBaK03lFLfReT6ZUJLQMQCfCWiB/9yOTdEFEBd17+UUmtdY5ITIgqAmX8AaDdu55ELIgqgaZqHIvKpU/28IAdEFECri5mfAng3FkQ0wBziGYCDMSCSAIwJkQyghdBabxHR25JJJAUYAyI5QGmILADzPfEcwH7uccoGUAoiK8AQCACvrLWvg5MLLYypY+ZtAHshPbz3fjKZ3JrNZsch9dkTWIjoAwHgibX2/TIDPLbWfrgyAH3cb0eIiNadcydXAqCP+FawiLxwzgXtl7Y+6x7oK56Ido0xOyHOL2qyAZQQny2BUuKzAJQUnxygtPikAGOITwYwlvgkAGOKjwZg5kcAPoZet4dc57t6R90HmPkngI2uRX47NeAmFdQ3pOhvNcx8BuBmV49c4qNHSGsd8nG39+NBlyEXf48aofbzuoh8U0rduGzRnM4nexaq6/peVVVf/vyPQER2nHO7fdwcUhuVwGLB6XR623u/773fVEqdAjgMfSEZIjrZCMUunuL8JAmkEDK0xwpgqHOpzlslkMrJoX3OAdTb3DGtIXT+AAAAAElFTkSuQmCC" />
         </a>
       </div>