Refactor every react component to use react-hooks

[razvanilin]

How to contribute to this issue:

• Scroll down below to check the existing PRs so you don't open a PR for a component waiting for review
• Refactor components based on the description below - also check the guidelines for PRs
• Reference this issue with #58 in the PR description so we can track which components are being worked on
• Open one PR per component

Examples of final results:

• Easy, clean example
• Extremely long and complicated example

The refactoring should address the following:

class components => functional components

class CoolComponent {
  constructor(props) {}
}

// to

function CoolComponent(props) {
  // deconstruct all the props here, at the beginning
  const { someProp, anotherOne } = props;
}

Lifecycle methods switched to useEffect

componentDidMount()

// to

useEffect(() => {}, []);

componentDidUnmount()

// to

useEffect(() => {
  return () => {
    // do stuff here when closing down the component
  }
}, []);

componentDidUpdate()

// to

useEffect(() => {}, [someProp]);
// someProp should be the prop or multiple props that the component should watch for

Internal this.state => useState

this.state = {
  loading: true,
};

// to

const [loading, setLoading] = useState(true);

All previous class methods should now be constant variables

class CoolComponent {
  _someMethod = () => {}
}

// to

function CoolComponent() {
  const _someMethod = () => {};
}

[HunainHumail]

I would like to work on this issue to convert the class components to functional components.
Please assign me this issue
Thanks

[razvanilin]

I would like to work on this issue to convert the class components to functional components.
Please assign me this issue
Thanks

Hi, thanks for your interest. Please read the issue carefully. This is not to be assigned since it will need multiple PRs from multiple people. Others already created PRs (as you can see above)

[github-actions]

Marked as stale because of inactivity. Feel free to comment if you still have this issue.