fix: mf-6493 add missing location (#11940)

swkatmask · web-flow · commit c0089d894d28 · 2024-11-22T11:21:18.000+08:00
* fix: mf-6493 add missing location

* fix: mf-6495 space between texts

* fixup! fix: mf-6493 add missing location
diff --git a/packages/icons/general/CalendarDark.svg b/packages/icons/general/CalendarDark.svg
diff --git a/packages/icons/general/Location.svg b/packages/icons/general/Location.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <path fill="currentColor" fill-rule="evenodd" d="M11.9999 7.93994C10.691 7.93994 9.62988 9.00103 9.62988 10.3099C9.62988 11.6189 10.691 12.6799 11.9999 12.6799C13.3088 12.6799 14.3699 11.6189 14.3699 10.3099C14.3699 9.00103 13.3088 7.93994 11.9999 7.93994ZM8.12988 10.3099C8.12988 8.1726 9.86254 6.43994 11.9999 6.43994C14.1372 6.43994 15.8699 8.1726 15.8699 10.3099C15.8699 12.4473 14.1372 14.1799 11.9999 14.1799C9.86254 14.1799 8.12988 12.4473 8.12988 10.3099Z" clip-rule="evenodd"/>
+    <path fill="currentColor" fill-rule="evenodd" d="M12.003 2.75C8.58622 2.74769 5.24436 4.73032 4.35113 8.65591C3.29407 13.3261 6.1878 17.3762 8.9099 19.9997C10.6404 21.661 13.3604 21.659 15.0789 20.0004L15.0802 19.999C17.8122 17.3756 20.7054 13.3354 19.6482 8.6656L19.6482 8.66556C18.7597 4.73971 15.4199 2.75231 12.003 2.75ZM21.1112 8.33441C20.0397 3.60029 15.9845 1.25269 12.004 1.25C8.02334 1.24731 3.96532 3.58953 2.8884 8.32364L2.88822 8.32441C1.64552 13.8139 5.0715 18.3836 7.86926 21.08L7.8702 21.0809C10.1796 23.2989 13.8188 23.3008 16.1202 21.08C18.928 18.3834 22.3539 13.8239 21.1112 8.33441Z" clip-rule="evenodd"/>
+</svg>
diff --git a/packages/icons/icon-generated-as-jsx.js b/packages/icons/icon-generated-as-jsx.js
diff --git a/packages/icons/icon-generated-as-url.js b/packages/icons/icon-generated-as-url.js
diff --git a/packages/mask/dashboard/components/OnboardingWriter/index.tsx b/packages/mask/dashboard/components/OnboardingWriter/index.tsx
@@ -80,12 +80,13 @@ export function OnboardingWriter({ words, ...props }: OnboardingWriterProps) {
                     :   undefined,
                 ),
             }
-            if (take < text.length) newJsx.push(cloneElement(fragment, props, [text.slice(0, take)]))
+            // the trailing space gets trimmed by i18n marco
+            if (take <= text.length) newJsx.push(cloneElement(fragment, props, [text.slice(0, take)]))
             else
                 newJsx.push(
                     cloneElement(fragment, props, [
                         text,
-                        <strong key={size}>{strongText.slice(0, take - text.length)}</strong>,
+                        <strong key={size}> {strongText.slice(0, take - text.length)}</strong>,
                     ]),
                 )
         }
