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:
parent
884db125e0
commit
1e881f3148
@ -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
|
||||
|
@ -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>
|
||||
`;
|
@ -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();
|
||||
});
|
27
packages/my-joyent/src/components/package/index.js
Normal file
27
packages/my-joyent/src/components/package/index.js
Normal 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;
|
File diff suppressed because it is too large
Load Diff
@ -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;
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -12,7 +12,7 @@ const HomeHOC = ({ filters, onFilterChange }) => (
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
filters: state.filters
|
||||
filters: state.app.filters
|
||||
};
|
||||
};
|
||||
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -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
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -46,7 +46,7 @@ export const store = createStore(
|
||||
combineReducers({
|
||||
apollo: client.reducer(),
|
||||
form: formReducer,
|
||||
filters: filterReducer
|
||||
app: filterReducer
|
||||
}),
|
||||
state, // Initial state
|
||||
compose(
|
||||
|
Loading…
Reference in New Issue
Block a user