JSFiddle - React, Tailwind, and code Playground

[ASSIGNMENT] Close Frontend Application Quiz

by Marco Abate

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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/vanilla.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);
  cursor: pointer;
  transform: scale3d(1, 1, 1);
  opacity: 0.6;
  transition: transform .3s ease, opacity .3s ease;
}

/* 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;
}

.List__item--selected {
	transform: scale3d(1.1, 1.1, 1.1);
	opacity: 1;
}

React

const { Fragment, memo, useState, useMemo, useCallback, useEffect } = React;
const createStore = zustandVanilla.default;

// 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.

// Creating vanillajs store using Zustand api
const store = createStore(() => ({ selectedItems: [] }))

const ItemComponent = ({ name, color }) => {

	// Local component state fir selection feature
	const [selected, setSelected] = useState(store.getState().selectedItems.map((item) => item.name).includes(name))

	// Memoized variable to handle item color and selection className
	const className = useMemo(() => {
		const classNames = [`List__item List__item--${color}`];
		if(selected) classNames.push('List__item List__item--selected');
		return classNames.join(' ');
	}, [color, selected])
	
	// It performs local state and vanilla state changes re-rendering only related component
	const onClick = useCallback(() => {
		const state = store.getState()
		const selectedItems = state.selectedItems
		if(selectedItems.map((item) => item.name).includes(name)) {
			setSelected(false)
			store.setState({
				...state,
				selectedItems: selectedItems.filter((item) => item.name !== name)
			})
		} else {
			setSelected(true)
			store.setState({
				...state,
				selectedItems: [...selectedItems, { name, color }]
			})
		}
	}, [name])
	
	return (
		<Fragment>
			<li onClick={onClick} className={className}>{name}</li>
		</Fragment>
	)
}

// Memoized Item component in order to avoid re-renders triggered by parent component
const Item = memo(ItemComponent);

const List = ({ items }) => {

	// Local...