Skip to content
This repository has been archived by the owner on Jan 16, 2022. It is now read-only.

refactor: convert Author component to hooks #150

Merged
merged 10 commits into from
Oct 6, 2019

Conversation

bighuggies
Copy link
Contributor

@bighuggies bighuggies commented Oct 2, 2019

Type: refactor

The following has been addressed in the PR: #116

  • Unit or Functional tests are included in the PR
    Minor changes had to be made to the mocking in the existing tests to enable hooks. The tests are also more typesafe.

Description:

  • Convert <Author /> to a function component
  • Replace render prop context consumer with useContext hook
  • Removed some indirection in the JSX by inlining functions
  • Add missing types to packageMeta (is there a better way to do this?)

Comment on lines +44 to +46
dist: { fileCount: 0, unpackedSize: 0 },
},
_uplinks: {},
Copy link
Contributor Author

Choose a reason for hiding this comment

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

These are not needed for the test but were missing before. The type error was hidden by using jest.fn

@bighuggies
Copy link
Contributor Author

bighuggies commented Oct 2, 2019

Tests failing - I think it's a platform or version issue (I'm on Windows). Running yarn install && yarn test on master fails on my machine due to different generated classes.

Fixed by running the tests on MacOS

@bighuggies bighuggies force-pushed the ah/author-component-hooks branch from 834b0e4 to 0ba12a1 Compare October 3, 2019 08:30
src/components/Author/Author.tsx Outdated Show resolved Hide resolved

describe('<Author /> component', () => {
beforeEach(() => {
jest.resetAllMocks();
});

const component = (packageMeta: React.ContextType<typeof DetailContext>['packageMeta']): JSX.Element => (
Copy link
Contributor

Choose a reason for hiding this comment

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

Hmmm, as it is a component, it must be capitalize and have a more descriptive name

Copy link
Contributor

Choose a reason for hiding this comment

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

I would also write this component outside of the describe<'Author .....

Copy link
Member

Choose a reason for hiding this comment

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

component ==> mockAuthorComponent . It has to be lower case since is a function. Other popular naming way might be withAuthorComponent.

Copy link
Contributor

Choose a reason for hiding this comment

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

Hmm unfortunately I don't agree with you @juanpicado it returns an JSX element and according to the standards it should be capitalize...Please see that also Function Components are functions

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think the main difference is that this doesn't take props, you can't use it as a JSX element.

That's why I didn't consider it a component and why I used lowercase, it's more of a function that returns JSX.

Copy link
Member

Choose a reason for hiding this comment

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

@priscilawebdev any last comment here? or can we merge?

Copy link
Contributor

Choose a reason for hiding this comment

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

@juanpicado no...We can merge :-)

types/packageMeta.ts Show resolved Hide resolved
src/components/Package/Package.tsx Outdated Show resolved Hide resolved
@priscilawebdev
Copy link
Contributor

@bighuggies PR looks great! Thank you so much 👏, it needs just some minor changes..please check my comments.

@codecov-io
Copy link

codecov-io commented Oct 4, 2019

Codecov Report

❗ No coverage uploaded for pull request base (master@a365ec5). Click here to learn what that means.
The diff coverage is 90.9%.

Impacted file tree graph

@@            Coverage Diff            @@
##             master     #150   +/-   ##
=========================================
  Coverage          ?   82.97%           
=========================================
  Files             ?       97           
  Lines             ?      928           
  Branches          ?      163           
=========================================
  Hits              ?      770           
  Misses            ?      141           
  Partials          ?       17
Impacted Files Coverage Δ
src/components/Package/Package.tsx 100% <ø> (ø)
src/components/Author/Author.tsx 90.9% <90.9%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a365ec5...580d257. Read the comment docs.

Copy link
Member

@juanpicado juanpicado left a comment

Choose a reason for hiding this comment

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

hi @bighuggies , after check the changes, seems something is broken.
Screen Shot 2019-10-04 at 6 34 50 PM
it should looks like
Screen Shot 2019-10-04 at 6 34 54 PM
or you can double check here

https://registry.verdaccio.org/-/web/detail/jquery/v/2.2.1

I haven't dug enough to see the reason, but let me know whether you have troubles to solve it. I can help.

@bighuggies
Copy link
Contributor Author

bighuggies commented Oct 5, 2019

That seems to be an issue on master as well.

A quick git bisect finds this change is probably responsible: f84fd79?w=1#diff-8b0edc064390f472a826cacf9ea97dc4R6

I will open a separate PR to fix it 👍

EDIT: #160

@juanpicado
Copy link
Member

Thanks @bighuggies

Copy link
Member

@juanpicado juanpicado left a comment

Choose a reason for hiding this comment

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

Great job @bighuggies !

@priscilawebdev
Copy link
Contributor

thank you @bighuggies... yeah the Tooltip import was wrong.. I need to check why the tests passed...good job!

@priscilawebdev priscilawebdev merged commit d2f1f1c into verdaccio:master Oct 6, 2019
@bighuggies bighuggies deleted the ah/author-component-hooks branch October 29, 2019 21:51
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants