Course and professor modal

Needed to update Preact to get type support for onClose (thank the gods they fixed it three months ago)

Author: SheepTester

classrooms/components/search/ResultModal.tsx

@@ -0,0 +1,54 @@
+/** @jsxImportSource preact */
+/// <reference no-default-lib="true"/>
+/// <reference lib="dom" />
+/// <reference lib="deno.ns" />
+
+import { useEffect, useRef } from 'preact/hooks'
+import { Course } from '../../../scheduleofclasses/group-sections.ts'
+import { AbbrevHeading } from '../AbbrevHeading.tsx'
+
+export type ModalView =
+  | { type: 'course'; course: Course }
+  | { type: 'professor' }
+
+export type ResultModalProps = {
+  view: ModalView
+  open: boolean
+  onClose: () => void
+}
+export function ResultModal ({ view, open, onClose }: ResultModalProps) {
+  const ref = useRef<HTMLDialogElement>(null)
+
+  useEffect(() => {
+    if (ref.current && open) {
+      ref.current.showModal()
+    }
+  }, [open])
+
+  return (
+    <dialog
+      class='modal'
+      ref={ref}
+      onClick={e => {
+        if (e.target === e.currentTarget) {
+          e.currentTarget.close()
+        }
+      }}
+      onClose={onClose}
+    >
+      <form method='dialog' class='modal-body'>
+        {view.type === 'course' ? (
+          <AbbrevHeading
+            heading='h1'
+            abbrev={view.course.code}
+            class='modal-title-course-code'
+          >
+            {view.course.title}
+          </AbbrevHeading>
+        ) : (
+          'Professor Name'
+        )}
+      </form>
+    </dialog>
+  )
+}

classrooms/components/search/SearchBar.tsx

@@ -4,10 +4,13 @@
 /// <reference lib="deno.ns" />
 
 import { useState } from 'preact/hooks'
+import { Course } from '../../../scheduleofclasses/group-sections.ts'
 import { termCode } from '../../../terms/index.ts'
+import { useLast } from '../../../util/useLast.ts'
 import { Term, TermCache } from '../../lib/TermCache.ts'
 import { SearchIcon } from '../icons/SearchIcon.tsx'
-import { SearchData, SearchResults } from './SearchResults.tsx'
+import { ModalView, ResultModal } from './ResultModal.tsx'
+import { SearchData, SearchResults, View } from './SearchResults.tsx'
 
 type State =
   | { type: 'unloaded' }
