Chap04 -> Styling components with CSS modules

QandA/frontend/package-lock.json

@@ -8,8 +8,6 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
-        "@emotion/react": "^11.8.2",
-        "@emotion/styled": "^11.8.1",
         "@testing-library/jest-dom": "^5.16.2",
         "@testing-library/react": "^12.1.4",
         "@testing-library/user-event": "^13.5.0",
@@ -17,11 +15,8 @@
         "@types/node": "^16.11.26",
         "@types/react": "^17.0.41",
         "@types/react-dom": "^17.0.14",
-        "history": "^5.3.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-hook-form": "^7.29.0",
-        "react-router-dom": "^6.2.2",
         "react-scripts": "5.0.0",
         "typescript": "^4.6.2",
         "web-vitals": "^2.1.4"
@@ -1985,177 +1980,6 @@
         "postcss": "^8.3"
       }
     },
-    "node_modules/@emotion/babel-plugin": {
-      "version": "11.7.2",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
-      "integrity": "sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.12.13",
-        "@babel/plugin-syntax-jsx": "^7.12.13",
-        "@babel/runtime": "^7.13.10",
-        "@emotion/hash": "^0.8.0",
-        "@emotion/memoize": "^0.7.5",
-        "@emotion/serialize": "^1.0.2",
-        "babel-plugin-macros": "^2.6.1",
-        "convert-source-map": "^1.5.0",
-        "escape-string-regexp": "^4.0.0",
-        "find-root": "^1.1.0",
-        "source-map": "^0.5.7",
-        "stylis": "4.0.13"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@emotion/babel-plugin/node_modules/babel-plugin-macros": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
-      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
-      "dependencies": {
-        "@babel/runtime": "^7.7.2",
-        "cosmiconfig": "^6.0.0",
-        "resolve": "^1.12.0"
-      }
-    },
-    "node_modules/@emotion/babel-plugin/node_modules/cosmiconfig": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
-      "dependencies": {
-        "@types/parse-json": "^4.0.0",
-        "import-fresh": "^3.1.0",
-        "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.7.2"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@emotion/cache": {
-      "version": "11.7.1",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
-      "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
-      "dependencies": {
-        "@emotion/memoize": "^0.7.4",
-        "@emotion/sheet": "^1.1.0",
-        "@emotion/utils": "^1.0.0",
-        "@emotion/weak-memoize": "^0.2.5",
-        "stylis": "4.0.13"
-      }
-    },
-    "node_modules/@emotion/hash": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
-    },
-    "node_modules/@emotion/is-prop-valid": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz",
-      "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==",
-      "dependencies": {
-        "@emotion/memoize": "^0.7.4"
-      }
-    },
-    "node_modules/@emotion/memoize": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
-      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
-    },
-    "node_modules/@emotion/react": {
-      "version": "11.8.2",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.8.2.tgz",
-      "integrity": "sha512-+1bcHBaNJv5nkIIgnGKVsie3otS0wF9f1T1hteF3WeVvMNQEtfZ4YyFpnphGoot3ilU/wWMgP2SgIDuHLE/wAA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@emotion/babel-plugin": "^11.7.1",
-        "@emotion/cache": "^11.7.1",
-        "@emotion/serialize": "^1.0.2",
-        "@emotion/utils": "^1.1.0",
-        "@emotion/weak-memoize": "^0.2.5",
-        "hoist-non-react-statics": "^3.3.1"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0",
-        "react": ">=16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "@babel/core": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@emotion/serialize": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
-      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
-      "dependencies": {
-        "@emotion/hash": "^0.8.0",
-        "@emotion/memoize": "^0.7.4",
-        "@emotion/unitless": "^0.7.5",
-        "@emotion/utils": "^1.0.0",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@emotion/sheet": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
-      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
-    },
-    "node_modules/@emotion/styled": {
-      "version": "11.8.1",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.8.1.tgz",
-      "integrity": "sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@emotion/babel-plugin": "^11.7.1",
-        "@emotion/is-prop-valid": "^1.1.2",
-        "@emotion/serialize": "^1.0.2",
-        "@emotion/utils": "^1.1.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0",
-        "@emotion/react": "^11.0.0-rc.0",
-        "react": ">=16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "@babel/core": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@emotion/unitless": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
-    },
-    "node_modules/@emotion/utils": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
-      "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
-    },
-    "node_modules/@emotion/weak-memoize": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
-      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
-    },
     "node_modules/@eslint/eslintrc": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.1.tgz",
