Frontend refactorings & dashboard features

docs/coding-style.md

@@ -0,0 +1,29 @@
+# TypeScript
+
+- avoid `any`; get rid of any existing `any` whenever you can so that we can enable `"strict": true` later on in `tsconfig.json`
+- define custom types for common data structures
+  - don't worry about `interface` vs `type`, [both are fine](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces)
+
+## Typescript and React/Next
+
+- use `React.FC<Props>` type for React components, e.g. `const MyComponent: React.FC<Props> = ({ ... }) => { ... };`
+- use `NextPage<Props>` for typing stuff in `src/pages/`
+- use generic versions of `GetServerSideProps<Props>` and `GetStaticProps<Props>`
+
+# React
+
+- create one file per one component (tiny helper components in the same file are fine)
+- name file identically to the component it describes (e.g. `const DisplayForecasts: React.FC<Props> = ...` in `DisplayForecasts.ts`)
+- use named export instead of default export for all React components
+  - it's better for refactoring
+  - and it plays well with `React.FC` typing
+
+# Styles
+
+- use [Tailwind](https://tailwindcss.com/)
+- avoid positioning styles in components, position elements from the outside (e.g. with [space-\*](https://tailwindcss.com/docs/space) or grid/flexbox)
+
+# General notes
+
+- use `const` instead of `let` whenever possible
+- set up [prettier](https://prettier.io/) to format code on save

src/pages/_middleware.ts

@@ -0,0 +1,30 @@
+import { NextURL } from "next/dist/server/web/next-url";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function middleware(req: NextRequest) {
+  const { pathname, searchParams } = req.nextUrl;
+
+  console.log(pathname);
+  if (pathname === "/dashboards") {
+    const dashboardId = searchParams.get("dashboardId");
+    if (dashboardId) {
+      return NextResponse.redirect(
+        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();
+}

src/pages/about.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import ReactMarkdown from "react-markdown";
 import gfm from "remark-gfm";
 
-import Layout from "../web/display/layout";
+import { Layout } from "../web/display/Layout";
 
-let readmeMarkdownText = `# About
+const readmeMarkdownText = `# About
 
 This webpage is a search engine for probabilities. Given a query, it searches for relevant questions in various prediction markets and forecasting platforms. For example, try searching for "China", "North Korea", "Semiconductors", "COVID", "Trump", or "X-risk". In addition to search, we also provide various [tools](http://localhost:3000/tools).
 

src/pages/capture.tsx

@@ -2,7 +2,7 @@ import { NextPage } from "next";
 import React from "react";
 
 import { displayForecastsWrapperForCapture } from "../web/display/displayForecastsWrappers";
-import Layout from "../web/display/layout";
+import { Layout } from "../web/display/Layout";
 import { Props } from "../web/search/anySearchPage";
 import CommonDisplay from "../web/search/CommonDisplay";
 

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