chore: depreciate react-native-snackbar

lovegaoshi · Apr 23, 2024 · 66da698 · 66da698
1 parent 45b6d05
commit 66da698
Show file tree

Hide file tree

Showing 19 changed files with 181 additions and 193 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -93,7 +93,6 @@
     "react-native-screens": "3.29.0",
     "react-native-shadow-2": "^7.0.8",
     "react-native-share-menu": "git+https://github.com/lovegaoshi/react-native-share-menu.git",
-    "react-native-snackbar": "2.7.1",
     "react-native-svg": "^15.1.0",
     "react-native-svga-player": "git+https://[email protected]/lovegaoshi/react-native-svga-player.git",
     "react-native-tab-view": "^3.5.2",

diff --git a/patches/react-native-snackbar+2.7.1.patch b/patches/react-native-snackbar+2.7.1.patch
diff --git a/src/components/commonui/Snackbar.tsx b/src/components/commonui/Snackbar.tsx
@@ -1,13 +1,14 @@
 // Credits to @matewka: https://snack.expo.dev/@matewka/react-native-paper-snackbar-problem
 import * as React from 'react';
-import { Snackbar, Portal } from 'react-native-paper';
+import { Snackbar, Portal, ActivityIndicator } from 'react-native-paper';
 
-import useSnack from '@stores/useSnack';
+import useSnack, { InfiniteDuration } from '@stores/useSnack';
 import { useNoxSetting } from '@stores/useApp';
 
 export default function SnackBar() {
   const { snackMsg, snackDuration, snackVisible, snackOnDismiss } = useSnack();
   const playerStyle = useNoxSetting(state => state.playerStyle);
+  const persisting = snackDuration === InfiniteDuration;
 
   return (
     <Portal>
@@ -16,6 +17,10 @@ export default function SnackBar() {
         visible={snackVisible}
         onDismiss={snackOnDismiss}
         duration={snackDuration}
+        icon={
+          persisting ? () => <ActivityIndicator></ActivityIndicator> : undefined
+        }
+        onIconPress={persisting ? () => undefined : undefined}
       >
         {snackMsg}
       </Snackbar>

diff --git a/src/components/login/Bilibili.tsx b/src/components/login/Bilibili.tsx
@@ -3,21 +3,22 @@ import { View, SafeAreaView, StyleSheet } from 'react-native';
 import { Text, Avatar, ActivityIndicator, Button } from 'react-native-paper';
 import { useTranslation } from 'react-i18next';
 import QRCode from 'react-native-qrcode-svg';
-import Snackbar from 'react-native-snackbar';
 import CookieManager from '@react-native-cookies/cookies';
 
 import { useNoxSetting } from '@stores/useApp';
 import { logger } from '@utils/Logger';
 import GenericInputDialog from '../dialogs/GenericInputDialog';
 import BiliSelectFavButtton from './BiliSelectFavButtton';
 import useBiliLogin from './useBiliLoginApp';
+import useSnack from '@stores/useSnack';
 
 const domain = 'https://bilibili.com';
 
 export default () => {
   const { t } = useTranslation();
   const playerStyle = useNoxSetting(state => state.playerStyle);
   const appRefresh = useNoxSetting(state => state.appRefresh);
+  const setSnack = useSnack(state => state.setSnack);
   const [inputCookieVisible, setInputCookieVisible] = React.useState(false);
   const {
     qrcode,
@@ -73,26 +74,21 @@ export default () => {
 
   const loginPage = () => {
     const generateBiliQRCode = async () => {
-      try {
-        Snackbar.show({
-          text: t('Login.BilibiliLoginQRGeneration'),
-          duration: Snackbar.LENGTH_INDEFINITE,
-        });
+      const processFunction = async () => {
         const qrCodeReq = await getQRLoginReq();
         setQrCode(qrCodeReq.url);
         setQrCodeKey(qrCodeReq.key);
         setQrCodeExpire(qrCodeReq.expire);
-        Snackbar.dismiss();
-        Snackbar.show({
-          text: t('Login.BilibiliLoginQRGenerated'),
-        });
-      } catch (error) {
-        Snackbar.dismiss();
-        Snackbar.show({
-          text: t('Login.BilibiliLoginQRGenerateFailed'),
-        });
-        logger.error(`[biliLogin] ${error}`);
-      }
+      };
+
+      setSnack({
+        snackMsg: {
+          processing: t('Login.BilibiliLoginQRGeneration'),
+          success: t('Login.BilibiliLoginQRGenerated'),
+          fail: t('Login.BilibiliLoginQRGenerateFailed'),
+        },
+        processFunction,
+      });
     };
 
     return (

diff --git a/src/components/login/useBiliLogin.tsx b/src/components/login/useBiliLogin.tsx
@@ -2,13 +2,13 @@
 import * as React from 'react';
 import CookieManager from '@react-native-cookies/cookies';
 import { useTranslation } from 'react-i18next';
-import Snackbar from 'react-native-snackbar';
 
 import { logger } from '@utils/Logger';
 import bfetch from '@utils/BiliFetch';
 import { addCookie } from '@utils/ChromeStorage';
 import { getLoginStatus } from '@utils/Login';
 import { throttler } from '@utils/throttle';
+import useSnack from '@stores/useSnack';
 
 export interface QRCodeReq {
   url: string;
@@ -66,6 +66,7 @@ const loginQRVerification = async () => {
 
 const useBiliLogin = () => {
   const { t } = useTranslation();
+  const setSnack = useSnack(state => state.setSnack);
   const [qrcode, setQrCode] = React.useState<string>('');
   const [qrcodeKey, setQrCodeKey] = React.useState<string>('');
   const [qrcodeExpire, setQrCodeExpire] = React.useState<number>(-1);
@@ -163,8 +164,8 @@ const useBiliLogin = () => {
       // network error; abort qr login attempts
       clearQRLogin();
       logger.error(`[biliLogin] ${error}`);
-      Snackbar.show({
-        text: t('Login.BilibiliLoginProbeFailed'),
+      setSnack({
+        snackMsg: { success: t('Login.BilibiliLoginProbeFailed') },
       });
     }
   };
@@ -177,8 +178,8 @@ const useBiliLogin = () => {
       if (qrcodeExpire === 0) {
         clearInterval(timer);
         setQrCode('');
-        Snackbar.show({
-          text: t('Login.BilibiliLoginQRExpired'),
+        setSnack({
+          snackMsg: { success: t('Login.BilibiliLoginQRExpired') },
         });
       } else {
         probeQRLogin();

diff --git a/src/components/login/useBiliLoginApp.tsx b/src/components/login/useBiliLoginApp.tsx
@@ -2,10 +2,10 @@
 import * as React from 'react';
 import CookieManager from '@react-native-cookies/cookies';
 import { useTranslation } from 'react-i18next';
-import Snackbar from 'react-native-snackbar';
 import md5 from 'md5';
 
 import { logger } from '@utils/Logger';
+import useSnack from '@stores/useSnack';
 import bfetch, { parseBodyParams } from '@utils/BiliFetch';
 import { addCookie } from '@utils/ChromeStorage';
 import { getLoginStatus } from '@utils/Login';
@@ -104,6 +104,7 @@ const loginQRVerification = async () => {
 
 const useBiliLogin = () => {
   const { t } = useTranslation();
+  const setSnack = useSnack(state => state.setSnack);
   const [qrcode, setQrCode] = React.useState<string>('');
   const [qrcodeKey, setQrCodeKey] = React.useState<string>('');
   const [qrcodeExpire, setQrCodeExpire] = React.useState<number>(-1);
@@ -224,8 +225,8 @@ const useBiliLogin = () => {
       // network error; abort qr login attempts
       clearQRLogin();
       logger.error(`[biliLogin] ${error}`);
-      Snackbar.show({
-        text: t('Login.BilibiliLoginProbeFailed'),
+      setSnack({
+        snackMsg: { success: t('Login.BilibiliLoginProbeFailed') },
       });
     }
   };
@@ -269,8 +270,8 @@ const useBiliLogin = () => {
       if (qrcodeExpire === 0) {
         clearInterval(timer);
         setQrCode('');
-        Snackbar.show({
-          text: t('Login.BilibiliLoginQRExpired'),
+        setSnack({
+          snackMsg: { success: t('Login.BilibiliLoginQRExpired') },
         });
       } else {
         probeQRLogin();

diff --git a/src/components/login/useBiliLoginLegacy.tsx b/src/components/login/useBiliLoginLegacy.tsx
@@ -2,9 +2,9 @@
 import * as React from 'react';
 import CookieManager from '@react-native-cookies/cookies';
 import { useTranslation } from 'react-i18next';
-import Snackbar from 'react-native-snackbar';
 
 import { logger } from '@utils/Logger';
+import useSnack from '@stores/useSnack';
 import bfetch from '@utils/BiliFetch';
 import { addCookie } from '@utils/ChromeStorage';
 import { getLoginStatus } from '@utils/Login';
@@ -20,6 +20,7 @@ const oauthKey = 'oauthKey';
 
 const useBiliLogin = () => {
   const { t } = useTranslation();
+  const setSnack = useSnack(state => state.setSnack);
   const [qrcode, setQrCode] = React.useState<string>('');
   const [qrcodeKey, setQrCodeKey] = React.useState<string>('');
   const [qrcodeExpire, setQrCodeExpire] = React.useState<number>(-1);
@@ -112,8 +113,8 @@ const useBiliLogin = () => {
       // network error; abort qr login attempts
       clearQRLogin();
       logger.error(`[biliLogin] ${error}`);
-      Snackbar.show({
-        text: t('Login.BilibiliLoginProbeFailed'),
+      setSnack({
+        snackMsg: { success: t('Login.BilibiliLoginProbeFailed') },
       });
     }
   };
@@ -126,8 +127,8 @@ const useBiliLogin = () => {
       if (qrcodeExpire === 0) {
         clearInterval(timer);
         setQrCode('');
-        Snackbar.show({
-          text: t('Login.BilibiliLoginQRExpired'),
+        setSnack({
+          snackMsg: { success: t('Login.BilibiliLoginQRExpired') },
         });
       } else {
         probeQRLogin();

diff --git a/src/components/playlist/Menu/usePlaylistMenu.ts b/src/components/playlist/Menu/usePlaylistMenu.ts
@@ -1,29 +1,30 @@
-import Snackbar from 'react-native-snackbar';
 import { useTranslation } from 'react-i18next';
 
 import { useNoxSetting } from '@stores/useApp';
 import usePlaylistCRUD from '@hooks/usePlaylistCRUD';
 import useAlert from '@components/dialogs/useAlert';
 import usePlaylistAA from '@hooks/usePlaylistAA';
+import useSnack from '@stores/useSnack';
 
 interface Props {
   callback?: () => void;
 }
 export default ({ callback = () => {} }: Props) => {
   const { t } = useTranslation();
+  const setSnack = useSnack(state => state.setSnack);
   const currentPlaylist = useNoxSetting(state => state.currentPlaylist);
   const playlistCRUD = usePlaylistCRUD();
   const { removePlaylist } = usePlaylistAA();
   const { OneWayAlert, TwoWayAlert } = useAlert();
 
   const playlistSync2Bilibili = async (playlist = currentPlaylist) => {
-    Snackbar.show({
-      text: t('PlaylistOperations.bilisyncing', { playlist }),
-      duration: Snackbar.LENGTH_INDEFINITE,
+    setSnack({
+      snackMsg: {
+        processing: t('PlaylistOperations.bilisyncing', { playlist }),
+        success: t('PlaylistOperations.bilisynced', { playlist }),
+      },
+      processFunction: () => playlistCRUD.playlistSync2Bilibili(playlist),
     });
-    await playlistCRUD.playlistSync2Bilibili(playlist);
-    Snackbar.dismiss();
-    Snackbar.show({ text: t('PlaylistOperations.bilisynced', { playlist }) });
   };
 
   const playlistAnalyze = (playlist = currentPlaylist) => {
@@ -58,36 +59,36 @@ export default ({ callback = () => {} }: Props) => {
       t('PlaylistOperations.resetListTitle', { playlist }),
       t('PlaylistOperations.resetListMsg', { playlist }),
       async () => {
-        Snackbar.show({
-          text: t('PlaylistOperations.reloading', { playlist }),
-          duration: Snackbar.LENGTH_INDEFINITE,
+        setSnack({
+          snackMsg: {
+            processing: t('PlaylistOperations.reloading', { playlist }),
+            success: t('PlaylistOperations.reloaded', { playlist }),
+          },
+          processFunction: () => playlistCRUD.playlistReload(playlist),
+          callback,
         });
-        await playlistCRUD.playlistReload(playlist);
-        Snackbar.dismiss();
-        Snackbar.show({ text: t('PlaylistOperations.reloaded', { playlist }) });
-        callback();
       }
     );
   };
 
   const playlistCleanup = async (playlist = currentPlaylist) => {
-    Snackbar.show({
-      text: t('PlaylistOperations.cleaning', { playlist }),
-      duration: Snackbar.LENGTH_INDEFINITE,
+    setSnack({
+      snackMsg: {
+        processing: t('PlaylistOperations.cleaning', { playlist }),
+        success: t('PlaylistOperations.cleaned', { playlist }),
+      },
+      processFunction: () => playlistCRUD.playlistCleanup(playlist),
     });
-    await playlistCRUD.playlistCleanup(playlist);
-    Snackbar.dismiss();
-    Snackbar.show({ text: t('PlaylistOperations.cleaned', { playlist }) });
   };
 
   const playlistBiliShazam = async (playlist = currentPlaylist) => {
-    Snackbar.show({
-      text: t('PlaylistOperations.bilishazaming', { playlist }),
-      duration: Snackbar.LENGTH_INDEFINITE,
+    setSnack({
+      snackMsg: {
+        processing: t('PlaylistOperations.bilishazaming', { playlist }),
+        success: t('PlaylistOperations.bilishazamed', { playlist }),
+      },
+      processFunction: () => playlistCRUD.playlistBiliShazam(playlist),
     });
-    await playlistCRUD.playlistBiliShazam(playlist);
-    Snackbar.dismiss();
-    Snackbar.show({ text: t('PlaylistOperations.bilishazamed', { playlist }) });
   };
   return {
     ...playlistCRUD,