-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Maintenance mode improvements (#2367)
* maintenance stuff * remove unnecessary check * add bottom sheet for maintenance notice * fix alert icon stroke width --------- Co-authored-by: kaito <80802871+kaitoo1@users.noreply.github.com>
- Loading branch information
Showing
12 changed files
with
284 additions
and
217 deletions.
There are no files selected for viewing
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
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,107 @@ | ||
| import AsyncStorage from '@react-native-async-storage/async-storage'; | ||
| import { useCallback, useEffect, useState } from 'react'; | ||
| import { View } from 'react-native'; | ||
| import { contexts } from 'shared/analytics/constants'; | ||
| import { | ||
| MaintenanceContent, | ||
| useMaintenanceContext, | ||
| } from 'shared/contexts/MaintenanceStatusContext'; | ||
| import { AlertIcon } from 'src/icons/AlertIcon'; | ||
| import { useEffectOnAppForeground } from 'src/utils/useEffectOnAppForeground'; | ||
|
|
||
| import { useBottomSheetModalActions } from '~/contexts/BottomSheetModalContext'; | ||
|
|
||
| import { Button } from './Button'; | ||
| import { BaseM, TitleL } from './Text'; | ||
| import { Typography } from './Typography'; | ||
|
|
||
| export function MaintenanceScreen() { | ||
| const { currentlyActiveMaintenanceNoticeContent } = useMaintenanceContext(); | ||
|
|
||
| return ( | ||
| <View className="flex-1 bg-white dark:bg-black-900 flex justify-center items-center p-6"> | ||
| <Typography className="text-l mb-1" font={{ family: 'ABCDiatype', weight: 'Bold' }}> | ||
| Maintenance in Progress | ||
| </Typography> | ||
| <Typography | ||
| className="text-l text-center leading-6" | ||
| font={{ family: 'ABCDiatype', weight: 'Regular' }} | ||
| > | ||
| {currentlyActiveMaintenanceNoticeContent?.message} | ||
| </Typography> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| export function CheckMaintenanceOnAppForeground() { | ||
| const { fetchMaintenanceModeStatus } = useMaintenanceContext(); | ||
|
|
||
| useEffectOnAppForeground(fetchMaintenanceModeStatus); | ||
|
|
||
| return <></>; | ||
| } | ||
|
|
||
| export function MaintenanceNoticeBottomSheet({ onClose }: { onClose: () => void }) { | ||
| const { upcomingMaintenanceNoticeContent } = useMaintenanceContext(); | ||
|
|
||
| const handleContinuePress = useCallback(() => { | ||
| onClose(); | ||
| }, [onClose]); | ||
|
|
||
| return ( | ||
| <View className="flex items-center space-y-2 "> | ||
| <View className="bg-offWhite rounded-full p-3"> | ||
| <AlertIcon color="#000000" width={40} height={40} /> | ||
| </View> | ||
| <TitleL classNameOverride="m-4">Upcoming Maintenance</TitleL> | ||
| <BaseM classNameOverride="text-center mb-4"> | ||
| {upcomingMaintenanceNoticeContent?.message} | ||
| </BaseM> | ||
| <Button | ||
| className="w-full " | ||
| containerClassName="rounded-none" | ||
| text="continue" | ||
| eventElementId="Maintenance Notice Continue Button" | ||
| eventName="Pressed Maintenance Notice Continue Button" | ||
| eventContext={contexts.Maintenance} | ||
| onPress={handleContinuePress} | ||
| /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| export function MaintenanceNoticeBottomSheetWrapper({ | ||
| noticeContent, | ||
| }: { | ||
| noticeContent: MaintenanceContent; | ||
| }) { | ||
| const [hasSeenNotice, setHasSeenNotice] = useState('loading'); | ||
|
|
||
| const { showBottomSheetModal, hideBottomSheetModal } = useBottomSheetModalActions(); | ||
| const handleBottomSheetClose = useCallback(() => { | ||
| AsyncStorage.setItem(noticeContent.id, 'true'); | ||
| }, [noticeContent.id]); | ||
|
|
||
| useEffect(() => { | ||
| const getNoticeStatus = async () => { | ||
| try { | ||
| const seen = await AsyncStorage.getItem(noticeContent.id); | ||
|
|
||
| setHasSeenNotice(seen === 'true' ? 'true' : 'false'); | ||
| } catch (error) {} | ||
| }; | ||
|
|
||
| getNoticeStatus(); | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| if (hasSeenNotice === 'false') { | ||
| showBottomSheetModal({ | ||
| content: <MaintenanceNoticeBottomSheet onClose={hideBottomSheetModal} />, | ||
| onDismiss: handleBottomSheetClose, | ||
| }); | ||
| } | ||
| }, [handleBottomSheetClose, hasSeenNotice, hideBottomSheetModal, showBottomSheetModal]); | ||
|
|
||
| return null; | ||
| } |
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
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
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 |
|---|---|---|
| @@ -1,8 +1,17 @@ | ||
| import Svg, { Path, SvgProps } from 'react-native-svg'; | ||
| export function AlertIcon(props: SvgProps) { | ||
| const color = props.color ?? '#F00000'; | ||
| return ( | ||
| <Svg width={16} height={16} fill="none" {...props}> | ||
| <Path stroke="#F00000" d="M8 6.333V10M8 11.667V11M8 2l6.667 11.333H1.334L8.001 2Z" /> | ||
| <Svg | ||
| width={props.width || 16} | ||
| height={props.height || 16} | ||
| viewBox="0 0 40 40" | ||
| fill="none" | ||
| {...props} | ||
| > | ||
| <Path d="M20 15.833V24.9997" stroke={color} strokeWidth="2" /> | ||
| <Path d="M20 29.1667V27.5" stroke={color} strokeWidth="2" /> | ||
| <Path d="M20.0002 5L36.6668 33.3333H3.3335L20.0002 5Z" stroke={color} strokeWidth="2" /> | ||
| </Svg> | ||
| ); | ||
| } |
Oops, something went wrong.