feat: capture on individual questions pages

src/pages/_middleware.ts

@@ -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) {

src/pages/capture.tsx

@@ -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;

src/pages/tools.tsx

@@ -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",

src/web/display/displayQuestionsWrappers.tsx

@@ -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>
-  );
-}

src/web/questions/pages/QuestionPage.tsx

@@ -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>
+          {({ 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>
   );