JSFiddle - React, Tailwind, and code Playground

[ASSIGNMENT] Close Frontend Application Quiz

by sridhar reddy

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);
  border: 4px solid transparent;
  transition: 150ms border ease-in;
}

.List__item:hover {
  cursor: pointer;
  border-color: #009688;
}

.List__item.selected {
  border-color: #009688;
}

.List--Selected {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.List--Selected__item {
  padding: 4px;
  border: 1px dashed rgba(0, 0, 0, 0.5);
}

/* 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, useCallback, useState, useMemo, memo } = 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.

const List = ({ items }) => {
  const [updatedItems, setUpdatedItems] = useState(items);
 
	const handleClick = useCallback((item) => {
  	const selectedItems = updatedItems.map((uItem) => {
    	if (uItem.name === item.name) {
      	return {
        	...uItem,
          isSelected: uItem.isSelected ? true : false,
        }
      }
      return { ...uItem };
    });
    setUpdatedItems([selectedItems]);
  }, [updatedItems, setUpdatedItems]);
  
  const selectedItems = useMemo(() => {
  	return updatedItems.filter(uItem => uItem.isSelected);
  }, [updatedItems])
  
	return (
    <Fragment>
      {
      	selectedItems.length ? (
        		<ul className="List--Selected">
              {
            		selectedItems.map((item) => <li className="List--Selected__item" key={item.name}>{item.name}</li>)
               }
              </ul>
          
        ) : null
      }
      <ul className="List">
        {updatedItems.map((item, index) => <ListItem key={`${item.name}-${index}`} item={item} onClick={handleClick}  />)}
      </ul>
    </Fragment>
  )
};

const ListItem = memo(({ item, onClick }) => {
	const onItemClick = useCallback(
  	() => {
      onClick(item);
    },
  [item, onClick]);
  console.log('re-render');
  return (
  	<li key={item.name} className={`List__item List__item--${item.color} ${item.isSelected ? 'selected' : ''}`}
        onClick={onItemClick}>
          {item.name}
    </li>
  )
});

//...