@@ -7669,11 +7493,6 @@
         "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
       }
     },
-    "node_modules/find-root": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
-    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -8222,27 +8041,6 @@
         "he": "bin/he"
       }
     },
-    "node_modules/history": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
-      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.7.6"
-      }
-    },
-    "node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "node_modules/hoist-non-react-statics/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -13533,21 +13331,6 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
-    "node_modules/react-hook-form": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.29.0.tgz",
-      "integrity": "sha512-NcJqWRF6el5HMW30fqZRt27s+lorvlCCDbTpAyHoodQeYWXgQCvZJJQLC1kRMKdrJknVH0NIg3At6TUzlZJFOQ==",
-      "engines": {
-        "node": ">=12.22.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/react-hook-form"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17 || ^18"
-      }
-    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -13561,30 +13344,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-router": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz",
-      "integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==",
-      "dependencies": {
-        "history": "^5.2.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8"
-      }
-    },
-    "node_modules/react-router-dom": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz",
-      "integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==",
-      "dependencies": {
-        "history": "^5.2.0",
-        "react-router": "6.2.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
-      }
-    },
     "node_modules/react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@@ -14734,11 +14493,6 @@
         "postcss": "^8.2.15"
       }
     },
-    "node_modules/stylis": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
-      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
-    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -17750,142 +17504,6 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
-    "@emotion/babel-plugin": {
-      "version": "11.7.2",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
-      "integrity": "sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.12.13",
-        "@babel/plugin-syntax-jsx": "^7.12.13",
-        "@babel/runtime": "^7.13.10",
-        "@emotion/hash": "^0.8.0",
-        "@emotion/memoize": "^0.7.5",
-        "@emotion/serialize": "^1.0.2",
-        "babel-plugin-macros": "^2.6.1",
-        "convert-source-map": "^1.5.0",
-        "escape-string-regexp": "^4.0.0",
-        "find-root": "^1.1.0",
-        "source-map": "^0.5.7",
-        "stylis": "4.0.13"
-      },
-      "dependencies": {
-        "babel-plugin-macros": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
-          "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
-          "requires": {
-            "@babel/runtime": "^7.7.2",
-            "cosmiconfig": "^6.0.0",
-            "resolve": "^1.12.0"
-          }
-        },
-        "cosmiconfig": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
-          "requires": {
-            "@types/parse-json": "^4.0.0",
-            "import-fresh": "^3.1.0",
-            "parse-json": "^5.0.0",
-            "path-type": "^4.0.0",
-            "yaml": "^1.7.2"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
-        }
-      }
-    },
-    "@emotion/cache": {
-      "version": "11.7.1",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
-      "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
-      "requires": {
-        "@emotion/memoize": "^0.7.4",
-        "@emotion/sheet": "^1.1.0",
-        "@emotion/utils": "^1.0.0",
-        "@emotion/weak-memoize": "^0.2.5",
-        "stylis": "4.0.13"
-      }
-    },
-    "@emotion/hash": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
-    },
-    "@emotion/is-prop-valid": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz",
-      "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==",
-      "requires": {
-        "@emotion/memoize": "^0.7.4"
-      }
-    },
-    "@emotion/memoize": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
-      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
-    },
-    "@emotion/react": {
-      "version": "11.8.2",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.8.2.tgz",
-      "integrity": "sha512-+1bcHBaNJv5nkIIgnGKVsie3otS0wF9f1T1hteF3WeVvMNQEtfZ4YyFpnphGoot3ilU/wWMgP2SgIDuHLE/wAA==",
-      "requires": {
-        "@babel/runtime": "^7.13.10",
-        "@emotion/babel-plugin": "^11.7.1",
-        "@emotion/cache": "^11.7.1",
-        "@emotion/serialize": "^1.0.2",
-        "@emotion/utils": "^1.1.0",
-        "@emotion/weak-memoize": "^0.2.5",
-        "hoist-non-react-statics": "^3.3.1"
-      }
-    },
-    "@emotion/serialize": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
-      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
-      "requires": {
-        "@emotion/hash": "^0.8.0",
-        "@emotion/memoize": "^0.7.4",
-        "@emotion/unitless": "^0.7.5",
-        "@emotion/utils": "^1.0.0",
-        "csstype": "^3.0.2"
-      }
-    },
-    "@emotion/sheet": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
-      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
-    },
-    "@emotion/styled": {
-      "version": "11.8.1",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.8.1.tgz",
-      "integrity": "sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==",
-      "requires": {
-        "@babel/runtime": "^7.13.10",
-        "@emotion/babel-plugin": "^11.7.1",
-        "@emotion/is-prop-valid": "^1.1.2",
-        "@emotion/serialize": "^1.0.2",
-        "@emotion/utils": "^1.1.0"
-      }
-    },
-    "@emotion/unitless": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
-    },
-    "@emotion/utils": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
-      "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
-    },
-    "@emotion/weak-memoize": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
-      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
-    },
     "@eslint/eslintrc": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.1.tgz",
@@ -21944,11 +21562,6 @@
         "pkg-dir": "^4.1.0"
       }
     },
-    "find-root": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
-    },
     "find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -22316,29 +21929,6 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
-    "history": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
-      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
-      "requires": {
-        "@babel/runtime": "^7.7.6"
-      }
-    },
-    "hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "requires": {
-        "react-is": "^16.7.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "16.13.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-        }
-      }
-    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -26018,12 +25608,6 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
-    "react-hook-form": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.29.0.tgz",
-      "integrity": "sha512-NcJqWRF6el5HMW30fqZRt27s+lorvlCCDbTpAyHoodQeYWXgQCvZJJQLC1kRMKdrJknVH0NIg3At6TUzlZJFOQ==",
-      "requires": {}
-    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -26034,23 +25618,6 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
-    "react-router": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz",
-      "integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==",
-      "requires": {
-        "history": "^5.2.0"
-      }
-    },
-    "react-router-dom": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz",
-      "integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==",
-      "requires": {
-        "history": "^5.2.0",
-        "react-router": "6.2.2"
-      }
-    },
     "react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@@ -26901,11 +26468,6 @@
         "postcss-selector-parser": "^6.0.4"
       }
     },
-    "stylis": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
-      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
-    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",

QandA/frontend/package.json

@@ -3,8 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.8.2",
-    "@emotion/styled": "^11.8.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
@@ -12,11 +10,8 @@
     "@types/node": "^16.11.26",
     "@types/react": "^17.0.41",
     "@types/react-dom": "^17.0.14",
-    "history": "^5.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hook-form": "^7.29.0",
-    "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "typescript": "^4.6.2",
     "web-vitals": "^2.1.4"

QandA/frontend/src/Answer.tsx

@@ -1,38 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-
-import React from 'react';
-import { AnswerData } from './QuestionsData';
-import { gray3 } from './Styles';
-
-interface Props {
-  data: AnswerData;
-}
-
-export const Answer = ({ data }: Props) => (
-  <div
-    css={css`
-      padding: 10px 0px;
-    `}
-  >
-    <div
-      css={css`
-        padding: 10px 0px;
-        font-size: 13px;
-      `}
-    >
-      {data.content}
-    </div>
-    <div
-      css={css`
-        font-size: 12px;
-        font-style: italic;
-        color: ${gray3};
-      `}
-    >
-      {`Answered by ${
-        data.userName
-      } on ${data.created.toLocaleDateString()} ${data.created.toLocaleTimeString()}`}
-    </div>
-  </div>
-);

QandA/frontend/src/AnswerList.tsx

@@ -1,31 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-import React from 'react';
-import { AnswerData } from './QuestionsData';
-import { Answer } from './Answer';
-import { gray5 } from './Styles';
-
-interface Props {
-  data: AnswerData[];
-}
-
-export const AnswerList = ({ data }: Props) => (
-  <ul
-    css={css`
-      list-style: none;
-      margin: 10px 0 0 0;
-      padding: 0;
-    `}
-  >
-    {data.map((answer) => (
-      <li
-        css={css`
-          border-top: 1px solid ${gray5};
-        `}
-        key={answer.answertId}
-      >
-        <Answer data={answer} />
-      </li>
-    ))}
-  </ul>
-);

QandA/frontend/src/App.module.css

@@ -0,0 +1,5 @@
+.container {
+  font-family: 'Segoe UI', 'Helvetica', sans-serif;
+  font-size: 16px;
+  color: #5c5a5a;
+}

QandA/frontend/src/App.tsx

@@ -1,59 +1,21 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-
 import React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-
 import { Header } from './Header';
+import style from './App.module.css';
 import { HomePage } from './HomePage';
-import { fontFamily, fontSize, gray2 } from './Styles';
-import { SearchPage } from './SearchPage';
-import { SignInPage } from './SignInPage';
-import { NotFoundPage } from './NotFoundPage';
-import { QuestionPage } from './QuestionPage';
-
-const AskPage = React.lazy(() => import('./AskPage'));
 
 function App() {
   return (
-    <BrowserRouter>
+    <div className={style.container}>
       <Header />
-      <div
+      <HomePage />
-        css={css`
+    </div>
-          font-family: ${fontFamily};
-          font-size: ${fontSize};
-          color: ${gray2};
-        `}
-      >
-        <Routes>
-          <Route path="" element={<HomePage />} />
-          <Route path="search" element={<SearchPage />} />
-          <Route
-            path="ask"
-            element={
-              <React.Suspense
-                fallback={
-                  <div
-                    css={css`
-                      margin-top: 100px;
-                      text-align: center;
-                    `}
-                  >
-                    Loading...
-                  </div>
-                }
-              >
-                <AskPage />
-              </React.Suspense>
-            }
-          />
-          <Route path="signin" element={<SignInPage />} />
-          <Route path="questions/:questionId" element={<QuestionPage />} />
-          <Route path="*" element={<NotFoundPage />} />
-        </Routes>
-      </div>
-    </BrowserRouter>
   );
 }
 
+class ProblemComponent extends React.Component {
+  render() {
+    return <div ref="div" />;
+  }
+}
+
 export default App;

QandA/frontend/src/AskPage.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { useForm } from 'react-hook-form';
-
-import { Page } from './Page';
-import {
-  FieldInput,
-  FieldLabel,
-  Fieldset,
-  FieldContainer,
-  FieldTextArea,
-  FormButtonContainer,
-  PrimaryButton,
-} from './Styles';
-
-type FormData = {
-  title: string;
-  content: string;
-};
-
-export const AskPage = () => {
-  const { register } = useForm<FormData>();
-  return (
-    <Page title="Ask a question">
-      <form>
-        <Fieldset>
-          <FieldContainer>
-            <FieldLabel htmlFor="title">Title</FieldLabel>
-            <FieldInput
-              {...register('title')}
-              id="title"
-              name="title"
-              type="text"
-            />
-          </FieldContainer>
-          <FieldContainer>
-            <FieldLabel htmlFor="content">Content</FieldLabel>
-            <FieldTextArea
-              {...register('content')}
-              id="content"
-              name="content"
-            />
-          </FieldContainer>
-          <FormButtonContainer>
-            <PrimaryButton type="submit">Submit Your Question</PrimaryButton>
-          </FormButtonContainer>
-        </Fieldset>
-      </form>
-    </Page>
-  );
-};
-
-export default AskPage;

QandA/frontend/src/Header.tsx

@@ -1,97 +1,24 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
 import React from 'react';
-import { Link, useSearchParams } from 'react-router-dom';
-import { useForm } from 'react-hook-form';
-
 import { UserIcon } from './Icons';
-import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';
+import style from './Header.module.css';
-
-type FormData = {
-  search: string;
-};
 
 export const Header = () => {
-  const { register } = useForm<FormData>();
+  const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-  const [searchParams] = useSearchParams();
+    console.log(e.currentTarget.value);
-  const criteria = searchParams.get('criteria') || '';
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
   };
 
   return (
-    <div
+    <div className={style.container}>
-      css={css`
+      <a href="./">Q & A</a>
-        position: fixed;
+      <input
-        box-sizing: border-box;
+        type="text"
-        top: 0;
+        placeholder="Search ..."
-        width: 100%;
+        onChange={handleSearchInputChange}
-        display: flex;
+      />
-        align-items: center;
+      <a href="./signin">
-        justify-content: space-between;
-        padding: 10px 20px;
-        background-color: #fff;
-        border-bottom: 1px solid ${gray5};
-        box-shadow: 0 3px 7px 0 rgba(100, 112, 114, 0.21);
-      `}
-    >
-      <Link
-        to="/"
-        css={css`
-          font-size: 24px;
-          font-weight: bold;
-          color: ${gray1};
-          text-decoration: none;
-        `}
-      >
-        Q & A
-      </Link>
-      <form onSubmit={handleSubmit}>
-        <input
-          {...register('search')}
-          name="search"
-          type="text"
-          placeholder="Search ..."
-          defaultValue={criteria}
-          css={css`
-            box-sizing: border-box;
-            font-family: ${fontFamily};
-            font-size: ${fontSize};
-            padding: 8px 10px;
-            border: 1px solid ${gray5};
-            border-radius: 3px;
-            color: ${gray2};
-            background-color: white;
-            width: 200px;
-            height: 30px;
-            :focus {
-              outline-color: ${gray5};
-            }
-          `}
-        />
-      </form>
-      <Link
-        to="signin"
-        css={css`
-          font-family: ${fontFamily};
-          font-size: ${fontSize};
-          padding: 5px 10px;
-          background-color: transparent;
-          color: ${gray2};
-          text-decoration: none;
-          cursor: pointer;
-          :focus {
-            outline-color: ${gray5};
-          }
-          span {
-            margin-left: 7px;
-          }
-        `}
-      >
         <UserIcon />
         <span>Sign In</span>
-      </Link>
+      </a>
     </div>
   );
 };

QandA/frontend/src/HomePage.tsx

@@ -1,13 +1,8 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-import { useNavigate } from 'react-router-dom';
-
 import React from 'react';
 import { PageTitle } from './PageTitle';
 import { Page } from './Page';
 import { QuestionList } from './QuestionList';
 import { getUnansweredQuestions, QuestionData } from './QuestionsData';
-import { PrimaryButton } from './Styles';
 
 export const HomePage = () => {
   const [questions, setQuestions] = React.useState<QuestionData[]>([]);
@@ -22,24 +17,15 @@ export const HomePage = () => {
     doGetUnansweredQuestion();
   }, []);
 
