Skip to content

Conversation

@alecmerdler
Copy link
Contributor

Description

Upgrade React to use hooks instead of class components. Refactors some components to be examples of how to use and test React hooks.

Changes

  • Refactored <DownloadButton>, <CopyToClipboard>, <PullSecret> to be functional components with useState() and added tests
  • Refactored <Timestamp> to be stateless functional component and moved setInterval() logic to Redux
  • Fill in type generics for components that extend PromiseComponent (rewritten in TypeScript)

Next Steps

  • Implement useSafetyFirst custom hook to replace extend SafetyFirst
  • Upgrade to TypeScript 3
  • Continue to refactor complex, buggy stateful components to use hooks

Addresses https://jira.coreos.com/browse/CONSOLE-1287

@openshift-ci-robot openshift-ci-robot added approved Indicates a PR has been approved by an approver from all required OWNERS files. size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files. labels Apr 18, 2019
@alecmerdler alecmerdler requested a review from spadgett April 18, 2019 18:17
@spadgett
Copy link
Member

Nice!

import k8sReducers from './module/k8s/k8s-reducers';
import UIReducers from './ui/ui-reducers';

/**
Copy link
Contributor

Choose a reason for hiding this comment

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

Curious if it would be helpful to make it a separate file here, redux-thunk.js just to make this really really obvious (should anyone care).

@benjaminapetersen
Copy link
Contributor

I'm assuming the desired direction forward is to use hooks instead of classes. With an influx of contributors on the way, would it be wise to put some part of your Description on the README.md or perhaps a CONTRIBUTING.md doc, to help encourage the correct direction?

Copy link
Member

@spadgett spadgett left a comment

Choose a reason for hiding this comment

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

Nice work 👍

@@ -0,0 +1,43 @@
/* eslint-disable no-undef, no-unused-vars */
Copy link
Member

Choose a reason for hiding this comment

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

Thank you for adding all of the new tests!

/** @type {React.SFC<{namespace: K8sResourceKind}>} */
export const PullSecret = (props) => {
const [isLoading, setIsLoading] = React.useState(true);
const [data, setData] = React.useState(undefined);
Copy link
Member

Choose a reason for hiding this comment

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

Hooks look great

@spadgett spadgett added this to the v4.2 milestone Apr 18, 2019
@alecmerdler
Copy link
Contributor Author

/retest

Copy link
Member

@spadgett spadgett left a comment

Choose a reason for hiding this comment

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

Let's do it 👍

/lgtm

@openshift-ci-robot openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Apr 18, 2019
@openshift-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: alecmerdler, spadgett

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@openshift-merge-robot openshift-merge-robot merged commit 262eb81 into openshift:master-next Apr 18, 2019
@alecmerdler alecmerdler deleted the CONSOLE-1287 branch January 24, 2020 19:58
@spadgett spadgett added the kind/dependency-change Categorizes issue or PR as related to changing dependencies label Jul 28, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

approved Indicates a PR has been approved by an approver from all required OWNERS files. kind/dependency-change Categorizes issue or PR as related to changing dependencies lgtm Indicates that a PR is ready to be merged. size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants