LUN-132: Favorites

assets/images/index.ts

@@ -44,8 +44,11 @@ import OpenLockIcon from './open-lock-icon.svg'
 import QRCodeIcon from './qr-code-icon.svg'
 import RepeatIcon from './repeat-icon.svg'
 import ShareIcon from './share-icon.svg'
-import StartIconGrey from './star-icon-grey.svg'
-import StartIconWhite from './star-icon-white.svg'
+import StarCircleIconGreyFilled from './star-circle-icon-grey-filled.svg'
+import StarCircleIconGrey from './star-circle-icon-grey.svg'
+import StarIconGreyFilled from './star-icon-grey-filled.svg'
+import StarIconGrey from './star-icon-grey.svg'
+import StarIconWhite from './star-icon-white.svg'
 import TrashIcon from './trash-bin-icon.svg'
 import TrophyIcon from './trophy-icon.svg'
 import VolumeUpCircleIcon from './volume-up-circle-icon.svg'
@@ -97,8 +100,11 @@ export {
   QRCodeIcon,
   RepeatIcon,
   ShareIcon,
-  StartIconGrey,
-  StartIconWhite,
+  StarCircleIconGrey,
+  StarCircleIconGreyFilled,
+  StarIconGrey,
+  StarIconGreyFilled,
+  StarIconWhite,
   TrashIcon,
   TrophyIcon,
   VolumeUpCircleIcon

src/components/AudioPlayer.tsx

@@ -15,14 +15,7 @@ export interface AudioPlayerProps {
   submittedAlternative?: string | null
 }
 
-const StyledView = styled.View`
-  align-items: center;
-  margin-bottom: ${props => props.theme.spacings.sm};
-`
-
 const VolumeIcon = styled.TouchableOpacity<{ disabled: boolean; isActive: boolean }>`
-  position: absolute;
-  top: ${wp('-4.5%')}px;
   width: ${wp('9%')}px;
   height: ${wp('9%')}px;
   border-radius: 50px;
@@ -107,15 +100,13 @@ const AudioPlayer = ({ document, disabled, submittedAlternative }: AudioPlayerPr
   }
 
   return (
-    <StyledView>
-      <VolumeIcon
-        disabled={disabled || !isInitialized}
-        isActive={isActive}
-        onPress={handleSpeakerClick}
-        accessibilityRole='button'>
-        <VolumeUpCircleIcon width={wp('8%')} height={wp('8%')} />
-      </VolumeIcon>
-    </StyledView>
+    <VolumeIcon
+      disabled={disabled || !isInitialized}
+      isActive={isActive}
+      onPress={handleSpeakerClick}
+      accessibilityRole='button'>
+      <VolumeUpCircleIcon width={wp('8%')} height={wp('8%')} />
+    </VolumeIcon>
   )
 }
 

src/components/DocumentImageSection.tsx

@@ -0,0 +1,49 @@
+import React, { ReactElement } from 'react'
+import { widthPercentageToDP as wp } from 'react-native-responsive-screen'
+import styled from 'styled-components/native'
+
+import { Document } from '../constants/endpoints'
+import AudioPlayer from './AudioPlayer'
+import FavoriteButton from './FavoriteButton'
+import ImageCarousel from './ImageCarousel'
+
+const AudioContainer = styled.View`
+  position: absolute;
+  bottom: ${wp('-4.5%')}px;
+  align-self: center;
+`
+const FavoriteContainer = styled.View`
+  position: absolute;
+  top: 0;
+  right: ${props => props.theme.spacings.md};
+`
+
+const Container = styled.View`
+  margin-bottom: ${props => props.theme.spacings.md};
+`
+
+interface Props {
+  document: Document
+  audioDisabled?: boolean
+  minimized?: boolean
+  submittedAlternative?: string | null
+}
+
+const DocumentImageSection = ({
+  document,
+  audioDisabled = false,
+  minimized = false,
+  submittedAlternative
+}: Props): ReactElement => (
+  <Container>
+    <ImageCarousel images={document.document_image} minimized={minimized} />
+    <AudioContainer>
+      <AudioPlayer document={document} disabled={audioDisabled} submittedAlternative={submittedAlternative} />
+    </AudioContainer>
+    <FavoriteContainer>
+      <FavoriteButton document={document} />
+    </FavoriteContainer>
+  </Container>
+)
+
+export default DocumentImageSection

src/components/FavoriteButton.tsx

@@ -0,0 +1,69 @@
+import { useFocusEffect } from '@react-navigation/native'
+import React, { ReactElement } from 'react'
+import { widthPercentageToDP as wp } from 'react-native-responsive-screen'
+import styled from 'styled-components/native'
+
+import { StarCircleIconGrey, StarCircleIconGreyFilled } from '../../assets/images'
+import { Document } from '../constants/endpoints'
+import labels from '../constants/labels.json'
+import useLoadAsync from '../hooks/useLoadAsync'
+import AsyncStorage from '../services/AsyncStorage'
+import { reportError } from '../services/sentry'
+
+const Container = styled.View`
+  padding: ${props => `${props.theme.spacings.xs} 0  ${props.theme.spacings.xs} ${props.theme.spacings.sm}`};
+  align-self: center;
+`
+
+const Icon = styled(StarCircleIconGreyFilled)`
+  min-width: ${wp('9%')}px;
+  min-height: ${wp('9%')}px;
+`
+const IconOutline = styled(StarCircleIconGrey)`
+  min-width: ${wp('9%')}px;
+  min-height: ${wp('9%')}px;
+`
+const Button = styled.TouchableOpacity`
+  justify-content: center;
+  align-items: center;
+  shadow-radius: 5px;
+  shadow-offset: 1px 1px;
+  shadow-opacity: 0.5;
+`
+
+interface Props {
+  document: Document
+  refreshFavorites?: () => void
+}
+
+const FavoriteButton = ({ document, refreshFavorites }: Props): ReactElement | null => {
+  const { data: isFavorite, refresh } = useLoadAsync(AsyncStorage.isFavorite, document)
+
+  useFocusEffect(refresh)
+
+  const onPress = async () => {
+    if (isFavorite) {
+      await AsyncStorage.removeFavorite(document).catch(reportError)
+    } else {
+      await AsyncStorage.addFavorite(document).catch(reportError)
+    }
+    refresh()
+    if (refreshFavorites) {
+      refreshFavorites()
+    }
+  }
+
+  if (isFavorite === null) {
+    return null
+  }
+
+  return (
+    <Container>
+      <Button accessibilityLabel={isFavorite ? labels.favorites.remove : labels.favorites.add} onPress={onPress}>
+        {isFavorite ? <Icon /> : <IconOutline />}
+      </Button>
+    </Container>
+  )
+}
+
+export default FavoriteButton

src/components/VocabularyList.tsx

@@ -17,11 +17,12 @@ const Root = styled.View`
 interface VocabularyListScreenProps {
   documents: Document[]
   onItemPress: (index: number) => void
+  refreshFavorites?: () => void
 }
 
-const VocabularyList = ({ documents, onItemPress }: VocabularyListScreenProps): JSX.Element => {
+const VocabularyList = ({ documents, onItemPress, refreshFavorites }: VocabularyListScreenProps): JSX.Element => {
   const renderItem = ({ item, index }: { item: Document; index: number }): JSX.Element => (
-    <VocabularyListItem document={item} onPress={() => onItemPress(index)} />
+    <VocabularyListItem document={item} onPress={() => onItemPress(index)} refreshFavorites={refreshFavorites} />
   )
 
   return (

src/components/VocabularyListItem.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components/native'
 import { Document } from '../constants/endpoints'
 import { getArticleColor } from '../services/helpers'
 import AudioPlayer from './AudioPlayer'
+import FavoriteButton from './FavoriteButton'
 import ListItem from './ListItem'
 import { ContentTextLight } from './text/Content'
 
@@ -24,17 +25,18 @@ const StyledTitle = styled(ContentTextLight)<{ articleColor: string }>`
   height: ${wp('5%')}px;
   text-align: center;
 `
-const Speaker = styled.View`
-  padding-right: ${props => props.theme.spacings.xl};
-  padding-top: ${props => props.theme.spacings.sm};
+const RightChildrenContainer = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
 `
 
 export interface VocabularyListItemProp {
   document: Document
   onPress: () => void
+  refreshFavorites?: () => void
 }
 
-const VocabularyListItem = ({ document, onPress }: VocabularyListItemProp): ReactElement => {
+const VocabularyListItem = ({ document, onPress, refreshFavorites }: VocabularyListItemProp): ReactElement => {
   const { article, word, document_image: documentImage } = document
 
   const title = <StyledTitle articleColor={getArticleColor(article)}>{article.value}</StyledTitle>
@@ -50,9 +52,10 @@ const VocabularyListItem = ({ document, onPress }: VocabularyListItemProp): Reac
       onPress={onPress}
       icon={icon}
       rightChildren={
-        <Speaker>
+        <RightChildrenContainer>
           <AudioPlayer document={document} disabled={false} />
-        </Speaker>
+          <FavoriteButton document={document} refreshFavorites={refreshFavorites} />
+        </RightChildrenContainer>
       }
     />
   )

src/components/__tests__/FavoriteButton.spec.tsx

@@ -0,0 +1,38 @@
+import { fireEvent, waitFor } from '@testing-library/react-native'
+import React from 'react'
+
+import labels from '../../constants/labels.json'
+import AsyncStorage from '../../services/AsyncStorage'
+import DocumentBuilder from '../../testing/DocumentBuilder'
+import render from '../../testing/render'
+import FavoriteButton from '../FavoriteButton'
+
+describe('FavoriteButton', () => {
+  const document = new DocumentBuilder(1).build()[0]
+
+  it('should add favorite on click', async () => {
+    await AsyncStorage.setFavorites([])
+    await expect(AsyncStorage.isFavorite(document)).resolves.toBe(false)
+
+    const { getByA11yLabel } = render(<FavoriteButton document={document} />)
+
+    await waitFor(() => expect(getByA11yLabel(labels.favorites.add)).toBeTruthy())
+    fireEvent.press(getByA11yLabel(labels.favorites.add))
+
+    expect(getByA11yLabel(labels.favorites.remove)).toBeTruthy()
+    await waitFor(() => expect(AsyncStorage.isFavorite(document)).resolves.toBe(true))
+  })
+
+  it('should remove favorite on click', async () => {
+    await AsyncStorage.setFavorites([document])
+    await expect(AsyncStorage.isFavorite(document)).resolves.toBe(true)
+
+    const { getByA11yLabel } = render(<FavoriteButton document={document} />)
+
+    await waitFor(() => expect(getByA11yLabel(labels.favorites.remove)).toBeTruthy())
+    fireEvent.press(getByA11yLabel(labels.favorites.remove))
+
+    expect(getByA11yLabel(labels.favorites.add)).toBeTruthy()
+    await waitFor(() => expect(AsyncStorage.isFavorite(document)).resolves.toBe(false))
+  })
+})

src/components/__tests__/VocabularyList.spec.tsx

@@ -7,6 +7,10 @@ import { mockUseLoadAsyncWithData } from '../../testing/mockUseLoadFromEndpoint'
 import render from '../../testing/render'
 import VocabularyList from '../VocabularyList'
 
+jest.mock('../FavoriteButton', () => () => {
+  const { Text } = require('react-native')
+  return <Text>FavoriteButton</Text>
+})
 jest.mock('../AudioPlayer', () => {
   const Text = require('react-native').Text
   return () => <Text>AudioPlayer</Text>

src/components/__tests__/VocabularyListItem.spec.tsx

@@ -7,6 +7,10 @@ import { Document } from '../../constants/endpoints'
 import render from '../../testing/render'
 import VocabularyListItem from '../VocabularyListItem'
 
+jest.mock('../FavoriteButton', () => () => {
+  const { Text } = require('react-native')
+  return <Text>FavoriteButton</Text>
+})
 jest.mock('../AudioPlayer', () => () => null)
 
 describe('VocabularyListItem', () => {

src/constants/labels.json

@@ -141,5 +141,10 @@
     "disciplines": "Module",
     "word": "Wort",
     "words": "Wörter"
+  },
+  "favorites": {
+    "favorites": "Favoriten",
+    "add": "Favorit hinzufügen",
+    "remove": "Favorit entfernen"
   }
 }

src/navigation/BottomTabNavigator.tsx

@@ -4,8 +4,9 @@ import { SafeAreaView } from 'react-native'
 import { widthPercentageToDP as wp } from 'react-native-responsive-screen'
 import { useTheme } from 'styled-components/native'
 
-import { HomeIconGrey, HomeIconWhite } from '../../assets/images'
+import { HomeIconGrey, HomeIconWhite, StarIconGrey, StarIconWhite } from '../../assets/images'
 import labels from '../constants/labels.json'
+import FavoritesScreen from '../routes/FavoritesScreen'
 import HomeStackNavigator from './HomeStackNavigator'
 import { RoutesParams } from './NavigationTypes'
 
@@ -22,9 +23,7 @@ const BottomTabNavigator = (): JSX.Element | null => {
           tabBarActiveTintColor: theme.colors.background,
           tabBarStyle: {
             backgroundColor: theme.colors.primary,
-            height: wp('14%'),
-            // TODO LUN-132: Delete
-            display: 'none'
+            height: wp('14%')
           },
           tabBarItemStyle: { height: wp('14%'), padding: wp('2%') },
           tabBarLabelStyle: { fontSize: wp('3%') }
@@ -42,20 +41,19 @@ const BottomTabNavigator = (): JSX.Element | null => {
             title: labels.general.home
           }}
         />
-        {/* TODO LUN-132: Uncomment */}
-        {/* <Navigator.Screen */}
-        {/*  name='FavoritesTab' */}
-        {/*  component={MockComponent} */}
-        {/*  options={{ */}
-        {/*    tabBarIcon: ({ focused }) => */}
-        {/*      focused ? ( */}
-        {/*        <StartIconWhite width={wp('7%')} height={wp('7%')} /> */}
-        {/*      ) : ( */}
-        {/*        <StartIconGrey width={wp('7%')} height={wp('7%')} /> */}
-        {/*      ), */}
-        {/*    title: labels.general.favorites */}
-        {/*  }} */}
-        {/* /> */}
+        <Navigator.Screen
+          name='FavoritesTab'
+          component={FavoritesScreen}
+          options={{
+            tabBarIcon: ({ focused }) =>
+              focused ? (
+                <StarIconWhite width={wp('7%')} height={wp('7%')} />
+              ) : (
+                <StarIconGrey width={wp('7%')} height={wp('7%')} />
+              ),
+            title: labels.general.favorites
+          }}
+        />
         {/* <Navigator.Screen */}
         {/*  name='DictionaryTab' */}
         {/*  component={MockComponent} */}

src/navigation/NavigationTypes.ts

@@ -64,6 +64,7 @@ export type RoutesParams = {
   }
   Imprint: undefined
   ManageDisciplines: undefined
+  Favorites: undefined
 }
 
 export type Route = keyof RoutesParams