#Exchanging and using app tokens

import { useApp, Wrapper } from '@hygraph/app-sdk-react';

function Setup({ code }: { code: string }) {
  const { context } = useApp();
  const managementApiBaseUrl = context.project.mgmtApi.split("/")
    .slice(0, -1)
    .join("/");

  return (
    <Button
      onClick={() =>
        fetch(`/api/saveAppToken`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            code,
            environmentId: context.environment.id,
            managementApiBaseUrl,
          }),
        })
          .then((res) => res.json())
          .then((data) => {
            // Save token to localstorage
            localStorage.setItem('app-token', data.appToken);
          })
      }
    >
      Get App Token
    </Button>
  );
}

// You'll get the exchange code in your setup page as query param only while
// your App Installation is not completed
export default function SetupPage() {
  const { query } = useRouter();
  return (
    <Wrapper>
      <Setup code={query.code as string} />
    </Wrapper>
  );
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  const body = req.body as { code: string; environmentId: string; managementApiBaseUrl: string; };
  const response = await fetch(`${managementApiBaseUrl}/app-exchange-token`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      clientId: process.env.CLIENT_ID,
      clientSecret: process.env.CLIENT_SECRET,
      exchangeCode: req.body.code,
    }),
  });
  const { appToken } = (await response.json()) as { appToken: string };
  // Return App token to the browser so it can save it in localstorage
  res.status(200).json({ appToken });
}

const createModelMutation = `
  mutation CreateModelMutation($input: CreateModelInput!) {
    createModel(data: $input) {
      migration {
        id
      }
    }
  }
`;

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  // Get App token from the client, saved in localstorage, in the request body
  const body = req.body as { appToken: string; environmentId: string; managementApiUrl: string; };

  const response = await fetch(managementApiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${body.appToken}`,
    },
    body: JSON.stringify({
      query: createModelMutation,
      variables: {
        input: {
          environmentId: body.environmentId,
          apiId: '<your_model_api_id>',
          apiIdPlural: '<your_model_api_id_plural>',
          displayName: '<Your model display name>',
          description: '<Your model description>',
        },
      },
    }),
  });

  res.status(200).json(response);
}

import { useApp, Wrapper } from '@hygraph/app-sdk-react';

function CreateHygraphModel({ code }: { code: string }) {
  const { context } = useApp();
  const managementApiUrl = context.project.mgmtApi;

  return (
    <Button
      onClick={() =>
        fetch(`/api/createHygraphModel`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            appToken: /* Get Saved App Token */,
            environmentId: context.environment.id,
            managementApiUrl,
          }),
        })
          .then((res) => res.json())
          .then((data) => {
            console.log('🎉 Created Hygraph Model');
          })
      }
    >
      Create Hygraph Model
    </Button>
  );
}

// Remember to wrap the component in Hygraph App Wrapper
export default function SetupPage() {
  const { query } = useRouter();
  return (
    <Wrapper>
      <CreateHygraphModel />
    </Wrapper>
  );
}