In this blog post, we are going to understand the implementation of the functionality that enables the user to switch between the List View and the Grid View UI for the skill cards that is displayed on various routes of the SUSI Skill CMS Web-App. Let us go through the implementation in the blog –

Working of the feature

Going through the implementation

• The UI for implementing the switching of views was achieved via the use of RadioButtonGroup component of the Material-UI library for React.

• The type of view currently being shown was stored in the component state of the BrowseSkill component as viewType, whose default value is set to list, indicating that the skills are firstly shown in a List View.

.
.

export default class BrowseSkill extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        .
        …..
        viewType: 'list',
        ….
    };
  }
….
}

• The RadioButtonGroup component has 2 child components, for each view. The child component that is to be used is RadioButton.

• The props passed in the RadioButtonGroup are –
  • name : It is the name given to the component.
  • defaultSelected : It is the default view type.
  • style : It contains the style object of the UI.
  • valueSelected : It is set to the state variable assigned for storing view type.
  • onChange : It is the handler which executes, when the radio buttons are clicked.

• The style for the desktop view and mobile view is different depending on the screen size and is follows –

//Mobile view
Style {
    right: 12,
    position: 'absolute',
    top: 216,
    display: 'flex',
}

//Desktop view
style={
    display: 'flex',
    marginTop: 34
}

• The standard Material-UI icons were used in the radio buttons for each view.

• The props passed in the RadioButton are –
  • value : The value stored in the state, that is responsible for the view type. The values for List and Grid view are list and grid respectively.
  • label : The label for the RadioButton.
  • labelStyle : The style object for the label.
  • checkedIcon : The icon used in the checked state.
  • uncheckedIcon : The icon used in the unchecked state.

UI of the Radio Buttons

• The onClick handler of the radio buttons is –

handleViewChange = (event, value) => {
    this.setState({ viewType: value });
};

• The code snippet for the UI implementation, written inside the render function is as follows :

….
<RadioButtonGroup
  name="view_type"
  defaultSelected="list"
  style={
    window.innerWidth < 430
      ? {
          right: 12,
          position: 'absolute',
          top: 216,
          display: 'flex',
        }
      : { display: 'flex', marginTop: 34 }
  }
  valueSelected={this.state.viewType}
  onChange={this.handleViewChange}
>
  <RadioButton
    value="list"
    label="List view"
    labelStyle={{ display: 'none' }}
    style={{ width: 'fit-content' }}
    checkedIcon={
      <ActionViewStream style={{ fill: '#4285f4' }} />
    }
    uncheckedIcon={<ActionViewStream />}
  />
  <RadioButton
    value="grid"
    label="Grid view"
    labelStyle={{ display: 'none' }}
    style={{ width: 'fit-content' }}
    checkedIcon={
      <ActionViewModule style={{ fill: '#4285f4' }} />
    }
    uncheckedIcon={<ActionViewModule />}
  />
</RadioButtonGroup>
….

I hope the implementation of the switching between Views would be clear after going through the blog and proved to be helpful for your understanding.

References

• Material-UI for React – https://v0.material-ui.com
• Material-UI Icons – https://material.io/icons/
• Component in the codebase – https://github.com/fossasia/susi_skill_cms/blob/master/src/components/BrowseSkill/BrowseSkill.js