Skip to Content
FrontendInterfacesStatusHow to create a status page

How to create a status page

This is a quick guide to create a status page using status bundle. In this example we will create a status page for a services called “Test” that will fetch data from an API and display it.

In status bundle

Create a new folder + file in /src/status/

Let’s create /src/status/test/index.tsx

Add the following template to the file

const getStatusTest = async () => {
  return {};
};
 
export default getStatusTest;

Add your logic

For the example we will fetch data from an API and return it.

const getStatusTest = async () => {
  try {
    const res = await fetch("https://test.com/status", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    });
 
    if (!res.ok) {
      throw new Error("Failed to fetch data");
    }
 
    const data = await res.json();
 
    return {
      "API Status": data.status,
      "API count": data.count,
    };
  } catch (error) {
    return {
      Error: "Unable to fetch data",
    };
  }
};
 
export default getStatusTest;

Add your new status to the status index to export it

In the /src/status/index.ts file

export { default as getStatusTest } from "./test";

Publish a new version of the bundle

In app

Create a new API route in /src/app/api/status/test/route.ts

import { getStatusTest } from "@phpcreation/frontend-status-react-nextjs-bundle.git/status";
 
export async function GET() {
  const status = await getStatusTest();
  return Response.json(status);
}

Create a new page in /src/app/[locale]/status/test/page.tsx

  • Import StatusDisplay from bundle components : This component will make the API call to fetch the status data and display it.
  • Give the entityToFetch prop the API route you just created.
import { StatusDisplay } from "@phpcreation/frontend-components-react-nextjs-bundle/components";
 
export default function StatusTestPage() {
  return <StatusDisplay entityToFetch="/api/status/test" />;
}

In component bundle

Add your new status page to the status list

const statusList = {
  All: `/${locale}/status/all`,
  Api: `/${locale}/status/api`,
  Cache: `/${locale}/status/cache`,
  Configs: `/${locale}/status/configs`,
  Test: `/${locale}/status/test`,
  UserTokenCheck: `/${locale}/status/user-token/check`,
  UserTokenDisplay: `/${locale}/status/user-token/display`,
  UserTokenExpected: `/${locale}/status/user-token/expected`,
};

Publish a new version of the bundle

Last updated on
ConfigsUser token check