From 39e46b1fe6359e6e89dc898bce4436f4491e6063 Mon Sep 17 00:00:00 2001 From: Vyacheslav Matyukhin Date: Wed, 6 Apr 2022 00:36:38 +0300 Subject: [PATCH] fix: more dashboards fixing & ts changes --- src/backend/platforms/index.ts | 26 +++++++++++ src/pages/dashboards.tsx | 59 ++++++++++++++---------- src/pages/secretDashboard.tsx | 11 +++-- src/web/display/multiSelectPlatforms.tsx | 2 +- src/web/platforms.ts | 14 ++---- src/web/search/anySearchPage.tsx | 20 +++----- src/web/worker/getDashboardForecasts.ts | 2 +- 7 files changed, 81 insertions(+), 53 deletions(-) diff --git a/src/backend/platforms/index.ts b/src/backend/platforms/index.ts index 38068aa..e247ec4 100644 --- a/src/backend/platforms/index.ts +++ b/src/backend/platforms/index.ts @@ -124,3 +124,29 @@ export const processPlatform = async (platform: Platform) => { console.log(`Platform ${platform.name} didn't return any results`); } }; + +export interface PlatformConfig { + name: string; + label: string; + color: string; +} + +// get frontend-safe version of platforms data +export const getPlatformsConfig = (options: { + withGuesstimate: boolean; +}): PlatformConfig[] => { + const platformsConfig = platforms.map((platform) => ({ + name: platform.name, + label: platform.label, + color: platform.color, + })); + if (options.withGuesstimate) { + platformsConfig.push({ + name: "guesstimate", + label: "Guesstimate", + color: "223900", + }); + } + + return platformsConfig; +}; diff --git a/src/pages/dashboards.tsx b/src/pages/dashboards.tsx index b71495b..7fe75fb 100644 --- a/src/pages/dashboards.tsx +++ b/src/pages/dashboards.tsx @@ -5,6 +5,7 @@ import { useRouter } from "next/router"; // https://nextjs.org/docs/api-referenc import { useState } from "react"; import { DashboardItem } from "../backend/dashboards"; +import { getPlatformsConfig, PlatformConfig } from "../backend/platforms"; import { DashboardCreator } from "../web/display/dashboardCreator"; import displayForecasts from "../web/display/displayForecasts"; import Layout from "../web/display/layout"; @@ -15,39 +16,45 @@ interface Props { initialDashboardForecasts: FrontendForecast[]; initialDashboardId?: string; initialDashboardItem?: DashboardItem; + platformsConfig: PlatformConfig[]; } export const getServerSideProps: GetServerSideProps = async ( context ) => { - console.log("getServerSideProps: "); - let urlQuery = context.query; + const dashboardIdQ = context.query.dashboardId; + const dashboardId: string | undefined = + typeof dashboardIdQ === "object" ? dashboardIdQ[0] : dashboardIdQ; - console.log(urlQuery); - let dashboardId = urlQuery.dashboardId; - let props; + const platformsConfig = getPlatformsConfig({ withGuesstimate: false }); - if (!!dashboardId) { - let { dashboardForecasts, dashboardItem } = - await getDashboardForecastsByDashboardId({ - dashboardId, - }); - dashboardForecasts = addLabelsToForecasts(dashboardForecasts); - - props = { - initialDashboardForecasts: dashboardForecasts, - initialDashboardId: urlQuery.dashboardId, - initialDashboardItem: dashboardItem, - }; - } else { - props = { - initialDashboardForecasts: [], - initialDashboardId: urlQuery.dashboardId || undefined, - initialDashboardItem: undefined, + if (!dashboardId) { + return { + props: { + platformsConfig, + initialDashboardForecasts: [], + initialDashboardId: undefined, + initialDashboardItem: undefined, + }, }; } + + const { dashboardForecasts, dashboardItem } = + await getDashboardForecastsByDashboardId({ + dashboardId, + }); + const frontendDashboardForecasts = addLabelsToForecasts( + dashboardForecasts, + platformsConfig + ); + return { - props, + props: { + initialDashboardForecasts: frontendDashboardForecasts, + initialDashboardId: dashboardId, + initialDashboardItem: dashboardItem, + platformsConfig, + }, }; }; @@ -55,6 +62,7 @@ export const getServerSideProps: GetServerSideProps = async ( const DashboardsPage: NextPage = ({ initialDashboardForecasts, initialDashboardItem, + platformsConfig, }) => { const router = useRouter(); const [dashboardForecasts, setDashboardForecasts] = useState( @@ -92,8 +100,9 @@ const DashboardsPage: NextPage = ({ await getDashboardForecastsByDashboardId({ dashboardId, }); - console.log("response2", dashboardForecasts); - setDashboardForecasts(dashboardForecasts); + setDashboardForecasts( + addLabelsToForecasts(dashboardForecasts, platformsConfig) + ); setDashboardItem(dashboardItem); } }; diff --git a/src/pages/secretDashboard.tsx b/src/pages/secretDashboard.tsx index 4092237..21e47f4 100644 --- a/src/pages/secretDashboard.tsx +++ b/src/pages/secretDashboard.tsx @@ -4,6 +4,7 @@ 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"; @@ -12,10 +13,9 @@ import { getDashboardForecastsByDashboardId } from "../web/worker/getDashboardFo export async function getServerSideProps(context) { console.log("getServerSideProps: "); - let urlQuery = context.query; // this is an object, not a string which I have to parse!! - // so for instance if the url is metaforecasts.org/dashboards?a=b&c=d - // this returns ({a: "b", c: "d"}}) + let urlQuery = context.query; console.log(urlQuery); + let dashboardId = urlQuery.dashboardId; let numCols = urlQuery.numCols; let props; @@ -25,7 +25,10 @@ export async function getServerSideProps(context) { await getDashboardForecastsByDashboardId({ dashboardId, }); - dashboardForecasts = addLabelsToForecasts(dashboardForecasts); + dashboardForecasts = addLabelsToForecasts( + dashboardForecasts, + getPlatformsConfig({ withGuesstimate: false }) + ); props = { initialDashboardForecasts: dashboardForecasts, initialDashboardId: urlQuery.dashboardId, diff --git a/src/web/display/multiSelectPlatforms.tsx b/src/web/display/multiSelectPlatforms.tsx index 21feb0d..346ac2d 100644 --- a/src/web/display/multiSelectPlatforms.tsx +++ b/src/web/display/multiSelectPlatforms.tsx @@ -2,7 +2,7 @@ import chroma from "chroma-js"; import React from "react"; import Select from "react-select"; -import { PlatformConfig } from "../platforms"; +import { PlatformConfig } from "../../backend/platforms"; const colourStyles = { control: (styles) => ({ ...styles, backgroundColor: "white" }), diff --git a/src/web/platforms.ts b/src/web/platforms.ts index 00a8a1d..ad14113 100644 --- a/src/web/platforms.ts +++ b/src/web/platforms.ts @@ -1,21 +1,17 @@ -import { Forecast, platforms } from "../backend/platforms"; - -export interface PlatformConfig { - name: string; - label: string; - color: string; -} +import { Forecast, PlatformConfig } from "../backend/platforms"; export type FrontendForecast = Forecast & { platformLabel: string; visualization?: any; }; +// ok on client side export const addLabelsToForecasts = ( - forecasts: Forecast[] + forecasts: Forecast[], + platformsConfig: PlatformConfig[] ): FrontendForecast[] => { const platformNameToLabel = Object.fromEntries( - platforms.map((platform) => [platform.name, platform.label]) + platformsConfig.map((platform) => [platform.name, platform.label]) ); return forecasts.map((result) => ({ diff --git a/src/web/search/anySearchPage.tsx b/src/web/search/anySearchPage.tsx index b28223b..f3f5349 100644 --- a/src/web/search/anySearchPage.tsx +++ b/src/web/search/anySearchPage.tsx @@ -1,8 +1,8 @@ import { GetServerSideProps } from "next"; import { getFrontpage } from "../../backend/frontpage"; -import { platforms } from "../../backend/platforms"; -import { addLabelsToForecasts, FrontendForecast, PlatformConfig } from "../platforms"; +import { getPlatformsConfig, PlatformConfig, platforms } from "../../backend/platforms"; +import { addLabelsToForecasts, FrontendForecast } from "../platforms"; import searchAccordingToQueryData from "../worker/searchAccordingToQueryData"; /* Common code for / and /capture */ @@ -29,16 +29,7 @@ export const getServerSideProps: GetServerSideProps = async ( ) => { const urlQuery = context.query; - const platformsConfig = platforms.map((platform) => ({ - name: platform.name, - label: platform.label, - color: platform.color, - })); - platformsConfig.push({ - name: "guesstimate", - label: "Guesstimate", - color: "223900", - }); + const platformsConfig = getPlatformsConfig({ withGuesstimate: true }); const defaultQueryParameters: QueryParameters = { query: "", @@ -74,7 +65,10 @@ export const getServerSideProps: GetServerSideProps = async ( const defaultNumDisplay = 21; const initialNumDisplay = Number(urlQuery.numDisplay) || defaultNumDisplay; - const defaultResults = addLabelsToForecasts(await getFrontpage()); + const defaultResults = addLabelsToForecasts( + await getFrontpage(), + platformsConfig + ); const initialResults = !!initialQueryParameters && diff --git a/src/web/worker/getDashboardForecasts.ts b/src/web/worker/getDashboardForecasts.ts index a6ca9e8..9fb2b25 100644 --- a/src/web/worker/getDashboardForecasts.ts +++ b/src/web/worker/getDashboardForecasts.ts @@ -7,7 +7,7 @@ export async function getDashboardForecastsByDashboardId({ dashboardId, }): Promise<{ dashboardForecasts: Forecast[]; - dashboardItem: DashboardItem | string; + dashboardItem: DashboardItem; }> { console.log("getDashboardForecastsByDashboardId: "); let dashboardContents: Forecast[] = [];