import React, { useEffect } from "react";
import Layout from "../../../components/layout/Layout";
import Sidebar from "../../../components/layout/AdminDashboardSidebar";
import VendorListing from "../../../components/admin/VendorListing";
import { wrapper } from "../../../redux/store";
import { loadUser } from "../../../redux/actions/userActions";
import { getAllCategories, getAllSubCategories } from "../../../redux/actions/categoriesAction";
import { GenericLayout } from "../../../components/layout/Generics/GenericLayout";
import { getAllVendors } from "../../../redux/actions/vendorActions";
import { useDispatch } from "react-redux";

export default function VendorListingPage() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getAllVendors({ pageNumber: 1, pageSize: 10 }));
  }, []);
  return (
    // <Layout>
    //   <div className="sidebarContainer">
    //     <Sidebar />
    //     <div className="content">
    <GenericLayout>
      <VendorListing />
    </GenericLayout>
    //     </div>
    //   </div>
    // </Layout>
  );
}

/** For server side rendering */
// export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
//   // Get the menu data.

//   // get the locations data.
//   await store.dispatch(loadUser());

//   return {
//     props: {}
//   };
// });

/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
  // await store.dispatch(loadUser());
  await store.dispatch(loadUser());
  // await store.dispatch(getActivitiesByVendor());
  await store.dispatch(getAllCategories());
  await store.dispatch(getAllSubCategories());
  return {
    props: {}
  };
});