chore: create @rttw/common and use typescript project references

Note: we currently have to use `tsc --build && react-scripts start`
in the client's package.json as a workaround since create-react-app
doesn't support TypeScript's Project References right now.
See: facebook/create-react-app#6799 (comment)

TODO.md

@@ -1,9 +1,11 @@
 # TODO
 
+-   [ ] handle errors from server
+-   [ ] use service worker for offline access?
 -   [ ] add leaderboards
 -   [ ] add ability to publish new puzzles?
 -   [ ] add testing infrastructure
--   [ ] update resources with new screenshots
+-   [ ] update resources and readme with new refactor
 -   [ ] verify solutions on server
 -   [ ] respect dark mode CSS query
 -   [ ] deploy server somewhere (netlify?)

packages/client/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "rttw-client",
+  "name": "@rttw/client",
   "version": "0.1.0",
   "homepage": "https://acheronfail.github.io/rttw",
   "proxy": "http://localhost:3001/",
@@ -10,28 +10,28 @@
     "@testing-library/user-event": "^7.1.2",
     "codemirror": "^5.51.0",
     "debounce": "^1.2.0",
+    "grommet": "^2.10.0",
     "grommet-controls": "^2.0.4",
     "grommet-icons": "^4.4.0",
-    "grommet": "^2.10.0",
+    "react": "^16.12.0",
     "react-app-polyfill": "^1.0.6",
     "react-dom": "^16.12.0",
     "react-scripts": "3.4.0",
-    "react": "^16.12.0",
     "styled-components": "^5.0.1",
     "typescript": "~3.7.2"
   },
   "devDependencies": {
     "@types/codemirror": "^0.0.85",
     "@types/debounce": "^1.2.0",
-    "@types/jest": "^24.0.0",
+    "@types/jest": "^25.1.2",
     "@types/node": "^12.0.0",
-    "@types/react-dom": "^16.9.0",
     "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
     "cross-env": "^7.0.0",
     "gh-pages": "^2.2.0"
   },
   "scripts": {
-    "start": "cross-env BROWSER=none react-scripts start",
+    "start": "tsc --build && cross-env BROWSER=none react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

packages/client/src/api/index.tsx

@@ -1,18 +1,7 @@
+import { ApiGetPuzzlesResponse, ApiPostSubmitResponse } from '@rttw/common';
 import { Dispatch } from 'react';
 import { TestResult } from '../editor/eval';
 import { ActionPayload, setPuzzlesAction, setUserAction, setSolvedModalStateAction } from '../store/actions';
-import { User, Puzzle } from '../store/reducer';
-
-// TODO: share interfaces with server package
-interface GetPuzzlesResponse {
-  puzzles: Puzzle[];
-  user: User;
-}
-
-// TODO: share interfaces with server package
-interface PostSubmitResponse {
-  result: User;
-}
 
 type ServerResponse<T> = {
   response: Response;
@@ -28,7 +17,8 @@ const handleFetchResponse = async <T extends any>(response: Response): Promise<S
     return { response, data: (await response.text()) as any };
   }
 
-  throw new Error(response.statusText);
+  const responseText = await response.text().catch(e => e.message);
+  throw new Error(`${response.status} ${response.statusText} ${responseText}`);
 };
 
 const get = <T extends any>(url: string): Promise<ServerResponse<T>> => fetch(url).then(handleFetchResponse);
