Frontend refactorings & dashboard features

docs/coding-style.md

@@ -0,0 +1,30 @@
+# 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)
+- if
+- 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/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.tsx

@@ -6,9 +6,9 @@ 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";
+import { DashboardCreator } from "../web/display/DashboardCreator";
+import { DisplayForecasts } from "../web/display/DisplayForecasts";
+import { Layout } from "../web/display/Layout";
 import { addLabelsToForecasts, FrontendForecast } from "../web/platforms";
 import { getDashboardForecastsByDashboardId } from "../web/worker/getDashboardForecasts";
 
@@ -70,12 +70,12 @@ const DashboardsPage: NextPage<Props> = ({
   );
   const [dashboardItem, setDashboardItem] = useState(initialDashboardItem);
 
-  let handleSubmit = async (data) => {
+  const handleSubmit = async (data) => {
     console.log(data);
     // Send to server to create
     // Get back the id
     let response = await axios({
-      url: `/api/create-dashboard-from-ids`,
+      url: "/api/create-dashboard-from-ids",
       method: "POST",
       headers: { "Content-Type": "application/json" },
       data: JSON.stringify(data),
@@ -107,7 +107,8 @@ const DashboardsPage: NextPage<Props> = ({
     }
   };
 
-  let isGraubardEasterEgg = (name) => (name == "Clay Graubard" ? true : false);
+  let isGraubardEasterEgg = (name: string) =>
+    name == "Clay Graubard" ? true : false;
 
   return (
     <Layout page="dashboard">
@@ -162,11 +163,11 @@ const DashboardsPage: NextPage<Props> = ({
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
-        {displayForecasts({
-          results: dashboardForecasts,
-          numDisplay: dashboardForecasts.length,
-          showIdToggle: false,
-        })}
+        <DisplayForecasts
+          results={dashboardForecasts}
+          numDisplay={dashboardForecasts.length}
+          showIdToggle={false}
+        />
       </div>
       {/*  */}
       <h3 className="flex items-center col-start-2 col-end-2 w-full justify-center mt-8 mb-4">

src/pages/index.tsx

@@ -2,7 +2,7 @@ import { NextPage } from "next";
 import React from "react";
 
 import { displayForecastsWrapperForSearch } 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/recursion.tsx

@@ -1,6 +1,7 @@
+import { NextPage } from "next";
 import React, { useEffect } from "react";
 
-function Recursion() {
+const Recursion: NextPage = () => {
   useEffect(() => {
     if (typeof window !== "undefined") {
       window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
@@ -12,6 +13,6 @@ function Recursion() {
       <h2>You have now reached the fourth level of recursion!!</h2>
     </div>
   );
-}
+};
 
 export default Recursion;

src/pages/secretDashboard.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/router"; // https://nextjs.org/docs/api-referenc
 import { useState } from "react";
 
 import { getPlatformsConfig } from "../backend/platforms";
-import displayForecasts from "../web/display/displayForecasts";
+import { DisplayForecasts } from "../web/display/DisplayForecasts";
 import { addLabelsToForecasts } from "../web/platforms";
 import { getDashboardForecastsByDashboardId } from "../web/worker/getDashboardForecasts";
 
@@ -88,11 +88,11 @@ export default function Home({
             numCols || 3
           } gap-4 mb-6`}
         >
-          {displayForecasts({
-            results: dashboardForecasts,
-            numDisplay: dashboardForecasts.length,
-            showIdToggle: false,
-          })}
+          <DisplayForecasts
+            results={dashboardForecasts}
+            numDisplay={dashboardForecasts.length}
+            showIdToggle={false}
+          />
         </div>
       </div>
     </div>

src/pages/secretEmbed.tsx

@@ -4,7 +4,7 @@ import { GetServerSideProps, NextPage } from "next";
 import React from "react";
 
 import { platforms } from "../backend/platforms";
-import { DisplayForecast } from "../web/display/displayForecasts";
+import { DisplayForecast } from "../web/display/DisplayForecast";
 import { FrontendForecast } from "../web/platforms";
 import searchAccordingToQueryData from "../web/worker/searchAccordingToQueryData";
 

src/pages/tools.tsx

@@ -1,102 +1,94 @@
 import Link from "next/link";
 import React from "react";
 
-import Layout from "../web/display/layout";
+import { Card } from "../web/display/Card";
+import { Layout } from "../web/display/Layout";
+
+type AnyTool = {
+  title: string;
+  description: string;
+  img?: string;
+};
+
+type InnerTool = AnyTool & { innerLink: string };
+type ExternalTool = AnyTool & { externalLink: string };
+type UpcomingTool = AnyTool;
+
+type Tool = InnerTool | ExternalTool | UpcomingTool;
 
 /* Display one tool */
-function displayTool({
-  sameWebpage,
-  title,
-  description,
-  link,
-  url,
-  img,
-  i,
-}: any) {
-  switch (sameWebpage) {
-    case true:
-      return (
-        <Link href={link} passHref key={`tool-${i}`}>
-          <div className="hover:bg-gray-100 hover:no-underline cursor-pointer flex flex-col px-4 py-3 bg-white rounded-md shadow place-content-stretch flex-grow no-underline b-6">
-            <div className="flex-grow items-stretch">
-              <div className={`text-gray-800 text-lg mb-2 font-medium `}>
-                {title}
-              </div>
-              <div className={`text-gray-500 mb-3 `}>{description}</div>
-              {}
-              <img src={img} className={`text-gray-500 mb-2`} />
-            </div>
-          </div>
-        </Link>
-      );
-      break;
-    default:
-      return (
-        <a
-          href={url}
-          key={`tool-${i}`}
-          className="hover:bg-gray-100 hover:no-underline cursor-pointer flex flex-col px-4 py-3 bg-white rounded-md shadow place-content-stretch flex-grow no-underline b-6"
-        >
-          <div className="flex-grow items-stretch">
-            <div className={`text-gray-800 text-lg mb-2 font-medium `}>
-              {title}
-            </div>
-            <div className={`text-gray-500 mb-3 `}>{description}</div>
-            {}
-            <img src={img} className={`text-gray-500 mb-2`} />
-          </div>
-        </a>
-      );
-      break;
+const ToolCard: React.FC<Tool> = (tool) => {
+  const inner = (
+    <Card>
+      <div className="grid content-start gap-3">
+        <div className="text-gray-800 text-lg font-medium">{tool.title}</div>
+        <div className="text-gray-500">{tool.description}</div>
+        {tool.img && <img src={tool.img} className="text-gray-500" />}
+      </div>
+    </Card>
+  );
+
+  if ("innerLink" in tool) {
+    return (
+      <Link href={tool.innerLink} passHref>
+        <a className="text‑inherit no-underline">{inner}</a>
+      </Link>
+    );
+  } else if ("externalLink" in tool) {
+    return (
+      <a href={tool.externalLink} className="text‑inherit no-underline">
+        {inner}
+      </a>
+    );
+  } else {
+    return inner;
   }
-}
+};
 
 export default function Tools({ lastUpdated }) {
-  let tools = [
+  let tools: Tool[] = [
     {
       title: "Search",
-      description: "Find forecasting questions on many platforms",
-      link: "/",
-      sameWebpage: true,
+      description: "Find forecasting questions on many platforms.",
+      innerLink: "/",
       img: "https://i.imgur.com/Q94gVqG.png",
     },
     {
       title: "[Beta] Present",
       description: "Present forecasts in dashboards.",
-      sameWebpage: true,
-      link: "/dashboards",
+      innerLink: "/dashboards",
       img: "https://i.imgur.com/x8qkuHQ.png",
     },
     {
       title: "Capture",
       description:
         "Capture forecasts save them to Imgur. Useful for posting them somewhere else as images. Currently rate limited by Imgur, so if you get a .gif of a fox falling flat on his face, that's why.",
-      link: "/capture",
-      sameWebpage: true,
+      innerLink: "/capture",
       img: "https://i.imgur.com/EXkFBzz.png",
     },
     {
       title: "Summon",
       description:
-        "Summon metaforecast on Twitter by mentioning @metaforecast, or on Discord by using Fletcher and !metaforecast, followed by search terms",
-      url: "https://twitter.com/metaforecast",
+        "Summon metaforecast on Twitter by mentioning @metaforecast, or on Discord by using Fletcher and !metaforecast, followed by search terms.",
+      externalLink: "https://twitter.com/metaforecast",
       img: "https://i.imgur.com/BQ4Zzjw.png",
     },
     {
       title: "[Upcoming] Request",
       description:
         "Interact with metaforecast's API and fetch forecasts for your application. Currently possible but documentation is poor, get in touch.",
     },
-
     {
       title: "[Upcoming] Record",
       description: "Save your forecasts or bets.",
     },
   ];
   return (
     <Layout page="tools">
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mb-8">
-        {tools.map((tool, i) => displayTool({ ...tool, i }))}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mb-8 place-content-stretch">
+        {tools.map((tool, i) => (
+          <ToolCard {...tool} key={`tool-${i}`} />
+        ))}
       </div>
     </Layout>
   );

src/web/display/Card.tsx

@@ -0,0 +1,15 @@
+const CardTitle: React.FC = ({ children }) => (
+  <div className="text-gray-800 text-lg font-medium">{children}</div>
+);
+
+type CardType = React.FC & {
+  Title: typeof CardTitle;
+};
+
+export const Card: CardType = ({ children }) => (
+  <div className="h-full px-4 py-3 bg-white hover:bg-gray-100 rounded-md shadow">
+    {children}
+  </div>
+);
+
+Card.Title = CardTitle;