-  const navigate = useNavigate();
   const handleAskQuestionClick = () => {
-    navigate('ask');
+    console.log('TODO - move to the AskPage');
   };
 
   return (
     <Page>
-      <div
+      <div>
-        css={css`
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-        `}
-      >
         <PageTitle>Unanswered Questions</PageTitle>
-        <PrimaryButton onClick={handleAskQuestionClick}>
+        <button onClick={handleAskQuestionClick}>Ask a question</button>
-          Ask a question
-        </PrimaryButton>
       </div>
       {questionsLoading ? (
         <div>Loading...</div>

QandA/frontend/src/Icons.tsx

@@ -1,15 +1,3 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-
 import React from 'react';
 import user from './user.svg';
-export const UserIcon = () => (
+export const UserIcon = () => <img src={user} alt="User" width="12px" />;
-  <img
-    src={user}
-    alt="User"
-    css={css`
-      width: 12px;
-      opacity: 0.6;
-    `}
-  />
-);

QandA/frontend/src/NotFoundPage.tsx

@@ -1,4 +0,0 @@
-import React from 'react';
-import { Page } from './Page';
-
-export const NotFoundPage = () => <Page title="Page Not Found">{null}</Page>;

QandA/frontend/src/Page.tsx

@@ -1,6 +1,3 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-
 import React from 'react';
 import { PageTitle } from './PageTitle';
 
@@ -10,13 +7,7 @@ interface Props {
 }
 
 export const Page = ({ title, children }: Props) => (
-  <div
+  <div>
-    css={css`
-      margin: 50px auto 20px auto;
-      padding: 30px 20px;
-      max-width: 600px;
-    `}
-  >
     {title && <PageTitle>{title}</PageTitle>}
     {children}
     {/* Component nested within Page component will be rendere here */}

QandA/frontend/src/PageTitle.tsx

@@ -1,20 +1,5 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-
 import React from 'react';
 interface Props {
   children: React.ReactNode;
 }
-export const PageTitle = ({ children }: Props) => (
+export const PageTitle = ({ children }: Props) => <h2>{children}</h2>;
-  <h2
-    css={css`
-      font-size: 15px;
-      font-weight: bold;
-      margin: 10px 0px 5px;
-      text-align: center;
-      text-transform: uppercase;
-    `}
-  >
-    {children}
-  </h2>
-);

QandA/frontend/src/Question.tsx

@@ -1,9 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-import { Link } from 'react-router-dom';
 import React from 'react';
-
-import { gray2, gray3 } from './Styles';
 import { QuestionData } from './QuestionsData';
 
 interface Props {
@@ -13,42 +8,15 @@ interface Props {
 
 export const Question = ({ data, showContent }: Props) => (
   <div>
-    <div
+    <div>{data.title}</div>
-      css={css`
-        padding: 10px 0px;
-        font-size: 19px;
-      `}
-    >
-      <Link
-        css={css`
-          text-decoration: none;
-          color: ${gray2};
-        `}
-        to={`/questions/${data.questionId}`}
-      >
-        {data.title}
-      </Link>
-    </div>
     {showContent && (
-      <div
+      <div>
-        css={css`
-          padding-bottom: 10px;
-          font-size: 15px;
-          color: ${gray2};
-        `}
-      >
         {data.content.length > 50
           ? `${data.content.substring(0, 50)}`
           : data.content}
       </div>
     )}
-    <div
+    <div>
-      css={css`
-        font-size: 12px;
-        font-style: italic;
-        color: ${gray3};
-      `}
-    >
       {`Ask by ${
         data.userName
       } on ${data.created.toLocaleDateString()} ${data.created.toLocaleTimeString()}`}

QandA/frontend/src/QuestionList.tsx

@@ -1,38 +1,15 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-
 import React from 'react';
 import { Question } from './Question';
 import { QuestionData } from './QuestionsData';
-import { accent2, gray5 } from './Styles';
 
 interface Props {
   data: QuestionData[];
 }
 
 export const QuestionList = ({ data }: Props) => (
-  <ul
+  <ul>
-    css={css`
-      list-style: none;
-      margin: 10px 0 0 0;
-      padding: 0px 20px;
-      background-color: #fff;
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
-      border-top: 3px solid ${accent2};
-      box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16);
-    `}
-  >
     {data.map((question) => (
-      <li
+      <li key={question.questionId}>
-        key={question.questionId}
-        css={css`
-          border-top: 1px solid ${gray5};
-          :first-of-type {
-            border-top: none;
-          }
-        `}
-      >
         <Question data={question} />
       </li>
     ))}

QandA/frontend/src/QuestionPage.tsx

@@ -1,108 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-import {
-  FieldContainer,
-  FieldLabel,
-  Fieldset,
-  FieldTextArea,
-  FormButtonContainer,
-  gray3,
-  gray6,
-  PrimaryButton,
-} from './Styles';
-
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import { useForm } from 'react-hook-form';
-
-import { Page } from './Page';
-import { QuestionData, getQuestion } from './QuestionsData';
-import { AnswerList } from './AnswerList';
-
-type FormData = {
-  content: string;
-};
-
-export const QuestionPage = () => {
-  const [question, setQuestion] = React.useState<QuestionData | null>(null);
-  const { questionId } = useParams();
-  const { register } = useForm<FormData>();
-  React.useEffect(() => {
-    const doGetQuestion = async (questionId: number) => {
-      const foundQuestion = await getQuestion(questionId);
-      setQuestion(foundQuestion);
-    };
-    if (questionId) {
-      doGetQuestion(Number(questionId));
-    }
-  }, [questionId]);
-  return (
-    <Page>
-      <div
-        css={css`
-          background-color: white;
-          padding: 15px 20px 20px 20px;
-          border-radius: 4px;
-          border: 1px solid ${gray6};
-          box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16);
-        `}
-      >
-        <div
-          css={css`
-            font-size: 19px;
-            font-weight: bold;
-            margin: 10px 0px 5px;
-          `}
-        >
-          {question === null ? '' : question.title}
-        </div>
-        {question !== null && (
-          <React.Fragment>
-            <p
-              css={css`
-                margin-top: 0px;
-                background-color: white;
-              `}
-            >
-              {question.content}
-            </p>
-            <div
-              css={css`
-                font-size: 12px;
-                font-style: italic;
-                color: ${gray3};
-              `}
-            >
-              {`Asked by ${
-                question.userName
-              } on ${question.created.toLocaleDateString()} ${question.created.toLocaleTimeString()}`}
-            </div>
-            <AnswerList data={question.answers} />
-            <form
-              css={css`
-                margin-top: 20px;
-              `}
-            >
-              <Fieldset>
-                <FieldContainer>
-                  <FieldLabel htmlFor="content">Your Answer</FieldLabel>
-                  <FieldTextArea
-                    {...register('content')}
-                    id="content"
-                    name="content"
-                  />
-                </FieldContainer>
-                <FormButtonContainer>
-                  <PrimaryButton type="submit">
-                    Submit Your Answer
-                  </PrimaryButton>
-                </FormButtonContainer>
-              </Fieldset>
-            </form>
-          </React.Fragment>
-        )}
-      </div>
-      Question Page {questionId}
-    </Page>
-  );
-};

QandA/frontend/src/QuestionsData.ts

@@ -56,22 +56,3 @@ export const getUnansweredQuestions = async (): Promise<QuestionData[]> => {
 const wait = (ms: number): Promise<void> => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
-
-export const getQuestion = async (
-  questionId: number,
-): Promise<QuestionData | null> => {
-  await wait(500);
-  const results = questions.filter((q) => q.questionId === questionId);
-  return results.length === 0 ? null : results[0];
-};
-
-export const searchQuestions = async (
-  criteria: string,
-): Promise<QuestionData[]> => {
-  await wait(500);
-  return questions.filter(
-    (q) =>
-      q.title.toLowerCase().indexOf(criteria.toLowerCase()) >= 0 ||
-      q.content.toLowerCase().indexOf(criteria.toLowerCase()) >= 0,
-  );
-};

QandA/frontend/src/SearchPage.tsx

@@ -1,38 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-
-import React from 'react';
-import { useSearchParams } from 'react-router-dom';
-
-import { Page } from './Page';
-import { QuestionList } from './QuestionList';
-import { searchQuestions, QuestionData } from './QuestionsData';
-
-export const SearchPage = () => {
-  const [searchParams] = useSearchParams();
-  const [questions, setQuestions] = React.useState<QuestionData[]>([]);
-  const search = searchParams.get('criteria') || '';
-  React.useEffect(() => {
-    const doSearch = async (criteria: string) => {
-      const foundResults = await searchQuestions(criteria);
-      setQuestions(foundResults);
-    };
-    doSearch(search);
-  }, [search]);
-
-  return (
-    <Page title="Search Results">
-      {search && (
-        <p
-          css={css`
-            font-size: 16px;
-            font-style: italic;
-            margin-top: 0px;
-          `}
-        >
-          <QuestionList data={questions} />
-        </p>
-      )}
-    </Page>
-  );
-};

QandA/frontend/src/SignInPage.tsx

@@ -1,4 +0,0 @@
-import React from 'react';
-import { Page } from './Page';
-
-export const SignInPage = () => <Page title="Sign In">{null}</Page>;

QandA/frontend/src/Styles.ts

@@ -1,103 +0,0 @@
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-export const gray1 = '#383737';
-export const gray2 = '#5c5a5a';
-export const gray3 = '#857c81';
-export const gray4 = '#b9b9b9';
-export const gray5 = '#e3e2e2';
-export const gray6 = '#f7f8fa';
-export const primary1 = '#681c41';
-export const primary2 = '#824c67';
-export const accent1 = '#dbb365';
-export const accent2 = '#efd197';
-export const fontFamily = "'Segoe UI', 'Helvetica Neue',sans-serif";
-export const fontSize = '16px';
-export const PrimaryButton = styled.button`
-  background-color: ${primary2};
-  border-color: ${primary2};
-  border-style: solid;
-  border-radius: 5px;
-  font-family: ${fontFamily};
-  font-family: ${fontSize};
-  padding: 5px 10px;
-  color: white;
-  cursor: pointer;
-  :hover {
-    background-color: ${primary1};
-  }
-  :focus {
-    outline-color: ${primary2};
-  }
-  :disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-
-export const Fieldset = styled.fieldset`
-  margin: 10px auto 0 auto;
-  padding: 30px;
-  width: 350px;
-  background-color: ${gray6};
-  border-radius: 4px;
-  border: 1px solid ${gray5};
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16);
-`;
-
-export const FieldContainer = styled.label`
-  font-weight: 10px;
-`;
-
-const baseFieldCSS = css`
-  box-sizing: border-box;
-  font-family: ${fontFamily};
-  font-size: ${fontSize};
-  margin-bottom: 5px;
-  padding: 8px 10px;
-  border: 1px solid ${gray5};
-  border-radius: 3px;
-  color: ${gray2};
-  background-color: white;
-  width: 100%;
-  :focus {
-    outline-color: ${gray5};
-  }
-  :disabled {
-    background-color: ${gray6};
-  }
-`;
-
-export const FieldLabel = styled.label`
-  font-weight: bold;
-`;
-
-export const FieldInput = styled.input`
-  ${baseFieldCSS}
-`;
-
-export const FieldTextArea = styled.textarea`
-  ${baseFieldCSS}
-  height: 100px;
-`;
-
-export const FieldError = styled.div`
-  font-size: 12px;
-  color: red;
-`;
-
-export const FormButtonContainer = styled.div`
-  margin: 30px 0px 0px 0px;
-  padding: 20px 0px 0px 0px;
-  border-top: 1px solid ${gray5};
-`;
-
-export const SubmissionSussess = styled.div`
-  margin-top: 10px;
-  color: green;
-`;
-
-export const SubmissionFailure = styled.div`
-  margin-top: 10px;
-  color: red;
-`;