refactor: convert exploreresultsbutton from class component to functional component #17987
Conversation
lyndsiWilliams
added
the
Superset-Community-Partners
| @@ -60,57 +52,55 @@ class ExploreResultsButton extends React.PureComponent { | |||
| return []; | |||
| } | |||
|
|
|||
| getQueryDuration() { | |||
| function getQueryDuration() { | |||
There was a problem hiding this comment.
Please convert all of your functions to arrow functions (I'll mark the others with comments)
| .asSeconds(); | ||
| } | ||
|
|
||
| getInvalidColumns() { | ||
| function getInvalidColumns() { |
There was a problem hiding this comment.
Please convert this to an arrow function.
| .map(col => col.name) | ||
| .filter(col => re1.test(col) || re2.test(col)); | ||
| } | ||
|
|
||
| datasourceName() { | ||
| const { query } = this.props; | ||
| function datasourceName() { |
There was a problem hiding this comment.
Please convert this to an arrow function.
| } | ||
| return datasourceName; | ||
| } | ||
|
|
||
| buildVizOptions() { | ||
| const { schema, sql, dbId, templateParams } = this.props.query; | ||
| function buildVizOptions() { |
There was a problem hiding this comment.
Please convert this to an arrow function.
Also - GH actions says that this function is defined but never used. If you come across any unused functions like this, please remove them.
| }; | ||
| } | ||
|
|
||
| renderTimeoutWarning() { | ||
| function renderTimeoutWarning() { |
There was a problem hiding this comment.
Please convert this to an arrow function.
Also - GH actions says that this function is defined but never used. If you come across any unused functions like this, please remove them.
| </> | ||
| ); | ||
| } | ||
| const allowsSubquery = props.database && props.database.allows_subquery; |
There was a problem hiding this comment.
| const allowsSubquery = props.database && props.database.allows_subquery; | |
| const allowsSubquery = props.database?.allows_subquery; |
Nit: This code can be cleaned with optional chaining.
| onClick={props.onClick} | ||
| disabled={!allowsSubquery} | ||
| tooltip={t( | ||
| 'Explore the result set in the data exploration viewwwwwwwwwwwwww', |
There was a problem hiding this comment.
| 'Explore the result set in the data exploration viewwwwwwwwwwwwww', | |
| 'Explore the result set in the data exploration view', |
| placement="top" | ||
| label="explore" | ||
| />{' '} | ||
| {t('Jason')} |
There was a problem hiding this comment.
| {t('Jason')} | |
| {t('Explore')} |
| getColumns() { | ||
| const { props } = this; | ||
| function ExploreResultsButton(props) { | ||
| function getColumns() { |
There was a problem hiding this comment.
Please convert this to an arrow function.
|
|
||
| getColumns() { | ||
| const { props } = this; | ||
| function ExploreResultsButton(props) { |
There was a problem hiding this comment.
Please convert this to an arrow function.
There was a problem hiding this comment.
All the others I completely agree with, but I think that this, being the functional component itself, does not need to be an arrow function.
You need to destructure props here, you can do that by console logging the props and writing them out individually, its more explicit.
There was a problem hiding this comment.
Hey @jcahela thanks for contributing! In addition to what Lyndsi suggested here, I think it would be great to convert it to typescript as well. Let me know if you'd like to do it in this PR or another. I am happy to help you with that!
SUMMARY
I converted the ExploreResultsButton from class component to functional component.
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
TESTING INSTRUCTIONS
ADDITIONAL INFORMATION