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

This commit is contained in:
Vyacheslav Matyukhin 2022-04-12 22:21:32 +03:00
parent 62e3a37c65
commit 6b0a9a4c41
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
6 changed files with 101 additions and 173 deletions

View File

@ -1,3 +1,4 @@
import { NextURL } from "next/dist/server/web/next-url";
import { NextRequest, NextResponse } from "next/server"; import { NextRequest, NextResponse } from "next/server";
export async function middleware(req: NextRequest) { export async function middleware(req: NextRequest) {
@ -11,6 +12,18 @@ export async function middleware(req: NextRequest) {
new URL(`/dashboards/view/${dashboardId}`, req.url) 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(); return NextResponse.next();

View File

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

View File

@ -1,63 +1,12 @@
import axios from "axios"; import axios from "axios";
import { GetServerSideProps, NextPage } from "next"; import { NextPage } from "next";
import { useRouter } from "next/router"; // https://nextjs.org/docs/api-reference/next/router import { useRouter } from "next/router";
import { DashboardItem } from "../../backend/dashboards";
import { getPlatformsConfig, PlatformConfig } from "../../backend/platforms";
import { DashboardCreator } from "../../web/display/DashboardCreator"; import { DashboardCreator } from "../../web/display/DashboardCreator";
import { Layout } from "../../web/display/Layout"; import { Layout } from "../../web/display/Layout";
import { LineHeader } from "../../web/display/LineHeader"; import { LineHeader } from "../../web/display/LineHeader";
import { addLabelsToForecasts, FrontendForecast } from "../../web/platforms";
import { getDashboardForecastsByDashboardId } from "../../web/worker/getDashboardForecasts";
interface Props { const DashboardsPage: NextPage = () => {
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 router = useRouter(); const router = useRouter();
const handleSubmit = async (data) => { const handleSubmit = async (data) => {

View File

@ -3,17 +3,15 @@ import Error from "next/error";
import Link from "next/link"; import Link from "next/link";
import { DashboardItem } from "../../../backend/dashboards"; import { DashboardItem } from "../../../backend/dashboards";
import { getPlatformsConfig } from "../../../backend/platforms";
import { DisplayForecasts } from "../../../web/display/DisplayForecasts"; import { DisplayForecasts } from "../../../web/display/DisplayForecasts";
import { InfoBox } from "../../../web/display/InfoBox"; import { InfoBox } from "../../../web/display/InfoBox";
import { Layout } from "../../../web/display/Layout"; import { Layout } from "../../../web/display/Layout";
import { LineHeader } from "../../../web/display/LineHeader"; import { LineHeader } from "../../../web/display/LineHeader";
import { addLabelsToForecasts, FrontendForecast } from "../../../web/platforms"; import { FrontendForecast } from "../../../web/platforms";
import { getDashboardForecastsByDashboardId } from "../../../web/worker/getDashboardForecasts"; import { getDashboardForecastsByDashboardId } from "../../../web/worker/getDashboardForecasts";
interface Props { interface Props {
dashboardForecasts: FrontendForecast[]; dashboardForecasts: FrontendForecast[];
dashboardId: string;
dashboardItem: DashboardItem; dashboardItem: DashboardItem;
} }
@ -22,16 +20,10 @@ export const getServerSideProps: GetServerSideProps<Props> = async (
) => { ) => {
const dashboardId = context.query.id as string; const dashboardId = context.query.id as string;
const platformsConfig = getPlatformsConfig({ withGuesstimate: false });
const { dashboardForecasts, dashboardItem } = const { dashboardForecasts, dashboardItem } =
await getDashboardForecastsByDashboardId({ await getDashboardForecastsByDashboardId({
dashboardId, dashboardId,
}); });
const frontendDashboardForecasts = addLabelsToForecasts(
dashboardForecasts,
platformsConfig
);
if (!dashboardItem) { if (!dashboardItem) {
context.res.statusCode = 404; context.res.statusCode = 404;
@ -39,8 +31,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (
return { return {
props: { props: {
dashboardForecasts: frontendDashboardForecasts, dashboardForecasts,
dashboardId,
dashboardItem, dashboardItem,
}, },
}; };
@ -87,7 +78,6 @@ const DashboardMetadata: React.FC<{ dashboardItem: DashboardItem }> = ({
const ViewDashboardPage: NextPage<Props> = ({ const ViewDashboardPage: NextPage<Props> = ({
dashboardForecasts, dashboardForecasts,
dashboardItem, dashboardItem,
dashboardId,
}) => { }) => {
return ( return (
<Layout page="view-dashboard"> <Layout page="view-dashboard">

View File

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

View File

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