From 28f4c8b24765aa0f98f4e61e1dda29c0b9c94f76 Mon Sep 17 00:00:00 2001
From: Nathan Smith <nathan@hotseat.io>
Date: Sun, 27 Aug 2023 14:25:45 -0700
Subject: [PATCH] Restore frontend

---
 .../ListCard/SectionDrawer/DrawerHeader.tsx   |  48 --------
 .../ListCard/SectionDrawer/RadioGroup.tsx     |  66 ----------
 .../ListCard/SectionDrawer/index.tsx          |  90 --------------
 .../components/ListCard/SectionRow.tsx        | 113 ++++++++----------
 .../components/ListCard/SideBar.tsx           |  88 --------------
 5 files changed, 52 insertions(+), 353 deletions(-)
 delete mode 100644 app/javascript/components/ListCard/SectionDrawer/DrawerHeader.tsx
 delete mode 100644 app/javascript/components/ListCard/SectionDrawer/RadioGroup.tsx
 delete mode 100644 app/javascript/components/ListCard/SectionDrawer/index.tsx
 delete mode 100644 app/javascript/components/ListCard/SideBar.tsx

diff --git a/app/javascript/components/ListCard/SectionDrawer/DrawerHeader.tsx b/app/javascript/components/ListCard/SectionDrawer/DrawerHeader.tsx
deleted file mode 100644
index 3d897383..00000000
--- a/app/javascript/components/ListCard/SectionDrawer/DrawerHeader.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react'
-import {Fragment, useState} from 'react'
-import {Dialog, Transition} from '@headlessui/react'
-import {
-  ArchiveBoxIcon,
-  Bars3BottomLeftIcon,
-  Bars4Icon,
-  ClockIcon,
-  HomeIcon,
-  UserCircleIcon as UserCircleIconOutline,
-  XMarkIcon,
-  MapPinIcon,
-} from '@heroicons/react/24/outline'
-import {
-  BellIcon,
-  CalendarIcon,
-  ChatBubbleLeftEllipsisIcon,
-  CheckCircleIcon,
-  LockOpenIcon,
-  MagnifyingGlassIcon,
-  PencilIcon,
-  TagIcon,
-  UserCircleIcon as UserCircleIconMini,
-} from '@heroicons/react/20/solid'
-
-export default function DrawerHeader() {
-  return (
-    <aside className="mb-6">
-      <h2 className="sr-only">Details</h2>
-      <div className="flex flex-col">
-        <div className="flex items-center space-x-2">
-          <MapPinIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
-          <span className="text-sm font-medium text-gray-900">Entrepreneurs Hall C124</span>
-        </div>
-        <div className="flex items-center space-x-2">
-          <ClockIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
-          <span className="text-sm font-medium text-gray-900">TR 12-1:15</span>
-        </div>
-        <div className="flex items-center space-x-2">
-          <CalendarIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
-          <span className="text-sm font-medium text-gray-900">
-            Created on <time dateTime="2020-12-02">Dec 2, 2020</time>
-          </span>
-        </div>
-      </div>
-    </aside>
-  )
-}
diff --git a/app/javascript/components/ListCard/SectionDrawer/RadioGroup.tsx b/app/javascript/components/ListCard/SectionDrawer/RadioGroup.tsx
deleted file mode 100644
index 87c445bb..00000000
--- a/app/javascript/components/ListCard/SectionDrawer/RadioGroup.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from 'react'
-import {useState} from 'react'
-import {RadioGroup} from '@headlessui/react'
-import {clsx} from 'clsx'
-
-const plans = [
-  {name: 'Not Following'},
-  {name: 'Plan', description: 'Add course to your quarter plan.'},
-  {
-    name: 'Notify',
-    description: 'Get text message alerts about the course. Will use one of your X notification tokens.',
-  },
-  {name: 'Enroll', description: 'Add to your enrolled courses.'},
-]
-
-export default function Example() {
-  const [selected, setSelected] = useState(plans[0])
-
-  return (
-    <RadioGroup value={selected} onChange={setSelected}>
-      <RadioGroup.Label className="sr-only"> Server size </RadioGroup.Label>
-      <div className="space-y-4">
-        {plans.map((plan) => (
-          <RadioGroup.Option
-            key={plan.name}
-            value={plan}
-            className={({checked, active}) =>
-              clsx(
-                checked ? 'border-transparent' : 'border-gray-300',
-                active ? 'border-indigo-500 ring-2 ring-indigo-500' : '',
-                'relative block cursor-pointer rounded-lg border bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex sm:justify-between'
-              )
-            }
-          >
-            {({active, checked}) => (
-              <>
-                <span className="flex items-center">
-                  <span className="flex flex-col text-sm">
-                    {/* @ts-expect-error */}
-                    <RadioGroup.Label as="span" className="font-medium text-gray-900">
-                      {plan.name}
-                    </RadioGroup.Label>
-                    {plan.description && (
-                      // @ts-expect-error
-                      <RadioGroup.Description as="span" className="text-gray-500">
-                        {plan.description}
-                      </RadioGroup.Description>
-                    )}
-                  </span>
-                </span>
-                <span
-                  className={clsx(
-                    active ? 'border' : 'border-2',
-                    checked ? 'border-indigo-500' : 'border-transparent',
-                    'pointer-events-none absolute -inset-px rounded-lg'
-                  )}
-                  aria-hidden="true"
-                />
-              </>
-            )}
-          </RadioGroup.Option>
-        ))}
-      </div>
-    </RadioGroup>
-  )
-}
diff --git a/app/javascript/components/ListCard/SectionDrawer/index.tsx b/app/javascript/components/ListCard/SectionDrawer/index.tsx
deleted file mode 100644
index 11a0d6dd..00000000
--- a/app/javascript/components/ListCard/SectionDrawer/index.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import * as React from 'react'
-import {Fragment, useState} from 'react'
-import {Dialog, Transition} from '@headlessui/react'
-import {XMarkIcon, MapPinIcon} from '@heroicons/react/24/outline'
-
-import DrawerHeader from './DrawerHeader'
-import RadioGroup from './RadioGroup'
-
-interface Props {
-  isOpen: boolean
-  onClose: () => void
-}
-
-export default function SectionDrawer({isOpen, onClose}: Props) {
-  return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      {/* @ts-expect-error */}
-      <Dialog as="div" className="relative z-10" onClose={onClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-in-out duration-100"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in-out duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 overflow-hidden">
-          <div className="absolute inset-0 overflow-hidden">
-            <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
-              <Transition.Child
-                as={Fragment}
-                enter="transform transition ease-in-out duration-100 sm:duration-500"
-                enterFrom="translate-x-full"
-                enterTo="translate-x-0"
-                leave="transform transition ease-in-out duration-100 sm:duration-500"
-                leaveFrom="translate-x-0"
-                leaveTo="translate-x-full"
-              >
-                <Dialog.Panel className="pointer-events-auto w-screen max-w-md">
-                  <div className="flex h-full flex-col divide-y divide-gray-200 bg-white shadow-xl">
-                    <div className="flex min-h-0 flex-1 flex-col overflow-y-scroll py-6">
-                      <div className="px-4 sm:px-6">
-                        <div className="flex items-start justify-between">
-                          <Dialog.Title className="text-lg font-bold text-gray-900">{'MGMT 1B: Lec 1'}</Dialog.Title>
-                          <div className="ml-3 flex h-7 items-center">
-                            <button
-                              type="button"
-                              className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                              onClick={onClose}
-                            >
-                              <span className="sr-only">Close panel</span>
-                              <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="relative mt-6 flex-1 px-4 sm:px-6">
-                        <DrawerHeader />
-                        <RadioGroup />
-                      </div>
-                    </div>
-                    <div className="flex flex-shrink-0 justify-end px-4 py-4">
-                      <button
-                        type="button"
-                        className="rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                        onClick={onClose}
-                      >
-                        Cancel
-                      </button>
-                      <button
-                        type="submit"
-                        className="ml-4 inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                      >
-                        Save
-                      </button>
-                    </div>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  )
-}
diff --git a/app/javascript/components/ListCard/SectionRow.tsx b/app/javascript/components/ListCard/SectionRow.tsx
index 7c201e94..28529a8a 100644
--- a/app/javascript/components/ListCard/SectionRow.tsx
+++ b/app/javascript/components/ListCard/SectionRow.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react'
-import {useState} from 'react'
 import {ClockIcon, MapPinIcon, UserIcon, UsersIcon, CalendarIcon} from '@heroicons/react/24/outline'
 
-import SectionDrawer from './SectionDrawer'
-import SideBar from './SideBar'
-
 import Badge from 'components/Badge'
 import type {BadgeColor} from 'components/Badge'
 
@@ -33,69 +29,64 @@ export default function SectionRow({
   section: {title, instructorCount, instructorLabel, timeLabel, locationLabel, termLabel, badgeLabel, badgeColor},
   actionButtons,
 }: SectionRowProps) {
-  const [isOpen, setIsOpen] = useState(false)
   return (
-    <>
-      <SectionDrawer isOpen={isOpen} onClose={() => setIsOpen(false)} />
-      <SideBar />
-      <li onClick={() => setIsOpen(true)}>
-        <div className="block hover:bg-gray-50 dark:hover:bg-gray-700">
-          <div className="flex items-center px-4 py-2 sm:px-6">
-            <div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
-              <div className="sm:flex-1 min-w-0">
-                <div className="flex flex-row items-center mb-0.5">
-                  <p className="text-base font-medium text-gray-700 dark:text-gray-200 truncate">{title}</p>
-                  {badgeLabel && badgeColor && (
-                    <Badge className="ml-2 inline-flex text-xs" label={badgeLabel} color={badgeColor} size="small" />
-                  )}
-                </div>
+    <li>
+      <div className="block hover:bg-gray-50 dark:hover:bg-gray-700">
+        <div className="flex items-center px-4 py-2 sm:px-6">
+          <div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
+            <div className="sm:flex-1 min-w-0">
+              <div className="flex flex-row items-center mb-0.5">
+                <p className="text-base font-medium text-gray-700 dark:text-gray-200 truncate">{title}</p>
+                {badgeLabel && badgeColor && (
+                  <Badge className="ml-2 inline-flex text-xs" label={badgeLabel} color={badgeColor} size="small" />
+                )}
+              </div>
 
-                <div className="sm:flex sm:space-x-3">
-                  {instructorLabel !== null && instructorCount !== null && (
-                    <p className="flex items-center text-sm text-gray-500">
-                      {instructorCount > 1 ? (
-                        <UsersIcon className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400 dark:text-gray-500" />
-                      ) : (
-                        <UserIcon className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400 dark:text-gray-500" />
-                      )}
-                      {instructorLabel}
-                    </p>
-                  )}
+              <div className="sm:flex sm:space-x-3">
+                {instructorLabel !== null && instructorCount !== null && (
+                  <p className="flex items-center text-sm text-gray-500">
+                    {instructorCount > 1 ? (
+                      <UsersIcon className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400 dark:text-gray-500" />
+                    ) : (
+                      <UserIcon className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400 dark:text-gray-500" />
+                    )}
+                    {instructorLabel}
+                  </p>
+                )}
 
-                  {termLabel && (
-                    <p className="flex items-center text-sm text-gray-500 dark:text-gray-400">
-                      <CalendarIcon
-                        className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400 dark:text-gray-500"
-                        aria-hidden="true"
-                      />
-                      {termLabel}
-                    </p>
-                  )}
-                  {timeLabel && (
-                    <p className="flex items-center text-sm text-gray-500 dark:text-gray-400">
-                      <ClockIcon
-                        className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400 dark:text-gray-500"
-                        aria-hidden="true"
-                      />
-                      {timeLabel}
-                    </p>
-                  )}
-                  {locationLabel && (
-                    <p className="flex items-center text-sm text-gray-500 dark:text-gray-400">
-                      <MapPinIcon
-                        className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400 dark:text-gray-500"
-                        aria-hidden="true"
-                      />
-                      {locationLabel}
-                    </p>
-                  )}
-                </div>
+                {termLabel && (
+                  <p className="flex items-center text-sm text-gray-500 dark:text-gray-400">
+                    <CalendarIcon
+                      className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400 dark:text-gray-500"
+                      aria-hidden="true"
+                    />
+                    {termLabel}
+                  </p>
+                )}
+                {timeLabel && (
+                  <p className="flex items-center text-sm text-gray-500 dark:text-gray-400">
+                    <ClockIcon
+                      className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400 dark:text-gray-500"
+                      aria-hidden="true"
+                    />
+                    {timeLabel}
+                  </p>
+                )}
+                {locationLabel && (
+                  <p className="flex items-center text-sm text-gray-500 dark:text-gray-400">
+                    <MapPinIcon
+                      className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400 dark:text-gray-500"
+                      aria-hidden="true"
+                    />
+                    {locationLabel}
+                  </p>
+                )}
               </div>
             </div>
-            <div className="ml-4 flex items-center flex-shrink-0 space-x-2">{actionButtons}</div>
           </div>
+          <div className="ml-4 flex items-center flex-shrink-0 space-x-2">{actionButtons}</div>
         </div>
-      </li>
-    </>
+      </div>
+    </li>
   )
 }
