Fix/event dates terry (supabase#30723)

* fix events correct time display

* fix type error

---------

Co-authored-by: Francesco Sansalvadore <[email protected]>

Author: saltcod

apps/www/components/CaseStudies/index.tsx

@@ -32,6 +32,7 @@ const CaseStudies = () => {
               hideAuthor: true,
               url: caseStudy.url.replace('/blog/', ''),
               path: caseStudy.path,
+              date: '',
             }}
           />
         ))}

apps/www/components/Events/EventListItem.tsx

@@ -60,24 +60,26 @@ const EventListItem = ({ event }: Props) => {
   )
 }
 
-const EventDate: React.FC<{ event: PostTypes }> = ({ event }) => (
-  <p className="text-foreground-lighter lg:text-left lg:w-[240px] text-nowrap group-hover:text-foreground-light min-w-20 inline-flex items-center lg:justify-start gap-1.5 w-full">
-    {event.type === 'event'
-      ? dayjs(event.date).format('DD MMM YYYY')
-      : dayjs(event.date).tz(event.timezone).format('DD MMM YYYY')}
-    <span className="min-w-px h-[16px] bg-muted" />
-    <span className="">
-      {event.type === 'event'
-        ? dayjs(event.date).get('minutes') > 0
-          ? dayjs(event.date).format('h:mmA')
-          : dayjs(event.date).format('hA')
-        : dayjs(event.date).get('minutes') > 0
-          ? dayjs(event.date).tz(event.timezone).format('h:mmA')
-          : dayjs(event.date).tz(event.timezone).format('hA')}
-    </span>
-    <span className="min-w-px h-[16px] bg-muted" />
-    {dayjs(event.date).tz(event.timezone).format('z')}
-  </p>
-)
+const EventDate: React.FC<{ event: PostTypes }> = ({ event }) => {
+  const parsedDate = dayjs.utc(event.date)
+
+  /**
+   * If meetups, show absolute time + timezone
+   * otherwise show time based on timezone
+   * */
+  const formattedDate = event.categories?.includes('meetup')
+    ? parsedDate
+        .tz('Europe/London')
+        .format(`DD MMM YY, h${parsedDate.get('minutes') > 0 ? ':mmA' : 'A'}`)
+    : parsedDate.tz(event.timezone).format(`DD MMM YY, h:mmA`)
+
+  return (
+    <p className="text-foreground-lighter font-mono text-xs lg:text-left lg:w-[240px] text-nowrap group-hover:text-foreground-light min-w-20 inline-flex items-center lg:justify-start gap-1.5 w-full leading-relaxed">
+      {formattedDate}
+      <span className="min-w-px h-[16px] mx-1 bg-foreground-muted/50" />
+      {parsedDate.tz(event.timezone).format(' z')}
+    </p>
+  )
+}
 
 export default EventListItem

apps/www/components/Events/EventsFilters.tsx

@@ -3,7 +3,7 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { startCase } from 'lodash'
 import { useSearchParams } from 'next/navigation'
 import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useKey } from 'react-use'
 import type PostTypes from '~/types/post'
 
@@ -13,9 +13,10 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  Input,
   cn,
 } from 'ui'
-import { ChevronDown } from 'lucide-react'
+import { ChevronDown, Search, X as CloseIcon } from 'lucide-react'
 
 interface Props {
   allEvents: PostTypes[]
@@ -30,6 +31,7 @@ interface Props {
  */
 
 function EventFilters({ allEvents, setEvents, categories }: Props) {
+  const inputRef = useRef<HTMLInputElement>(null)
   const [category, setCategory] = useState<string>('all')
   const [searchTerm, setSearchTerm] = useState<string>('')
   const [showSearchInput, setShowSearchInput] = useState<boolean>(false)
@@ -41,6 +43,11 @@ function EventFilters({ allEvents, setEvents, categories }: Props) {
   const isMobile = useBreakpoint(1023)
   const is2XL = useBreakpoint(1535)
 
+  const handleSearchChange = (event: any) => {
+    activeCategory && setCategory('all')
+    handleSearchByText(event.target.value)
+  }
+
   useEffect(() => {
     if (!q) {
       handlePosts()
@@ -117,6 +124,13 @@ function EventFilters({ allEvents, setEvents, categories }: Props) {
         })
   }
 
+  useEffect(() => {
+    if (!inputRef.current) return
+    if (showSearchInput && isMobile) {
+      inputRef.current?.focus()
+    }
+  }, [showSearchInput, isMobile])
+
   return (
     <div className="flex flex-row items-center justify-between gap-2">
       <AnimatePresence mode="wait">
@@ -195,6 +209,58 @@ function EventFilters({ allEvents, setEvents, categories }: Props) {
           ))}
         </div>
       </AnimatePresence>
+      {!showSearchInput && (
+        <motion.div
+          className="flex-1 flex justify-end"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0, transition: { duration: 0.05 } }}
+        >
+          <Button
+            className="px-2 w-9 h-9"
+            size="large"
+            type="default"
+            onClick={() => setShowSearchInput(true)}
+          >
+            <Search size="14" />
+          </Button>
+        </motion.div>
+      )}
+      {showSearchInput && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0, transition: { duration: 0.05 } }}
+          className="w-full h-[38px] flex justify-end gap-2 items-stretch lg:max-w-[240px] xl:max-w-[280px]"
+        >
+          <Input
+            inputRef={inputRef}
+            icon={<Search size="14" />}
+            size="small"
+            layout="vertical"
+            autoComplete="off"
+            type="search"
+            placeholder="Search event"
+            value={searchTerm}
+            onChange={handleSearchChange}
+            className="w-full"
+            actions={
+              isMobile && (
+                <Button
+                  type="link"
+                  onClick={() => {
+                    setSearchTerm('')
+                    setShowSearchInput(false)
+                  }}
+                  className="text-foreground-light hover:text-foreground bg-control/100 hover:bg-selection"
+                >
+                  <CloseIcon size="14" />
+                </Button>
+              )
+            }
+          />
+        </motion.div>
+      )}
     </div>
   )
 }

apps/www/types/post.ts

@@ -2,7 +2,7 @@ type PostTypes = {
   slug?: string
   type: 'casestudy' | 'blog' | 'event'
   title: string
-  date?: string
+  date: string
   formattedDate?: string
   coverImage?: string
   author?: string