Feedback

.eslintcache

@@ -1 +1 @@
-[{"/Users/chug2k/Documents/coderschool-code/treo/github-issues-template/src/index.js":"1","/Users/chug2k/Documents/coderschool-code/treo/github-issues-template/src/App.js":"2"},{"size":410,"mtime":1610075778063,"results":"3","hashOfConfig":"4"},{"size":338,"mtime":1610075766876,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"metsd8",{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/chug2k/Documents/coderschool-code/treo/github-issues-template/src/index.js",[],"/Users/chug2k/Documents/coderschool-code/treo/github-issues-template/src/App.js",[]]
+[{"C:\\Users\\WIN10\\Desktop\\github-issues-team3\\src\\index.js":"1","C:\\Users\\WIN10\\Desktop\\github-issues-team3\\src\\App.js":"2","C:\\Users\\WIN10\\Desktop\\github-issues-team3\\src\\components\\IssueListError.js":"3","C:\\Users\\WIN10\\Desktop\\github-issues-team3\\src\\components\\Nav.js":"4","C:\\Users\\WIN10\\Desktop\\github-issues-team3\\src\\components\\IssueList.js":"5","C:\\Users\\WIN10\\Desktop\\github-issues-team3\\src\\components\\IssueModal.js":"6","C:\\Users\\WIN10\\Desktop\\github-issues-team3\\src\\components\\SearchForm.js":"7","C:\\Users\\WIN10\\Desktop\\github-issues-team3\\src\\components\\PaginationBar.js":"8"},{"size":211,"mtime":1610168999457,"results":"9","hashOfConfig":"10"},{"size":6833,"mtime":1610330699973,"results":"11","hashOfConfig":"10"},{"size":539,"mtime":1610210057589,"results":"12","hashOfConfig":"10"},{"size":630,"mtime":1610329625031,"results":"13","hashOfConfig":"10"},{"size":1169,"mtime":1610329625027,"results":"14","hashOfConfig":"10"},{"size":1924,"mtime":1610329625031,"results":"15","hashOfConfig":"10"},{"size":445,"mtime":1610329625035,"results":"16","hashOfConfig":"10"},{"size":604,"mtime":1610329625031,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"11u86mf",{"filePath":"21","messages":"22","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"23","messages":"24","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"25","usedDeprecatedRules":"20"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"28","messages":"29","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"30","usedDeprecatedRules":"20"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"C:\\Users\\WIN10\\Desktop\\github-issues-team3\\src\\index.js",[],["37","38"],"C:\\Users\\WIN10\\Desktop\\github-issues-team3\\src\\App.js",["39","40"],"C:\\Users\\WIN10\\Desktop\\github-issues-team3\\src\\components\\IssueListError.js",["41"],"import React, { useState } from 'react'\r\nimport Alert from 'react-bootstrap/Alert'\r\n\r\nfunction IssueListError({setHasError}) {\r\n    const [show, setShow] = useState(true)\r\n    \r\n    return (\r\n        <Alert variant=\"danger\" onClose={() => setShow(false) && setHasError(false)} dismissible>\r\n          <Alert.Heading>Oh snap! You got an error!</Alert.Heading>\r\n          <p>\r\n            Perhpas there are no Issues here. Try searching with 'owner/repo-name' .\r\n          </p>\r\n        </Alert>\r\n      );\r\n}\r\n\r\nexport default IssueListError","C:\\Users\\WIN10\\Desktop\\github-issues-team3\\src\\components\\Nav.js",[],"C:\\Users\\WIN10\\Desktop\\github-issues-team3\\src\\components\\IssueList.js",["42"],"import React from \"react\";\r\nimport { ListGroup, Row, Col, Figure, Badge } from \"react-bootstrap\";\r\nimport ReactMarkdown from \"react-markdown\"\r\nimport moment from 'moment';\r\nconst fontColorContrast = require('font-color-contrast');\r\n\r\n\r\nconst IssueList = ({ issues, handleIssueClick }) => {\r\n  return (\r\n    <>\r\n      <h2>Issue List</h2>\r\n      <ListGroup>\r\n        {issues.map((i) => (\r\n          <ListGroup.Item key={i.id} action>\r\n            <Col><Row className=\"mx-auto\">\r\n              <a href=\"#\" onClick={() => handleIssueClick(i)}><ReactMarkdown source={i.title}/>\r\n              </a><Col className=\"d-flex-column\">{i.labels.map(o => (<Badge style={{ backgroundColor: `#${o.color}`, color:`${fontColorContrast(`#${o.color}`)}`}} pill>{o.name}</Badge>))}</Col></Row></Col>\r\n              <Row className=\"mx-auto\">#{i.number}{\" \"}opened{\" \"}{moment(i.updated_at).fromNow()}{\" \"}by{\" \"}<Col>{i.user.login}<Figure.Image width={20}\r\n           height={20} src={i.user.avatar_url} alt={i.user.avatar_url} thumbnail={true} rounded/></Col>\r\n            </Row>\r\n          </ListGroup.Item>\r\n        ))}\r\n      </ListGroup>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default IssueList;","C:\\Users\\WIN10\\Desktop\\github-issues-team3\\src\\components\\IssueModal.js",[],"C:\\Users\\WIN10\\Desktop\\github-issues-team3\\src\\components\\SearchForm.js",[],"C:\\Users\\WIN10\\Desktop\\github-issues-team3\\src\\components\\PaginationBar.js",[],{"ruleId":"43","replacedBy":"44"},{"ruleId":"45","replacedBy":"46"},{"ruleId":"47","severity":1,"message":"48","line":85,"column":5,"nodeType":"49","endLine":85,"endColumn":30,"suggestions":"50"},{"ruleId":"47","severity":1,"message":"51","line":91,"column":6,"nodeType":"49","endLine":91,"endColumn":23,"suggestions":"52"},{"ruleId":"53","severity":1,"message":"54","line":5,"column":12,"nodeType":"55","messageId":"56","endLine":5,"endColumn":16},{"ruleId":"57","severity":1,"message":"58","line":16,"column":15,"nodeType":"59","endLine":16,"endColumn":63},"no-native-reassign",["60"],"no-negated-in-lhs",["61"],"react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'comments'. Either include it or remove the dependency array.","ArrayExpression",["62"],"React Hook useEffect has a missing dependency: 'totalCommentPerIssue'. Either include it or remove the dependency array.",["63"],"no-unused-vars","'show' is assigned a value but never used.","Identifier","unusedVar","jsx-a11y/anchor-is-valid","The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md","JSXOpeningElement","no-global-assign","no-unsafe-negation",{"desc":"64","fix":"65"},{"desc":"66","fix":"67"},"Update the dependencies array to be: [urlComment, pageComment, comments]",{"range":"68","text":"69"},"Update the dependencies array to be: [comments.length, totalCommentPerIssue]",{"range":"70","text":"71"},[2911,2936],"[urlComment, pageComment, comments]",[3059,3076],"[comments.length, totalCommentPerIssue]"]

README.md

@@ -1,58 +1,57 @@
-# CoderSchool FTW - * GitHub Project Team Name *
+# CoderSchool FTW - * Github Issues Team3 *
 
-Created with love by: `teammates.map(teammate => teammate.name)`
+Created with love by: Chau, Jun, Phuong and Prince
 
-View online at: `Your URL here`
+View online at: `https://happy-pasteur-03b555.netlify.app`
 
-One or two sentence summary of your project, anything fun that you liked. 
+It was really enjoyable growing familiar with Moment, React-Markdown, React-Bootstrap and, ofcourse, Github Issues!
 
-## Video Walkthrough
-
-Here's a walkthrough of implemented user stories.
+I'm faster and more confident with common/basic github features/commands. Especially, considering team work flow.
+-Prince
 
-To create a GIF, use [LiceCap](http://www.cockos.com/licecap/), [RecordIt](http://www.recordit.co), or [Loom](http://www.useloom.com), and link the image here in the markdown.
+## Video Walkthrough
 
-```
-<img src='http://i.imgur.com/link/to/your/gif/file.gif' title='Video Walkthrough' width='' alt='Video Walkthrough' />
-```
+<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/086fb9097f404d6fb64990c376842617" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
 
 ## User Stories
 
 The following **required** functionalities are completed:
 
-- [ ] The user can enter a repository in a search bar, click "search", and see the associated issues. The repository should be of the format `owner/repo-name`, e.g. `facebook/react`.
-- [ ] If the repository does not exist, the user should see a proper error message.
-- [ ] The user should be able to see the following information for each issue:
+- [X] The user can enter a repository in a search bar, click "search", and see the associated issues. The repository should be of the format `owner/repo-name`, e.g. `facebook/react`.
+- [X] If the repository does not exist, the user should see a proper error message.
+- [X] The user should be able to see the following information for each issue:
   - Issue Title with Number of the issue
   - Owner of the Issue
   - Owner Avatar
   - How long ago the issue was updated in a human-friendly format (e.g. 2 days ago) (Hint: [react-moment](https://www.npmjs.com/package/react-moment#installing))
   - Body of the Issue
   - Labels of the issue
-- [ ] The user should be able to see multiple pages of results, by clicking a pagination control.
+- [X] The user should be able to see multiple pages of results, by clicking a pagination control.
 
 The following **optional** features are implemented:
 
-- [ ] The user can see more details (**[including 5 comments of the issue](https://developer.github.com/v3/issues/comments/)**) in a modal that's opened by clicking on the title of the issue.
-- [ ] The user should be able to see the body of the issue rendered in markdown. (Hint: [react-markdown](https://github.com/rexxars/react-markdown))
-- [ ] Fetching is an asynchronous operation, so you should display a loading [spinner](https://www.npmjs.com/package/react-spinners) whenever the app loads data, and hide it once the corresponding API call has been completed.
-- [ ] Input Fuzzy Matching: the user should be able to type in either https://github.com/facebook/react or facebook/react, BOTH should work.
+- [X] The user can see more details (**[including 5 comments of the issue](https://developer.github.com/v3/issues/comments/)**) in a modal that's opened by clicking on the title of the issue.
+- [X] The user should be able to see the body of the issue rendered in markdown. (Hint: [react-markdown](https://github.com/rexxars/react-markdown))
+- [X] Fetching is an asynchronous operation, so you should display a loading [spinner](https://www.npmjs.com/package/react-spinners) whenever the app loads data, and hide it once the corresponding API call has been completed.
+- [X] Input Fuzzy Matching: the user should be able to type in either https://github.com/facebook/react or facebook/react, BOTH should work.
 - [ ] In the Issue Detail Modal, let implement an **infinite pagination** with a "Show More" button: Fetch 5 more comments whenever user clicks on the button. The button is disabled or hidden when all the comments have been loaded.
 - [ ] Users can create a new issue. (**Danger Warning**: If you attempt this task, please do so on a private repository. Don't spam the official facebook/react repo!)
 
 The following **additional** features are implemented:
 
 * [x] List anything else cool you did
 
-## Time Spent and Lessons Learned
+<!-- ## Time Spent and Lessons Learned
+
+Time spent: 12-20 hours spent in total.
+
 
-Time spent: **X** hours spent in total.
 
-Describe any challenges encountered while building the app.
+Describe any challenges encountered while building the app. -->
 
 ## License
 
-    Copyright [yyyy] [name of copyright owner]
+    Copyright [2021] [Chau, Jun, Phuong, Prince]
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.