Merge branch 'forecast-html-css' into vercel
This commit is contained in:
commit
f64a5c04c3
|
@ -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();
|
||||||
|
|
69
src/pages/dashboards/embed/[id].tsx
Normal file
69
src/pages/dashboards/embed/[id].tsx
Normal 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;
|
|
@ -1,65 +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 { reqToBasePath } from "../../web/utils";
|
|
||||||
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,
|
|
||||||
basePath: reqToBasePath(context.req), // required on server side to find the API endpoint
|
|
||||||
});
|
|
||||||
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) => {
|
||||||
|
|
|
@ -3,18 +3,16 @@ 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 { reqToBasePath } from "../../../web/utils";
|
import { reqToBasePath } from "../../../web/utils";
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -23,17 +21,11 @@ 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,
|
||||||
basePath: reqToBasePath(context.req), // required on server side to find the API endpoint
|
basePath: reqToBasePath(context.req), // required on server side to find the API endpoint
|
||||||
});
|
});
|
||||||
const frontendDashboardForecasts = addLabelsToForecasts(
|
|
||||||
dashboardForecasts,
|
|
||||||
platformsConfig
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!dashboardItem) {
|
if (!dashboardItem) {
|
||||||
context.res.statusCode = 404;
|
context.res.statusCode = 404;
|
||||||
|
@ -41,8 +33,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (
|
||||||
|
|
||||||
return {
|
return {
|
||||||
props: {
|
props: {
|
||||||
dashboardForecasts: frontendDashboardForecasts,
|
dashboardForecasts,
|
||||||
dashboardId,
|
|
||||||
dashboardItem,
|
dashboardItem,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -89,7 +80,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">
|
||||||
|
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
|
@ -1,7 +1,8 @@
|
||||||
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,
|
||||||
|
@ -10,7 +11,7 @@ export async function getDashboardForecastsByDashboardId({
|
||||||
dashboardId: string;
|
dashboardId: string;
|
||||||
basePath?: string;
|
basePath?: string;
|
||||||
}): Promise<{
|
}): Promise<{
|
||||||
dashboardForecasts: Forecast[];
|
dashboardForecasts: FrontendForecast[];
|
||||||
dashboardItem: DashboardItem;
|
dashboardItem: DashboardItem;
|
||||||
}> {
|
}> {
|
||||||
console.log("getDashboardForecastsByDashboardId: ");
|
console.log("getDashboardForecastsByDashboardId: ");
|
||||||
|
@ -18,8 +19,8 @@ export async function getDashboardForecastsByDashboardId({
|
||||||
throw new Error("`basePath` option is required on server side");
|
throw new Error("`basePath` option is required on server side");
|
||||||
}
|
}
|
||||||
|
|
||||||
let dashboardContents: Forecast[] = [];
|
let dashboardForecasts: Forecast[] = [];
|
||||||
let dashboardItem: DashboardItem | any = null;
|
let dashboardItem: DashboardItem | null = null;
|
||||||
try {
|
try {
|
||||||
let { data } = await axios({
|
let { data } = await axios({
|
||||||
url: `${basePath || ""}/api/dashboard-by-id`,
|
url: `${basePath || ""}/api/dashboard-by-id`,
|
||||||
|
@ -29,13 +30,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,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user