Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Brandon buggy interview question #12

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Brandon buggy interview question #12

wants to merge 3 commits into from

Conversation

brandonballinger
Copy link

Pull Request Template

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Fixes # (issue)

Type of change

Please delete options that are not relevant.

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

  • Test A
  • Test B

Test Configuration:

  • Firmware version:
  • Hardware:
  • Toolchain:
  • SDK:

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules

kyh
kyh reviewed Dec 6, 2018
View reviewed changes
src/components/chart/buggy-basic-chart.js

constructor(props) {
super(props);
this.svgWidthPx = 300;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a bug but the candidate should point out that the graph isn't responsive and may be cut off on different mobile devices

src/components/chart/buggy-basic-chart.js
heartRateToY(heartRate) {...} // implementation elided for brevity

refreshCardiogramData() {
this.sendJSONRequestToServer.then(function(responseJson) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug with scope here since it's not using an arrow function

src/components/chart/buggy-basic-chart.js
{
_.map(this.props.cardiogram.data, (b) => {
const y = this.heartRateToY(b.value);
return <rect
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good practice to add parentheses for return or you may run into https://github.com/Cardiogram/Cardiogram/pull/4490

src/components/chart/buggy-basic-chart.js
*
* TODO(brandon): fix all these darn bugs!
*/
export default class BuggyHeartRateChart extends React.Component {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Candidate may point out that we should use a functional component or extend React.PureComponent since we don't mutate the state/props

src/components/chart/buggy-basic-chart.js
return (
<div
class="chart"
onClick={this.refreshCardiogramData}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

onClick listeners on divs require role for accessability

src/components/chart/buggy-basic-chart.js
// 2. What type of object does render() return? What does React do with this object in order to update the DOM?
// 3. Implement heartRateToY()
// 4. How would you extend this to implement pinchToZoom?
//
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another question to ask is how we can improve the performance of rendering this chart.

  • Since all these calculations are done in the render method, we could memoize timestamp -> x and heartRate -> y so that we don't need to recalculate the entire graph on each render

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kyh kyh kyh left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@brandonballinger @kyh