Close Frontend Application Quiz (Fork) - 2

[ASSIGNMENT] Close Frontend Application Quiz

by Lisa French

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

CSS

.List {
  margin: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 60px;
  grid-gap: 16px;
}

.List__item {
  line-height: 60px;
  text-align: center;
  color: white;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
}

/* Taken from https://clrs.cc/ */

.List__item--navy {
  background-color: #001f3f;
}

.List__item--blue {
  background-color: #0074d9;
}

.List__item--aqua {
  background-color: #7fdbff;
}

.List__item--teal {
  background-color: #39cccc;
}

.List__item--olive {
  background-color: #3d9970;
}

.List__item--green {
  background-color: #2ecc40;
}

.List__item--lime {
  background-color: #01ff70;
}

.List__item--yellow {
  background-color: #ffdc00;
}

.List__item--orange {
  background-color: #ff851b;
}

.List__item--red {
  background-color: #ff4136;
}

.List__item--maroon {
  background-color: #85144b;
}

.List__item--fuchsia {
  background-color: #f012be;
}

.List__item--purple {
  background-color: #b10dc9;
}

.List__item--black {
  background-color: #111111;
}

.List__item--gray {
  background-color: #aaaaaa;
}

.List__item--silver {
  background-color: #dddddd;
}

React

const { memo, useMemo, useCallback, useState, Fragment } = React;


// Implement a feature to allow item selection with the following requirements:
// 1. Clicking an item selects/unselects it.
// 2. Multiple items can be selected at a time.
// 3. Make sure to avoid unnecessary re-renders of each list item in the big list (performance).
// 4. Currently selected items should be visually highlighted.
// 5. Currently selected items' names should be shown at the top of the page.
//
// Feel free to change the component structure at will.

      <div className="Chosen">
        {selected.map(name => (
          <div
            className="Selection__item"
            key={name}
            // style={{ borderColor: nameToColorMap[name] }}
          >
            {name}
          </div>
        ))}
        {selected.length === 0 && (
          <div className="SelectionBox">
            Select colors to begin
          </div>
        )}
      </div>

const ListSelections = props => {
	return (
    <div className="List__selections">
      {selected.map(name => (
        <div
          className="List__selections--item"
          key={props.name}
          // style={{ borderColor: nameToColorMap[name] }}
          >
          {props.name}
        </div>
      ))}
      {selected.length === 0 && (
        <div className="Selection__item-empty">
          Select colors to begin
        </div>
      )}
    </div>
  )
}

const ListItem = memo(props => {
  const { name, color, isSelected, onSelect } = props;
  
  const handleSelect = () => {
    onClick(name);
  };
  
  return (
    <div
      className={`List__item List__item--${color} ${
        isSelected ? "selected" : ""
      }`}
      onClick={handleSelect}
    >
      {name}
    </div>
  );
});

const List = ({ items }) => {
  const [selected, setSelected] = useState([]);
  
/*   const nameToColorMap = useMemo(() => {
    return items.reduce((acc, item) => {
      return {
        ...acc,
        [item.name]: item.color
 ...