Knacksteem.org User Profile Dashboard Update: Contributions Lazy Lo...

Repository

https://github.com/knacksteem/knacksteem.org

Pull Request

https://github.com/knacksteem/knacksteem.org/pull/47

What Does this Pull Add?

This pull adds lazy loading capability to the profile dashboard of knacksteem.org to help create a seamless exploratory experience for users. This could be implemented thanks to server side updates that help queries define load ranges. The primary code that aids with this feature is the handleMoreArticlesLoading callback applied whenever the load more button is clicked. Also some sensible defaults are present within the component state. The code is pretty descriptive as we simply update the number of articles to skip over whenever the button is clicked.

  state = {
    isBanModalOpen: false,
    banReason: '',
    banDuration: 1000,
    filterBy: '',
    skipArticles: 0,
    limit: 25
  };

  handleMoreArticlesLoading(category) {
    let skipArticles = this.state.skipArticles + this.state.limit;
    this.setState({
      skipArticles
    });
    
    this.loadArticlesUser(category, skipArticles);
  }

This pull also adds more definitive filtering for access control levels as access to moderation controls is defined based on the user roles. There are multiple tiers of access with specific permissions:

Contributor.
Moderator.
Supervisor
Master-Supervisor.

The dropdown for the moderation controls was updated to accommodate all constraints.

{(isMasterSupervisor || isSupervisor ) &&
<Dropdown
  overlay={
    <Menu  onClick={({ item }) => onModChoiceSelect(item.props.choice, item.props.action)}>
    {(isMasterSupervisor || isSupervisor) &&
      <Menu.Item
        choice={'moderator'}
        action={user.roles.indexOf('moderator') === -1 ? 'add' : 'remove'}
        key="1"
      >
        <Icon type="solution" />
        {user && user.roles.indexOf('moderator') === -1 ? ' a ' : ' as a '}
        <b>Moderator</b>
      </Menu.Item>
    }
    { isMasterSupervisor && (
      <Menu.Item
        choice={'supervisor'}
        key="2"
        action={user && user.roles.indexOf('supervisor') === -1 ? 'add' : 'remove'}
      >
        <Icon type="user" />
        {user && user.roles.indexOf('supervisor') === -1 ? 'Make  ' : ' as a '}
        <b>Supervisor</b>
      </Menu.Item>
    )}
    </Menu>
  }
  trigger={['click']}
>
  <Button
    type="primary"
    size="large"
    style={styles.modButton}
  >
    {user && user.roles.indexOf('moderator') > -1 ? 'Strip Mod' : 'Make Mod'}
    / {user && user.roles.indexOf('supervisor') > -1 ? 'Remove Sup' : 'Make Sup'}
    <Icon type="down" />
  </Button>
</Dropdown>
}