import React, { useState, useEffect, useCallback } from 'react';
import ReactDOM from 'react-dom';
import { ajax } from '@/utils';
import './global.scss';
import BasicLayout from '@/layouts/BasicLayout';
import Comment from '@/components/comment';
import getCustomHeader from '@/components/token-header';

function CommentPage() {
  const [isLoading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  const [roles, setRoles] = useState([]);
  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = useCallback(async () => {
    await setLoading(true);
    try {
      const responseData = await ajax({
        api: 'getReply',
        method: 'post',
        data: JSON.stringify({enableCount: true}),
        type: 'json',
        contentType: 'application/json',
        headers: getCustomHeader()
      });
      await setLoading(false);
      if (responseData.success) {
        await setData(responseData.result);
      }
    } catch (e) {}
  });
  return (
    <BasicLayout>
      {data && 'commentList' in data && <Comment data={data} />}
    </BasicLayout>
  );
}
ReactDOM.render(<CommentPage />, document.getElementById('ice-container'));