Chameleon Technical exercise - Frontend Engineer

menu.tsx

/* 
Dropdown Component
The Dropdown component is a reusable React component that renders a dropdown menu with customizable items. It supports a main menu and an optional "More items" section for additional menu items.

Usage
Install the required dependencies.

Import the Dropdown component into your React application.

Use the Dropdown component in your JSX code, providing the necessary props.

Customize the menuItems array to define the items in the dropdown menu. Each menu item should have a label for display and an href for the link destination.

Customize the optional numberOfInitialMenuItems prop to specify the number of items to display in the main menu before moving the rest to the "More items" section. If the number of menu items exceeds this value, the extra items will be placed in the "More items" section.

Style the dropdown menu and its items according to your application's design.

*/

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

interface MenuItem {
  label: string;
  href: string;
}

interface DropdownProps {
  key: string;
  label: string;
  userId: string;
  name: string;
  menuItems: MenuItem[];
  numberOfInitialMenuItems?: number
}

interface User {
  dropdown_name: boolean;
}

export const Dropdown = ({ key, label, userId, name, menuItems, numberOfInitialMenuItems = 4 }: DropdownProps) => {
  const [isOpen, setIsOpen] = useState(false);
  
  useEffect(() => {
      httpGet(`users/${userId}`).then((user: User) => { setIsOpen(user[`dropdown_${name}`]) });
  }, [userId, name]);
  
  const onToggle = () => {
    setIsOpen(currentState => {
      httpPatch('user', { [`menu-state-${key}`]: !currentState })
      return !currentState;
    });
  }

  let mainMenuItems: MenuItem[] = [], moreMenuItems: MenuItem[] = [];

  if (numberOfInitialMenuItems && menuItems.length > numberOfInitialMenuItems) {
    mainMenuItems = menuItems.slice(0, numberOfInitialMenuItems);
    moreMenuItems = menuItems.slice(numberOfInitialMenuItems);
  } else {
    mainMenuItems = menuItems;
  }

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

      <ul className={`${isOpen ? 'dropdown-open' : ''} dropdown-menu dropdown-section`} aria-labelledby='dropdownButton' role="menu">
        <div>Items</div>
        {mainMenuItems.map((menuItem, index) => <DropdownItem key={index} menuItem={menuItem} />)}
      </ul>

     {
      moreMenuItems.length > 0 && (
        <ul className={`${isOpen ? 'dropdown-open' : ''} dropdown-menu dropdown-section`}>
          <div>More items</div>
          {moreMenuItems.map((menuItem, index) => <DropdownItem key={index} menuItem={menuItem} />)}
        </ul>
      )
     }
    </div>
  );
}

const DropdownItem = ({ menuItem }: { menuItem: MenuItem }) => {
  return <li><a href={menuItem.href}>{menuItem.label}</a></li>;
}

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

// PR Comments
// - The ActiveProfile arrow function is missing an "=" between "ActiveProfiles" and "({ profiles, onLaunchProfile }"
// - Use let instead of var
// - Instead of `active.length = 0`, just set back active to an empty array (i.e active = []`
// - Format the return section to fall on multiple lines for easy readability
// - Conditionally return and render a "No active profile" component if the active array is empty.

...

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

  for(i=0; i < profiles.length; i++) {
    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]);
    }
  }
  
  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>
  )
}