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,17 +17,24 @@ const Root = styled.View`
 interface VocabularyListScreenProps {
   documents: Document[]
   onItemPress: (index: number) => void
+  refreshFavorites?: () => void
+  title: string
 }
 
-const VocabularyList = ({ documents, onItemPress }: VocabularyListScreenProps): JSX.Element => {
+const VocabularyList = ({
+  documents,
+  onItemPress,
+  refreshFavorites,
+  title
+}: 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 (
     <Root>
       <Title
-        title={labels.exercises.vocabularyList.title}
+        title={title}
         description={`${documents.length} ${documents.length === 1 ? labels.general.word : labels.general.words}`}
       />
 

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"
   }
 }