-
Notifications
You must be signed in to change notification settings - Fork 435
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: releasesOverview into utils and smaller components for cale…
…ndar filter (#8144)
- Loading branch information
Showing
4 changed files
with
147 additions
and
115 deletions.
There are no files selected for viewing
76 changes: 76 additions & 0 deletions
76
packages/sanity/src/core/releases/tool/overview/ReleaseCalendarFilter.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import {CloseIcon} from '@sanity/icons' | ||
| import {format} from 'date-fns' | ||
| import {AnimatePresence, motion} from 'framer-motion' | ||
| import {useMemo, useState} from 'react' | ||
|
|
||
| import {Button} from '../../../../ui-components' | ||
| import {CalendarDay} from '../../../../ui-components/inputs/DateFilters/calendar/CalendarDay' | ||
| import {type CalendarProps} from '../../../../ui-components/inputs/DateFilters/calendar/CalendarFilter' | ||
| import {useReleases} from '../../store/useReleases' | ||
| import {useTimezoneAdjustedDateTimeRange} from './useTimezoneAdjustedDateTimeRange' | ||
|
|
||
| export const ReleaseCalendarFilterDay: CalendarProps['renderCalendarDay'] = (props) => { | ||
| const {data: releases} = useReleases() | ||
| const getTimezoneAdjustedDateTimeRange = useTimezoneAdjustedDateTimeRange() | ||
|
|
||
| const {date} = props | ||
|
|
||
| const [startOfDayForTimeZone, endOfDayForTimeZone] = getTimezoneAdjustedDateTimeRange(date) | ||
|
|
||
| const dayHasReleases = releases?.some((release) => { | ||
| const releasePublishAt = release.publishAt || release.metadata.intendedPublishAt | ||
| if (!releasePublishAt) return false | ||
|
|
||
| const publishDateUTC = new Date(releasePublishAt) | ||
|
|
||
| return ( | ||
| release.metadata.releaseType === 'scheduled' && | ||
| publishDateUTC >= startOfDayForTimeZone && | ||
| publishDateUTC <= endOfDayForTimeZone | ||
| ) | ||
| }) | ||
|
|
||
| return <CalendarDay {...props} dateStyles={dayHasReleases ? {fontWeight: 700} : {}} /> | ||
| } | ||
|
|
||
| const MotionButton = motion(Button) | ||
|
|
||
| export const DateFilterButton = ({ | ||
| filterDate, | ||
| onClear, | ||
| }: { | ||
| filterDate: Date | ||
| onClear: () => void | ||
| }) => { | ||
| const [isExiting, setIsExiting] = useState(false) | ||
|
|
||
| const handleOnExitComplete = useMemo( | ||
| () => () => { | ||
| setIsExiting(false) | ||
| onClear() | ||
| }, | ||
| [onClear], | ||
| ) | ||
|
|
||
| if (!filterDate) return null | ||
|
|
||
| return ( | ||
| <AnimatePresence onExitComplete={handleOnExitComplete}> | ||
| {!isExiting && ( | ||
| <MotionButton | ||
| data-testid="selected-date-filter" | ||
| initial={{width: 0, opacity: 0}} | ||
| animate={{width: 'auto', opacity: 1}} | ||
| exit={{width: 0, opacity: 0}} | ||
| transition={{duration: 0.35, ease: 'easeInOut'}} | ||
| iconRight={CloseIcon} | ||
| mode="bleed" | ||
| onClick={() => setIsExiting(true)} | ||
| padding={2} | ||
| selected | ||
| text={format(filterDate, 'PPP')} | ||
| /> | ||
| )} | ||
| </AnimatePresence> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
packages/sanity/src/core/releases/tool/overview/queryParamUtils.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import {type RouterContextValue} from 'sanity/router' | ||
|
|
||
| export type Mode = 'open' | 'archived' | ||
|
|
||
| export const DATE_SEARCH_PARAM_KEY = 'date' | ||
| export const GROUP_SEARCH_PARAM_KEY = 'group' | ||
|
|
||
| export const getInitialFilterDate = (router: RouterContextValue) => () => { | ||
| const activeFilterDate = new URLSearchParams(router.state._searchParams).get( | ||
| DATE_SEARCH_PARAM_KEY, | ||
| ) | ||
|
|
||
| return activeFilterDate ? new Date(activeFilterDate) : undefined | ||
| } | ||
|
|
||
| export const getInitialReleaseGroupMode = (router: RouterContextValue) => (): Mode => { | ||
| const activeGroupMode = new URLSearchParams(router.state._searchParams).get( | ||
| GROUP_SEARCH_PARAM_KEY, | ||
| ) | ||
|
|
||
| return activeGroupMode === 'archived' ? 'archived' : 'open' | ||
| } |
13 changes: 13 additions & 0 deletions
13
packages/sanity/src/core/releases/tool/overview/useTimezoneAdjustedDateTimeRange.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import {endOfDay, startOfDay} from 'date-fns' | ||
| import {useCallback} from 'react' | ||
|
|
||
| import useTimeZone from '../../../scheduledPublishing/hooks/useTimeZone' | ||
|
|
||
| export const useTimezoneAdjustedDateTimeRange = () => { | ||
| const {zoneDateToUtc} = useTimeZone() | ||
|
|
||
| return useCallback( | ||
| (date: Date) => [startOfDay(date), endOfDay(date)].map(zoneDateToUtc), | ||
| [zoneDateToUtc], | ||
| ) | ||
| } |