From 066b79fe1297a07a15b488208be20c36be40abe5 Mon Sep 17 00:00:00 2001 From: Vyacheslav Matyukhin Date: Sat, 7 May 2022 22:48:56 +0400 Subject: [PATCH] refactor: move stuff around, simplify / code --- src/pages/about.tsx | 4 +- src/pages/dashboards/embed/[id].tsx | 4 +- src/pages/dashboards/index.tsx | 4 +- src/pages/dashboards/view/[id].tsx | 10 +- src/pages/index.tsx | 82 ++++++++++++++-- src/pages/secretEmbed.tsx | 4 +- src/pages/tools.tsx | 4 +- src/web/{display => common}/Button.tsx | 0 src/web/{display => common}/Card.tsx | 0 src/web/common/CopyParagraph.tsx | 2 +- src/web/{display => common}/InfoBox.tsx | 0 src/web/{display => common}/Layout.tsx | 0 src/web/{display => common}/LineHeader.tsx | 0 .../MultiSelectPlatform.tsx | 16 ++-- src/web/display/DashboardCreator.tsx | 4 +- .../questions/components/CaptureQuestion.tsx | 6 +- .../questions/components/IndicatorsTable.tsx | 6 +- .../QuestionCard}/QuestionFooter.tsx | 2 +- .../components/QuestionCard}/index.tsx | 12 +-- .../components/QuestionCardsList.tsx} | 10 +- .../components}/Stars.tsx | 0 src/web/questions/pages/QuestionPage.tsx | 6 +- src/web/search/anySearchPage.tsx | 94 ------------------- .../components}/QueryForm.tsx | 2 - .../SearchScreen.tsx} | 44 +++++---- src/web/status/pages/StatusPage.tsx | 2 +- 26 files changed, 151 insertions(+), 167 deletions(-) rename src/web/{display => common}/Button.tsx (100%) rename src/web/{display => common}/Card.tsx (100%) rename src/web/{display => common}/InfoBox.tsx (100%) rename src/web/{display => common}/Layout.tsx (100%) rename src/web/{display => common}/LineHeader.tsx (100%) rename src/web/{display => common}/MultiSelectPlatform.tsx (93%) rename src/web/{display/DisplayQuestion => questions/components/QuestionCard}/QuestionFooter.tsx (98%) rename src/web/{display/DisplayQuestion => questions/components/QuestionCard}/index.tsx (94%) rename src/web/{display/DisplayQuestions.tsx => questions/components/QuestionCardsList.tsx} (69%) rename src/web/{display => questions/components}/Stars.tsx (100%) delete mode 100644 src/web/search/anySearchPage.tsx rename src/web/{display => search/components}/QueryForm.tsx (96%) rename src/web/search/{CommonDisplay.tsx => components/SearchScreen.tsx} (89%) diff --git a/src/pages/about.tsx b/src/pages/about.tsx index b4e02f5..702832c 100644 --- a/src/pages/about.tsx +++ b/src/pages/about.tsx @@ -3,8 +3,8 @@ import React from "react"; import ReactMarkdown from "react-markdown"; import gfm from "remark-gfm"; -import { Card } from "../web/display/Card"; -import { Layout } from "../web/display/Layout"; +import { Card } from "../web/common/Card"; +import { Layout } from "../web/common/Layout"; const readmeMarkdownText = `# About diff --git a/src/pages/dashboards/embed/[id].tsx b/src/pages/dashboards/embed/[id].tsx index 8be104c..09bbe79 100644 --- a/src/pages/dashboards/embed/[id].tsx +++ b/src/pages/dashboards/embed/[id].tsx @@ -4,7 +4,7 @@ import Error from "next/error"; import { DashboardByIdDocument, DashboardFragment } from "../../../web/dashboards/queries.generated"; -import { DisplayQuestions } from "../../../web/display/DisplayQuestions"; +import { QuestionCardsList } from "../../../web/questions/components/QuestionCardsList"; import { ssrUrql } from "../../../web/urql"; interface Props { @@ -52,7 +52,7 @@ const EmbedDashboardPage: NextPage = ({ dashboard, numCols }) => { numCols || 3 } gap-4 mb-6`} > - { const router = useRouter(); diff --git a/src/pages/dashboards/view/[id].tsx b/src/pages/dashboards/view/[id].tsx index fa41944..e994984 100644 --- a/src/pages/dashboards/view/[id].tsx +++ b/src/pages/dashboards/view/[id].tsx @@ -2,13 +2,13 @@ import { GetServerSideProps, NextPage } from "next"; import Error from "next/error"; import Link from "next/link"; +import { InfoBox } from "../../../web/common/InfoBox"; +import { Layout } from "../../../web/common/Layout"; +import { LineHeader } from "../../../web/common/LineHeader"; import { DashboardByIdDocument, DashboardFragment } from "../../../web/dashboards/queries.generated"; -import { DisplayQuestions } from "../../../web/display/DisplayQuestions"; -import { InfoBox } from "../../../web/display/InfoBox"; -import { Layout } from "../../../web/display/Layout"; -import { LineHeader } from "../../../web/display/LineHeader"; +import { QuestionCardsList } from "../../../web/questions/components/QuestionCardsList"; import { ssrUrql } from "../../../web/urql"; interface Props { @@ -84,7 +84,7 @@ const ViewDashboardPage: NextPage = ({ dashboard }) => { <>
- = async ( + context +) => { + const [ssrCache, client] = ssrUrql(); + const urlQuery = context.query; + + const platformsConfig = getPlatformsConfig({ withGuesstimate: true }); + + const defaultQueryParameters: QueryParameters = { + query: "", + starsThreshold: 2, + forecastsThreshold: 0, + forecastingPlatforms: platforms.map((platform) => platform.name), + }; + + const initialQueryParameters: QueryParameters = { + ...defaultQueryParameters, + }; + if (urlQuery.query) { + initialQueryParameters.query = String(urlQuery.query); + } + if (urlQuery.starsThreshold) { + initialQueryParameters.starsThreshold = Number(urlQuery.starsThreshold); + } + if (urlQuery.forecastsThreshold !== undefined) { + initialQueryParameters.forecastsThreshold = Number( + urlQuery.forecastsThreshold + ); + } + if (urlQuery.forecastingPlatforms !== undefined) { + initialQueryParameters.forecastingPlatforms = String( + urlQuery.forecastingPlatforms + ).split("|"); + } + + const defaultNumDisplay = 21; + const initialNumDisplay = Number(urlQuery.numDisplay) || defaultNumDisplay; + + const defaultResults = (await client.query(FrontpageDocument).toPromise()) + .data.result; + + if ( + !!initialQueryParameters && + initialQueryParameters.query != "" && + initialQueryParameters.query != undefined + ) { + // must match the query from CommonDisplay + await client + .query(SearchDocument, { + input: { + ...initialQueryParameters, + limit: initialNumDisplay, + }, + }) + .toPromise(); + } + + return { + props: { + urqlState: ssrCache.extractData(), + initialQueryParameters, + defaultQueryParameters, + initialNumDisplay, + defaultNumDisplay, + defaultResults, + platformsConfig, + }, + }; +}; const IndexPage: NextPage = (props) => { return ( - + ); }; diff --git a/src/pages/secretEmbed.tsx b/src/pages/secretEmbed.tsx index 1c3cba5..fd7f222 100644 --- a/src/pages/secretEmbed.tsx +++ b/src/pages/secretEmbed.tsx @@ -4,8 +4,8 @@ import { GetServerSideProps, NextPage } from "next"; import React from "react"; import { platforms } from "../backend/platforms"; -import { DisplayQuestion } from "../web/display/DisplayQuestion"; import { QuestionFragment } from "../web/fragments.generated"; +import { QuestionCard } from "../web/questions/components/QuestionCard"; import { SearchDocument } from "../web/search/queries.generated"; import { ssrUrql } from "../web/urql"; @@ -58,7 +58,7 @@ const SecretEmbedPage: NextPage = ({ results }) => {
{result ? ( - = { control: (styles) => ({ ...styles, backgroundColor: "white" }), option: (styles, { data, isDisabled, isFocused, isSelected }) => { const color = chroma(data.color); @@ -70,12 +76,6 @@ export const MultiSelectPlatform: React.FC = ({ value, platformsConfig, }) => { - type Option = { - value: string; - label: string; - color: string; - }; - const options: Option[] = platformsConfig.map((platform) => ({ value: platform.name, label: platform.label, diff --git a/src/web/display/DashboardCreator.tsx b/src/web/display/DashboardCreator.tsx index 133726c..4e40e15 100644 --- a/src/web/display/DashboardCreator.tsx +++ b/src/web/display/DashboardCreator.tsx @@ -1,7 +1,7 @@ import React, { EventHandler, SyntheticEvent, useState } from "react"; -import { Button } from "./Button"; -import { InfoBox } from "./InfoBox"; +import { Button } from "../common/Button"; +import { InfoBox } from "../common/InfoBox"; const exampleInput = `{ "title": "Random example", diff --git a/src/web/questions/components/CaptureQuestion.tsx b/src/web/questions/components/CaptureQuestion.tsx index 6de9c4f..c33cfe6 100644 --- a/src/web/questions/components/CaptureQuestion.tsx +++ b/src/web/questions/components/CaptureQuestion.tsx @@ -1,11 +1,11 @@ import domtoimage from "dom-to-image"; // https://github.com/tsayen/dom-to-image import { useEffect, useRef, useState } from "react"; +import { Button } from "../../common/Button"; import { CopyParagraph } from "../../common/CopyParagraph"; -import { Button } from "../../display/Button"; -import { DisplayQuestion } from "../../display/DisplayQuestion"; import { QuestionFragment } from "../../fragments.generated"; import { uploadToImgur } from "../../worker/uploadToImgur"; +import { QuestionCard } from "./QuestionCard"; const domToImageWrapper = async (node: HTMLDivElement) => { const scale = 3; // Increase for better quality @@ -121,7 +121,7 @@ export const CaptureQuestion: React.FC = ({ question }) => { return (
- { @@ -107,7 +107,7 @@ interface Props { showExpandButton?: boolean; } -export const DisplayQuestion: React.FC = ({ +export const QuestionCard: React.FC = ({ question, showTimeStamp, expandFooterToFullWidth, diff --git a/src/web/display/DisplayQuestions.tsx b/src/web/questions/components/QuestionCardsList.tsx similarity index 69% rename from src/web/display/DisplayQuestions.tsx rename to src/web/questions/components/QuestionCardsList.tsx index 289f58a..e3770d3 100644 --- a/src/web/display/DisplayQuestions.tsx +++ b/src/web/questions/components/QuestionCardsList.tsx @@ -1,7 +1,7 @@ import React from "react"; -import { QuestionFragment } from "../fragments.generated"; -import { DisplayQuestion } from "./DisplayQuestion"; +import { QuestionFragment } from "../../fragments.generated"; +import { QuestionCard } from "./QuestionCard"; interface Props { results: QuestionFragment[]; @@ -9,18 +9,18 @@ interface Props { showIdToggle: boolean; } -export const DisplayQuestions: React.FC = ({ +export const QuestionCardsList: React.FC = ({ results, numDisplay, showIdToggle, }) => { if (!results) { - return <>; + return null; } return ( <> {results.slice(0, numDisplay).map((result) => ( - = async ( - context -) => { - const [ssrCache, client] = ssrUrql(); - const urlQuery = context.query; - - const platformsConfig = getPlatformsConfig({ withGuesstimate: true }); - - const defaultQueryParameters: QueryParameters = { - query: "", - starsThreshold: 2, - forecastsThreshold: 0, - forecastingPlatforms: platforms.map((platform) => platform.name), - }; - - const initialQueryParameters: QueryParameters = { - ...defaultQueryParameters, - }; - if (urlQuery.query) { - initialQueryParameters.query = String(urlQuery.query); - } - if (urlQuery.starsThreshold) { - initialQueryParameters.starsThreshold = Number(urlQuery.starsThreshold); - } - if (urlQuery.forecastsThreshold !== undefined) { - initialQueryParameters.forecastsThreshold = Number( - urlQuery.forecastsThreshold - ); - } - if (urlQuery.forecastingPlatforms !== undefined) { - initialQueryParameters.forecastingPlatforms = String( - urlQuery.forecastingPlatforms - ).split("|"); - } - - const defaultNumDisplay = 21; - const initialNumDisplay = Number(urlQuery.numDisplay) || defaultNumDisplay; - - const defaultResults = (await client.query(FrontpageDocument).toPromise()) - .data.result; - - if ( - !!initialQueryParameters && - initialQueryParameters.query != "" && - initialQueryParameters.query != undefined - ) { - // must match the query from CommonDisplay - await client - .query(SearchDocument, { - input: { - ...initialQueryParameters, - limit: initialNumDisplay, - }, - }) - .toPromise(); - } - - return { - props: { - urqlState: ssrCache.extractData(), - initialQueryParameters, - defaultQueryParameters, - initialNumDisplay, - defaultNumDisplay, - defaultResults, - platformsConfig, - }, - }; -}; diff --git a/src/web/display/QueryForm.tsx b/src/web/search/components/QueryForm.tsx similarity index 96% rename from src/web/display/QueryForm.tsx rename to src/web/search/components/QueryForm.tsx index e5fb700..698c6e3 100644 --- a/src/web/display/QueryForm.tsx +++ b/src/web/search/components/QueryForm.tsx @@ -1,5 +1,3 @@ -import React from "react"; - interface Props { value: string; onChange: (v: string) => void; diff --git a/src/web/search/CommonDisplay.tsx b/src/web/search/components/SearchScreen.tsx similarity index 89% rename from src/web/search/CommonDisplay.tsx rename to src/web/search/components/SearchScreen.tsx index d1e968c..63c54cd 100644 --- a/src/web/search/CommonDisplay.tsx +++ b/src/web/search/components/SearchScreen.tsx @@ -2,20 +2,34 @@ import { useRouter } from "next/router"; import React, { Fragment, useMemo, useState } from "react"; import { useQuery } from "urql"; -import { ButtonsForStars } from "../display/ButtonsForStars"; -import { DisplayQuestions } from "../display/DisplayQuestions"; -import { MultiSelectPlatform } from "../display/MultiSelectPlatform"; -import { QueryForm } from "../display/QueryForm"; -import { SliderElement } from "../display/SliderElement"; -import { QuestionFragment } from "../fragments.generated"; -import { useIsFirstRender, useNoInitialEffect } from "../hooks"; -import { Props as AnySearchPageProps, QueryParameters } from "./anySearchPage"; -import { SearchDocument } from "./queries.generated"; +import { PlatformConfig } from "../../../backend/platforms"; +import { MultiSelectPlatform } from "../../common/MultiSelectPlatform"; +import { ButtonsForStars } from "../../display/ButtonsForStars"; +import { SliderElement } from "../../display/SliderElement"; +import { QuestionFragment } from "../../fragments.generated"; +import { useIsFirstRender, useNoInitialEffect } from "../../hooks"; +import { QuestionCardsList } from "../../questions/components/QuestionCardsList"; +import { SearchDocument } from "../queries.generated"; +import { QueryForm } from "./QueryForm"; -interface Props extends AnySearchPageProps {} +export interface QueryParameters { + query: string; + starsThreshold: number; + forecastsThreshold: number; + forecastingPlatforms: string[]; // platform names +} + +export interface Props { + defaultResults: QuestionFragment[]; + initialQueryParameters: QueryParameters; + defaultQueryParameters: QueryParameters; + initialNumDisplay: number; + defaultNumDisplay: number; + platformsConfig: PlatformConfig[]; +} /* Body */ -export const CommonDisplay: React.FC = ({ +export const SearchScreen: React.FC = ({ defaultResults, initialQueryParameters, defaultQueryParameters, @@ -37,8 +51,6 @@ export const CommonDisplay: React.FC = ({ const [forceSearch, setForceSearch] = useState(0); const [advancedOptions, showAdvancedOptions] = useState(false); - const [whichResultToDisplayAndCapture, setWhichResultToDisplayAndCapture] = - useState(0); const [showIdToggle, setShowIdToggle] = useState(false); const [typing, setTyping] = useState(false); @@ -104,7 +116,7 @@ export const CommonDisplay: React.FC = ({ : numDisplay; return (
- = ({ }; /* Change selected platforms */ - const onChangeSelectedPlatforms = (value) => { + const onChangeSelectedPlatforms = (value: string[]) => { setQueryParameters({ ...queryParameters, forecastingPlatforms: value, @@ -305,8 +317,6 @@ export const CommonDisplay: React.FC = ({

) : null} - -
); }; diff --git a/src/web/status/pages/StatusPage.tsx b/src/web/status/pages/StatusPage.tsx index f7ba079..4e2922c 100644 --- a/src/web/status/pages/StatusPage.tsx +++ b/src/web/status/pages/StatusPage.tsx @@ -1,7 +1,7 @@ import { NextPage } from "next"; +import { Layout } from "../../common/Layout"; import { Query } from "../../common/Query"; -import { Layout } from "../../display/Layout"; import { PlatformsStatusDocument } from "../queries.generated"; const StatusPage: NextPage = () => {