146 lines
4.5 KiB
JavaScript
146 lines
4.5 KiB
JavaScript
import React from 'react';
|
|
import {connect} from 'react-redux';
|
|
import {bindActionCreators} from "redux";
|
|
|
|
import {goBack, openPopout, closePopout, openModal} from "../../store/router/actions";
|
|
import * as VK from '../../services/VK';
|
|
|
|
import {renderGroupsList} from '../../services/renderers';
|
|
|
|
import {Div, List, Panel, Group, Button, PanelHeader, PanelSpinner, PanelHeaderBack, Header} from "@vkontakte/vkui";
|
|
|
|
class HomePanelGroups extends React.Component {
|
|
|
|
state = {
|
|
groups: {
|
|
admined: [],
|
|
other: [],
|
|
},
|
|
loading: true,
|
|
errorGetAuthToken: false
|
|
};
|
|
|
|
componentDidMount() {
|
|
if (this.props.accessToken === undefined) {
|
|
this.getAuthToken();
|
|
} else {
|
|
this.getGroupsList();
|
|
}
|
|
}
|
|
|
|
getAuthToken() {
|
|
this.props.dispatch(VK.getAuthToken(['groups']));
|
|
}
|
|
|
|
componentDidUpdate(prevProps, prevState, snapshot) {
|
|
if (this.props !== prevProps) {
|
|
if (this.props.accessToken === null) {
|
|
this.setState({
|
|
loading: false,
|
|
errorGetAuthToken: true
|
|
});
|
|
} else {
|
|
this.setState({
|
|
loading: true,
|
|
errorGetAuthToken: false
|
|
});
|
|
|
|
this.getGroupsList();
|
|
}
|
|
}
|
|
}
|
|
|
|
async getGroupsList() {
|
|
if (localStorage.getItem('userGroupsAdmined') && localStorage.getItem('userGroupsOther')) {
|
|
this.setState({
|
|
groups: {
|
|
admined: JSON.parse(localStorage.getItem('userGroupsAdmined')),
|
|
other: JSON.parse(localStorage.getItem('userGroupsOther')),
|
|
},
|
|
loading: false
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
let groups = await VK.groupsGet();
|
|
console.log(groups);
|
|
|
|
let adminedGroups = groups.items.filter(function (item) {
|
|
return item.is_admin === 1;
|
|
});
|
|
|
|
let otherGroups = groups.items.filter(function (item) {
|
|
return item.is_admin === 0;
|
|
});
|
|
|
|
localStorage.setItem('userGroupsAdmined', JSON.stringify(adminedGroups));
|
|
localStorage.setItem('userGroupsOther', JSON.stringify(otherGroups));
|
|
|
|
this.setState({
|
|
groups: {
|
|
admined: adminedGroups,
|
|
other: otherGroups
|
|
},
|
|
loading: false
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const {id, goBack} = this.props;
|
|
|
|
let adminedGroupsList = renderGroupsList(this.state.groups.admined);
|
|
let otherGroupsList = renderGroupsList(this.state.groups.other);
|
|
|
|
return (
|
|
<Panel id={id}>
|
|
<PanelHeader
|
|
left={<PanelHeaderBack onClick={() => goBack()}/>}
|
|
>
|
|
Группы
|
|
</PanelHeader>
|
|
{this.state.loading && <PanelSpinner/>}
|
|
{!this.state.loading && this.state.errorGetAuthToken && <Group>
|
|
<Div>Возникла ошибка при получении данных, возможно Вы не выдали права на список групп.</Div>
|
|
<Div>
|
|
<Button size="l" stretched={true} onClick={() => this.getAuthToken()}>Запросить
|
|
повторно</Button>
|
|
</Div>
|
|
</Group>}
|
|
{!this.state.loading && !this.state.errorGetAuthToken && adminedGroupsList &&
|
|
<Group header={
|
|
<Header mode="secondary">Администрируемые</Header>
|
|
}>
|
|
<List>
|
|
{adminedGroupsList}
|
|
</List>
|
|
</Group>}
|
|
{!this.state.loading && !this.state.errorGetAuthToken && otherGroupsList &&
|
|
<Group header={
|
|
<Header mode="secondary">Остальные</Header>
|
|
}>
|
|
<List>
|
|
{otherGroupsList}
|
|
</List>
|
|
</Group>}
|
|
</Panel>
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
function mapDispatchToProps(dispatch) {
|
|
return {
|
|
dispatch,
|
|
...bindActionCreators({goBack, openPopout, closePopout, openModal}, dispatch)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
accessToken: state.vkui.accessToken
|
|
};
|
|
};
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(HomePanelGroups);
|