link-stack/apps/link/pages/tickets/[id].tsx
2023-03-15 12:17:43 +00:00

112 lines
2.6 KiB
TypeScript

import { GetServerSideProps, GetServerSidePropsContext } from "next";
import Head from "next/head";
import useSWR from "swr";
import { request, gql } from "graphql-request";
import { NextPage } from "next";
import { Grid } from "@mui/material";
import { Layout } from "components/Layout";
import { TicketDetail } from "components/TicketDetail";
type TicketProps = {
id: string;
};
const Ticket: NextPage<TicketProps> = ({ id }) => {
const origin =
typeof window !== "undefined" && window.location.origin
? window.location.origin
: "";
const graphQLFetcher = async ({ document, variables }: any) => {
const data = await request({
url: `${origin}/graphql`,
document,
variables,
});
console.log({ data });
return data;
};
const { data: ticketData, error: ticketError }: any = useSWR(
{
document: gql`
query getTicket($ticketId: Int!) {
ticket(ticket: { ticketInternalId: $ticketId }) {
id
internalId
title
note
number
createdAt
updatedAt
closeAt
articles {
edges {
node {
id
body
internal
sender {
name
}
}
}
}
}
}
`,
variables: { ticketId: parseInt(id, 10) },
},
graphQLFetcher,
{ refreshInterval: 1000 }
);
const { data: graphqlData2, error: graphqlError2 } = useSWR(
{
document: gql`
{
__schema {
queryType {
name
fields {
name
}
}
}
}
`,
variables: {},
},
graphQLFetcher
);
const shouldRender = !ticketError && ticketData;
return (
<Layout>
<Head>
<title>Link Shell</title>
</Head>
{shouldRender && (
<Grid container spacing={0} sx={{ height: "100vh" }} direction="row">
<Grid item sx={{ height: "100vh" }} xs={12}>
<TicketDetail ticket={ticketData.ticket} />
</Grid>
{/*<Grid item xs={0} sx={{ height: "100vh" }}>
<TicketEdit ticket={ticketData.ticket} />
</Grid>*/}
</Grid>
)}
{ticketError && <div>{ticketError.toString()}</div>}
</Layout>
);
};
export const getServerSideProps: GetServerSideProps = async (
context: GetServerSidePropsContext
) => {
const { id } = context.query;
return { props: { id } };
};
export default Ticket;