diff --git a/packages/plugins/Calendar/src/SiteAdaptor/CalendarContent.tsx b/packages/plugins/Calendar/src/SiteAdaptor/CalendarContent.tsx
@@ -45,7 +45,7 @@ interface Props extends HTMLProps<HTMLDivElement> {
 export function CalendarContent(props: Props) {
     const { classes, cx } = useStyles()
     const [currentTab, onChange, tabs] = useTabs('news', 'events')
-    const [date, setDate] = useState(() => new Date())
+    const [date, setDate] = useState(() => new Date(Math.floor(Date.now() / 1000) * 1000)) // round to seconds
     const [open, setOpen] = useState(false)
 
     const [allowedDates, setAllowedDates] = useState<string[]>(EMPTY_LIST)
diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx
@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro'
-import { ElementAnchor, EmptyStatus, Image, LoadingStatus } from '@masknet/shared'
+import { ElementAnchor, EmptyStatus, Image, LoadingStatus, ReloadStatus } from '@masknet/shared'
 import { EMPTY_LIST } from '@masknet/shared-base'
 import { LoadingBase, makeStyles } from '@masknet/theme'
 import { resolveIPFS_URL } from '@masknet/web3-shared-base'
@@ -9,6 +9,7 @@ import { uniq } from 'lodash-es'
 import { useEffect, useMemo } from 'react'
 import { useLumaEvents } from '../../hooks/useLumaEvents.js'
 import { ImageLoader } from './ImageLoader.js'
+import { Icons } from '@masknet/icons'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -75,20 +76,16 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: '14px',
         fontWeight: 400,
         lineHeight: '18px',
-        color: theme.palette.mode === 'dark' ? theme.palette.maskColor.second : theme.palette.maskColor.main,
+        color: theme.palette.maskColor.main,
     },
-    time: {
-        fontSize: '14px',
+    info: {
+        fontSize: '13px',
         fontWeight: 400,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
-    },
-    dateDiv: {
-        fontSize: '14px',
-        fontWeight: 700,
-        lineHeight: '18px',
         color: theme.palette.maskColor.main,
-        padding: '10px 0',
+        display: 'flex',
+        gap: theme.spacing(1.5),
+        alignItems: 'center',
     },
     loading: {
         color: theme.palette.maskColor.main,
@@ -102,7 +99,7 @@ interface EventListProps {
 
 export function EventList({ date, onDatesUpdate }: EventListProps) {
     const { classes, cx } = useStyles()
-    const { isLoading, isFetching, data, hasNextPage, fetchNextPage } = useLumaEvents()
+    const { isLoading, isFetching, data, error, hasNextPage, fetchNextPage } = useLumaEvents(date)
 
     const comingEvents = useMemo(() => {
         if (!data) return EMPTY_LIST
@@ -125,6 +122,18 @@ export function EventList({ date, onDatesUpdate }: EventListProps) {
             </div>
         )
     }
+
+    if (error) {
+        return (
+            <div className={classes.container}>
+                <div className={classes.paddingWrap}>
+                    <div className={cx(classes.empty, classes.eventTitle)}>
+                        <ReloadStatus message={error.message}></ReloadStatus>
+                    </div>
+                </div>
+            </div>
+        )
+    }
     if (!comingEvents.length) {
         return (
             <div className={classes.container}>
@@ -142,35 +151,38 @@ export function EventList({ date, onDatesUpdate }: EventListProps) {
     return (
         <div className={classes.container}>
             <div className={classes.paddingWrap}>
-                {comingEvents.map((entry) => {
+                {comingEvents.map((event) => {
                     return (
-                        <div key={entry.event_id}>
-                            <Typography className={classes.dateDiv}>
-                                {format(new Date(entry.event_date), 'MMM dd,yyy')}
-                            </Typography>
-                            <Link
-                                className={classes.eventCard}
-                                href={entry.event_url}
-                                rel="noopener noreferrer"
-                                target="_blank">
-                                <div className={classes.eventHeader}>
-                                    <div className={classes.projectWrap}>
-                                        <Image
-                                            src={resolveIPFS_URL(entry.poster_url)}
-                                            classes={{ container: classes.logo }}
-                                            size={24}
-                                            alt={entry.event_title}
-                                        />
-                                        <Typography className={classes.projectName}>{entry.event_title}</Typography>
-                                    </div>
+                        <Link
+                            key={event.event_id}
+                            className={classes.eventCard}
+                            href={event.event_url}
+                            rel="noopener noreferrer"
+                            target="_blank">
+                            <div className={classes.eventHeader}>
+                                <div className={classes.projectWrap}>
+                                    <Image
+                                        src={resolveIPFS_URL(event.poster_url)}
+                                        classes={{ container: classes.logo }}
+                                        size={24}
+                                        alt={event.event_title}
+                                    />
+                                    <Typography className={classes.projectName}>{event.event_title}</Typography>
                                 </div>
-                                <Typography className={classes.eventTitle}>{entry.event_title}</Typography>
-                                <Typography className={classes.time}>
-                                    {format(new Date(entry.event_date), 'MMM dd, yyyy HH:mm')}
+                            </div>
+                            <Typography className={classes.eventTitle}>{event.event_title}</Typography>
+                            {event.event_full_location ?
+                                <Typography className={classes.info}>
+                                    <Icons.Location size={18} />
+                                    {event.event_full_location}
                                 </Typography>
-                                <ImageLoader src={entry.poster_url} />
-                            </Link>
-                        </div>
+                            :   null}
+                            <Typography className={classes.info}>
+                                <Icons.LinearCalendar size={18} />
+                                {format(event.event_date, 'MMM dd, yyyy HH:mm')}
+                            </Typography>
+                            <ImageLoader src={event.poster_url} />
+                        </Link>
                     )
                 })}
                 {hasNextPage ?
diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/Footer.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/Footer.tsx
@@ -49,13 +49,6 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: '20px',
         alignItems: 'center',
     },
-    providerName: {
-        color: theme.palette.maskColor.main,
-        fontSize: '14px',
-        fontWeight: 700,
-        lineHeight: '18px',
-        alignItems: 'center',
-    },
 }))
 
 export interface FooterProps {
@@ -65,18 +58,8 @@ export interface FooterProps {
 export function Footer({ tab }: FooterProps) {
     const { classes } = useStyles()
     const providerMap = {
-        news: (
-            <>
-                <Typography className={classes.providerName}>CoinCarp</Typography>
-                <Icons.CoinCarp size={24} />
-            </>
-        ),
-        events: (
-            <>
-                <Typography className={classes.providerName}></Typography>
-                <Icons.Luma size={24} />
-            </>
-        ),
+        news: <Icons.CoinCarp size={24} />,
+        events: <Icons.Luma size={24} />,
     } as const
     const openApplicationBoardDialog = useOpenApplicationSettings()
     return (
diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx
@@ -110,7 +110,7 @@ interface NewsListProps {
 }
 
 export function NewsList({ date, onDatesUpdate }: NewsListProps) {
-    const { data: list = EMPTY_OBJECT, isLoading } = useNewsList(date, true)
+    const { data: list = EMPTY_OBJECT, isLoading } = useNewsList(date)
     const dateString = date.toLocaleDateString()
     const empty = !Object.keys(list).length
     const { classes, cx } = useStyles()
diff --git a/packages/plugins/Calendar/src/hooks/useEventList.tsx b/packages/plugins/Calendar/src/hooks/useEventList.tsx
@@ -4,11 +4,10 @@ import type { ParsedEvent } from '@masknet/web3-providers/types'
 import { useQuery } from '@tanstack/react-query'
 import { addDays, startOfMonth } from 'date-fns'
 
-export function useNewsList(date: Date, enabled = true) {
-    const startTime = startOfMonth(date).getTime() / 1000
-    const endTime = Math.floor(addDays(date, 45).getTime() / 1000)
+export function useNewsList(date: Date) {
+    const startTime = startOfMonth(date).getTime()
+    const endTime = addDays(date, 45).getTime()
     return useQuery({
-        enabled,
         queryKey: ['newsList', startTime, endTime],
         queryFn: async () => Calendar.getNewsList(startTime, endTime),
         select(data) {
diff --git a/packages/plugins/Calendar/src/hooks/useLumaEvents.ts b/packages/plugins/Calendar/src/hooks/useLumaEvents.ts
@@ -1,12 +1,15 @@
 import { Calendar } from '@masknet/web3-providers'
 import { useInfiniteQuery } from '@tanstack/react-query'
+import { addDays, startOfMonth } from 'date-fns'
 
-export function useLumaEvents() {
+export function useLumaEvents(date: Date) {
+    const startTime = startOfMonth(date).getTime()
+    const endTime = Math.floor(addDays(date, 45).getTime())
     return useInfiniteQuery({
-        queryKey: ['lumaEvents'],
+        queryKey: ['lumaEvents', startTime, endTime],
         initialPageParam: undefined as any,
         queryFn: async ({ pageParam }) => {
-            return Calendar.getEventList(pageParam)
+            return Calendar.getEventList(startTime, endTime, pageParam)
         },
         getNextPageParam(page) {
             return page.nextIndicator
diff --git a/packages/plugins/Gitcoin/src/SiteAdaptor/PreviewCard.tsx b/packages/plugins/Gitcoin/src/SiteAdaptor/PreviewCard.tsx
@@ -278,7 +278,7 @@ export function PreviewCard(props: PreviewCardProps) {
                     </Typography>
                 ))}
                 <Box className={classes.linkItem} key="created">
-                    <Icons.CalendarDark size={16} />
+                    <Icons.LinearCalendar variant="dark" size={16} />
                     <Typography className={classes.link}>
                         <Trans>Created on: {format(project.metadata.createdAt, 'MMMM do, yyyy')}</Trans>
                     </Typography>
diff --git a/packages/web3-providers/src/Calendar/index.ts b/packages/web3-providers/src/Calendar/index.ts
@@ -1,14 +1,52 @@
 import { createNextIndicator, createPageable, type PageIndicator } from '@masknet/shared-base'
+import { compact } from 'lodash-es'
 import urlcat from 'urlcat'
 import { fetchCachedJSON } from '../entry-helpers.js'
 import type { Event, EventResponse, ParsedEvent } from './types.js'
 
 const BASE_URL = 'https://mask-network-dev.firefly.land/v1/calendar/crypto_event_list'
 
+function fixEventDate(event: Event): ParsedEvent {
+    return {
+        ...event,
+        event_date: +event.event_date * 1000,
+    }
+}
+
+interface LumaRawEvent {
+    calendar: {
+        geo_city: string
+        geo_country: string
+        geo_region: string
+    }
+    event: {
+        geo_address_info: {
+            address: string
+            city: string
+            city_state: string
+            country: string
+            full_address: string
+            latitude: string
+            longitude: string
+            mode: string
+            place_id: string
+            region: string
+            type: string
+        }
+    }
+}
 function fixEvent(event: Event): ParsedEvent {
+    const rawEvent = event.raw_data ? (event.raw_data as LumaRawEvent) : null
     return {
         ...event,
         event_date: +event.event_date * 1000,
+        event_city: rawEvent?.calendar.geo_city,
+        event_country: rawEvent?.calendar.geo_country,
+        event_full_location:
+            rawEvent?.event.geo_address_info.full_address ||
+            compact([rawEvent?.calendar.geo_region, rawEvent?.calendar.geo_city, rawEvent?.calendar.geo_country]).join(
+                ', ',
+            ),
     }
 }
 
@@ -17,20 +55,22 @@ export class Calendar {
         const list = await fetchCachedJSON<EventResponse>(
             urlcat(BASE_URL, {
                 provider_type: 'coincarp',
-                start_date: startDate,
-                end_date: endDate ? endDate : 0,
+                start_date: Math.floor(startDate / 1000),
+                end_date: endDate ? Math.floor(endDate / 1000) : 0,
                 cursor: 0,
             }),
         )
         if (!list.data) return
-        return list.data.events.map(fixEvent)
+        return list.data.events.map(fixEventDate)
     }
-    static async getEventList(indicator?: PageIndicator) {
+    static async getEventList(start_date: number, end_date: number, indicator?: PageIndicator) {
         const res = await fetchCachedJSON<EventResponse>(
             urlcat(BASE_URL, {
                 provider_type: 'luma',
                 size: 20,
                 cursor: indicator?.id,
+                start_date: start_date / 1000,
+                end_date: end_date / 1000,
             }),
         )
         if (!res?.data?.events.length) {
diff --git a/packages/web3-providers/src/Calendar/types.ts b/packages/web3-providers/src/Calendar/types.ts

Original file line number	Diff line number	Diff line change
`@@ -80,12 +80,13 @@ export function OnboardingWriter({ words, ...props }: OnboardingWriterProps) {`
`80`	`80`	`: undefined,`
`81`	`81`	`),`
`82`	`82`	`}`
`83`		`- if (take < text.length) newJsx.push(cloneElement(fragment, props, [text.slice(0, take)]))`
	`83`	`+ // the trailing space gets trimmed by i18n marco`
	`84`	`+ if (take <= text.length) newJsx.push(cloneElement(fragment, props, [text.slice(0, take)]))`
`84`	`85`	`else`
`85`	`86`	`newJsx.push(`
`86`	`87`	`cloneElement(fragment, props, [`
`87`	`88`	`text,`
`88`		`- <strong key={size}>{strongText.slice(0, take - text.length)}</strong>,`
	`89`	`+ <strong key={size}> {strongText.slice(0, take - text.length)}</strong>,`
`89`	`90`	`]),`
`90`	`91`	`)`
`91`	`92`	`}`
Original file line number	Diff line number	Diff line change
`@@ -110,7 +110,7 @@ interface NewsListProps {`
`110`	`110`	`}`
`111`	`111`
`112`	`112`	`export function NewsList({ date, onDatesUpdate }: NewsListProps) {`
`113`		`- const { data: list = EMPTY_OBJECT, isLoading } = useNewsList(date, true)`
	`113`	`+ const { data: list = EMPTY_OBJECT, isLoading } = useNewsList(date)`
`114`	`114`	`const dateString = date.toLocaleDateString()`
`115`	`115`	`const empty = !Object.keys(list).length`
`116`	`116`	`const { classes, cx } = useStyles()`