import axios from 'axios';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import fetchCategory from 'src/api/fetchCategory';
import Loading from 'src/components/Loading';
import { setup } from 'src/lib/csrf';
import FormEditCategory from 'src/views/form-layouts/FormEditCategory';

export default function viewCategories() {
  let router = useRouter();
  let [category, setCategory] = useState(null);
  let { cid } = router.query;

  useEffect(() => {
    const update = async () => {
      let response = await fetchCategory({ cid: 1 });
      let { data } = response;
      let { category } = data;
      setCategory(category);
    };
    if (cid) update();
  }, [cid]);

  if (!cid) return <>Error</>;
  if (!category) return <Loading />;

  return (
    <>
      <FormEditCategory category={category} />
    </>
  );
}

export const getServerSideProps = setup(async ({ req, res }) => {
  return { props: {} };
});
