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.

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

Upgrade React and Use Hooks #1456

Merged

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
@spadgett
Copy link
Member

Nice!


import { featureReducer, featureReducerName } from './features';
import { monitoringReducer, monitoringReducerName } from './monitoring';
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 👍

frontend/integration-tests/protractor.conf.ts Outdated Show resolved Hide resolved
@@ -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

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.

None yet

6 participants