Working "hide not selected" overlay button

index.html

@@ -9,7 +9,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />
 
     <link rel="stylesheet" href="/src/styles/main.scss">
 </head>

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>
     )
 }

src/main.jsx

@@ -45,11 +45,21 @@ const App = ({}) => {
 
     console.log(hideOtherCourses)
 
+    const [selectedCourses, setSelectedCourses] = useState([])
+
+    useEffect(() => {
+        if (selectedCourses.length === 0) {
+            setHideOtherCourses(false)
+        }
+    }, [selectedCourses])
+
     return (
         <>
             <Toolbar {...{ mode, setMode }} />
             <EventsView
                 mode={mode}
+                selection={selectedCourses}
+                setSelection={setSelectedCourses}
                 hideOtherCourses={hideOtherCourses}
                 start={new Date(2022, 10, 3)}
                 events={eventi.map(({ nome, dataInizio, dataFine, docenti, aule }) => ({
@@ -65,10 +75,16 @@ const App = ({}) => {
                     ),
                 }))}
             />
-            <ToolOverlay
-                visibility={hideOtherCourses}
-                toggleVisibility={() => setHideOtherCourses(s => !s)}
-            />
+            {selectedCourses.length > 0 && (
+                <ToolOverlay
+                    visibility={hideOtherCourses}
+                    toggleVisibility={() => setHideOtherCourses(s => !s)}
+                    onClose={() => {
+                        setSelectedCourses([])
+                        setHideOtherCourses(false)
+                    }}
+                />
+            )}
         </>
     )
 }

src/styles/main.scss

@@ -35,6 +35,7 @@ html {
     --accent-100: #d6ffc2;
     --accent-400: #6cc16c;
     --accent-500: #5aa05a;
+    --accent-900: #244624;
 }
 
 $device-s-width: 480px;
@@ -407,7 +408,7 @@ body {
         position: relative;
 
         display: grid;
-        grid-template-columns: max-content repeat(5, auto);
+        grid-template-columns: max-content repeat(5, minmax(auto, 1fr));
 
         height: 100%;
 
@@ -608,6 +609,8 @@ body {
             font-size: 22px;
         }
 
+        color: var(--accent-900);
+
         box-shadow: 0 0.25rem 0.75rem #00000033;
     }
 }