chameleon-challenge

menu.jsx

/**
 * Release note
 * Dropdown component
 * 
 * This component is a dropdown menu that can be used to display a list of items.
 * It can be used to display a list of items that can be selected or a list of items that can be clicked.
 * This component can receive two lists of items, one for the main items and one for the secondary items.
 * Also, this component can receive a label that will be displayed on the button.
 * Finally, it can get the default selection from the server and display it as the selected item.
 */

import React, { useState, useEffect } from 'react';
import { httpGet, httpPatch } from 'lib/http';

export const Dropdown = ({ mainItems, secondaryItems, label }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [defaultSelection, setDefaultSelection] = useState();
  
  const onToggle = (e) => {
    setIsOpen(isOpen);
  }

  useEffect(() => {
    httpGet(`users/${userId}`).then(d => { setIsOpen(user[`dropdown_${name}`]) });
    
    const defaultSelection = httpPatch(`users/${userId}`, { [`dropdown_${name}`]: isOpen });
    setDefaultSelection(defaultSelection);
  }, [isOpen]);
  

  return (<>
    <div className="dropdown">
      <button type="button" className="dropdown-button" id="dropdownButton" aria-haspopup="true" aria-expended={isOpen} onClick={onToggle}>{label}</button>

    <form>
      <select className={`${isOpen ? 'dropdown-open' : ''} dropdown-menu dropdown-section`} aria-labelledby='dropdownButton' role="menu">
        <div>Items</div>
        {mainItems.map(item => <DropdownItem item={item} defaultSelection={defaultSelection} />)}
      </select>

      {
        secondaryItems !== undefined &&
        <select className={`${isOpen ? 'dropdown-open' : ''} dropdown-menu dropdown-section`}>
          <div>More items</div>
          {secondaryItems.map(item => <DropdownItem item={item} defaultSelection={defaultSelection} />)}
        </select>
      }
      </form>
    </div>
  </>);
}

const DropdownItem = ({ item, defaultSelection }) => {
  const selected = item.description === defaultSelection.description;

	return (
		<option selected={selected}>
			{item.link ? (
				<a href={item.link}>item.description</a>
			) : (
				<div>item.description</div>
			)}
		</option>
	);
};

new-pr-1.js

window.currentUser = { id: '19', name: 'Jane', email: '[email protected]' };

// users are like authors and profiles like commentors
// open a modal with commentor info when clicked

// ...

export const ActiveProfiles({ profiles, onLaunchProfile }) => {
  var active = [];
  const ONE_DAY = 24*60*1000;
  const ONE_DAY_AGO = new Date(new Date().getTime()-ONE_DAY).toISOString();

  active = profiles.filter(function(profile) {
    return !profile.disabled && profile['last_seen_time'] > ONE_DAY_AGO;
  });

  const isCurrentUser = active.length === 1 && active[0].email  === window.currentUser.email;

  return (
    <div>
      { !isCurrentUser &&
      active.map(function(a) {
        return <div onClick={() => onLaunchProfile(a.name, a.email)}>{a.name} - {a.email}</div>
      })}
    </div>
  )
}

pr-1.js

window.currentUser = { id: '19', name: 'Jane', email: '[email protected]' };

// users are like authors and profiles like commentors
// open a modal with commentor info when clicked

...

export const  ActiveProfiles({ profiles, onLaunchProfile }) => {
  var active = [];

  // I believe it's better if you use a filter function instead of a for loop, because it's more declarative and easier to read.
  for(i=0; i < profiles.length; i++) {
    // Maybe you can use a constant for the 24 hours and for the date, so it's easier to change it later and to undertand the code.
    if(!profiles[i].disabled && profiles[i]['last_seen_time'] > new Date(new Date().getTime()-(24*60*1000)).toISOString()) { // within the last 24 hours
      active.push(profiles[i]);
    }
  }
  
  // I think it's better to create a constant and to use a ternary operator to show the active profiles or not,
  // because it's more declarative and easier to read.
  if(active.length == 1 && active[0].email  === window.currentUser.email) {
    active.length = 0;
  }

  return (
    <div>
       {active.map(function(a) { return <div onClick={() => onLaunchProfile(a.name, a.email)}>{a.name} - {a.email}</div> })}
    </div>
  )
}