feat: /dashboards/embed/[id] url schema

2022-04-12 22:21:32 +03:00 · 2022-04-12 22:21:32 +03:00 · 6b0a9a4c41
commit 6b0a9a4c41
parent 62e3a37c65
6 changed files with 101 additions and 173 deletions
--- a/src/pages/_middleware.ts
+++ b/src/pages/_middleware.ts
@ -1,3 +1,4 @@
+import { NextURL } from "next/dist/server/web/next-url";
 import { NextRequest, NextResponse } from "next/server";

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

  return NextResponse.next();
--- a/src/pages/dashboards/embed/[id].tsx
+++ b/src/pages/dashboards/embed/[id].tsx
@ -0,0 +1,69 @@
+import { GetServerSideProps, NextPage } from "next";
+import Error from "next/error";
+
+import { DashboardItem } from "../../../backend/dashboards";
+import { DisplayForecasts } from "../../../web/display/DisplayForecasts";
+import { FrontendForecast } from "../../../web/platforms";
+import { getDashboardForecastsByDashboardId } from "../../../web/worker/getDashboardForecasts";
+
+interface Props {
+  dashboardForecasts: FrontendForecast[];
+  dashboardItem: DashboardItem;
+  numCols?: number;
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async (
+  context
+) => {
+  const dashboardId = context.query.id as string;
+  const numCols = Number(context.query.numCols);
+
+  const { dashboardItem, dashboardForecasts } =
+    await getDashboardForecastsByDashboardId({
+      dashboardId,
+    });
+
+  if (!dashboardItem) {
+    context.res.statusCode = 404;
+  }
+
+  return {
+    props: {
+      dashboardForecasts,
+      dashboardItem,
+      numCols: !numCols ? null : numCols < 5 ? numCols : 4,
+    },
+  };
+};
+
+const EmbedDashboardPage: NextPage<Props> = ({
+  dashboardForecasts,
+  dashboardItem,
+  numCols,
+}) => {
+  if (!dashboardItem) {
+    return <Error statusCode={404} />;
+  }
+
+  return (
+    <div className="mb-4 mt-3 flex flex-row justify-left items-center">
+      <div className="mx-2 place-self-left">
+        <div
+          className={`grid grid-cols-${numCols || 1} sm:grid-cols-${
+            numCols || 1
+          } md:grid-cols-${numCols || 2} lg:grid-cols-${
+            numCols || 3
+          } gap-4 mb-6`}
+        >
+          <DisplayForecasts
+            results={dashboardForecasts}
+            numDisplay={dashboardForecasts.length}
+            showIdToggle={false}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EmbedDashboardPage;
--- a/src/pages/dashboards/index.tsx
+++ b/src/pages/dashboards/index.tsx
@ -1,63 +1,12 @@
 import axios from "axios";
-import { GetServerSideProps, NextPage } from "next";
-import { useRouter } from "next/router"; // https://nextjs.org/docs/api-reference/next/router
+import { NextPage } from "next";
+import { useRouter } from "next/router";

-import { DashboardItem } from "../../backend/dashboards";
-import { getPlatformsConfig, PlatformConfig } from "../../backend/platforms";
 import { DashboardCreator } from "../../web/display/DashboardCreator";
 import { Layout } from "../../web/display/Layout";
 import { LineHeader } from "../../web/display/LineHeader";
-import { addLabelsToForecasts, FrontendForecast } from "../../web/platforms";
-import { getDashboardForecastsByDashboardId } from "../../web/worker/getDashboardForecasts";

-interface Props {
-  initialDashboardForecasts: FrontendForecast[];
-  initialDashboardId: string | null;
-  initialDashboardItem: DashboardItem | null;
-  platformsConfig: PlatformConfig[];
-}
-
-export const getServerSideProps: GetServerSideProps<Props> = async (
-  context
-) => {
-  const dashboardIdQ = context.query.dashboardId;
-  const dashboardId: string | undefined =
-    typeof dashboardIdQ === "object" ? dashboardIdQ[0] : dashboardIdQ;
-
-  const platformsConfig = getPlatformsConfig({ withGuesstimate: false });
-
-  if (!dashboardId) {
-    return {
-      props: {
-        platformsConfig,
-        initialDashboardForecasts: [],
-        initialDashboardId: null,
-        initialDashboardItem: null,
-      },
-    };
-  }
-
-  const { dashboardForecasts, dashboardItem } =
-    await getDashboardForecastsByDashboardId({
-      dashboardId,
-    });
-  const frontendDashboardForecasts = addLabelsToForecasts(
-    dashboardForecasts,
-    platformsConfig
-  );
-
-  return {
-    props: {
-      initialDashboardForecasts: frontendDashboardForecasts,
-      initialDashboardId: dashboardId,
-      initialDashboardItem: dashboardItem,
-      platformsConfig,
-    },
-  };
-};
-
-/* Body */
-const DashboardsPage: NextPage<Props> = () => {
+const DashboardsPage: NextPage = () => {
  const router = useRouter();

  const handleSubmit = async (data) => {
--- a/src/pages/dashboards/view/[id].tsx
+++ b/src/pages/dashboards/view/[id].tsx
@ -3,17 +3,15 @@ import Error from "next/error";
 import Link from "next/link";

 import { DashboardItem } from "../../../backend/dashboards";
-import { getPlatformsConfig } from "../../../backend/platforms";
 import { DisplayForecasts } from "../../../web/display/DisplayForecasts";
 import { InfoBox } from "../../../web/display/InfoBox";
 import { Layout } from "../../../web/display/Layout";
 import { LineHeader } from "../../../web/display/LineHeader";
-import { addLabelsToForecasts, FrontendForecast } from "../../../web/platforms";
+import { FrontendForecast } from "../../../web/platforms";
 import { getDashboardForecastsByDashboardId } from "../../../web/worker/getDashboardForecasts";

 interface Props {
  dashboardForecasts: FrontendForecast[];
-  dashboardId: string;
  dashboardItem: DashboardItem;
 }

@ -22,16 +20,10 @@ export const getServerSideProps: GetServerSideProps<Props> = async (
 ) => {
  const dashboardId = context.query.id as string;

-  const platformsConfig = getPlatformsConfig({ withGuesstimate: false });
-
  const { dashboardForecasts, dashboardItem } =
    await getDashboardForecastsByDashboardId({
      dashboardId,
    });
-  const frontendDashboardForecasts = addLabelsToForecasts(
-    dashboardForecasts,
-    platformsConfig
-  );

  if (!dashboardItem) {
    context.res.statusCode = 404;
@ -39,8 +31,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (

  return {
    props: {
-      dashboardForecasts: frontendDashboardForecasts,
-      dashboardId,
+      dashboardForecasts,
      dashboardItem,
    },
  };
@ -87,7 +78,6 @@ const DashboardMetadata: React.FC<{ dashboardItem: DashboardItem }> = ({
 const ViewDashboardPage: NextPage<Props> = ({
  dashboardForecasts,
  dashboardItem,
-  dashboardId,
 }) => {
  return (
    <Layout page="view-dashboard">
--- a/src/pages/secretDashboard.tsx
+++ b/src/pages/secretDashboard.tsx
@ -1,100 +0,0 @@
-/* Imports */
-
-// React
-import { useRouter } from "next/router"; // https://nextjs.org/docs/api-reference/next/router
-import { useState } from "react";
-
-import { getPlatformsConfig } from "../backend/platforms";
-import { DisplayForecasts } from "../web/display/DisplayForecasts";
-import { addLabelsToForecasts } from "../web/platforms";
-import { getDashboardForecastsByDashboardId } from "../web/worker/getDashboardForecasts";
-
-/* get Props */
-
-export async function getServerSideProps(context) {
-  console.log("getServerSideProps: ");
-  let urlQuery = context.query;
-  console.log(urlQuery);
-
-  let dashboardId = urlQuery.dashboardId;
-  let numCols = urlQuery.numCols;
-  let props;
-  if (!!dashboardId) {
-    console.log(dashboardId);
-    let { dashboardForecasts, dashboardItem } =
-      await getDashboardForecastsByDashboardId({
-        dashboardId,
-      });
-    dashboardForecasts = addLabelsToForecasts(
-      dashboardForecasts,
-      getPlatformsConfig({ withGuesstimate: false })
-    );
-    props = {
-      initialDashboardForecasts: dashboardForecasts,
-      initialDashboardId: urlQuery.dashboardId,
-      initialDashboardItem: dashboardItem,
-      initialNumCols: !numCols ? null : numCols < 5 ? numCols : 4,
-    };
-  } else {
-    console.log();
-    props = {
-      initialDashboardForecasts: [],
-      initialDashboardId: urlQuery.dashboardId || null,
-      initialDashboardItem: null,
-      initialNumCols: !numCols ? null : numCols < 5 ? numCols : 4,
-    };
-  }
-  return {
-    props: props,
-  };
-  /*
-  let dashboardforecasts = await getdashboardforecasts({
-    ids: ["metaculus-6526", "smarkets-20206424"],
-  });
-  let props = {
-    dashboardforecasts: dashboardforecasts,
-  };
-
-  return {
-    props: props,
-  };
-  */
-}
-
-/* Body */
-export default function Home({
-  initialDashboardForecasts,
-  initialDashboardItem,
-  initialNumCols,
-}) {
-  const router = useRouter();
-  const [dashboardForecasts, setDashboardForecasts] = useState(
-    initialDashboardForecasts
-  );
-  const [dashboardItem, setDashboardItem] = useState(initialDashboardItem);
-  const [numCols, setNumCols] = useState(initialNumCols);
-  console.log("initialNumCols", initialNumCols);
-
-  // <div className={`grid ${!!numCols ? `grid-cols-${numCols} md:grid-cols-${numCols} lg:grid-cols-${numCols}`: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"} gap-4 mb-6`}>
-  // <div className={`grid grid-cols-${numCols || 1} md:grid-cols-${numCols || 2} lg:grid-cols-${numCols || 3} gap-4 mb-6`}>
-
-  return (
-    <div className="mb-4 mt-3 flex flex-row justify-left items-center ">
-      <div className="ml-2 mr-2 place-self-left">
-        <div
-          className={`grid grid-cols-${numCols || 1} sm:grid-cols-${
-            numCols || 1
-          } md:grid-cols-${numCols || 2} lg:grid-cols-${
-            numCols || 3
-          } gap-4 mb-6`}
-        >
-          <DisplayForecasts
-            results={dashboardForecasts}
-            numDisplay={dashboardForecasts.length}
-            showIdToggle={false}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/src/web/worker/getDashboardForecasts.ts
+++ b/src/web/worker/getDashboardForecasts.ts
@ -1,19 +1,20 @@
 import axios from "axios";

 import { DashboardItem } from "../../backend/dashboards";
-import { Forecast } from "../../backend/platforms";
+import { Forecast, getPlatformsConfig } from "../../backend/platforms";
+import { addLabelsToForecasts, FrontendForecast } from "../platforms";

 export async function getDashboardForecastsByDashboardId({
  dashboardId,
 }): Promise<{
-  dashboardForecasts: Forecast[];
+  dashboardForecasts: FrontendForecast[];
  dashboardItem: DashboardItem;
 }> {
  console.log("getDashboardForecastsByDashboardId: ");
-  let dashboardContents: Forecast[] = [];
-  let dashboardItem: DashboardItem | any = null;
+  let dashboardForecasts: Forecast[] = [];
+  let dashboardItem: DashboardItem | null = null;
  try {
-    let { data } = await axios({
+    const { data } = await axios({
      url: `${process.env.NEXT_PUBLIC_SITE_URL}/api/dashboard-by-id`,
      method: "post",
      data: {
@ -21,13 +22,19 @@ export async function getDashboardForecastsByDashboardId({
      },
    });
    console.log(data);
-    dashboardContents = data.dashboardContents;
+
+    dashboardForecasts = data.dashboardContents;
    dashboardItem = data.dashboardItem as DashboardItem;
  } catch (error) {
    console.log(error);
  } finally {
+    const labeledDashboardForecasts = addLabelsToForecasts(
+      dashboardForecasts,
+      getPlatformsConfig({ withGuesstimate: false })
+    );
+
    return {
-      dashboardForecasts: dashboardContents,
+      dashboardForecasts: labeledDashboardForecasts,
      dashboardItem,
    };
  }