@@ -41,7 +31,7 @@ const post = <T extends any>(url: string, data: Record<string, any>): Promise<Se
   }).then(handleFetchResponse);
 
 export async function getPuzzles(id: string | null, dispatch: Dispatch<ActionPayload>) {
-  return get<GetPuzzlesResponse>(`/api/puzzles/${id || ''}`).then(({ data }) => {
+  return get<ApiGetPuzzlesResponse>(`/api/puzzles/${id || ''}`).then(({ data }) => {
     const { puzzles, user } = data;
     dispatch(setPuzzlesAction(puzzles));
     dispatch(setUserAction(user));
@@ -50,8 +40,8 @@ export async function getPuzzles(id: string | null, dispatch: Dispatch<ActionPay
 
 export async function submitSolution(id: string | null, result: TestResult, dispatch: Dispatch<ActionPayload>) {
   const { name, solution } = result;
-  return post<PostSubmitResponse>('/api/submit', { id, name, solution }).then(({ data }) => {
-    const { result: user } = data;
+  return post<ApiPostSubmitResponse>('/api/submit', { id, name, solution }).then(({ data }) => {
+    const { user } = data;
     dispatch(setUserAction(user));
 
     dispatch(

packages/client/src/editor/eval.tsx

@@ -1,5 +1,5 @@
+import { Puzzle } from '@rttw/common';
 import { Editor } from 'codemirror';
-import { Puzzle } from '../store/reducer';
 import { getUserInput } from './utils';
 
 export interface TestResult {

packages/client/src/editor/utils.tsx

@@ -1,5 +1,5 @@
+import { Puzzle } from '@rttw/common';
 import { Editor, TextMarkerOptions, TextMarker, EditorChange } from 'codemirror';
-import { Puzzle } from '../store/reducer';
 import { TestResult } from './eval';
 
 export const EVAL_WAIT_TIME = 300;

packages/client/src/sidebar/index.tsx

@@ -1,10 +1,10 @@
+import { Puzzle, User } from '@rttw/common';
 import { Collapsible, Box, Layer, Button, RadioButtonGroup, Text, Heading } from 'grommet';
 import { FormClose } from 'grommet-icons';
 import React, { ChangeEvent } from 'react';
 import { Status } from '../status';
 import { useStoreContext } from '../store';
 import { setShowSidebarAction, setSelectedPuzzleAction } from '../store/actions';
-import { Puzzle, User } from '../store/reducer';
 
 export interface PuzzleListProps {
   user: User;

packages/client/src/store/actions.tsx

@@ -1,4 +1,5 @@
-import { User, Puzzle, SolvedModalState } from './reducer';
+import { User, Puzzle } from '@rttw/common';
+import { SolvedModalState } from './reducer';
 
 export const SET_DARK_MODE = 'SET_DARK_MODE';
 export const SET_SHOW_SIDEBAR = 'SET_SHOW_SIDEBAR';

packages/client/src/store/reducer.tsx

@@ -1,3 +1,4 @@
+import { User, Puzzle } from '@rttw/common';
 import {
   ActionPayload,
   SET_DARK_MODE,
@@ -10,17 +11,6 @@ import {
   SET_SOLVED_MODAL_STATE,
 } from './actions';
 
-// TODO: separate package for types (share with server?)
-export interface Puzzle {
-  name: string;
-  source: string;
-}
-export interface User {
-  // TODO: map this to just `id` in the server
-  _id: string | null;
-  solutions: Record<string, string | undefined>;
-}
-
 export interface SolvedModalState {
   show: boolean;
   solutionLength: number;

packages/client/tsconfig.json

@@ -1,13 +1,20 @@
 {
   "extends": "../../tsconfig.json",
+  "include": ["src"],
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "jsx": "react",
     "allowJs": true,
     "module": "esnext",
     "noEmit": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "typeRoots": ["./node_modules/@types", "../../typings"],
+    "composite": true
   },
-  "include": ["src"]
+  "references": [
+    {
+      "path": "../common"
+    }
+  ]
 }

packages/client/yarn.lock

@@ -1101,6 +1101,16 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
+"@jest/types@^25.1.0":
+  version "25.1.0"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@jest/types/-/types-25.1.0.tgz#b26831916f0d7c381e11dbb5e103a72aed1b4395"
+  integrity sha1-smgxkW8NfDgeEdu14QOnKu0bQ5U=
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^15.0.0"
+    chalk "^3.0.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -1303,6 +1313,11 @@
   dependencies:
     "@types/tern" "*"
 
+"@types/color-name@^1.1.1":
+  version "1.1.1"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
+  integrity sha1-HBJhu+qhCoBVu8XYq4S3sq/IRqA=
+
 "@types/debounce@^1.2.0":
   version "1.2.0"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@types/debounce/-/debounce-1.2.0.tgz#9ee99259f41018c640b3929e1bb32c3dcecdb192"
@@ -1352,12 +1367,13 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@^24.0.0":
-  version "24.9.1"
-  resolved "https://packages.atlassian.com/api/npm/npm-remote/@types/jest/-/jest-24.9.1.tgz#02baf9573c78f1b9974a5f36778b366aa77bd534"
-  integrity sha1-Arr5Vzx48bmXSl82d4s2aqd71TQ=
+"@types/jest@^25.1.2":
+  version "25.1.2"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@types/jest/-/jest-25.1.2.tgz#1c4c8770c27906c7d8def5d2033df9dbd39f60da"
+  integrity sha1-HEyHcMJ5BsfY3vXSAz3529OfYNo=
   dependencies:
-    jest-diff "^24.3.0"
+    jest-diff "^25.1.0"
+    pretty-format "^25.1.0"
 
 "@types/json-schema@^7.0.3":
   version "7.0.4"
@@ -1448,6 +1464,13 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@types/yargs@^15.0.0":
+  version "15.0.3"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@types/yargs/-/yargs-15.0.3.tgz#41453a0bc7ab393e995d1f5451455638edbd2baf"
+  integrity sha1-QUU6C8erOT6ZXR9UUUVWOO29K68=
+  dependencies:
+    "@types/yargs-parser" "*"
+
 "@typescript-eslint/eslint-plugin@^2.10.0":
   version "2.19.2"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.19.2.tgz#e279aaae5d5c1f2547b4cff99204e1250bc7a058"
@@ -1796,6 +1819,14 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.2.1"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
+  integrity sha1-kK51xCTQCNJiTFvynq0xd+v881k=
+  dependencies:
+    "@types/color-name" "^1.1.1"
+    color-convert "^2.0.1"
+
 anymatch@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
@@ -2614,6 +2645,14 @@ chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha1-P3PCv1JlkfV0zEksUeJFY0n4ROQ=
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 change-emitter@^0.1.2:
   version "0.1.6"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
@@ -2799,12 +2838,19 @@ color-convert@^1.9.0, color-convert@^1.9.1:
   dependencies:
     color-name "1.1.3"
 
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=
+  dependencies:
+    color-name "~1.1.4"
+
 color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -3519,6 +3565,11 @@ diff-sequences@^24.9.0:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
   integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
 
+diff-sequences@^25.1.0:
+  version "25.1.0"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/diff-sequences/-/diff-sequences-25.1.0.tgz#fd29a46f1c913fd66c22645dc75bffbe43051f32"
+  integrity sha1-/SmkbxyRP9ZsImRdx1v/vkMFHzI=
+
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -5728,7 +5779,7 @@ jest-config@^24.9.0:
     pretty-format "^24.9.0"
     realpath-native "^1.1.0"
 
-jest-diff@^24.0.0, jest-diff@^24.3.0, jest-diff@^24.9.0:
+jest-diff@^24.0.0, jest-diff@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
   integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
@@ -5738,6 +5789,16 @@ jest-diff@^24.0.0, jest-diff@^24.3.0, jest-diff@^24.9.0:
     jest-get-type "^24.9.0"
     pretty-format "^24.9.0"
 
+jest-diff@^25.1.0:
+  version "25.1.0"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/jest-diff/-/jest-diff-25.1.0.tgz#58b827e63edea1bc80c1de952b80cec9ac50e1ad"
+  integrity sha1-WLgn5j7eobyAwd6VK4DOyaxQ4a0=
+  dependencies:
+    chalk "^3.0.0"
+    diff-sequences "^25.1.0"
+    jest-get-type "^25.1.0"
+    pretty-format "^25.1.0"
+
 jest-docblock@^24.3.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.9.0.tgz#7970201802ba560e1c4092cc25cbedf5af5a8ce2"
@@ -5796,6 +5857,11 @@ jest-get-type@^24.9.0:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
   integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==
 
+jest-get-type@^25.1.0:
+  version "25.1.0"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/jest-get-type/-/jest-get-type-25.1.0.tgz#1cfe5fc34f148dc3a8a3b7275f6b9ce9e2e8a876"
+  integrity sha1-HP5fw08UjcOoo7cnX2uc6eLoqHY=
+
 jest-haste-map@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d"
@@ -8270,6 +8336,16 @@ pretty-format@^24.0.0, pretty-format@^24.3.0, pretty-format@^24.9.0:
     ansi-styles "^3.2.0"
     react-is "^16.8.4"
 
+pretty-format@^25.1.0:
+  version "25.1.0"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/pretty-format/-/pretty-format-25.1.0.tgz#ed869bdaec1356fc5ae45de045e2c8ec7b07b0c8"
+  integrity sha1-7Yab2uwTVvxa5F3gReLI7HsHsMg=
+  dependencies:
+    "@jest/types" "^25.1.0"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^16.12.0"
+
 private@^0.1.6:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -8533,7 +8609,7 @@ react-error-overlay@^6.0.6:
   resolved "https://packages.atlassian.com/api/npm/npm-remote/react-error-overlay/-/react-error-overlay-6.0.6.tgz#ac4d9dc4c1b5c536c2c312bf66aa2b09bfa384e2"
   integrity sha1-rE2dxMG1xTbCwxK/ZqorCb+jhOI=
 
-react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
+react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
@@ -9804,7 +9880,7 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^7.0.0:
+supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
   integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==

packages/common/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@rttw/common",
+  "version": "0.1.0",
+  "private": true,
+  "main": "src/index.ts"
+}

packages/common/src/constants.ts

@@ -0,0 +1,11 @@
+import { User } from './types';
+
+// Amount of unsolved puzzles the user can see.
+export const VIEWABLE_PUZZLE_COUNT = 3;
+
+// Default template for creating a new user.
+export const BLANK_USER: User = {
+  _id: null,
+  username: undefined,
+  solutions: {},
+};