From 785b77b295c859d3e1bbee2a13fb90aaa7d433ba Mon Sep 17 00:00:00 2001 From: Nika Shelia Date: Sun, 31 Aug 2025 22:00:01 +0400 Subject: [PATCH 01/72] Merge pull request #15 from walofficial/feature/toasts-refactor feat: toasts-refactor --- app/(tabs)/shareintent.tsx | 1 - components/AccessView/index.tsx | 12 ++---------- components/CameraPage/CaptureButton.tsx | 2 +- components/CameraPage/LiveStream.tsx | 1 - components/CameraPage/index.tsx | 6 +++--- components/LocationFeed/RatePlace.tsx | 1 - components/MakePublic/index.tsx | 1 - components/SpacesBottomSheet/index.tsx | 4 +--- components/TakeVideo.tsx | 6 +++--- hooks/usePokeUser.ts | 1 - hooks/useSendPublicKey.ts | 3 --- hooks/useUploadVideo.ts | 12 ++++++------ lib/haptics.ts | 1 - lib/share.ts | 5 +---- package-lock.json | 14 -------------- package.json | 1 - screens/mediapage.tsx | 5 ++--- screens/record.tsx | 4 ++-- 18 files changed, 21 insertions(+), 59 deletions(-) diff --git a/app/(tabs)/shareintent.tsx b/app/(tabs)/shareintent.tsx index 9b6edb3a..6d6856ab 100644 --- a/app/(tabs)/shareintent.tsx +++ b/app/(tabs)/shareintent.tsx @@ -15,7 +15,6 @@ import { import { useSession } from '@/components/AuthLayer'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import useFeeds from '@/hooks/useFeeds'; -import { toast } from '@backpackapp-io/react-native-toast'; import { useToast } from '@/components/ToastUsage'; export default function ShareIntent() { diff --git a/components/AccessView/index.tsx b/components/AccessView/index.tsx index c7983bde..e5ccbf94 100644 --- a/components/AccessView/index.tsx +++ b/components/AccessView/index.tsx @@ -22,24 +22,16 @@ import { zodResolver } from '@hookform/resolvers/zod'; import { z } from 'zod'; import { Text } from '@/components/ui/text'; import Button from '@/components/Button'; -// import { Button } from "@/components/ui/button"; import { OtpInput } from 'react-native-otp-entry'; import { useMutation, useQuery } from '@tanstack/react-query'; import { authenticatingState } from '@/lib/state/auth'; import { useAtom, useAtomValue } from 'jotai'; import { supabase } from '@/lib/supabase'; -import { colors } from '@/lib/colors'; -import { Redirect, useRouter } from 'expo-router'; -import { toast } from '@backpackapp-io/react-native-toast'; import { AndroidAutoSMSRef } from './AndroidAutoSMS'; import { LogBox } from 'react-native'; -import { BottomSheetTextInput, BottomSheetView } from '@gorhom/bottom-sheet'; +import { BottomSheetView } from '@gorhom/bottom-sheet'; import { RefObject } from 'react'; -import { - showPhoneInputState, - showCountrySelectorState, - selectedCountryState, -} from './atom'; +import { showPhoneInputState, showCountrySelectorState } from './atom'; import { FontSizes, useTheme } from '@/lib/theme'; import { BlurView } from 'expo-blur'; import CountrySelector from '@/components/CountrySelector'; diff --git a/components/CameraPage/CaptureButton.tsx b/components/CameraPage/CaptureButton.tsx index 8cd9e26b..2a07b61f 100644 --- a/components/CameraPage/CaptureButton.tsx +++ b/components/CameraPage/CaptureButton.tsx @@ -16,7 +16,6 @@ import Reanimated, { import type { Camera, VideoFile } from 'react-native-vision-camera'; import { CAPTURE_BUTTON_SIZE } from './Constants'; import AsyncStorage from '@react-native-async-storage/async-storage'; -import { toast } from '@backpackapp-io/react-native-toast'; import { useHaptics } from '@/lib/haptics'; import { useToast } from '../ToastUsage'; import { t } from '@/lib/i18n'; @@ -53,6 +52,7 @@ const _CaptureButton: React.FC = ({ const recordingProgress = useSharedValue(0); const recordingTimer = useRef | null>(null); const haptic = useHaptics(); + const { dismiss } = useToast(); useEffect(() => { setRecordingTimeView(isRecording); diff --git a/components/CameraPage/LiveStream.tsx b/components/CameraPage/LiveStream.tsx index 0dc2ce51..1874ea87 100644 --- a/components/CameraPage/LiveStream.tsx +++ b/components/CameraPage/LiveStream.tsx @@ -10,7 +10,6 @@ import { useRoom, useRoomContext, } from '@livekit/react-native'; -import { toast } from '@backpackapp-io/react-native-toast'; import { Track, LocalVideoTrack } from 'livekit-client'; import { RoomControls } from './RoomControls'; // @ts-ignore diff --git a/components/CameraPage/index.tsx b/components/CameraPage/index.tsx index c9df53c9..dbb645a5 100644 --- a/components/CameraPage/index.tsx +++ b/components/CameraPage/index.tsx @@ -55,9 +55,9 @@ import { usePreferredCameraDevice } from '../../hooks/usePreferredCameraDevice'; import { CaptureButton } from './CaptureButton'; import { useLocalSearchParams, useNavigation, useRouter } from 'expo-router'; import { CaptureButtonPhoto } from './CaptureButtonPhoto'; -import { toast } from '@backpackapp-io/react-native-toast'; import { LiveButton } from './LiveButton'; import { t } from '@/lib/i18n'; +import { useToast } from '../ToastUsage'; const ReanimatedCamera = Reanimated.createAnimatedComponent(Camera); Reanimated.addWhitelistedNativeProps({ @@ -89,7 +89,7 @@ const CameraOverlay = Reanimated.createAnimatedComponent(View); export default function CameraPage(): React.ReactElement { const navigation = useNavigation(); const { feedId } = useLocalSearchParams(); - + const { dismiss } = useToast(); const [liveDescription, setLiveDescription] = useState(''); const shouldShowMediaTypeSwitch = true; @@ -501,7 +501,7 @@ export default function CameraPage(): React.ReactElement { { - toast.remove(); + dismiss('all'); router.navigate({ pathname: '/(tabs)/(home)/[feedId]', params: { diff --git a/components/LocationFeed/RatePlace.tsx b/components/LocationFeed/RatePlace.tsx index 3f10fc71..e765ae4e 100644 --- a/components/LocationFeed/RatePlace.tsx +++ b/components/LocationFeed/RatePlace.tsx @@ -1,4 +1,3 @@ -import { toast } from '@backpackapp-io/react-native-toast'; import { ThumbsDown, X } from 'lucide-react-native'; import { Heart } from 'lucide-react-native'; import { TouchableOpacity, StyleSheet } from 'react-native'; diff --git a/components/MakePublic/index.tsx b/components/MakePublic/index.tsx index c782fc7d..9db656e0 100644 --- a/components/MakePublic/index.tsx +++ b/components/MakePublic/index.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'; import { useMakePublicMutation } from '@/hooks/useMakePublicMutation'; -import { toast } from '@backpackapp-io/react-native-toast'; import { useToast } from '../ToastUsage'; import { t } from '@/lib/i18n'; diff --git a/components/SpacesBottomSheet/index.tsx b/components/SpacesBottomSheet/index.tsx index 1dfb5e6d..5afb5f85 100644 --- a/components/SpacesBottomSheet/index.tsx +++ b/components/SpacesBottomSheet/index.tsx @@ -1,10 +1,8 @@ -// @ts-nocheck -import React, { useCallback, useEffect } from 'react'; +import React, { useCallback } from 'react'; import { BottomSheetFooter, BottomSheetModal } from '@gorhom/bottom-sheet'; import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet'; import SpacesSheetHeader from './SpacesSheetHeader'; import { LiveKitRoom } from '@livekit/react-native'; -import { toast } from '@backpackapp-io/react-native-toast'; import { useAtom } from 'jotai'; import { activeLivekitRoomState } from './atom'; import PresenceDialog from './Viewers'; diff --git a/components/TakeVideo.tsx b/components/TakeVideo.tsx index f3db85d4..4353baff 100644 --- a/components/TakeVideo.tsx +++ b/components/TakeVideo.tsx @@ -3,19 +3,19 @@ import { View, StyleSheet } from 'react-native'; import { useLocalSearchParams, useRouter } from 'expo-router'; import Ionicons from '@expo/vector-icons/Ionicons'; import { Button } from './ui/button'; -import { toast } from '@backpackapp-io/react-native-toast'; import { useTheme } from '@/lib/theme'; import { useColorScheme } from '@/lib/useColorScheme'; +import { useToast } from './ToastUsage'; export default function TakeVideo({ disabled }: { disabled: boolean }) { const router = useRouter(); const { feedId } = useLocalSearchParams(); const theme = useTheme(); const { isDarkColorScheme } = useColorScheme(); - + const { dismiss } = useToast(); const onTakeVideoClick = async () => { // Dismiss previous toasts if any - toast.dismiss(); + dismiss('all'); try { const cachedVideoPath = await AsyncStorage.getItem( diff --git a/hooks/usePokeUser.ts b/hooks/usePokeUser.ts index 2bf9a536..a6f280ed 100644 --- a/hooks/usePokeUser.ts +++ b/hooks/usePokeUser.ts @@ -1,5 +1,4 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; -import { toast } from '@backpackapp-io/react-native-toast'; import { pokeUserLiveActionsPokeTargetUserIdPostMutation } from '@/lib/api/generated/@tanstack/react-query.gen'; import { useToast } from '@/components/ToastUsage'; diff --git a/hooks/useSendPublicKey.ts b/hooks/useSendPublicKey.ts index d7388926..0a276300 100644 --- a/hooks/useSendPublicKey.ts +++ b/hooks/useSendPublicKey.ts @@ -2,8 +2,6 @@ import { useMutation } from '@tanstack/react-query'; import ProtocolService from '@/lib/services/ProtocolService'; import { publicKeyState } from '@/lib/state/auth'; import { useAtom } from 'jotai'; -import { toast } from '@backpackapp-io/react-native-toast'; -import { sendPublicKeyChatSendPublicKeyPostMutation } from '@/lib/api/generated/@tanstack/react-query.gen'; import { sendPublicKeyChatSendPublicKeyPost } from '@/lib/api/generated'; export default function useSendPublicKey() { @@ -24,7 +22,6 @@ export default function useSendPublicKey() { }, }); - toast.dismiss('sending-public-key'); setPublicKey(identityKeyPair.publicKey); }, }); diff --git a/hooks/useUploadVideo.ts b/hooks/useUploadVideo.ts index 84643592..6c00c4ac 100644 --- a/hooks/useUploadVideo.ts +++ b/hooks/useUploadVideo.ts @@ -6,7 +6,6 @@ import { useAtom, useAtomValue } from 'jotai'; import { verificationRefetchIntervalState } from '@/lib/state/chat'; import { useRef } from 'react'; import { Alert } from 'react-native'; -import { toast } from '@backpackapp-io/react-native-toast'; import useAuth from './useAuth'; import { LocationFeedPost, @@ -23,6 +22,7 @@ import { import { formDataBodySerializer } from '@/lib/utils/form-data'; import { useToast } from '@/components/ToastUsage'; import { t } from '@/lib/i18n'; +import { dismiss } from 'expo-router/build/global-state/routing'; export const useUploadVideo = ({ feedId, @@ -48,7 +48,7 @@ export const useUploadVideo = ({ const { user } = useAuth(); const timeoutRef = useRef(null); - const { success } = useToast(); + const { success, dismiss } = useToast(); const uploadBlob = useMutation({ mutationKey: ['upload-blob', feedId, isPhoto], @@ -157,9 +157,9 @@ export const useUploadVideo = ({ ) => { return index === 0 ? { - ...page, - data: [optimisticVerification, ...page.data], - } + ...page, + data: [optimisticVerification, ...page.data], + } : page; }, ), @@ -191,7 +191,7 @@ export const useUploadVideo = ({ } }, onError: (error) => { - toast.dismiss('upload-blob'); + dismiss("all") if (error) { console.log('error', error); Alert.alert(isPhoto ? 'ფოტო ვერ აიტვირთა' : 'ვიდეო ვერ აიტვირთა'); diff --git a/lib/haptics.ts b/lib/haptics.ts index d81eab7d..8abe2990 100644 --- a/lib/haptics.ts +++ b/lib/haptics.ts @@ -3,7 +3,6 @@ import * as Device from 'expo-device'; import { impactAsync, ImpactFeedbackStyle } from 'expo-haptics'; import { isIOS, isWeb } from './platform'; -import { toast } from '@backpackapp-io/react-native-toast'; export function useHaptics() { return React.useCallback( diff --git a/lib/share.ts b/lib/share.ts index 1f193c3d..437d3d6d 100644 --- a/lib/share.ts +++ b/lib/share.ts @@ -1,7 +1,6 @@ import { Platform, Share } from 'react-native'; import { setStringAsync } from 'expo-clipboard'; import { isAndroid, isIOS } from '@/lib/platform'; -import { toast } from '@backpackapp-io/react-native-toast'; import { ShareOptions } from 'react-native-share'; /** * This function shares a URL using the native Share API if available, or copies it to the clipboard @@ -42,8 +41,6 @@ export async function shareText(text: string) { await Share.share({ message: text }); } else { await setStringAsync(text); - toast('Copied to clipboard', { - id: 'clipboard-check', - }); + } } diff --git a/package-lock.json b/package-lock.json index 208b0dcd..11b60954 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,6 @@ "version": "1.0.22", "hasInstallScript": true, "dependencies": { - "@backpackapp-io/react-native-toast": "^0.13.0", "@bacons/apple-targets": "^0.2.1", "@config-plugins/react-native-webrtc": "^10.0.0", "@expo/config-plugins": "^9.0.0", @@ -2344,19 +2343,6 @@ "node": ">=6.9.0" } }, - "node_modules/@backpackapp-io/react-native-toast": { - "version": "0.13.0", - "resolved": "https://registry.npmjs.org/@backpackapp-io/react-native-toast/-/react-native-toast-0.13.0.tgz", - "integrity": "sha512-kutFSE1vi77ybNV24JSnKQ4WUgWZ+LcYsrdAyl5ztEWGP7FRsfinsuaOrBQwDBGxm0rzMFeKM5K7fRHa/Hvy8A==", - "license": "MIT", - "peerDependencies": { - "react": "*", - "react-native": "*", - "react-native-gesture-handler": ">=2.2.1", - "react-native-reanimated": ">=2.8.0", - "react-native-safe-area-context": ">=4.2.4" - } - }, "node_modules/@bacons/apple-targets": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/@bacons/apple-targets/-/apple-targets-0.2.1.tgz", diff --git a/package.json b/package.json index 4b2828bf..6d68469c 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ } }, "dependencies": { - "@backpackapp-io/react-native-toast": "^0.13.0", "@bacons/apple-targets": "^0.2.1", "@config-plugins/react-native-webrtc": "^10.0.0", "@expo/config-plugins": "^9.0.0", diff --git a/screens/mediapage.tsx b/screens/mediapage.tsx index aa4c6f1c..bd14f4fb 100644 --- a/screens/mediapage.tsx +++ b/screens/mediapage.tsx @@ -34,7 +34,6 @@ import SubmitButton from '@/components/SubmitButton'; import RetryButton from '@/components/RetryButton'; import Button from '@/components/Button'; import AsyncStorage from '@react-native-async-storage/async-storage'; -import { toast } from '@backpackapp-io/react-native-toast'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useToast } from '@/components/ToastUsage'; import { t } from '@/lib/i18n'; @@ -76,7 +75,7 @@ export default function MediaPage(): React.ReactElement { 'none', ); - const { success } = useToast(); + const { success, dismiss } = useToast(); const [mediaPath, setMediaPath] = useState(null); const videoRef = useRef