//next.js page to show all locatons in the database with a link to the location page
import { Location, UserRole } from "@prisma/client";
import Layout from "../../../../components/layout";
import LocationForm from "../../../../components/location/LocationForm";
import axiosServer from '../../../../src/axiosServer';
import ProtectedRoute from '../../../../components/protectedRoute';

function NewPage(item: Location) {
  return (
    <Layout>
      <ProtectedRoute allowedRoles={[UserRole.POWERUSER, UserRole.ADMIN]}>
        <div className="h-5/6 grid place-items-center">
          <LocationForm key={item.id} item={item} />
        </div>
      </ProtectedRoute>
    </Layout>
  );
}

export default NewPage;

//------------------pages\cart\locations\edit\[id].tsx------------------//

export const getServerSideProps = async (context) => {
  const axios = await axiosServer(context);
  if (context.query.id === "new" || context.query.id === 0) {
    return {
      props: {}
    };
  }
  const { data: item } = await axios.get(
    process.env.PUBLIC_URL + "/api/data/locations/" + context.params.id
  );
  console.log(item) //this is the location object
  context.res.setHeader("Cache-Control", "s-maxage=1, stale-while-revalidate");
  return {
    props: {
      item: item,
    },
  };
};