Commit 41714c9f authored by Eugen Rochko's avatar Eugen Rochko

Show 10 servers with a "Show all" button, fix grid stretching bug

parent 4ec84916
Pipeline #910 passed with stages
in 1 minute and 11 seconds
......@@ -43,6 +43,11 @@ class Wizard extends React.PureComponent {
intl: PropTypes.object.isRequired,
instances: PropTypes.arrayOf(PropTypes.object).isRequired,
languages: PropTypes.arrayOf(PropTypes.object).isRequired,
showAll: PropTypes.bool.isRequired,
onMount: PropTypes.func.isRequired,
onChangeCategory: PropTypes.func.isRequired,
onChangeLanguage: PropTypes.func.isRequired,
onShowAll: PropTypes.func.isRequired,
};
componentDidMount () {
......@@ -71,7 +76,7 @@ class Wizard extends React.PureComponent {
}
render () {
const { instances, category, language, languages, intl } = this.props;
const { instances, category, language, languages, intl, showAll, onShowAll } = this.props;
const content = instances.length > 0 ? (
<div>
......@@ -84,8 +89,10 @@ class Wizard extends React.PureComponent {
</div>
<div className='wizard__list'>
{instances.slice(3).map(item => <WizardRow key={item.domain} instance={item} />)}
{instances.slice(3, showAll ? undefined : 10).map(item => <WizardRow key={item.domain} instance={item} />)}
</div>
{(instances.length > 10 && !showAll) && <button className='cta button wizard__show-more' onClick={onShowAll}><FormattedMessage id='wizard.show_more' defaultMessage='Show {count, number} more' values={{ count: instances.length - 10 }}/></button>}
</div>
) : (
<div className='empty'>
......
import Wizard from './Wizard';
import { connect } from 'react-redux';
import { fetchInstances, changeFilterCategory, changeFilterLanguage, fetchLanguages } from './actions';
import { fetchInstances, changeFilterCategory, changeFilterLanguage, fetchLanguages, showAllInstances } from './actions';
const mapStateToProps = state => ({
instances: state.instances,
languages: state.languages,
category: state.filter.category,
language: state.filter.language,
showAll: state.filter.showAll,
});
const mapDispatchToProps = dispatch => ({
......@@ -27,6 +28,10 @@ const mapDispatchToProps = dispatch => ({
dispatch(fetchInstances());
},
onShowAll: () => {
dispatch(showAllInstances());
},
});
export default connect(mapStateToProps, mapDispatchToProps)(Wizard);
......@@ -5,6 +5,7 @@ export const LOCALE_CHANGE = 'LOCALE_CHANGE';
export const FILTER_LANGUAGE_CHANGE = 'FILTER_LANGUAGE_CHANGE';
export const FILTER_CATEGORY_CHANGE = 'FILTER_CATEGORY_CHANGE';
export const LANGUAGES_FETCH_SUCCESS = 'LANGUAGES_FETCH_SUCCESS';
export const INSTANCES_SHOW_ALL = 'INSTANCES_SHOW_ALL';
export function fetchInstances() {
return (dispatch, getState) => {
......@@ -31,6 +32,12 @@ export function fetchInstancesSuccess(data) {
};
};
export function showAllInstances() {
return {
type: INSTANCES_SHOW_ALL,
};
};
export function changeFilterCategory(data) {
return {
type: FILTER_CATEGORY_CHANGE,
......
import {
INSTANCES_FETCH_SUCCESS,
INSTANCES_SHOW_ALL,
LOCALE_CHANGE,
FILTER_CATEGORY_CHANGE,
FILTER_LANGUAGE_CHANGE,
......@@ -71,6 +72,7 @@ const initialState = {
filter: {
category: 'general',
language: '',
showAll: false,
},
};
......@@ -90,11 +92,13 @@ export default function reducer(state = initialState, action) {
case INSTANCES_FETCH_SUCCESS:
return { ...state, instances: sortByDunbarsNumber(action.data) };
case FILTER_CATEGORY_CHANGE:
return { ...state, filter: { ...state.filter, category: action.data } };
return { ...state, filter: { ...state.filter, category: action.data, showAll: false } };
case FILTER_LANGUAGE_CHANGE:
return { ...state, filter: { ...state.filter, language: action.data } };
return { ...state, filter: { ...state.filter, language: action.data, showAll: false } };
case LANGUAGES_FETCH_SUCCESS:
return { ...state, languages: action.data };
case INSTANCES_SHOW_ALL:
return { ...state, filter: { ...state.filter, showAll: true } };
default:
return state;
}
......
......@@ -136,7 +136,7 @@
&__row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
grid-column-gap: 10px;
margin-bottom: 20px;
}
......@@ -176,6 +176,8 @@
&__text {
flex: 1 1 auto;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
strong {
font-weight: 700;
......@@ -198,6 +200,19 @@
}
}
&__show-more.button {
margin-top: 20px;
display: block;
width: 100%;
background: $vibrant;
&:hover,
&:focus,
&:active {
background: darken($vibrant, 4%);
}
}
.empty {
min-height: 30vh;
display: flex;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment