Jason
/
safaribook-aspnet-core5-and-react
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

merge into: Jason:master
Branches Tags
Jason:Chap06
Jason:master
Jason:Chap05
Jason:Chap04
Jason:Chap03
Jason:Chap02
...
pull from: Jason:Chap06
Branches Tags
Jason:Chap06
Jason:master
Jason:Chap05
Jason:Chap04
Jason:Chap03
Jason:Chap02

52 Commits
master ... Chap06

Author SHA1 Message Date
jason-zhu c07a3db03f Working on Chap06 2023-10-22 11:23:56 +11:00
Jason Zhu 69d83e398b Chap06 -> Reducing boilerplate code with React Hook From -> Implementing the answer form 2022-03-31 11:16:30 +11:00
Jason Zhu 66fa89341d Chap06 -> Reducing boilerplate code with React Hook Form -> Implementing the ask form 2022-03-30 23:51:10 +11:00
Jason Zhu e2aca4edb4 Chap06 -> Reducing boilerplate code with React Hook Form -> Creating from styled components 2022-03-30 23:21:13 +11:00
Jason Zhu c6c6dfd02e Chap06 -> Reducing boilerplat code with React Hook Form -> Refactoring the Header component to use React Hook Form 2022-03-30 22:55:50 +11:00
Jason Zhu 970dd905dc Chap06 -> Reducing boilerplat code with React Hook Form -> Installing React Hook Form 2022-03-30 22:37:41 +11:00
Jason Zhu 228c9e9417 Chap06 -> Understanding controlled components 2022-03-30 22:36:10 +11:00
Jason Zhu c913b32ddb Chap05 -> Lazy loading routers 2022-03-30 17:05:28 +11:00
Jason Zhu 3580e9b0b4 Chap05 -> Using query parameters -> 7 & 8: Render search criteria and questions that returned from search 2022-03-30 16:43:26 +11:00
Jason Zhu 2319706d66 Chap05 -> Using query parameters -> 6. Invoke search when component first renders and when the search variable changes using the useEffect hook 2022-03-30 16:39:03 +11:00
Jason Zhu 7f5df7cdf3 Chap05 -> Usinig query parameters -> 2 & 3: configure import in SearchPage and add explicit return statement 2022-03-30 16:32:39 +11:00
Jason Zhu 62e7510193 Chap05 -> Using query parameters -> 1. Create function to simulate a search via web request 2022-03-30 16:30:54 +11:00
Jason Zhu 3414f20798 Chap05 -> Using route parameters -> Creating an AnswerList component 2022-03-30 16:18:22 +11:00
Jason Zhu a2d892793c Chap05 -> Using route parameter -> Creating an AnswerList component -> 4 & 5 & 6: Created Answer component 2022-03-30 15:08:09 +11:00
Jason Zhu 943e22ffdb Chap05 -> Using route parameters -> Creating an AnswerList component -> 1 & 2 & 3: created AnswerList.tsx 2022-03-30 14:58:26 +11:00
Jason Zhu 40b20ae730 Chap05 -> Using route paramters -> Implementinig more of the question page (fix background-color) 2022-03-30 14:53:04 +11:00
Jason Zhu b71ce601d7 Chap05 -> Using route paramters -> Implementinig more of the question page -> 8. Add when question asked and who asked into the Fragment 2022-03-30 14:51:48 +11:00
Jason Zhu dbb3d2f9b5 Chap05 -> Using route parameters -> Implementing more of the question page -> 7. Implement question content 2022-03-30 14:38:16 +11:00
Jason Zhu fa83caf8a7 Chap05 -> Using route parameters -> Implementiing more of the question page -> Implement JSX for Question Page component by adding container element for the page and question title 2022-03-30 14:34:23 +11:00
Jason Zhu f50dd73596 Chap05 -> Using route parameters -> Implementing more of the question page -> 5. call getQuestion function during initial render 2022-03-30 14:30:37 +11:00
Jason Zhu a51437c7cc Chap05 -> Using route parameters -> Implementing more of the question page -> 2 & 3 & 4: Create a state for question 2022-03-30 14:14:23 +11:00
Jason Zhu 191d87662d Chap05 -> Using route parameters -> Implementing more of the question pagee -> 1. Add a function that will simulate a web request to get a question 2022-03-30 14:04:55 +11:00
Jason Zhu e87108a892 Fixed problem in Chap04 2022-03-29 23:15:33 +11:00
Jason Zhu f986272027 Chap05 -> Using route parameters -> Adding the question page route (Finished) 2022-03-29 16:33:58 +11:00
Jason Zhu 4f9e43b95e Chap05 -> Using route parameters -> Adding the question page route 2022-03-29 16:25:56 +11:00
Jason Zhu 61660bf83d Chap05 -> Implementing links -> Navigating programmatically 2022-03-29 16:24:10 +11:00
Jason Zhu 6d5af0a856 Chap05 -> Implementing links -> Using the Link component 2022-03-29 16:22:23 +11:00
Jason Zhu 5c08042544 (Edit) Chap05 -> Declaring routes -> Creating a component containing routes: put Header component back to App 2022-03-29 16:19:21 +11:00
Jason Zhu 5b79adea19 Chap05 -> Handling routes not found 2022-03-29 15:55:55 +11:00
Jason Zhu fbc2541230 Chap05 -> Declaring routes -> Creating a component containing routes 2022-03-29 15:52:21 +11:00
Jason Zhu 7c3215867f Chap05 -> Declaring routes -> Creating some blank pages 2022-03-29 15:41:31 +11:00
Jason Zhu 4963def0bd Chap05 -> Install React Router 2022-03-29 15:06:09 +11:00
Jason Zhu 4a04834929 Chap04 -> Completing the home page styling -> Styling the Question component 2022-03-29 14:45:12 +11:00
Jason Zhu 1292870db9 Chap04 -> Completing the home page styling -> Styling the QuestionList component 2022-03-29 14:41:37 +11:00
Yiqing Zhu 055f653476 Chap04 -> Creating a reusable styled component with Emotion 2022-03-28 21:02:55 +11:00
Yiqing Zhu 691840dee3 Chap04 -> Styling pseudo-classes and nested elements with Emotion 2022-03-28 20:37:00 +11:00
Yiqing Zhu 26f7fc4582 Chap04 -> Styling components with Emotion -> Styling the Header component 2022-03-28 19:58:15 +11:00
Jason Zhu e4f41e5d8d Chap04 -> Styling components with Emotion -> Styling the App component (Emotion styles in head tag) 2022-03-28 19:36:40 +11:00
Jason Zhu c98972dec9 Chap04 -> Styling components with Emotion -> Styling the App component -> style css prop use tagged template literal 2022-03-28 17:56:13 +11:00
Jason Zhu 2005072dea Chap04 -> Styling components with Emotion -> Installing Emotion 2022-03-28 17:38:39 +11:00
Yiqing Zhu e90cc6b191 Chap04 -> Styling components with CSS modules 2022-03-26 17:56:51 +11:00
Yiqing Zhu 9830fb1af2 Chap04 -> Styling components with CSS -> Styling the Header component 2022-03-26 17:50:10 +11:00
Yiqing Zhu a5d1351f92 Chap04 -> Styling components with CSS -> Styling the App component 2022-03-26 17:38:20 +11:00
Yiqing Zhu 2b3cbdddd5 Chap04 -> Styling components with CSS -> Stlying the document body 2022-03-26 17:33:40 +11:00
Yiqing Zhu b4d0fed5cb Chap03 -> Handling events -> Handling an input change event 2022-03-26 17:00:21 +11:00
Yiqing Zhu 7dd02a76ea Chap03 -> Handling events -> Handling a button click event 2022-03-26 16:50:56 +11:00
Yiqing Zhu 0f31f492cc Chap03 -> Implementing component state -> Using useState to implement component state 2022-03-26 16:46:05 +11:00
Yiqing Zhu 2afb204673 Chap03 -> Implementing component state -> Using useEffect to execute logic 2022-03-26 16:03:57 +11:00
Yiqing Zhu cdecba7c2e Chap03 -> Implementing component state (Change getUnansweredQuestions to async function, result failure in transpiling) 2022-03-26 14:39:21 +11:00
Yiqing Zhu 072b7dcf88 Chap03 -> Creating function-based component -> Function props (aka how to use render prop) 2022-03-26 14:25:09 +11:00
Yiqing Zhu b6fdcbd740 Chap03 -> Creating function-based component -> Children props, added explanation 2022-03-26 14:12:16 +11:00
Yiqing Zhu 4affa35f00 Chap03 -> Creating function-based component -> Children props 2022-03-26 14:10:10 +11:00
31 changed files with 1285 additions and 88 deletions
Show Stats Expand all files Collapse all files

BIN
QandA/.vs/QandA/DesignTimeBuild/.dtbcache.v2 100644
View File

Binary file not shown.

BIN
QandA/.vs/QandA/v16/.suo
View File

Binary file not shown.

5
QandA/frontend/.idea/.gitignore vendored 100644
View File

@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

61
QandA/frontend/.idea/codeStyles/Project.xml 100644
View File

@ -0,0 +1,61 @@
<component name="ProjectCodeStyleConfiguration">
<code_scheme name="Project" version="173">
<HTMLCodeStyleSettings>
<option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
<option name="HTML_QUOTE_STYLE" value="Single" />
<option name="HTML_ENFORCE_QUOTES" value="true" />
</HTMLCodeStyleSettings>
<JSCodeStyleSettings version="0">
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
<option name="USE_DOUBLE_QUOTES" value="false" />
<option name="FORCE_QUOTE_STYlE" value="true" />
<option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
<option name="SPACES_WITHIN_IMPORTS" value="true" />
</JSCodeStyleSettings>
<TypeScriptCodeStyleSettings version="0">
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
<option name="USE_DOUBLE_QUOTES" value="false" />
<option name="FORCE_QUOTE_STYlE" value="true" />
<option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
<option name="SPACES_WITHIN_IMPORTS" value="true" />
</TypeScriptCodeStyleSettings>
<VueCodeStyleSettings>
<option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
<option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
</VueCodeStyleSettings>
<codeStyleSettings language="HTML">
<option name="SOFT_MARGINS" value="80" />
<indentOptions>
<option name="INDENT_SIZE" value="2" />
<option name="CONTINUATION_INDENT_SIZE" value="2" />
<option name="TAB_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="JavaScript">
<option name="SOFT_MARGINS" value="80" />
<indentOptions>
<option name="INDENT_SIZE" value="2" />
<option name="CONTINUATION_INDENT_SIZE" value="2" />
<option name="TAB_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="TypeScript">
<option name="SOFT_MARGINS" value="80" />
<indentOptions>
<option name="INDENT_SIZE" value="2" />
<option name="CONTINUATION_INDENT_SIZE" value="2" />
<option name="TAB_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="Vue">
<option name="SOFT_MARGINS" value="80" />
<indentOptions>
<option name="CONTINUATION_INDENT_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
</code_scheme>
</component>

5
QandA/frontend/.idea/codeStyles/codeStyleConfig.xml 100644
View File

@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
</state>
</component>

12
QandA/frontend/.idea/frontend.iml 100644
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
QandA/frontend/.idea/inspectionProfiles/Project_Default.xml 100644
View File

@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>

8
QandA/frontend/.idea/modules.xml 100644
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/frontend.iml" filepath="$PROJECT_DIR$/.idea/frontend.iml" />
</modules>
</component>
</project>

6
QandA/frontend/.idea/vcs.xml 100644
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$/../.." vcs="Git" />
</component>
</project>

438
QandA/frontend/package-lock.json generated
View File

@ -8,6 +8,8 @@
"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",
@ -15,8 +17,11 @@
"@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"
@ -1980,6 +1985,177 @@
"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",
@ -7493,6 +7669,11 @@
"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",
@ -8041,6 +8222,27 @@
"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",
@ -13331,6 +13533,21 @@
"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",
@ -13344,6 +13561,30 @@
"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",
@ -14493,6 +14734,11 @@
"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",
@ -17504,6 +17750,142 @@
"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",
@ -21562,6 +21944,11 @@
"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",
@ -21929,6 +22316,29 @@
"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",
@ -25608,6 +26018,12 @@
"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",
@ -25618,6 +26034,23 @@
"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",
@ -26468,6 +26901,11 @@
"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",

5
QandA/frontend/package.json
View File

@ -3,6 +3,8 @@
"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",
@ -10,8 +12,11 @@
"@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"

38
QandA/frontend/src/Answer.tsx 100644
View File

@ -0,0 +1,38 @@
/** @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>
);

31
QandA/frontend/src/AnswerList.tsx 100644
View File

@ -0,0 +1,31 @@
/** @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>
);

38
QandA/frontend/src/App.css
View File

@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

58
QandA/frontend/src/App.tsx
View File

@ -1,21 +1,59 @@
/** @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 './App.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 (
<div className="App">
<BrowserRouter>
<Header />
<HomePage />
</div>
<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>
);
}
class ProblemComponent extends React.Component {
render() {
return <div ref="div" />;
}
}
export default App;

64
QandA/frontend/src/AskPage.tsx 100644
View File

@ -0,0 +1,64 @@
import React from 'react';
import { useForm } from 'react-hook-form';
import { Page } from './Page';
import {
FieldInput,
FieldLabel,
Fieldset,
FieldContainer,
FieldTextArea,
FormButtonContainer,
PrimaryButton,
FieldError,
} from './Styles';
type FormData = {
title: string;
content: string;
};
export const AskPage = () => {
const { register, errors } = useForm<FormData>({
mode: 'onBlur',
});
return (
<Page title="Ask a question">
<form>
<Fieldset>
<FieldContainer>
<FieldLabel htmlFor="title">Title</FieldLabel>
<FieldInput
{...register('title', {
required: true,
minLength: 10,
})}
id="title"
name="title"
type="text"
/>
{errors.title && errors.title.type === 'required' && (
<FieldError>You must enter the question title</FieldError>
)}
{errors.title && errors.title.type === 'minLength' && (
<FieldError>The title must be at least 10 characters</FieldError>
)}
</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;

13
QandA/frontend/src/Header.module.css 100644
View File

@ -0,0 +1,13 @@
.container {
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 #e3e2e2;
box-shadow: 0 3px 7px 0 rgba(110, 112, 114, 0.21);
}

106
QandA/frontend/src/Header.tsx
View File

@ -1,13 +1,97 @@
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import React from 'react';
import { UserIcon } from './Icons';
import { Link, useSearchParams } from 'react-router-dom';
import { useForm } from 'react-hook-form';
export const Header = () => (
<div>
<a href="./">Q & A</a>
<input type="text" placeholder="Search ..." />
<a href="./signin">
<UserIcon />
<span>Sign In</span>
</a>
</div>
);
import { UserIcon } from './Icons';
import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';
type FormData = {
search: string;
};
export const Header = () => {
const { register } = useForm<FormData>();
const [searchParams] = useSearchParams();
const criteria = searchParams.get('criteria') || '';
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
};
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;
}
`}
>
<UserIcon />
<span>Sign In</span>
</Link>
</div>
);
};

62
QandA/frontend/src/HomePage.tsx
View File

@ -1,13 +1,51 @@
import React from 'react';
import { QuestionList } from './QuestionList';
import { getUnansweredQuestions } from './QuestionsData';
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { useNavigate } from 'react-router-dom';
export const HomePage = () => (
<div>
<div>
<h2>Unanswered Questions</h2>
<button>Ask a question</button>
</div>
<QuestionList data={getUnansweredQuestions()} />
</div>
);
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[]>([]);
const [questionsLoading, setQuestionsLoading] = React.useState(true);
React.useEffect(() => {
const doGetUnansweredQuestion = async () => {
const unanswereedQuestions = await getUnansweredQuestions();
setQuestions(unanswereedQuestions);
setQuestionsLoading(false);
};
doGetUnansweredQuestion();
}, []);
const navigate = useNavigate();
const handleAskQuestionClick = () => {
navigate('ask');
};
return (
<Page>
<div
css={css`
display: flex;
align-items: center;
justify-content: space-between;
`}
>
<PageTitle>Unanswered Questions</PageTitle>
<PrimaryButton onClick={handleAskQuestionClick}>
Ask a question
</PrimaryButton>
</div>
{questionsLoading ? (
<div>Loading...</div>
) : (
<QuestionList data={questions || []} />
)}
</Page>
);
};

14
QandA/frontend/src/Icons.tsx
View File

@ -1,3 +1,15 @@
/** @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" width="12px" />;
export const UserIcon = () => (
<img
src={user}
alt="User"
css={css`
width: 12px;
opacity: 0.6;
`}
/>
);

4
QandA/frontend/src/NotFoundPage.tsx 100644
View File

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

24
QandA/frontend/src/Page.tsx 100644
View File

@ -0,0 +1,24 @@
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import React from 'react';
import { PageTitle } from './PageTitle';
interface Props {
title?: string;
children: React.ReactNode;
}
export const Page = ({ title, children }: Props) => (
<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 */}
</div>
);

20
QandA/frontend/src/PageTitle.tsx 100644
View File

@ -0,0 +1,20 @@
/** @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>
);

38
QandA/frontend/src/Question.tsx
View File

@ -1,4 +1,9 @@
/** @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 {
@ -8,15 +13,42 @@ interface Props {
export const Question = ({ data, showContent }: Props) => (
<div>
<div>{data.title}</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>
{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()}`}

27
QandA/frontend/src/QuestionList.tsx
View File

@ -1,15 +1,38 @@
/** @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 key={question.questionId}>
<li
key={question.questionId}
css={css`
border-top: 1px solid ${gray5};
:first-of-type {
border-top: none;
}
`}
>
<Question data={question} />
</li>
))}

108
QandA/frontend/src/QuestionPage.tsx 100644
View File

@ -0,0 +1,108 @@
/** @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>
);
};

26
QandA/frontend/src/QuestionsData.ts
View File

@ -48,6 +48,30 @@ const questions: QuestionData[] = [
},
];
export const getUnansweredQuestions = (): QuestionData[] => {
export const getUnansweredQuestions = async (): Promise<QuestionData[]> => {
await wait(500);
return questions.filter((q) => q.answers.length === 0);
};
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,
);
};

38
QandA/frontend/src/SearchPage.tsx 100644
View File

@ -0,0 +1,38 @@
/** @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>
);
};

4
QandA/frontend/src/SignInPage.tsx 100644
View File

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

103
QandA/frontend/src/Styles.ts 100644
View File

@ -0,0 +1,103 @@
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;
`;

11
QandA/frontend/src/index.css
View File

@ -1,13 +1,4 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
background-color: #f7f8fa;
}