Skip to content

Commit 7ff417f

Browse files
swkatmaskswkatmask
authored
feat(Calendar): mf-6373 new events list (#11934)
* fix: hooks * feat(Calendar): mf-6373 new events list * fix: mf-6147 adjust calendar tab header for dark mode * fixup! feat(Calendar): mf-6373 new events list * fix: prettier --------- Co-authored-by: swkatmask <swkatmask@users.noreply.github.com>
1 parent 0016e61 commit 7ff417f

File tree

21 files changed

+518
-309
lines changed

21 files changed

+518
-309
lines changed

‎cspell.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,5 @@
236236
],
237237
"ignoreRegExpList": ["/[A-Za-z0-9]{44}/", "/[A-Za-z0-9]{46}/", "/[A-Za-z0-9]{59}/"],
238238
"overrides": [],
239-
"words": ["endregion"]
239+
"words": ["endregion", "linkedin", "Luma", "tiktok", "waitlist", "youtube"]
240240
}
241-

‎packages/mask/content-script/components/InjectedComponents/ProfileCard/ProfileCardTitle.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ export function ProfileCardTitle({
138138
disablePortal
139139
anchorPosition={{
140140
top: 50,
141-
left: itsMe ? 390 : 370,
141+
left: itsMe ? 490 : 470,
142142
}}
143143
anchorReference="anchorPosition"
144144
/>

‎packages/mask/content-script/components/InjectedComponents/SearchResultInspector.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,14 @@ export function SearchResultInspector(props: SearchResultInspectorProps) {
6161
const keyword = props.keyword || keyword_
6262
const activatedPlugins = useActivatedPluginsSiteAdaptorNotMinimal()
6363

64-
const resultList = useAsyncRetry(async () => {
64+
const { value: resultList } = useAsyncRetry(async () => {
6565
if (!keyword) return
6666
return props.searchResults ?? DSearch.search(keyword)
6767
}, [keyword, props.searchResults])
6868

6969
useEffect(() => {
70-
if (profileTabType || !resultList.value?.length) return
71-
const type = resultList.value[0].type
70+
if (profileTabType || !resultList?.length) return
71+
const type = resultList[0].type
7272
let timer1: NodeJS.Timeout | undefined
7373
let timer2: NodeJS.Timeout | undefined
7474
if (
@@ -83,31 +83,31 @@ export function SearchResultInspector(props: SearchResultInspectorProps) {
8383
timer1 && clearTimeout(timer1)
8484
timer2 && clearTimeout(timer2)
8585
}
86-
}, [resultList.value, profileTabType])
86+
}, [resultList, profileTabType])
8787

88-
const currentResult = props.currentSearchResult ?? resultList.value?.[0]
88+
const currentResult = props.currentSearchResult ?? resultList?.[0]
8989

9090
const { classes } = useStyles({ isProfilePage, searchType: currentResult?.type })
9191
const contentComponent = useMemo(() => {
92-
if (!currentResult || !resultList.value?.length) return null
92+
if (!currentResult || !resultList?.length) return null
9393

9494
const Component =
9595
profileTabType ? getSearchResultContentForProfileTab(currentResult) : getSearchResultContent(currentResult)
9696

9797
return (
9898
<Component
99-
resultList={resultList.value}
99+
resultList={resultList}
100100
currentResult={currentResult}
101101
isProfilePage={isProfilePage}
102102
identity={identity}
103103
/>
104104
)
105-
}, [currentResult, resultList.value, isProfilePage, identity, profileTabType])
105+
}, [currentResult, resultList, isProfilePage, identity, profileTabType])
106106

107107
const tabs = useMemo(() => {
108108
if (!currentResult) return EMPTY_LIST
109109
return getSearchResultTabs(activatedPlugins, currentResult, translate)
110-
}, [activatedPlugins, resultList.value, translate])
110+
}, [activatedPlugins, resultList, translate])
111111

112112
const defaultTab = first(tabs)?.id ?? PluginID.Collectible
113113
const [currentTab, onChange, , setTab] = useTabs(defaultTab, ...tabs.map((tab) => tab.id))
@@ -119,7 +119,7 @@ export function SearchResultInspector(props: SearchResultInspectorProps) {
119119
if (!currentResult) return null
120120
const Component = getSearchResultTabContent(currentTab)
121121
return <Component result={currentResult} />
122-
}, [currentTab, resultList.value])
122+
}, [currentTab, resultList])
123123

124124
if (isMinimalMode && !isProfilePage) return null
125125
if (!keyword && !currentResult) return null

