//next.js page to show all locatons in the database with a link to the location page
// import axios from "axios";
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(loc: Location) {
  return (
    <Layout>
      <ProtectedRoute allowedRoles={[UserRole.POWERUSER, UserRole.ADMIN]}>
        <div className="h-5/6 grid place-items-center">
          <LocationForm key={loc.id} location={loc} />
        </div></ProtectedRoute>
    </Layout>
  );
}

export default NewPage;

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

export const getServerSideProps = async (context) => {
  const axios = await axiosServer(context);

  //if query is undefined, then it is a new location
  if (context.query.id === undefined) {
    return {
      props: {}
    };
  }

  const { data: loc } = await axios.get(
    `${process.env.PUBLIC_URL}api/data/locations/` + context.params.id
  );
  console.log(location) //this is the location object
  context.res.setHeader("Cache-Control", "s-maxage=1, stale-while-revalidate");
  return {
    props: {
      location: loc,
    },
  };
};