frontend2/src/pages/logs/index.tsx

import React from "react";
import { parse } from "url";
import { GetServerSideProps } from "next";
import Head from "next/head";

import { LogHeader, listLogs, LogFilter, logFilterFromQueryString } from "../../lib/rpdata/logs";
import gqlSsrClient from "../../lib/client/graphql-ssr";
import { LogListContextProvider } from "../../hooks/LogListContext";
import { LogFilterChoiceContextProvider } from "../../hooks/LogFilterChoiceContext";
import LogList from "../../components/logs/LogList";
import LogFilterSelector from "../../components/logs/LogFilterSelector";

interface LogsPageProps {
  headers: LogHeader[]
  filter: LogFilter
};

export default function LogsPage(props: LogsPageProps) {
  return (
    <LogListContextProvider initialFilter={props.filter} initialHeader={props.headers}>
      <Head>
        <title>Logs - Aite RP</title>
      </Head>
      <LogFilterChoiceContextProvider>
        <LogFilterSelector />
      </LogFilterChoiceContextProvider>
      <LogList />
    </LogListContextProvider>
  );
}


export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const u = parse(ctx.req.url);
  const filter = logFilterFromQueryString(u.search || "");

  const headers = await listLogs(gqlSsrClient, filter)
  return {
    props: {
      filter,
      headers,
    },
  };
} 

export const experimental = {
  trailingSlash: true
}