107 lines
3.0 KiB
TypeScript
107 lines
3.0 KiB
TypeScript
import { GetServerSideProps, NextPage } from "next";
|
|
import { FaExternalLinkAlt } from "react-icons/fa";
|
|
import ReactMarkdown from "react-markdown";
|
|
|
|
import { Query } from "../../common/Query";
|
|
import { Card } from "../../display/Card";
|
|
import { Layout } from "../../display/Layout";
|
|
import { LineHeader } from "../../display/LineHeader";
|
|
import { QuestionWithHistoryFragment } from "../../fragments.generated";
|
|
import { ssrUrql } from "../../urql";
|
|
import { CaptureQuestion } from "../components/CaptureQuestion";
|
|
import { HistoryChart } from "../components/HistoryChart";
|
|
import { IndicatorsTable } from "../components/IndicatorsTable";
|
|
import { QuestionPageDocument } from "../queries.generated";
|
|
|
|
interface Props {
|
|
id: string;
|
|
}
|
|
|
|
export const getServerSideProps: GetServerSideProps<Props> = async (
|
|
context
|
|
) => {
|
|
const [ssrCache, client] = ssrUrql();
|
|
const id = context.query.id as string;
|
|
|
|
const question =
|
|
(await client.query(QuestionPageDocument, { id }).toPromise()).data
|
|
?.result || null;
|
|
|
|
if (!question) {
|
|
context.res.statusCode = 404;
|
|
}
|
|
|
|
return {
|
|
props: {
|
|
urqlState: ssrCache.extractData(),
|
|
id,
|
|
},
|
|
};
|
|
};
|
|
|
|
const Section: React.FC<{ title: string }> = ({ title, children }) => (
|
|
<div className="space-y-2 flex flex-col items-center">
|
|
<h2 className="text-xl text-gray-900">{title}</h2>
|
|
<div>{children}</div>
|
|
</div>
|
|
);
|
|
|
|
const QuestionCardContents: React.FC<{
|
|
question: QuestionWithHistoryFragment;
|
|
}> = ({ question }) => (
|
|
<div className="flex flex-col space-y-4 items-center">
|
|
<h1 className="sm:text-4xl text-2xl text-center">
|
|
<a
|
|
className="text-black no-underline hover:text-gray-600"
|
|
href={question.url}
|
|
target="_blank"
|
|
>
|
|
{question.title}{" "}
|
|
<FaExternalLinkAlt className="text-gray-400 inline" size="24" />
|
|
</a>
|
|
</h1>
|
|
<div className="max-w-3xl">
|
|
<HistoryChart question={question} />
|
|
</div>
|
|
|
|
<Section title="Question description">
|
|
<ReactMarkdown
|
|
linkTarget="_blank"
|
|
className="font-normal text-gray-900 max-w-prose"
|
|
>
|
|
{question.description.replaceAll("---", "")}
|
|
</ReactMarkdown>
|
|
</Section>
|
|
|
|
<Section title="Indicators">
|
|
<IndicatorsTable question={question} />
|
|
</Section>
|
|
</div>
|
|
);
|
|
|
|
const QuestionPage: NextPage<Props> = ({ id }) => {
|
|
return (
|
|
<Layout page="question">
|
|
<div className="max-w-4xl mx-auto">
|
|
<Query document={QuestionPageDocument} variables={{ id }}>
|
|
{({ data }) => (
|
|
<div className="space-y-8">
|
|
<Card highlightOnHover={false} large={true}>
|
|
<QuestionCardContents question={data.result} />
|
|
</Card>
|
|
<div className="space-y-4">
|
|
<LineHeader>
|
|
<h1>Capture</h1>
|
|
</LineHeader>
|
|
<CaptureQuestion question={data.result} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Query>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default QuestionPage;
|