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

import { useDispatch, useSelector } from "react-redux";

import { getMyFaqInfo } from "../../actions/myPageActions";
import TBody from "../../components/TBody/TBody";
import TPanel from "../../components/TPanel/TPanel";
import Support from "./MyPageSub/Support/Support";

export default function MyPagePanel() {
  const dispatch = useDispatch();
  const [faqs, setFaqs] = useState();

  const faqInfos = useSelector((state) => state.myPage.faqData.faqInfos);
  const contactInfos = useSelector((state) => state.myPage.faqData);

  useEffect(() => {
    dispatch(getMyFaqInfo({}));
  }, [dispatch]);

  useEffect(() => {
    if (faqInfos) {
      setFaqs(faqInfos);
    }
  }, [faqInfos]);

  return (
    <TPanel>
      <Support faqs={faqs} />
    </TPanel>
  );
}
