import React, { useState, useEffect } from "react";

import { Redirect } from "react-router-dom";

import { Button, Spin } from 'antd';
import { CheckCircleOutlined } from '@ant-design/icons';

import _auth from '@netuno/auth-client';

import _service from '@netuno/service-client';

import Item from './Item';

import './index.less';

export default () => {
    if (!_auth.isLogged()) {
        return <Redirect to="/login"/>;
    }
    const [ loading, setLoading ] = useState(true);
    const [ communities, setCommunities ] = useState([]);
    useEffect(()=> {
        _service({
            method: 'GET',
            url: "api/communities",
            success: (response) => {
                setLoading(false);
                setCommunities(response.json);
            },
            fail: (e) => {
                setLoading(false);
                console.log("Service User Info Error", e);
            }
        });
    }, []);
    const onLogout = ()=> {
        _auth.logout();
        setLoading(true);
    }
    if (loading) {
        return <Spin />;
    }
    return (
        <div className="communities">
            <ul className="communities__list">
            {
                communities.map(
                    (community) => {
                        return (
                            <Item data={community} />
                        );
                    }
                )
            }
            </ul>
        </div>
    );
};