feat(my-joyent): process packages in redux

packages/my-joyent/src/components/home/home.js

@@ -24,7 +24,7 @@ class Home extends Component {
   }
 
   changeValue(key, value) {
-    const filters = this.props.filters;
+    const { filters } = this.props;
     this.props.onFilterChange({
       ...filters,
       [key]: value

packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap

@@ -0,0 +1,990 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Package /> without throwing 1`] = `
+.c2 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c4 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  position: relative;
+  height: auto;
+  min-height: 7.875rem;
+  margin-bottom: 0.625rem;
+  border: 0.0625rem solid;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-right: 0rem;
+  margin-left: 0rem;
+  border-radius: 0.25rem background: border:1px solid;
+  background: ;
+  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
+  min-height: 11.5625rem;
+  min-width: 200px;
+}
+
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin: 0;
+  height: auto;
+  padding-top: 0;
+  min-width: auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c3 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  display: block;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.c6 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 0.875rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.c5 {
+  display: inline-block;
+  padding: 0 1.125rem;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+}
+
+.c7 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+}
+
+.c8 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: rgba(73,73,73,0.5);
+}
+
+@media only screen and (min-width:0em) {
+  .c2 {
+    -webkit-flex-basis: 50%;
+    -ms-flex-basis: 50%;
+    flex-basis: 50%;
+    max-width: 50%;
+    display: block;
+  }
+}
+
+<div
+  className="c0"
+  name="card"
+>
+  .c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c3 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin: 0;
+  height: auto;
+  padding-top: 0;
+  min-width: auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  display: block;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.c5 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 0.875rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.c4 {
+  display: inline-block;
+  padding: 0 1.125rem;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+}
+
+.c6 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+}
+
+.c7 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: rgba(73,73,73,0.5);
+}
+
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 50%;
+    -ms-flex-basis: 50%;
+    flex-basis: 50%;
+    max-width: 50%;
+    display: block;
+  }
+}
+
+<div
+    className="c0"
+    name="card-view"
+  >
+    .c0 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c2 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  display: block;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.c4 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 0.875rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.c3 {
+  display: inline-block;
+  padding: 0 1.125rem;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+}
+
+.c5 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+}
+
+.c6 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: rgba(73,73,73,0.5);
+}
+
+@media only screen and (min-width:0em) {
+  .c0 {
+    -webkit-flex-basis: 50%;
+    -ms-flex-basis: 50%;
+    flex-basis: 50%;
+    max-width: 50%;
+    display: block;
+  }
+}
+
+<div
+      className="c0"
+      name="card-meta"
+    >
+      .c1 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  display: block;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.c3 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 0.875rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.c2 {
+  display: inline-block;
+  padding: 0 1.125rem;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+}
+
+.c5 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: rgba(73,73,73,0.5);
+}
+
+<div
+        className="c0"
+      >
+        .c0 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+}
+
+<div
+          className="c0"
+          name="card-title"
+        >
+          $
+          0.263
+           per hour
+        </div>
+        .c1 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+}
+
+.c2 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 0.875rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.c0 {
+  display: inline-block;
+  padding: 0 1.125rem;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+}
+
+<div
+          className="c0 c1"
+          name="card-subtitle"
+        >
+          .c0 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 0.875rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+<span
+            className="c0"
+          >
+            7.8
+             GB RAM
+          </span>
+        </div>
+        .c1 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+}
+
+.c2 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 0.875rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.c0 {
+  display: inline-block;
+  padding: 0 1.125rem;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+}
+
+<div
+          className="c0 c1"
+          name="card-subtitle"
+        >
+          .c0 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 0.875rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+<span
+            className="c0"
+          >
+            4
+             vCPUs
+          </span>
+        </div>
+        .c1 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+}
+
+.c2 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 0.875rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.c0 {
+  display: inline-block;
+  padding: 0 1.125rem;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+}
+
+<div
+          className="c0 c1"
+          name="card-subtitle"
+        >
+          .c0 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 0.875rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+<span
+            className="c0"
+          >
+            2
+             TB disk
+          </span>
+        </div>
+        .c1 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+}
+
+.c2 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 0.875rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.c0 {
+  display: inline-block;
+  padding: 0 1.125rem;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+}
+
+<div
+          className="c0 c1"
+          name="card-subtitle"
+        >
+          .c0 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 0.875rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+<span
+            className="c0"
+          >
+            SSD
+          </span>
+        </div>
+        .c1 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+}
+
+.c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+}
+
+.c2 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: rgba(73,73,73,0.5);
+}
+
+<div
+          className="c0 c1"
+          name="card-footer"
+        >
+          .c0 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: rgba(73,73,73,0.5);
+}
+
+<span
+            className="c0"
+          >
+            Compute Optimized
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/my-joyent/src/components/package/__tests__/index.spec.js

@@ -0,0 +1,30 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Router } from '@mocks/';
+import Package from '../';
+
+const pack = {
+  disk: 200,
+  group: 'Compute Optimized',
+  memory: 7.8,
+  name: 'High CPU 7.75',
+  price: '0.263',
+  vcpus: 4
+};
+
+it('renders <Package /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <Package pack={pack} />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/my-joyent/src/components/package/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  Card,
+  CardSubTitle,
+  CardTitle,
+  CardView,
+  CardFooter,
+  CardMeta
+} from 'joyent-ui-toolkit';
+
+const Package = ({ pack: { price, memory, vcpus, disk, group } }) => (
+  <Card transparent>
+    <CardView>
+      <CardMeta>
+        <CardTitle>${price} per hour</CardTitle>
+        <CardSubTitle>{memory} GB RAM</CardSubTitle>
+        <CardSubTitle>{vcpus} vCPUs</CardSubTitle>
+        <CardSubTitle>{disk / 100} TB disk</CardSubTitle>
+        <CardSubTitle>SSD</CardSubTitle>
+
+        <CardFooter>{group}</CardFooter>
+      </CardMeta>
+    </CardView>
+  </Card>
+);
+
+export default Package;

