initial commit

src/js/panels/home/groups.js

@@ -0,0 +1,145 @@
+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);