@@ -35,9 +38,15 @@ export function SearchBar ({
 }: SearchBarProps) {
   const termsId = terms.map(term => termCode(term.year, term.quarter)).join(' ')
   const [query, setQuery] = useState('')
-  const [index, setIndex] = useState<number | null>(null)
+  const [index, setIndex] = useState(0)
+  const [showResults, setShowResults] = useState(true)
   const [state, setState] = useState<State>({ type: 'unloaded' })
   const loaded = state.type === 'loaded' && state.terms === termsId
+  const [viewing, setViewing] = useState<ModalView | null>(null)
+  const modalView = useLast<ModalView>(
+    { type: 'course', course: { code: '', title: '', groups: [] } },
+    viewing
+  )
 
   async function loadTerms (): Promise<void> {
     const maybePromise = termCache.requestTerms(terms, true)
@@ -75,9 +84,28 @@ export function SearchBar ({
     })
   }
 
+  function handleView (view: View) {
+    if (view.type === 'building') {
+      onBuilding(view.id)
+    } else if (view.type === 'course') {
+      if (state.type === 'loaded') {
+        const course = state.data.courses.find(
+          course => course.code === view.id
+        )
+        if (course) {
+          setViewing({ type: 'course', course })
+        }
+      }
+    }
+  }
+
   // TODO: show loading, offline errors with retry button
   return (
-    <div class={`search-wrapper ${visible ? '' : 'hide-search'}`}>
+    <div
+      class={`search-wrapper ${visible ? '' : 'hide-search'} ${
+        loaded && showResults && query !== '' ? 'showing-results' : ''
+      }`}
+    >
       <label class='search-bar'>
         <SearchIcon />
         <input
@@ -87,7 +115,8 @@ export function SearchBar ({
           value={query}
           onInput={e => {
             setQuery(e.currentTarget.value)
-            setIndex(null)
+            setIndex(0)
+            setShowResults(true)
           }}
           onKeyDown={e => {
             if (e.shiftKey || e.ctrlKey || e.altKey || e.metaKey) {
@@ -116,6 +145,7 @@ export function SearchBar ({
             }
           }}
           onFocus={() => {
+            setShowResults(true)
             if (
               state.type === 'unloaded' ||
               (state.type === 'loaded' && state.terms !== termsId)
@@ -125,20 +155,23 @@ export function SearchBar ({
           }}
         />
       </label>
-      {loaded && (
+      {loaded && showResults && (
         <SearchResults
           terms={terms}
           query={query}
           data={{ ...state.data, buildings }}
           index={index}
           onSelect={view => {
-            if (view.type === 'building') {
-              onBuilding(view.id)
-            }
-            console.log(view)
+            setShowResults(false)
+            handleView(view)
           }}
         />
       )}
+      <ResultModal
+        view={modalView}
+        open={viewing !== null}
+        onClose={() => setViewing(null)}
+      />
     </div>
   )
 }

classrooms/components/search/SearchResults.tsx

@@ -4,13 +4,14 @@
 /// <reference lib="deno.ns" />
 
 import { useMemo } from 'preact/hooks'
+import { Course } from '../../../scheduleofclasses/group-sections.ts'
 import { termName } from '../../../terms/index.ts'
 import { buildings } from '../../lib/buildings.ts'
 import { Term } from '../../lib/TermCache.ts'
 import { SearchResult } from './SearchResult.tsx'
 
 export type SearchData = {
-  courses: { code: string; title: string }[]
+  courses: Course[]
   professors: { first: string; last: string }[]
   buildings: string[]
 }

classrooms/public/styles.css

@@ -956,6 +956,12 @@ input[type='checkbox']:checked {
     right: 0;
     width: unset;
     margin: 10px;
+    max-height: calc(100% - 20px);
+  }
+  .showing-results {
+    margin: 0;
+    padding: 10px;
+    border-radius: 0;
   }
 }
 .hide-search {
@@ -1023,6 +1029,56 @@ input[type='checkbox']:checked {
   color: white;
 }
 
+.modal {
+  display: block;
+  visibility: hidden;
+  border: none;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  pointer-events: none;
+  user-select: none;
+  transition: visibility 0.5s, opacity 0.5s;
+}
+.modal[open] {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: unset;
+  user-select: text;
+}
+.modal:modal {
+  max-width: unset;
+  max-height: unset;
+}
+.modal::backdrop {
+  background: none;
+}
+.modal-body {
+  background-color: var(--modal);
+  box-shadow: var(--modal-shadow);
+  border-radius: 20px;
+  padding: 20px;
+  transform: scale(0.9);
+  transition: transform 0.5s;
+}
+.modal[open] .modal-body {
+  transform: none;
+}
+.modal-title-course-code {
+  font-size: 120px;
+  margin: 0;
+}
+
 .college-revelle {
   background-image: linear-gradient(120deg, #2045c5, #273b80);
   color: white;

deno.jsonc

@@ -1,8 +1,8 @@
 {
   "imports": {
     "deno_dom/": "https://deno.land/x/[email protected]/",
-    "preact": "https://esm.sh/preact@10.13.1",
-    "preact/": "https://esm.sh/preact@10.13.1/",
+    "preact": "https://esm.sh/preact@10.17.1",
+    "preact/": "https://esm.sh/preact@10.17.1/",
     "std/": "https://deno.land/[email protected]/"
   },
   "tasks": {