packages/my-joyent/src/components/packages/list.js

@@ -1,14 +1,8 @@
-import React, { Component } from 'react';
+import React from 'react';
 import remcalc from 'remcalc';
 import styled from 'styled-components';
-import {
+
-  Card,
+import Package from '@components/package';
-  CardSubTitle,
-  CardTitle,
-  CardView,
-  CardFooter,
-  CardMeta
-} from 'joyent-ui-toolkit';
 
 const ListStyled = styled.ul`
   display: flex;
@@ -19,62 +13,14 @@ const ListStyled = styled.ul`
   justify-content: space-between;
   margin-top: ${remcalc(36)};
 `;
-class Packages extends Component {
+const Packages = ({ packages }) => (
-  constructor(props) {
-    super(props);
-    const { filters: { ram, cpu, cost, disk }, packages } = props;
-    this.state = {
-      ram,
-      cpu,
-      cost,
-      disk,
-      packages
-    };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { filters: { ram, cpu, cost, disk }, packages } = nextProps;
-    this.setState({
-      ram,
-      cpu,
-      cost,
-      disk,
-      packages: packages
-        .filter(pack => pack.memory >= ram.min && pack.memory <= ram.max)
-        .filter(
-          pack => pack.disk / 1000 >= disk.min && pack.disk / 1000 <= disk.max
-        )
-        .filter(pack => pack.vcpus >= cpu.min && pack.vcpus <= cpu.max)
-        .filter(pack => pack.price >= cost.min && pack.price <= cost.max)
-    });
-  }
-
-  _packages() {
-    return (
   <ListStyled>
-        {this.state.packages.map(pack => (
+    {packages.map(pack => (
-          <li>
+      <li key={pack.name}>
-            <Card transparent>
+          <Package pack={pack} />
-              <CardView>
-                <CardMeta>
-                  <CardTitle>${pack.price} per hour</CardTitle>
-                  <CardSubTitle>{pack.memory} GB RAM</CardSubTitle>
-                  <CardSubTitle>{pack.vcpus} vCPUs</CardSubTitle>
-                  <CardSubTitle>{pack.disk / 100} TB disk</CardSubTitle>
-                  <CardSubTitle>SSD</CardSubTitle>
-
-                  <CardFooter>{pack.group}</CardFooter>
-                </CardMeta>
-              </CardView>
-            </Card>
       </li>
     ))}
   </ListStyled>
 );
-  }
-  render() {
-    return this._packages();
-  }
-}
 
 export default Packages;

packages/my-joyent/src/containers/home/index.js

@@ -12,7 +12,7 @@ const HomeHOC = ({ filters, onFilterChange }) => (
 
 const mapStateToProps = state => {
   return {
-    filters: state.filters
+    filters: state.app.filters
   };
 };
 

packages/my-joyent/src/containers/packages/index.js

@@ -3,10 +3,9 @@ import { connect } from 'react-redux';
 // import { graphql } from 'react-apollo';
 import { Packages } from '@components/packages';
 // import packagesQuery from '@graphql/packages.gql';
-import data from '../../data/packages';
 
 const PackagesHOC = ({ packages, filters }) => (
-  <Packages packages={data} filters={filters} />
+  <Packages packages={packages} filters={filters} />
 );
 
 // const PackagesHOCWithData = graphql(packagesQuery, {
@@ -18,7 +17,8 @@ const PackagesHOC = ({ packages, filters }) => (
 
 const mapStateToProps = state => {
   return {
-    filters: state.filters
+    packages: state.app.packages,
+    filters: state.app.filters
   };
 };
 

packages/my-joyent/src/state/filterReducer.js

@@ -1,9 +1,32 @@
-const filterReducer = (state = [], action) => {
+import { default as defaultState } from './state';
+const filterReducer = (state = defaultState, action) => {
   switch (action.type) {
     case 'CHANGE_FILTERS':
+      console.log(state);
       return {
         ...state,
-        ...action.filters
+        ...action.filters,
+        packages: defaultState.packages
+          .filter(
+            pack =>
+              pack.memory >= action.filters.ram.min &&
+              pack.memory <= action.filters.ram.max
+          )
+          .filter(
+            pack =>
+              pack.disk / 1000 >= action.filters.disk.min &&
+              pack.disk / 1000 <= action.filters.disk.max
+          )
+          .filter(
+            pack =>
+              pack.vcpus >= action.filters.cpu.min &&
+              pack.vcpus <= action.filters.cpu.max
+          )
+          .filter(
+            pack =>
+              pack.price >= action.filters.cost.min &&
+              pack.price <= action.filters.cost.max
+          )
       };
     default:
       return state;

packages/my-joyent/src/state/state.js

@@ -1,10 +1,13 @@
+import packages from '../data/packages';
+
 const state = {
   filters: {
     cpu: { min: 0.25, max: 8 },
     cost: { min: 0.016, max: 2.131 },
     ram: { min: 0.256, max: 63.8 },
     disk: { min: 0.01, max: 4.9 }
-  }
+  },
+  packages
 };
 
 export default state;

packages/my-joyent/src/state/store.js

@@ -46,7 +46,7 @@ export const store = createStore(
   combineReducers({
     apollo: client.reducer(),
     form: formReducer,
-    filters: filterReducer
+    app: filterReducer
   }),
   state, // Initial state
   compose(