Admin UI ux improvements (#128)

* ui rework and context * type error * ui changes * event home page rework * ui changes * home page is null * ui changes * coomit * build errors * Modal closing * prettier * small adjustments * filter bar changes
streamethorg · Oct 31, 2023 · 4cff193 · 4cff193
1 parent 42694cb
commit 4cff193
Show file tree

Hide file tree

Showing 66 changed files with 627 additions and 624 deletions.
diff --git a/app/(home)/components/EventCard.tsx b/app/(home)/components/EventCard.tsx
@@ -38,7 +38,7 @@ const EventCard = ({ event }: { event: IEvent }) => {
   return (
     <a
       onClick={onCardClick}
-      className="cursor-pointer hover:bg-gray-50 transition-all">
+      className="cursor-pointer">
       <Card isAvailable={isAvailable}>
         <div className="aspect-video relative">
           <Image

diff --git a/app/(home)/components/FilterBar.tsx b/app/(home)/components/FilterBar.tsx
@@ -1,76 +1,35 @@
 'use client'
-import { useContext, useEffect, useState } from 'react'
-import { IEvent } from '@/server/model/event'
+import { useState, useRef } from 'react'
 import SearchFilter from '@/app/[organization]/[event]/archive/components/SearchFilter'
-import { FilterContext } from '@/components/context/FilterContext'
-
-const FilterBar = ({ events }: { events: IEvent[] }) => {
-  const { setFilterOptions } = useContext(FilterContext)
-  const [isShowCurrent, setIsShowCurrent] = useState(false)
-
-  const eventFilter = events.map((event) => {
-    return {
-      name: event.name,
-      value: event.id,
-      type: 'event',
-      filterFunc: async (item: IEvent) => {
-        return item.id === event.id
-      },
-    }
-  })
-
-  const handleTabClick = () => {
-    setFilterOptions([
-      {
-        name: 'date',
-        value: 'date',
-        type: 'date',
-        filterFunc: async (item: IEvent) => {
-          const endOfDay = new Date(item.end)
-          endOfDay.setHours(23, 59, 59, 999)
-
-          const startOfDay = new Date()
-          startOfDay.setHours(0, 0, 0, 0)
-
-          return isShowCurrent
-            ? endOfDay.getTime() <= Date.now()
-            : endOfDay.getTime() > startOfDay.getTime()
-        },
-      },
-    ])
-  }
+import { ISession } from '@/server/model/session'
+import { IEvent } from '@/server/model/event'
 
-  useEffect(() => {
-    handleTabClick()
-  }, [isShowCurrent])
+function FilterBar({ events }: { events?: IEvent[] }) {
+  const inputBarRef = useRef<HTMLDivElement>(null)
+
+  const eventFilters = events
+    ? events.map((event) => {
+        return {
+          name: event.name,
+          value: event.id,
+          type: 'event',
+          filterFunc: async (item: ISession) => {
+            return item.eventId === event.id
+          },
+        }
+      })
+    : []
 
   return (
-    <div className="bg-base p-4 sticky top-0 z-40 w-full flex justify-center items-center drop-shadow-md">
-      <div className=" w-full flex flex-col sm:flex-row items-center">
-        <div className="flex flex-row w-full justify-center md:justify-start">
-          <h1
-            className={` text-xl md:text-2xl font-bold  ${
-              isShowCurrent
-                ? 'text-secondary-text cursor-pointer'
-                : 'text-main-text'
-            } border-r-2 border-accent pr-4`}
-            onClick={() => setIsShowCurrent(false)}>
-            Upcoming events
-          </h1>
-          <h1
-            className={`text-xl md:text-2xl text-main-text font-bold ml-4 ${
-              !isShowCurrent
-                ? 'text-secondary-text cursor-pointer'
-                : 'text-main-text'
-            }`}
-            onClick={() => setIsShowCurrent(true)}>
-            Past events
-          </h1>
-        </div>
-        <div className="w-full max-w-[20rem] m-auto lg:ml-auto my-4">
+    <div
+      key={1}
+      className={` w-full max-w-[600px] m-auto z-50 bg-transparent rounded-xl text-white `}
+      ref={inputBarRef}>
+      <div className="flex flex-col justify-top items-start  w-full h-full">
+        <div className="flex flex-row w-full h-full items-center justify-center">
           <SearchFilter
-            filterOptions={eventFilter}
-            filterName="Search for an event..."
+            filterOptions={eventFilters}
+            filterName="Event name"
           />
         </div>
       </div>

diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx
@@ -19,8 +19,9 @@ export default async function Home() {
   //   })
 
   return (
-    <main className="flex flex-col bg-background w-screen mx-auto lg:overflow-hidden">
-      {/* <FilterBar events={allEvents} /> */}
+    <main className="flex flex-col  w-screen mx-auto  p-4 lg:overflow-hidden">
+
+       <FilterBar events={upComing} /> 
       {/* <p>Upcoming events</p> */}
       <EventList events={upComing} />
       {/* <p>Past events</p>

diff --git a/app/[organization]/[event]/(eventHome)/components/ComponentWrapper.tsx b/app/[organization]/[event]/(eventHome)/components/ComponentWrapper.tsx
@@ -0,0 +1,20 @@
+const ComponentWrapper = ({
+  sectionId,
+  children,
+}: {
+  sectionId?: string
+  children: React.ReactNode
+}) => {
+  return (
+    <div
+      style={{
+        backgroundColor: 'rgba(19,21,23,0.48)',
+      }}
+      id={sectionId}
+      className="my-2 md:my-4 before:relative w-full z-[1] backdrop-blur-sm  rounded-xl p-2 md:p-4 text-white ">
+      {children}
+    </div>
+  )
+}
+
+export default ComponentWrapper
diff --git a/app/[organization]/[event]/(eventHome)/components/HompageLogoAndBanner.tsx b/app/[organization]/[event]/(eventHome)/components/HompageLogoAndBanner.tsx
@@ -1,20 +1,46 @@
 import React from 'react'
 import { IEvent } from '@/server/model/event'
 import Image from 'next/image'
+import ReserveSpotButton from './ReserveSpotModal'
+import ComponentWrapper from './ComponentWrapper'
 const HomePageLogoAndBanner = ({ event }: { event: IEvent }) => {
   const { logo, banner } = event
 
   if (!logo && !banner) return null
 
   return (
-    <div className="relative w-full z-[1]">
+    <ComponentWrapper sectionId="home">
       <Image
+        className="rounded-lg"
         src={'/events/' + banner}
         alt="Event Cover"
         width={1500}
         height={500}
       />
-    </div>
+      <div id="home" className="flex flex-col p-4">
+        <div className=" flex-col flex space-y-2 md:flex-col">
+          <h1 className="text-4xl text-left font-bold">
+            {event.name}
+          </h1>
+          <div className=" flex flex-col space-y-4 text-left">
+            <p>
+              <span className="mr-2">&#128197;</span>When:{' '}
+              {new Date(event.start).toDateString()}
+            </p>
+            <p>
+              <span className="mr-2">&#9200;</span> Time:{' '}
+              {new Date(event.start).toLocaleTimeString()}
+            </p>
+            <p>
+              <span className="mr-2">&#127759;</span> Where:{' '}
+              {event.location}
+            </p>
+            {/* <ReserveSpotButton event={event} /> */}
+            <p>{event.description}</p>
+          </div>
+        </div>
+      </div>
+    </ComponentWrapper>
   )
 }
 

diff --git a/app/[organization]/[event]/(eventHome)/components/ReserveSpotModal.tsx b/app/[organization]/[event]/(eventHome)/components/ReserveSpotModal.tsx
@@ -46,7 +46,7 @@ const ReserveSpotModal = ({ event }: { event: IEvent }) => {
       })
   }
   return (
-    <div className="px-10 py-4 flex flex-col max-w-lg">
+    <div className="text-white bg-base px-10 py-4 flex flex-col max-w-lg">
       <h2 className="text-2xl font-bold">Sign up to {event.name}</h2>
       <p className="mt-4">Enter your email</p>
       <div className="flex flex-row w-full space-x-2 mt-4">
@@ -102,8 +102,8 @@ const ReserveSpotButton = ({ event }: props) => {
   return (
     <button
       onClick={handleClick}
-      className="p-2  border bg-accent text-white rounded text-lg hoover:text-accent w-[200px]">
-      reserve a spot
+      className="p-2 bg-accent text-white rounded text-lg hoover:text-accent w-[200px]">
+      Get notified
     </button>
   )
 }

diff --git a/app/[organization]/[event]/(eventHome)/page.tsx b/app/[organization]/[event]/(eventHome)/page.tsx
@@ -6,13 +6,6 @@ import StageController from '@/server/controller/stage'
 import SpeakerPageComponent from './speakers/components/SpeakerPageComponent'
 import SchedulePageComponent from './schedule/components/SchedulePageComponent'
 import HomePageLogoAndBanner from './components/HompageLogoAndBanner'
-import Markdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import {
-  getEventLocalTime,
-  getEventTime,
-  getTime,
-} from '@/utils/time'
 interface Params {
   event: string
   organization: string
@@ -49,45 +42,11 @@ const EventHome = async ({ params }: { params: Params }) => {
   if (!hasData({ event })) return notFound()
 
   return (
-    <div className="flex flex-col w-full overflow-scroll h-full space-y-[5em] ">
-      <div className=" relative bg-white max-w-4xl rounded-lg mx-auto z-50 space-y-10">
+    <div className="flex flex-col w-full h-full bg-accent px-2">
+      <div className=" relative my-1 md:my-4 max-w-full md:max-w-4xl mx-auto z-50">
         <HomePageLogoAndBanner event={event} />
-        <div id="home" className="flex flex-col px-4 ">
-          <div className=" flex-col flex space-y-2 md:flex-col">
-            <h1 className="text-4xl text-left font-bold">
-              {event.name}
-            </h1>
-            <div className=" flex flex-col space-y-4 text-left">
-              <p>
-                <span className="mr-2">&#128197;</span>When:{' '}
-                {new Date(event.start).toDateString()}
-              </p>
-              <p>
-                <span className="mr-2">&#9200;</span> Time:{' '}
-                {event?.startTime
-                  ? getEventLocalTime(event.startTime, event.timezone)
-                  : 'TBD'}
-              </p>
-              <p>
-                <span className="mr-2">&#127759;</span> Where:{' '}
-                {event.location}
-              </p>
-              {/* <ReserveSpotButton event={event} /> */}
-              <Link
-                href={`/${params.organization}/${params.event}/stage/theater`}
-                className="text-center p-2  border bg-accent text-white rounded text-lg hoover:text-accent w-[200px]">
-                Watch livestream
-              </Link>
-              <article className="prose max-w-full prose-gray">
-                <Markdown remarkPlugins={[remarkGfm]}>
-                  {event.description}
-                </Markdown>
-              </article>
-            </div>
-          </div>
-        </div>
-        <SpeakerPageComponent params={params} />
         <SchedulePageComponent params={params} />
+        <SpeakerPageComponent params={params} />
       </div>
     </div>
   )

diff --git a/app/[organization]/[event]/(eventHome)/schedule/components/DateSelect.tsx b/app/[organization]/[event]/(eventHome)/schedule/components/DateSelect.tsx
@@ -12,18 +12,16 @@ const DateSelect = ({ dates }: { dates: number[] }) => {
   }
 
   return (
-    <div>
-      <select
-        className="text-xl cursor-pointer font-bold w-full p-2"
-        value={date ? date : ''}
-        onChange={(e) => handleDateChange(e.target.value)}>
-        {dates.map((dateNum) => (
-          <option key={dateNum} value={dateNum}>
-            {new Date(dateNum).toLocaleDateString()}
-          </option>
-        ))}
-      </select>
-    </div>
+    <select
+      className="px-3 py-2 border border-accent shadow rounded-lg bg-inherit text-lg cursor-pointer w-full box-border "
+      value={date ? date : ''}
+      onChange={(e) => handleDateChange(e.target.value)}>
+      {dates.map((dateNum) => (
+        <option key={dateNum} value={dateNum}>
+          {new Date(dateNum).toLocaleDateString()}
+        </option>
+      ))}
+    </select>
   )
 }
 

diff --git a/app/[organization]/[event]/(eventHome)/schedule/components/ScheduleCard.tsx b/app/[organization]/[event]/(eventHome)/schedule/components/ScheduleCard.tsx
@@ -20,11 +20,11 @@ const ScheduleCard = ({
 
   return (
     <div
-      className="flex space-y-3 flex-col w-full h-full bg-base border shadow rounded p-1 md:p-2 hover:bg-gray-50 cursor-pointer transition-colors"
+      className="bg-black/20 flex space-y-3 flex-col w-full h-full   rounded p-2 md:p-2 text-white cursor-pointer transition-colors"
       onClick={() => {
         openModal(<ScheduleCardModal session={session} />)
       }}>
-      <div className=" border-l border-accent hover:border-l-2 flex flex-col px-2 rounded-tr rounded-br w-full h-full">
+      <div className="border-l border-white  hover:border-l-2 flex flex-col px-2 rounded-tr rounded-br w-full h-full">
         {showTime && (
           <p className="text-main-text text-sm uppercase py-1">
             {new Date(session.start)

diff --git a/app/[organization]/[event]/(eventHome)/schedule/components/ScheduleCardModal.tsx b/app/[organization]/[event]/(eventHome)/schedule/components/ScheduleCardModal.tsx
@@ -20,32 +20,35 @@ const ScheduleCardModal = ({ session }: { session: ISession }) => {
   const handleGoToStage = () => {
     setIsLoading(true)
     closeModal()
-    router.push(`stage/${session.stageId}`)
+    router.push(`${session.eventId}/stage/${session.stageId}`)
   }
 
   return (
-    <div className="flex flex-col p-4 border-b-2 border-b-accent">
+    <div className="flex flex-col space-y-4 p-4  text-white w-full bg-base md:max-w-4xl rounded-xl">
+      <div className="flex flex-col bg-base p-4 rounded-xl">
+        <h1 className="text-lg  font-bold ">{session.name}</h1>
+        <span className=" flex flex-row text-white">
+          {new Date(session.start).toDateString()}{' '}
+          {new Date(session.start).toTimeString().slice(0, 5)} -{' '}
+          {new Date(session.end).toTimeString().slice(0, 5)}
+        </span>
+      </div>
+      {session.description && (
+        <p className="flex flex-col bg-base p-4 rounded-xl">
+          {session.description}
+        </p>
+      )}
+
+      <p className="flex flex-row flex-wrap">
+        <SpeakerIconList speakers={session.speakers} />
+      </p>
       {showGoToStage && (
         <div
           onClick={handleGoToStage}
-          className="text-xs border-accent border-2 cursor-pointer text-accent rounded ml-auto p-2 font-bold mb-4 hover:bg-accent hover:text-white">
+          className="border text-lg  text-white cursor-pointer text-accent rounded-xl ml-auto p-2 font-bold mb-4 hover:bg-accent hover:text-white">
           Go to Stream
         </div>
       )}
-      <h1 className="text-lg text-main-text font-bold text-center">
-        {session.name}
-      </h1>
-      <div className="flex flex-col justify-center items-center text-center  p-2">
-        <span className="text-secondary-text">
-          {new Date(session.start).toTimeString().slice(0, 5)} -{' '}
-          {new Date(session.end).toTimeString().slice(0, 5)}
-        </span>
-        <span className="text-secondary-text">
-          {new Date(session.start).toDateString()}
-        </span>
-      </div>
-      <p className="py-4">{session.description}</p>
-      <SpeakerIconList speakers={session.speakers} />
     </div>
   )
 }