‎packages/mask/content-script/site-adaptors/twitter.com/injection/Calendar.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
2-
import { querySelector } from '../utils/selector.js'
3-
import { startWatch } from '../../../utils/startWatch.js'
2+
import { Calendar } from '@masknet/plugin-calendar'
43
import { attachReactTreeWithContainer } from '../../../utils/shadow-root/renderInShadowRoot.js'
5-
import { CalendarContent } from '@masknet/plugin-calendar'
4+
import { startWatch } from '../../../utils/startWatch.js'
5+
import { querySelector } from '../utils/selector.js'
66

77
function sidebarSearchSelector() {
88
return querySelector<HTMLElement>(
@@ -28,13 +28,11 @@ export function injectCalendar(signal: AbortSignal) {
2828
startWatch(watcher, signal)
2929
startWatch(exploreWatcher, signal)
3030
startWatch(searchWatcher, signal)
31-
attachReactTreeWithContainer(watcher.firstDOMProxy.afterShadow, { untilVisible: true, signal }).render(
32-
<CalendarContent />,
33-
)
31+
attachReactTreeWithContainer(watcher.firstDOMProxy.afterShadow, { untilVisible: true, signal }).render(<Calendar />)
3432
attachReactTreeWithContainer(exploreWatcher.firstDOMProxy.beforeShadow, { untilVisible: true, signal }).render(
35-
<CalendarContent target="/explore" />,
33+
<Calendar target="/explore" />,
3634
)
3735
attachReactTreeWithContainer(searchWatcher.firstDOMProxy.beforeShadow, { untilVisible: true, signal }).render(
38-
<CalendarContent target="/search" />,
36+
<Calendar target="/search" />,
3937
)
4038
}

‎packages/plugins/Calendar/src/SiteAdaptor/Calendar.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { useIsMinimalMode } from '@masknet/plugin-infra/content-script'
2+
import { PluginID } from '@masknet/shared-base'
3+
import { useLocationChange } from '@masknet/shared-base-ui'
4+
import { useState } from 'react'
5+
import { CalendarContent } from './CalendarContent.js'
6+
7+
interface Props {
8+
target?: '/explore' | '/search'
9+
}
10+
11+
export function Calendar({ target }: Props) {
12+
const [pathname, setPathname] = useState(location.pathname)
13+
const isMinimalMode = useIsMinimalMode(PluginID.Calendar)
14+
15+
useLocationChange(() => {
16+
setPathname(location.pathname)
17+
})
18+
if (isMinimalMode || (target && !pathname.includes(target))) return null
19+
20+
return <CalendarContent style={{ marginTop: pathname.includes('explore') ? 24 : 0 }} />
21+
}

‎packages/plugins/Calendar/src/SiteAdaptor/CalendarContent.tsx‎

Lines changed: 48 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,78 @@
1-
import { safeUnreachable } from '@masknet/kit'
2-
import { useIsMinimalMode } from '@masknet/plugin-infra/content-script'
3-
import { EMPTY_OBJECT, PluginID } from '@masknet/shared-base'
4-
import { useLocationChange } from '@masknet/shared-base-ui'
1+
import { Trans } from '@lingui/macro'
2+
import { EMPTY_LIST } from '@masknet/shared-base'
53
import { MaskTabList, makeStyles, useTabs } from '@masknet/theme'
64
import { TabContext, TabPanel } from '@mui/lab'
75
import { Tab } from '@mui/material'
8-
import { useMemo, useState } from 'react'
9-
import { useNFTList, useNewsList } from '../hooks/useEventList.js'
6+
import { useState, type HTMLProps } from 'react'
107
import { DatePickerTab } from './components/DatePickerTab.js'
8+
import { EventList } from './components/EventList.js'
119
import { Footer } from './components/Footer.js'
12-
import { NFTList } from './components/NFTList.js'
1310
import { NewsList } from './components/NewsList.js'
14-
import { Trans } from '@lingui/macro'
1511

16-
const useStyles = makeStyles()((theme) => ({
17-
calendar: {
18-
display: 'flex',
19-
flexDirection: 'column',
20-
borderRadius: '12px',
21-
border: `1px solid ${theme.palette.maskColor.line}`,
22-
position: 'relative',
23-
marginBottom: '20px',
24-
},
25-
tab: {
26-
fontSize: 16,
27-
fontWeight: 700,
28-
},
29-
tabList: {
30-
background:
31-
'linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.80) 100%), linear-gradient(90deg, rgba(28, 104, 243, 0.20) 0%, rgba(69, 163, 251, 0.20) 100%), #FFF',
32-
padding: '8px 16px 0 16px',
33-
borderRadius: '12px 12px 0 0',
34-
},
35-
tabPanel: {
36-
padding: '0 4px 0 12px',
37-
},
38-
}))
12+
const useStyles = makeStyles()((theme) => {
13+
const isDark = theme.palette.mode === 'dark'
14+
return {
15+
calendar: {
16+
display: 'flex',
17+
flexDirection: 'column',
18+
borderRadius: '12px',
19+
border: `1px solid ${theme.palette.maskColor.line}`,
20+
position: 'relative',
21+
marginBottom: '20px',
22+
},
23+
tab: {
24+
fontSize: 16,
25+
fontWeight: 700,
26+
},
27+
tabList: {
28+
background:
29+
isDark ?
30+
'linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.06) 100%)'
31+
: 'linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.80) 100%), linear-gradient(90deg, rgba(28, 104, 243, 0.20) 0%, rgba(69, 163, 251, 0.20) 100%), #FFF',
32+
padding: '8px 16px 0 16px',
33+
borderRadius: '12px 12px 0 0',
34+
},
35+
tabPanel: {
36+
padding: '0 4px 0 12px',
37+
},
38+
}
39+
})
3940

40-
interface Props {
41+
interface Props extends HTMLProps<HTMLDivElement> {
4142
target?: string
42-
disableSetting?: boolean
4343
}
4444

45-
export function CalendarContent({ target, disableSetting }: Props) {
46-
const { classes } = useStyles()
47-
const [pathname, setPathname] = useState(location.pathname)
48-
const isMinimalMode = useIsMinimalMode(PluginID.Calendar)
49-
const [currentTab, onChange, tabs] = useTabs('news', 'nfts')
50-
const [selectedDate, setSelectedDate] = useState(() => new Date())
45+
export function CalendarContent(props: Props) {
46+
const { classes, cx } = useStyles()
47+
const [currentTab, onChange, tabs] = useTabs('news', 'events')
48+
const [date, setDate] = useState(() => new Date())
5149
const [open, setOpen] = useState(false)
52-
const { data: newsList = EMPTY_OBJECT, isPending: newsLoading } = useNewsList(selectedDate, currentTab === 'news')
53-
const { data: nftList = EMPTY_OBJECT, isPending: nftLoading } = useNFTList(selectedDate, currentTab === 'nfts')
54-
const list = useMemo(() => {
55-
switch (currentTab) {
56-
case 'news':
57-
return newsList
58-
case 'nfts':
59-
return nftList
60-
default:
61-
safeUnreachable(currentTab)
62-
return null
63-
}
64-
}, [currentTab, newsList, nftList])
65-
const dateString = useMemo(() => selectedDate.toLocaleDateString(), [selectedDate])
6650

67-
useLocationChange(() => {
68-
setPathname(location.pathname)
69-
})
70-
if (isMinimalMode || (target && !pathname.includes(target))) return null
51+
const [allowedDates, setAllowedDates] = useState<string[]>(EMPTY_LIST)
7152

7253
return (
73-
<div className={classes.calendar} style={{ marginTop: pathname.includes('explore') ? 24 : 0 }}>
54+
<div {...props} className={cx(classes.calendar, props.className)}>
7455
<TabContext value={currentTab}>
7556
<div className={classes.tabList}>
7657
<MaskTabList variant="base" onChange={onChange} aria-label="">
7758
<Tab className={classes.tab} label={<Trans>News</Trans>} value={tabs.news} />
78-
<Tab className={classes.tab} label={<Trans>NFTs</Trans>} value={tabs.nfts} />
59+
<Tab className={classes.tab} label={<Trans>Events</Trans>} value={tabs.events} />
7960
</MaskTabList>
8061
</div>
8162
<DatePickerTab
8263
open={open}
83-
setOpen={setOpen}
84-
selectedDate={selectedDate}
85-
setSelectedDate={setSelectedDate}
86-
list={list}
87-
currentTab={currentTab}
64+
onToggle={setOpen}
65+
date={date}
66+
onChange={setDate}
67+
allowedDates={allowedDates}
8868
/>
8969
<TabPanel value={tabs.news} className={classes.tabPanel}>
90-
<NewsList list={newsList} isLoading={newsLoading} dateString={dateString} />
70+
<NewsList date={date} />
9171
</TabPanel>
92-
<TabPanel value={tabs.nfts} className={classes.tabPanel}>
93-
<NFTList list={nftList} isLoading={nftLoading} dateString={dateString} />
72+
<TabPanel value={tabs.events} className={classes.tabPanel}>
73+
<EventList date={date} onDatesUpdate={setAllowedDates} />
9474
</TabPanel>
95-
<Footer provider={currentTab} disableSetting={disableSetting} />
75+
<Footer provider={currentTab} />
9676
</TabContext>
9777
</div>
9878
)

0 commit comments

Comments
 (0)