Working "hide not selected" overlay button

src/components/CourseVisibility.jsx

@@ -1,11 +1,11 @@
 import { Icon } from './Icon.jsx'
 
-export const ToolOverlay = ({ visibility, toggleVisibility }) => (
+export const ToolOverlay = ({ visibility, toggleVisibility, onClose }) => (
     <div class="overlay">
         <button class="icon primary" onClick={toggleVisibility}>
             <Icon name={visibility ? 'visibility' : 'visibility_off'} />
         </button>
-        <button class="icon">
+        <button class="icon" onClick={onClose}>
             <Icon name="close" />
         </button>
     </div>

src/components/EventsView.jsx

@@ -127,8 +127,6 @@ const WorkWeekView = ({ events }) => {
 const WorkWeekVerticalView = ({ events, selection, setSelection, hideOtherCourses }) => {
     const selectionSet = new Set(selection)
 
-    console.log(hideOtherCourses)
-
     const eventsByWeekday = _.groupBy(
         !hideOtherCourses ? events : events.filter(e => selectionSet.has(e.name)),
         event => event.start.getDay()
@@ -273,10 +271,14 @@ const WorkWeekVerticalView = ({ events, selection, setSelection, hideOtherCourse
     )
 }
 
-const CourseView = ({ events, selection, setSelection }) => {
-    const eventsByCourse = _.groupBy(events, 'name')
+const CourseView = ({ events, selection, setSelection, hideOtherCourses }) => {
     const selectionSet = new Set(selection)
 
+    const eventsByCourse = _.groupBy(
+        !hideOtherCourses ? events : events.filter(e => selectionSet.has(e.name)),
+        'name'
+    )
+
     const [currentlyHovered, setCurrentlyHovered] = useState(null)
     const element = useRef()
 
@@ -312,7 +314,7 @@ const CourseView = ({ events, selection, setSelection }) => {
                         data-course-id={name}
                         onClick={() => {
                             if (!selectionSet.has(name)) setSelection([...selection, name])
-                            else setSelection(selection.filter(name => name !== name))
+                            else setSelection(selection.filter(n => n !== name))
                         }}
                     >
                         <div class="title">
@@ -351,11 +353,9 @@ const viewModeMap = {
 export const EventsView = ({ mode, ...viewProps }) => {
     const Mode = viewModeMap[mode]
 
-    const [selectedCourses, setSelectedCourses] = useState([])
-
     return (
         <div class="events-view">
-            <Mode selection={selectedCourses} setSelection={setSelectedCourses} {...viewProps} />
+            <Mode {...viewProps} />
         </div>
     )
 }