ChameleonDropdownFix.jsx

/* 
Prompt:
  We have defined a basic dropdown via the Dropdown and DropdownItem components below, with example usage
  in the ExampleNav component. The Dropdown and DropdownItem components have some problems, and also 
  have room for improvements (doesn't everything?) A couple items TODO here (make sure to explain with comments!)
  
  0. How are you today? 😊
  1. Please fix any obvious issues you see with the dropdown.
  2. Please then make improvements to the dropdown and make it a bit more React-y. Assume this was cobbled
     together or brought in hastily from StackOverflow.
  3. Given that this dropdown might form the basis of an Account picker, a searchable list of Product Tours, one
     step of a flow to configure alerting, etc... Please explore with text or code the way you would approach this.
  4. If we wanted to sync this dropdown selection to the server with
     httpPatch('user', { [`dropdown-state-${key}`]: {true,false} }) where would this be included OR how best to
     handle this (properties needing to be synced to the backend)?
  5. Anything else to add here?
  6. Unrelated to this, what is one new feature you would add to React?
  I would use React hooks for functional components instead of the class components.
  Hooks makes it easy to write clean code while managing state compared to the class components.
  
  PS: No need to worry about CSS, actually making it "run" etc...
 */

import React, {PureComponent} from 'react';
import { httpPatch } from 'lib/http';

class Dropdown extends PureComponent {
// fix the constructor typo
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
    };
  }

//   use arrow function to bind the this context 
  toggle = () =>{
    //const {isOpen} = this.state;
    // fix the isOpen state by assinging the new state to the negation of the original state
    //use previous state to  update the state
    this.setState((previousState) => ({
      isOpen: !previousState.isOpen
    }));
  }

  render() {
    const {isOpen} = this.state;
    // destructure children prop just like the label prop
    const {label, children} = this.props;

    return (
      <div className="dropdown">
      //fix the typo on the button from aria-expended to aria-expanded
        <button type="button" className="dropdown-button" id="dropdownButton" aria-haspopup="true" aria-expanded={isOpen} onClick={this.toggle}>{label}</button>

        <ul className={`${isOpen ? 'dropdown-open' : ''} dropdown-menu`} aria-labelledby="dropdownButton" role="menu">
          {children}
        </ul>
      </div>
    );
  }
}

class DropdownItem extends PureComponent {
  constructor(props){
    super(props)
    this.state={
    }
  }
  
//   define a handle click function using the arrow function to automatically bind this
handleClick = () => {
    const { href } = this.props;
    httpPatch('user', { [`dropdown-state-${href}`]: true });
  };
  render() {
//   destructure the props
  const { href, children } = this.props;
    // TODO implement me
    
//     add a return for the component contents to be rendered
    return (
      <li>
        <a href={href} onClick={this.handleClick}>
          {children}
        </a>
      </li>
    )
  }
}

class ExampleNav extends PureComponent {
  render() {
    return (
      <nav>
        <a href="/page1">Page 1</a>
        <Dropdown label="More items">
          <DropdownItem href="/page2">Page 2</DropdownItem>
          <DropdownItem href="/page3">Page 3</DropdownItem>
          <DropdownItem href="/page4">Page 4</DropdownItem>
        </Dropdown>
        <Dropdown label="Even more items">
          <DropdownItem href="/page5">Page 5</DropdownItem>
          <DropdownItem href="/page9">Page 9</DropdownItem>
        </Dropdown>
      </nav>
    );
  }
}