feat: capture on individual questions pages

This commit is contained in:
Vyacheslav Matyukhin 2022-04-29 21:58:21 +04:00
parent 3842921c08
commit da7415bf65
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
7 changed files with 27 additions and 59 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 426 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 452 KiB

View File

@ -12,6 +12,8 @@ export async function middleware(req: NextRequest) {
new URL(`/dashboards/view/${dashboardId}`, req.url)
);
}
} else if (pathname === "/capture") {
return NextResponse.redirect(new URL("/", req.url));
} else if (pathname === "/secretDashboard") {
const dashboardId = searchParams.get("dashboardId");
if (dashboardId) {

View File

@ -1,27 +0,0 @@
import { NextPage } from "next";
import React from "react";
import { displayQuestionsWrapperForCapture } from "../web/display/displayQuestionsWrappers";
import { Layout } from "../web/display/Layout";
import { Props } from "../web/search/anySearchPage";
import CommonDisplay from "../web/search/CommonDisplay";
export { getServerSideProps } from "../web/search/anySearchPage";
const CapturePage: NextPage<Props> = (props) => {
return (
<Layout page="capture">
<CommonDisplay
{...props}
hasSearchbar={true}
hasCapture={true}
hasAdvancedOptions={false}
placeholder="Get best title match..."
displaySeeMoreHint={false}
displayQuestionsWrapper={displayQuestionsWrapperForCapture}
/>
</Layout>
);
};
export default CapturePage;

View File

@ -52,19 +52,19 @@ const ToolsPage: NextPage = () => {
title: "Search",
description: "Find forecasting questions on many platforms.",
innerLink: "/",
img: "https://i.imgur.com/Q94gVqG.png",
img: "/screenshots/frontpage.png",
},
{
title: "[Beta] Present",
description: "Present forecasts in dashboards.",
innerLink: "/dashboards",
img: "https://i.imgur.com/x8qkuHQ.png",
img: "/screenshots/dashboard.png",
},
{
title: "Capture",
description:
"Capture forecasts save them to Imgur. Useful for posting them somewhere else as images. Currently rate limited by Imgur, so if you get a .gif of a fox falling flat on his face, that's why.",
innerLink: "/capture",
"Capture forecasts save them to Imgur. Useful for posting them somewhere else as images. Currently rate limited by Imgur, so if you get a .gif of a fox falling flat on his face, that's why. Capture button can be found on individual questions pages.",
innerLink: "/",
img: "https://i.imgur.com/EXkFBzz.png",
},
{
@ -75,9 +75,10 @@ const ToolsPage: NextPage = () => {
img: "https://i.imgur.com/BQ4Zzjw.png",
},
{
title: "[Upcoming] Request",
title: "[Beta] Request",
description:
"Interact with metaforecast's API and fetch forecasts for your application. Currently possible but documentation is poor, get in touch.",
"Interact with metaforecast's GraphQL API and fetch forecasts for your application. Currently possible but documentation is poor, get in touch.",
externalLink: "/api/graphql",
},
{
title: "[Upcoming] Record",

View File

@ -1,4 +1,3 @@
import { DisplayOneQuestionForCapture } from "./DisplayOneQuestionForCapture";
import { DisplayQuestions } from "./DisplayQuestions";
export function displayQuestionsWrapperForSearch({
@ -16,16 +15,3 @@ export function displayQuestionsWrapperForSearch({
</div>
);
}
export function displayQuestionsWrapperForCapture({
results,
whichResultToDisplayAndCapture,
}) {
return (
<div className="grid grid-cols-1 w-full justify-center">
<DisplayOneQuestionForCapture
result={results[whichResultToDisplayAndCapture]}
/>
</div>
);
}

View File

@ -1,21 +1,17 @@
import { GetServerSideProps, NextPage } from "next";
import ReactMarkdown from "react-markdown";
import { QualityIndicatorsObj } from "../../../graphql/schema/questions";
import { Query } from "../../common/Query";
import { Card } from "../../display/Card";
import { DisplayOneQuestionForCapture } from "../../display/DisplayOneQuestionForCapture";
import {
QuestionFooter,
qualityIndicatorLabels,
formatIndicatorValue,
UsedIndicatorName,
getStarsElement,
formatIndicatorValue, getStarsElement, qualityIndicatorLabels, UsedIndicatorName
} from "../../display/DisplayQuestion/QuestionFooter";
import { Layout } from "../../display/Layout";
import { LineHeader } from "../../display/LineHeader";
import { QuestionWithHistoryFragment } from "../../fragments.generated";
import { ssrUrql } from "../../urql";
import { HistoryChart } from "../components/HistoryChart";
import { QuestionOptions } from "../components/QuestionOptions";
import { QuestionPageDocument } from "../queries.generated";
interface Props {
@ -164,11 +160,21 @@ const QuestionPage: NextPage<Props> = ({ id }) => {
return (
<Layout page="question">
<div className="max-w-4xl mx-auto mb-5">
<Card highlightOnHover={false}>
<Query document={QuestionPageDocument} variables={{ id }}>
{({ data }) => <QuestionCardContents question={data.result} />}
</Query>
</Card>
<Query document={QuestionPageDocument} variables={{ id }}>
{({ data }) => (
<div className="space-y-8">
<Card highlightOnHover={false}>
<QuestionCardContents question={data.result} />
</Card>
<div className="space-y-4">
<LineHeader>
<h1>Capture</h1>
</LineHeader>
<DisplayOneQuestionForCapture result={data.result} />
</div>
</div>
)}
</Query>
</div>
</Layout>
);