feat: ability to remove article from bookmarks if it cannot be loaded

lrtlt · Dec 17, 2024 · 0aa84ce · 0aa84ce
1 parent b5ab7df
commit 0aa84ce
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/app/Theme.ts b/app/Theme.ts
@@ -54,6 +54,7 @@ interface Dictionary {
   daily_question_vote: string;
   close: string;
   stream_blocked_warning: string;
+  remove_from_bookmarks: string;
 }
 
 export const strings: Dictionary = {
@@ -94,6 +95,7 @@ export const strings: Dictionary = {
   daily_question_vote: 'BALSUOTI',
   close: 'Uždaryti',
   stream_blocked_warning: 'Transliacija internetu negalima dėl autorių teisių apribojimų.',
+  remove_from_bookmarks: 'Pašalinti iš išsaugotų',
 };
 //#endregion
 

diff --git a/app/components/screenError/ScreenError.tsx b/app/components/screenError/ScreenError.tsx
@@ -8,6 +8,7 @@ import TextComponent from '../text/Text';
 interface Props {
   style?: ViewStyle;
   text: string;
+  actions?: JSX.Element;
 }
 
 const ScreenError: React.FC<React.PropsWithChildren<Props>> = (props) => {
@@ -16,6 +17,7 @@ const ScreenError: React.FC<React.PropsWithChildren<Props>> = (props) => {
     <View style={[styles.container, props.style]}>
       <IconScreenError size={64} color={colors.textError} />
       <TextComponent style={styles.text}>{props.text}</TextComponent>
+      {props.actions ? props.actions : null}
     </View>
   );
 };

diff --git a/app/screens/article/ArticleScreen.tsx b/app/screens/article/ArticleScreen.tsx
@@ -1,14 +1,15 @@
 import React, {useCallback} from 'react';
 import {StyleSheet, View} from 'react-native';
 import ArticleContentComponent, {ArticleSelectableItem} from './ArticleContentComponent';
-import {ScreenLoader, ScreenError, AdultContentWarning} from '../../components';
+import {ScreenLoader, ScreenError, AdultContentWarning, Text, TouchableDebounce} from '../../components';
 import {useTheme} from '../../Theme';
 import {isDefaultArticle} from '../../api/Types';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {MainStackParamList} from '../../navigation/MainStack';
 import useArticleScreenState from './useArticleScreenState';
 import useArticleAnalytics from './useArticleAnalytics';
+import {useArticleStorageStore} from '../../state/article_storage_store';
 
 type ScreenRouteProp = RouteProp<MainStackParamList, 'Article'>;
 type ScreenNavigationProp = StackNavigationProp<MainStackParamList, 'Article'>;
@@ -22,7 +23,13 @@ const ArticleScreen: React.FC<React.PropsWithChildren<Props>> = ({navigation, ro
   const {articleId, isMedia} = route.params;
   console.log(`articleId: ${articleId}, isMedia: ${isMedia}`);
 
-  const {strings} = useTheme();
+  const {colors, strings} = useTheme();
+
+  const articleStorage = useArticleStorageStore.getState();
+
+  const isBookmarked = useArticleStorageStore((state) =>
+    state.savedArticles.some((a) => a.id === route.params.articleId),
+  );
 
   const [{article, loadingState}, acceptAdultContent] = useArticleScreenState(articleId, isMedia);
 
@@ -73,7 +80,23 @@ const ArticleScreen: React.FC<React.PropsWithChildren<Props>> = ({navigation, ro
     case 'error': {
       return (
         <View style={styles.screen}>
-          <ScreenError text={strings.articleError} />
+          <ScreenError
+            text={strings.articleError}
+            actions={
+              isBookmarked ? (
+                <TouchableDebounce
+                  style={{backgroundColor: colors.primary, borderRadius: 6, marginTop: 24}}
+                  onPress={() => {
+                    articleStorage.removeArticle(route.params.articleId);
+                    navigation.goBack();
+                  }}>
+                  <Text style={{color: colors.onPrimary, padding: 12}} fontFamily="SourceSansPro-Regular">
+                    {strings.remove_from_bookmarks}
+                  </Text>
+                </TouchableDebounce>
+              ) : undefined
+            }
+          />
         </View>
       );
     }