Compare commits
12 Commits
master
...
e90cc6b191
| Author | SHA1 | Date |
|---|---|---|
Yiqing Zhu
|
e90cc6b191 | |
|
Yiqing Zhu
|
9830fb1af2 | |
|
Yiqing Zhu
|
a5d1351f92 | |
|
Yiqing Zhu
|
2b3cbdddd5 | |
|
Yiqing Zhu
|
b4d0fed5cb | |
|
Yiqing Zhu
|
7dd02a76ea | |
|
Yiqing Zhu
|
0f31f492cc | |
|
Yiqing Zhu
|
2afb204673 | |
|
Yiqing Zhu
|
cdecba7c2e | |
|
Yiqing Zhu
|
072b7dcf88 | |
|
Yiqing Zhu
|
b6fdcbd740 | |
|
Yiqing Zhu
|
4affa35f00 |
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
.container {
|
||||
font-family: 'Segoe UI', 'Helvetica', sans-serif;
|
||||
font-size: 16px;
|
||||
color: #5c5a5a;
|
||||
}
|
||||
|
|
@ -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
|
||||
css={css`
|
||||
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>
|
||||
<HomePage />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
class ProblemComponent extends React.Component {
|
||||
render() {
|
||||
return <div ref="div" />;
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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';
|
||||
|
||||
type FormData = {
|
||||
search: string;
|
||||
};
|
||||
import style from './Header.module.css';
|
||||
|
||||
export const Header = () => {
|
||||
const { register } = useForm<FormData>();
|
||||
const [searchParams] = useSearchParams();
|
||||
const criteria = searchParams.get('criteria') || '';
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
console.log(e.currentTarget.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
css={css`
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className={style.container}>
|
||||
<a href="./">Q & A</a>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search ..."
|
||||
onChange={handleSearchInputChange}
|
||||
/>
|
||||
<a href="./signin">
|
||||
<UserIcon />
|
||||
<span>Sign In</span>
|
||||
</Link>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
css={css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
`}
|
||||
>
|
||||
<div>
|
||||
<PageTitle>Unanswered Questions</PageTitle>
|
||||
<PrimaryButton onClick={handleAskQuestionClick}>
|
||||
Ask a question
|
||||
</PrimaryButton>
|
||||
<button onClick={handleAskQuestionClick}>Ask a question</button>
|
||||
</div>
|
||||
{questionsLoading ? (
|
||||
<div>Loading...</div>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,3 @@
|
|||
/** @jsxImportSource @emotion/react */
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
import React from 'react';
|
||||
import user from './user.svg';
|
||||
export const UserIcon = () => (
|
||||
<img
|
||||
src={user}
|
||||
alt="User"
|
||||
css={css`
|
||||
width: 12px;
|
||||
opacity: 0.6;
|
||||
`}
|
||||
/>
|
||||
);
|
||||
export const UserIcon = () => <img src={user} alt="User" width="12px" />;
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Page } from './Page';
|
||||
|
||||
export const NotFoundPage = () => <Page title="Page Not Found">{null}</Page>;
|
||||
|
|
@ -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
|
||||
css={css`
|
||||
margin: 50px auto 20px auto;
|
||||
padding: 30px 20px;
|
||||
max-width: 600px;
|
||||
`}
|
||||
>
|
||||
<div>
|
||||
{title && <PageTitle>{title}</PageTitle>}
|
||||
{children}
|
||||
{/* Component nested within Page component will be rendere here */}
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
<h2
|
||||
css={css`
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
margin: 10px 0px 5px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
`}
|
||||
>
|
||||
{children}
|
||||
</h2>
|
||||
);
|
||||
export const PageTitle = ({ children }: Props) => <h2>{children}</h2>;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
css={css`
|
||||
padding: 10px 0px;
|
||||
font-size: 19px;
|
||||
`}
|
||||
>
|
||||
<Link
|
||||
css={css`
|
||||
text-decoration: none;
|
||||
color: ${gray2};
|
||||
`}
|
||||
to={`/questions/${data.questionId}`}
|
||||
>
|
||||
{data.title}
|
||||
</Link>
|
||||
</div>
|
||||
<div>{data.title}</div>
|
||||
{showContent && (
|
||||
<div
|
||||
css={css`
|
||||
padding-bottom: 10px;
|
||||
font-size: 15px;
|
||||
color: ${gray2};
|
||||
`}
|
||||
>
|
||||
<div>
|
||||
{data.content.length > 50
|
||||
? `${data.content.substring(0, 50)}`
|
||||
: data.content}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
css={css`
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
color: ${gray3};
|
||||
`}
|
||||
>
|
||||
<div>
|
||||
{`Ask by ${
|
||||
data.userName
|
||||
} on ${data.created.toLocaleDateString()} ${data.created.toLocaleTimeString()}`}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
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);
|
||||
`}
|
||||
>
|
||||
<ul>
|
||||
{data.map((question) => (
|
||||
<li
|
||||
key={question.questionId}
|
||||
css={css`
|
||||
border-top: 1px solid ${gray5};
|
||||
:first-of-type {
|
||||
border-top: none;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<li key={question.questionId}>
|
||||
<Question data={question} />
|
||||
</li>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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,
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Page } from './Page';
|
||||
|
||||
export const SignInPage = () => <Page title="Sign In">{null}</Page>;
|
||||
|
|
@ -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;
|
||||
`;
|
||||
Loading…
Reference in New Issue