Legend responds to levels viewed

[kobryan0619]

Modifies which icons appear depending on what lessons and levels are open. The video below shows this change working.

Screen.Recording.2024-02-12.at.12.28.44.PM.mov

The original figma shows what it should look like in these different states.

Links

Ticket.

Testing story

I tested it locally. I have another ticket to write up tests and other pieces of the icon key feature.

Deployment strategy

Follow-up work

Future work will address the spacing between the boxes in the icon key.

Privacy

Security

Caching

PR Checklist:

• Tests provide adequate coverage
• Privacy and Security impacts have been assessed
• Code is well-commented
• New features are translatable or updates will not break translations
• Relevant documentation has been added or updated
• User impact is well-understood and desirable
• Pull Request is labeled appropriately
• Follow-up work items (including potential tech debt) are tracked and linked

[kobryan0619]

Note: At one point I wanted to move all this logic to the IconKey component but given that would require passing all the unitData to the child component, putting the logic here felt like a better choice.

[etaderhold]

I don't think this case calls for a useEffect. There's no side effect here, it's just a very simple bit of logic to determine rendering within this component.

Suggested change

	const [isViewingLevelProgress, setIsViewingLevelProgress] = useState(false);
	React.useEffect(() => {
	setIsViewingLevelProgress(expandedLessonIds.length > 0);
	}, [expandedLessonIds]);
	const isViewingLevelProgress = expandedLessonIds.length > 0;

[etaderhold]

Nice job using functional array methods here! I think useMemo is more appropriate for this case. Again, we're not causing any side effects such as calling an API, we're saving the results of a relatively expensive calculation. That's exactly what useMemo is for.

Suggested change

	React.useEffect(() => {
	if (expandedLessonIds.length > 0) {
	const hasValidatedLevel = unitData.lessons.some(
	lesson =>
	lesson.levels.some(level => level.isValidated) &&
	expandedLessonIds.includes(lesson.id)
	);
	setIsViewingValidatedLevel(hasValidatedLevel);
	} else {
	setIsViewingValidatedLevel(false);
	}
	}, [expandedLessonIds, unitData]);
	const isViewingValidatedLevel = React.useMemo(() => {
	return unitData.lessons
	.filter(lesson => expandedLessonIds.includes(lesson.id))
	.some(lesson => lesson.levels.some(level => level.isValidated));
	}, [expandedLessonIds, unitData]);

[kobryan0619]

Thanks - this makes sense to me after reading the useMemo documentation.