JSFiddle - React, Tailwind, and code Playground

[ASSIGNMENT] Close Frontend Application Quiz

by Mixail

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 {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 (performance).
// +4. Currently selected items should be visually highlighted.
// +5. Currently selected items' names should be shown at the top of the page.

const ListItem = React.memo(({name, color, onClick}) => {
  const [selected, setSelected] = React.useState(false);
  const onClickHandler = React.useCallback(() => {
    setSelected(!selected);
    onClick(name);
  }, [selected]);

  const className = [
    'List__item',
    `List__item--${color}`,
    selected ? 'List__item--selected' : '',
  ].join(' ');

  return (
    <li className={className} onClick={onClickHandler}>
      {name}
    </li>
  );
});

const ColorizedList = React.memo(({items, onToggle}) => {
  return (
    <ul className="List">
      {items.map(item => (
        <ListItem
          key={item.name}
          name={item.name}
          color={item.color}
          onClick={onToggle}
        />
      ))}
    </ul>
  );
});

const SelectedNames = ({selectedNames}) => {
  if (!selectedNames || !selectedNames.length) {
    return null;
  }

  return <div>Selected names: {selectedNames.join(', ')}</div>;
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'toggle':
      if (state.includes(action.payload)) {
        return state.filter(item => item !== action.payload);
      }

      return [...state, action.payload];
    default:
    	return state;
  }
};

const List = ({items}) => {
  const [state, dispatch] = React.useReducer(reducer, []);
  const toggleName = React.useCallback(name => {
    dispatch({type: 'toggle', payload: name});
  }, []);

  return (
    <Fragment>
      <SelectedNames selectedNames={state} />
      <ColorizedList items={items} onToggle={toggleName} />
    </Fragment>
  );
};

//...