diff --git a/src/backend/platforms/guesstimate.ts b/src/backend/platforms/guesstimate.ts index c10a3dc..61f34c4 100644 --- a/src/backend/platforms/guesstimate.ts +++ b/src/backend/platforms/guesstimate.ts @@ -22,7 +22,7 @@ const modelToQuestion = (model: any): ReturnType => { title: model.name, url: `https://www.getguesstimate.com/models/${model.id}`, // timestamp, - description, + description: description || "", options: [], qualityindicators: { numforecasts: 1, @@ -90,5 +90,5 @@ export const guesstimate: Platform & { search, version: "v1", fetchQuestion, - calculateStars: (q) => (q.description.length > 250 ? 2 : 1), + calculateStars: (q) => (q.description?.length > 250 ? 2 : 1), }; diff --git a/src/pages/questions/embed/[id].tsx b/src/pages/questions/embed/[id].tsx new file mode 100644 index 0000000..986aca5 --- /dev/null +++ b/src/pages/questions/embed/[id].tsx @@ -0,0 +1,4 @@ +export { + default, + getServerSideProps, +} from "../../../web/questions/pages/EmbedQuestionPage"; diff --git a/src/web/questions/components/PlatformLink.tsx b/src/web/questions/components/PlatformLink.tsx new file mode 100644 index 0000000..7435bab --- /dev/null +++ b/src/web/questions/components/PlatformLink.tsx @@ -0,0 +1,16 @@ +import { FaExternalLinkAlt } from "react-icons/fa"; + +import { QuestionFragment } from "../../fragments.generated"; + +export const PlatformLink: React.FC<{ question: QuestionFragment }> = ({ + question, +}) => ( + + {question.platform.label} + + +); diff --git a/src/web/questions/components/QuestionChartOrVisualization.tsx b/src/web/questions/components/QuestionChartOrVisualization.tsx new file mode 100644 index 0000000..aa7b807 --- /dev/null +++ b/src/web/questions/components/QuestionChartOrVisualization.tsx @@ -0,0 +1,19 @@ +import { QuestionWithHistoryFragment } from "../../fragments.generated"; +import { HistoryChart } from "./HistoryChart"; + +type Props = { + question: QuestionWithHistoryFragment; +}; + +export const QuestionChartOrVisualization: React.FC = ({ question }) => + question.platform.id === "guesstimate" && question.visualization ? ( + + Guesstimate Screenshot + + ) : question.options.length > 0 ? ( + + ) : null; /* Don't display chart if there are no options, for now. */ diff --git a/src/web/questions/components/QuestionInfoRow.tsx b/src/web/questions/components/QuestionInfoRow.tsx new file mode 100644 index 0000000..8ab6947 --- /dev/null +++ b/src/web/questions/components/QuestionInfoRow.tsx @@ -0,0 +1,20 @@ +import { QuestionFragment } from "../../fragments.generated"; +import { PlatformLink } from "./PlatformLink"; +import { QuestionOptions } from "./QuestionOptions"; +import { Stars } from "./Stars"; + +type Props = { + question: QuestionFragment; +}; + +export const QuestionInfoRow: React.FC = ({ question }) => ( +
+ + + +
+); diff --git a/src/web/questions/components/QuestionTitle.tsx b/src/web/questions/components/QuestionTitle.tsx new file mode 100644 index 0000000..71400e8 --- /dev/null +++ b/src/web/questions/components/QuestionTitle.tsx @@ -0,0 +1,26 @@ +import { QuestionFragment } from "../../fragments.generated"; +import { getBasePath } from "../../utils"; + +type Props = { + question: QuestionFragment; + linkToMetaforecast?: boolean; +}; + +export const QuestionTitle: React.FC = ({ + question, + linkToMetaforecast, +}) => ( +

+ + {question.title} + +

+); diff --git a/src/web/questions/pages/EmbedQuestionPage.tsx b/src/web/questions/pages/EmbedQuestionPage.tsx new file mode 100644 index 0000000..7bc3ce9 --- /dev/null +++ b/src/web/questions/pages/EmbedQuestionPage.tsx @@ -0,0 +1,63 @@ +import { GetServerSideProps, NextPage } from "next"; +import NextError from "next/error"; + +import { Query } from "../../common/Query"; +import { ssrUrql } from "../../urql"; +import { QuestionChartOrVisualization } from "../components/QuestionChartOrVisualization"; +import { QuestionInfoRow } from "../components/QuestionInfoRow"; +import { QuestionTitle } from "../components/QuestionTitle"; +import { QuestionPageDocument } from "../queries.generated"; + +interface Props { + id: string; +} + +export const getServerSideProps: GetServerSideProps = 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 EmbedQuestionPage: NextPage = ({ id }) => { + return ( +
+ + {({ data: { result: question } }) => + question ? ( +
+ + +
+ +
+ +
+ +
+
+ ) : ( + + ) + } +
+
+ ); +}; + +export default EmbedQuestionPage; diff --git a/src/web/questions/pages/QuestionPage.tsx b/src/web/questions/pages/QuestionPage.tsx index ae23111..25b5efd 100644 --- a/src/web/questions/pages/QuestionPage.tsx +++ b/src/web/questions/pages/QuestionPage.tsx @@ -1,19 +1,20 @@ 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 { CopyParagraph } from "../../common/CopyParagraph"; 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 { getBasePath } from "../../utils"; 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 { QuestionChartOrVisualization } from "../components/QuestionChartOrVisualization"; +import { QuestionInfoRow } from "../components/QuestionInfoRow"; +import { QuestionTitle } from "../components/QuestionTitle"; import { QuestionPageDocument } from "../queries.generated"; interface Props { @@ -49,58 +50,19 @@ const Section: React.FC<{ title: string }> = ({ title, children }) => ( ); -const PlatformLink: React.FC<{ question: QuestionWithHistoryFragment }> = ({ - question, -}) => ( - - {question.platform.label} - - -); - const LargeQuestionCard: React.FC<{ question: QuestionWithHistoryFragment; }> = ({ question }) => { return ( -

- - {question.title} - -

+ -
- - - +
+
- { - question.platform.id === "guesstimate" && question.visualization ? ( - - Guesstimate Screenshot - - ) : question.options.length > 0 ? ( - - ) : null /* Don't display chart if there are no options, for now. */ - } +
@@ -131,6 +93,17 @@ const QuestionScreen: React.FC<{ question: QuestionWithHistoryFragment }> = ({

Capture

+ +

Embed

+
+
+ `} + buttonText="Copy HTML" + /> +
);