fix: secretEmbed

src/pages/secretEmbed.tsx

@@ -1,20 +1,27 @@
 /* Imports */
 
+import { GetServerSideProps, NextPage } from "next";
 import React from "react";
 
-import { displayForecast } from "../web/display/displayForecasts";
+import { platforms } from "../backend/platforms";
+import { DisplayForecast } from "../web/display/displayForecasts";
 import { FrontendForecast } from "../web/platforms";
 import searchAccordingToQueryData from "../web/worker/searchAccordingToQueryData";
 
-/* Helper functions */
+interface Props {
+  results: FrontendForecast[];
+}
 
-export async function getServerSideProps(context) {
+export const getServerSideProps: GetServerSideProps<Props> = async (
+  context
+) => {
   let urlQuery = context.query; // this is an object, not a string which I have to parse!!
 
   let initialQueryParameters = {
     query: "",
     starsThreshold: 2,
     forecastsThreshold: 0,
+    forecastingPlatforms: platforms.map((platform) => platform.name),
     ...urlQuery,
   };
 
@@ -28,34 +35,32 @@ export async function getServerSideProps(context) {
       results: results,
     },
   };
-}
+};
 
-/* Body */
+const SecretEmbedPage: NextPage<Props> = ({ results }) => {
-export default function Home({ results }) {
+  let result = results.length ? results[0] : null;
-  /* Final return */
-  let result = results ? results[0] : null;
 
   return (
-    <>
     <div className="mb-4 mt-8 flex flex-row justify-center items-center">
       <div className="w-6/12 place-self-center">
         <div>
           <div id="secretEmbed">
-              {result
+            {result ? (
-                ? displayForecast({
+              <DisplayForecast
-                    ...result,
+                forecast={result}
-                    showTimeStamp: true,
+                showTimeStamp={true}
-                    expandFooterToFullWidth: true,
+                expandFooterToFullWidth={true}
-                  })
+              />
-                : null}
+            ) : null}
           </div>
           <br></br>
           <div id="secretObject">
-              {result ? JSON.stringify(result.item, null, 4) : null}
+            {result ? JSON.stringify(result, null, 4) : null}
           </div>
         </div>
       </div>
     </div>
-    </>
   );
-}
+};
+
+export default SecretEmbedPage;

src/web/display/displayForecasts.tsx

@@ -581,7 +581,7 @@ interface SingleProps {
   showIdToggle?: boolean;
 }
 
-export const displayForecast: React.FC<SingleProps> = ({
+export const DisplayForecast: React.FC<SingleProps> = ({
   forecast: {
     id,
     title,
@@ -760,20 +760,19 @@ const DisplayForecasts: React.FC<Props> = ({
   }
   return (
     <>
-      {results.slice(0, numDisplay).map((result) => {
+      {results.slice(0, numDisplay).map((result) => (
         /*let displayWithMetaculusCapture =
           fuseSearchResult.item.platform == "Metaculus"
             ? metaculusEmbed(fuseSearchResult.item)
             : displayForecast({ ...fuseSearchResult.item });
         */
-        const display = displayForecast({
+        <DisplayForecast
-          forecast: result,
+          forecast={result}
-          showTimeStamp: false,
+          showTimeStamp={false}
-          expandFooterToFullWidth: false,
+          expandFooterToFullWidth={false}
-          showIdToggle,
+          showIdToggle={showIdToggle}
-        });
+        />
-        return display;
+      ))}
-      })}
     </>
   );
 };

src/web/display/displayOneForecastForCapture.tsx

@@ -4,18 +4,18 @@ import { CopyToClipboard } from "react-copy-to-clipboard";
 
 import { FrontendForecast } from "../platforms";
 import { uploadToImgur } from "../worker/uploadToImgur";
-import { displayForecast } from "./displayForecasts";
+import { DisplayForecast } from "./displayForecasts";
 
 function displayOneForecastInner(result: FrontendForecast, containerRef) {
   return (
     <div ref={containerRef}>
-      {result
+      {result ? (
-        ? displayForecast({
+        <DisplayForecast
-            forecast: result,
+          forecast={result}
-            showTimeStamp: true,
+          showTimeStamp={true}
-            expandFooterToFullWidth: true,
+          expandFooterToFullWidth={true}
-          })
+        />
-        : null}
+      ) : null}
     </div>
   );
 }