From 6b0a9a4c417124057d2eeeb3bf0f42096511cfd3 Mon Sep 17 00:00:00 2001 From: Vyacheslav Matyukhin Date: Tue, 12 Apr 2022 22:21:32 +0300 Subject: [PATCH] feat: /dashboards/embed/[id] url schema --- src/pages/_middleware.ts | 13 +++ src/pages/dashboards/embed/[id].tsx | 69 ++++++++++++++++ src/pages/dashboards/index.tsx | 57 +------------- src/pages/dashboards/view/[id].tsx | 14 +--- src/pages/secretDashboard.tsx | 100 ------------------------ src/web/worker/getDashboardForecasts.ts | 21 +++-- 6 files changed, 101 insertions(+), 173 deletions(-) create mode 100644 src/pages/dashboards/embed/[id].tsx delete mode 100644 src/pages/secretDashboard.tsx diff --git a/src/pages/_middleware.ts b/src/pages/_middleware.ts index 03cbd34..f9f1509 100644 --- 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(); diff --git a/src/pages/dashboards/embed/[id].tsx b/src/pages/dashboards/embed/[id].tsx new file mode 100644 index 0000000..f4b8dd7 --- /dev/null +++ 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 = 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 = ({ + dashboardForecasts, + dashboardItem, + numCols, +}) => { + if (!dashboardItem) { + return ; + } + + return ( +
+
+
+ +
+
+
+ ); +}; + +export default EmbedDashboardPage; diff --git a/src/pages/dashboards/index.tsx b/src/pages/dashboards/index.tsx index b0a2743..f1ba14a 100644 --- 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 = 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 = () => { +const DashboardsPage: NextPage = () => { const router = useRouter(); const handleSubmit = async (data) => { diff --git a/src/pages/dashboards/view/[id].tsx b/src/pages/dashboards/view/[id].tsx index 128f9f5..8c60b72 100644 --- 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 = 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 = async ( return { props: { - dashboardForecasts: frontendDashboardForecasts, - dashboardId, + dashboardForecasts, dashboardItem, }, }; @@ -87,7 +78,6 @@ const DashboardMetadata: React.FC<{ dashboardItem: DashboardItem }> = ({ const ViewDashboardPage: NextPage = ({ dashboardForecasts, dashboardItem, - dashboardId, }) => { return ( diff --git a/src/pages/secretDashboard.tsx b/src/pages/secretDashboard.tsx deleted file mode 100644 index e6ca347..0000000 --- a/src/pages/secretDashboard.tsx +++ /dev/null @@ -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); - - //
- //
- - return ( -
-
-
- -
-
-
- ); -} diff --git a/src/web/worker/getDashboardForecasts.ts b/src/web/worker/getDashboardForecasts.ts index 9fb2b25..2a85232 100644 --- 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, }; }