1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-14 15:20:06 +02:00

feat(my-joyent): process packages in redux

This commit is contained in:
Sara Vieira 2017-09-14 13:55:31 +01:00 committed by Sérgio Ramos
parent 884db125e0
commit 1e881f3148
13 changed files with 29685 additions and 2026 deletions

View File

@ -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

View File

@ -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>
`;

View File

@ -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();
});

View File

@ -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;

View File

@ -1,14 +1,8 @@
import React, { Component } from 'react';
import React from 'react';
import remcalc from 'remcalc';
import styled from 'styled-components';
import {
Card,
CardSubTitle,
CardTitle,
CardView,
CardFooter,
CardMeta
} from 'joyent-ui-toolkit';
import Package from '@components/package';
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 {
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 => (
<li>
<Card transparent>
<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();
}
}
const Packages = ({ packages }) => (
<ListStyled>
{packages.map(pack => (
<li key={pack.name}>
<Package pack={pack} />
</li>
))}
</ListStyled>
);
export default Packages;

View File

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

View File

@ -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
};
};

View File

@ -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;

View File

@ -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;

View File

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