diff --git a/app/javascript/components/ListCard/SideBar.tsx b/app/javascript/components/ListCard/SideBar.tsx
deleted file mode 100644
index c0381a28..00000000
--- a/app/javascript/components/ListCard/SideBar.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import * as React from 'react'
-import { Fragment, useState } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
-import { XMarkIcon } from '@heroicons/react/24/outline'
-
-interface Props {
-  isOpen: boolean
-  onClose: () => void
-}
-
-export default function SideBar({ isOpen, onClose }: Props) {
-  return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      {/* @ts-expect-error */}
-      <Dialog as="div" className="relative z-10" onClose={onClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-in-out duration-500"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in-out duration-500"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 overflow-hidden">
-          <div className="absolute inset-0 overflow-hidden">
-            <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
-              <Transition.Child
-                as={Fragment}
-                enter="transform transition ease-in-out duration-500 sm:duration-700"
-                enterFrom="translate-x-full"
-                enterTo="translate-x-0"
-                leave="transform transition ease-in-out duration-500 sm:duration-700"
-                leaveFrom="translate-x-0"
-                leaveTo="translate-x-full"
-              >
-                <Dialog.Panel className="pointer-events-auto w-screen max-w-md">
-                  <div className="flex h-full flex-col divide-y divide-gray-200 bg-white shadow-xl">
-                    <div className="flex min-h-0 flex-1 flex-col overflow-y-scroll py-6">
-                      <div className="px-4 sm:px-6">
-                        <div className="flex items-start justify-between">
-                          <Dialog.Title className="text-lg font-medium text-gray-900">Panel title</Dialog.Title>
-                          <div className="ml-3 flex h-7 items-center">
-                            <button
-                              type="button"
-                              className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                              onClick={onClose}
-                            >
-                              <span className="sr-only">Close panel</span>
-                              <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="relative mt-6 flex-1 px-4 sm:px-6">
-                        {/* Replace with your content */}
-                        <div className="h-full border-2 border-dashed border-gray-200" aria-hidden="true" />
-                        {/* /End replace */}
-                      </div>
-                    </div>
-                    <div className="flex flex-shrink-0 justify-end px-4 py-4">
-                      <button
-                        type="button"
-                        className="rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                        onClick={onClose}
-                      >
-                        Cancel
-                      </button>
-                      <button
-                        type="submit"
-                        className="ml-4 inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                      >
-                        Save
-                      </button>
-                    </div>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  )
-}