metaforecast/src/web/questions/pages/QuestionPage.tsx

import { GetServerSideProps, NextPage } from "next";
import NextError from "next/error";
import { FaExternalLinkAlt } from "react-icons/fa";
import ReactMarkdown from "react-markdown";

import { Card } from "../../common/Card";
import { Layout } from "../../common/Layout";
import { LineHeader } from "../../common/LineHeader";
import { Query } from "../../common/Query";
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 { QuestionOptions } from "../components/QuestionOptions";
import { Stars } from "../components/Stars";
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-start">
    <h2 className="text-xl text-gray-900">{title}</h2>
    <div>{children}</div>
  </div>
);

const PlatformLink: React.FC<{ question: QuestionWithHistoryFragment }> = ({
  question,
}) => (
  <a
    className="px-2 py-1 border-2 border-gray-400 rounded-lg text-black no-underline text-normal hover:bg-gray-100 flex flex-nowrap space-x-1 items-center"
    href={question.url}
    target="_blank"
  >
    <span>{question.platform.label}</span>
    <FaExternalLinkAlt className="text-gray-400 inline sm:text-md text-md" />
  </a>
);

const LargeQuestionCard: React.FC<{
  question: QuestionWithHistoryFragment;
}> = ({ question }) => {
  return (
    <Card highlightOnHover={false} large={true}>
      <h1 className="sm:text-3xl text-xl">
        <a
          className="text-black no-underline hover:text-gray-700"
          href={question.url}
          target="_blank"
        >
          {question.title}
        </a>
      </h1>

      <div className="flex items-center gap-2 mb-5 mt-5">
        <PlatformLink question={question} />
        <Stars num={question.qualityIndicators.stars} />
        <QuestionOptions
          question={{ ...question }}
          maxNumOptions={1}
          forcePrimaryMode={true}
        />
      </div>

      <div className="mb-10">
        {
          question.platform.id === "guesstimate" && question.visualization ? (
            <a className="no-underline" href={question.url} target="_blank">
              <img
                className="rounded-sm"
                src={question.visualization}
                alt="Guesstimate Screenshot"
              />
            </a>
          ) : question.options.length > 0 ? (
            <HistoryChart question={question} />
          ) : null /* Don't display chart if there are no options, for now. */
        }
      </div>

      <div className="mx-auto max-w-prose">
        <Section title="Question description">
          <ReactMarkdown
            linkTarget="_blank"
            className="font-normal text-gray-900"
          >
            {question.description.replaceAll("---", "")}
          </ReactMarkdown>
        </Section>
        <div className="mt-5">
          <Section title="Indicators">
            <IndicatorsTable question={question} />
          </Section>
        </div>
      </div>
    </Card>
  );
};
const QuestionScreen: React.FC<{ question: QuestionWithHistoryFragment }> = ({
  question,
}) => (
  <div className="space-y-8">
    <LargeQuestionCard question={question} />
    <div className="space-y-4">
      <LineHeader>
        <h1>Capture</h1>
      </LineHeader>
      <CaptureQuestion question={question} />
    </div>
  </div>
);

const QuestionPage: NextPage<Props> = ({ id }) => {
  return (
    <Layout page="question">
      <div className="max-w-4xl mx-auto">
        <Query document={QuestionPageDocument} variables={{ id }}>
          {({ data }) =>
            data.result ? (
              <QuestionScreen question={data.result} />
            ) : (
              <NextError statusCode={404} />
            )
          }
        </Query>
      </div>
    </Layout>
  );
};

export default QuestionPage;