Merge pull request #378 from digitalfabrik/LUN-430-adjust-naming-of-p…

…rops-type LUN-430: Adjust naming of PropsType
digitalfabrik · Oct 5, 2022 · 5de080a · 5de080a
2 parents 5f91401 + f6c1a18
commit 5de080a
Show file tree

Hide file tree

Showing 38 changed files with 88 additions and 76 deletions.
diff --git a/src/components/AddElement.tsx b/src/components/AddElement.tsx
@@ -26,13 +26,13 @@ const FlexRow = styled.View`
   align-items: center;
 `
 
-interface Props {
+interface AddElementProps {
   onPress: () => void
   label: string
   explanation?: string
 }
 
-const AddElement = ({ onPress, label, explanation }: Props): ReactElement => (
+const AddElement = ({ onPress, label, explanation }: AddElementProps): ReactElement => (
   <>
     <PressableContainer onPress={onPress}>
       <FlexRow>

diff --git a/src/components/DeletionModal.tsx b/src/components/DeletionModal.tsx
@@ -5,7 +5,7 @@ import { getLabels } from '../services/helpers'
 import Modal from './Modal'
 import { ContentSecondary } from './text/Content'
 
-interface PropsType {
+interface DeletionModalProps {
   isVisible: boolean
   onConfirm: () => void
   onClose: () => void
@@ -16,7 +16,7 @@ const Explanation = styled(ContentSecondary)`
   text-align: center;
 `
 
-const DeletionModal = ({ isVisible, onConfirm, onClose }: PropsType): JSX.Element => {
+const DeletionModal = ({ isVisible, onConfirm, onClose }: DeletionModalProps): JSX.Element => {
   const { confirmationQuestion, confirm, explanation } = getLabels().manageSelection.deleteModal
   return (
     <Modal

diff --git a/src/components/DocumentImageSection.tsx b/src/components/DocumentImageSection.tsx
@@ -22,7 +22,7 @@ const Container = styled.View`
   margin-bottom: ${props => props.theme.spacings.md};
 `
 
-interface Props {
+interface DocumentImageSectionProps {
   document: Document
   audioDisabled?: boolean
   minimized?: boolean
@@ -34,7 +34,7 @@ const DocumentImageSection = ({
   audioDisabled = false,
   minimized = false,
   submittedAlternative,
-}: Props): ReactElement => (
+}: DocumentImageSectionProps): ReactElement => (
   <Container>
     <ImageCarousel images={document.document_image} minimized={minimized} />
     <AudioContainer>

diff --git a/src/components/FavoriteButton.tsx b/src/components/FavoriteButton.tsx
@@ -28,12 +28,12 @@ const Button = styled(PressableOpacity)`
   border-radius: 20px;
 `
 
-interface Props {
+interface FavoriteButtonProps {
   document: Document
   onFavoritesChanged?: () => void
 }
 
-const FavoriteButton = ({ document, onFavoritesChanged }: Props): ReactElement | null => {
+const FavoriteButton = ({ document, onFavoritesChanged }: FavoriteButtonProps): ReactElement | null => {
   const { data: isFavorite, refresh } = useLoadAsync(getIsFavorite, document.id)
 
   useFocusEffect(refresh)

diff --git a/src/components/ListEmpty.tsx b/src/components/ListEmpty.tsx
@@ -13,11 +13,11 @@ const StyledSadSmileyIcon = styled(SadSmileyIcon)`
   padding: ${props => props.theme.spacings.md} 0;
 `
 
-interface Props {
+interface ListEmptyProps {
   label: string
 }
 
-const ListEmpty = ({ label }: Props): ReactElement => (
+const ListEmpty = ({ label }: ListEmptyProps): ReactElement => (
   <ListEmptyContainer>
     <StyledSadSmileyIcon />
     <Subheading>{label}</Subheading>

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -15,7 +15,7 @@ const Message = styled(HeadingText)`
   text-align: center;
 `
 
-export interface Props {
+export interface ModalProps {
   visible: boolean
   onClose: () => void
   text: string
@@ -27,7 +27,7 @@ export interface Props {
   testID?: string
 }
 
-const Modal = (props: Props): JSX.Element => {
+const Modal = (props: ModalProps): JSX.Element => {
   const {
     visible,
     text,

diff --git a/src/components/ModalSkeleton.tsx b/src/components/ModalSkeleton.tsx
@@ -37,14 +37,14 @@ const StyledPressable = styled(Pressable)`
   flex: 1;
 `
 
-interface PropsType {
+interface ModalSkeletonProps {
   visible: boolean
   onClose: () => void
   testID?: string
   children: ReactNode
 }
 
-const ModalSkeleton = ({ visible, onClose, testID, children }: PropsType): ReactElement => {
+const ModalSkeleton = ({ visible, onClose, testID, children }: ModalSkeletonProps): ReactElement => {
   const { keyboardHeight, isKeyboardVisible } = useKeyboard()
   const screenHeight = useScreenHeight()
   const onCloseKeyboard = () => isKeyboardVisible && Keyboard.dismiss()

diff --git a/src/components/NavigationHeaderLeft.tsx b/src/components/NavigationHeaderLeft.tsx
@@ -16,13 +16,13 @@ const Container = styled.Pressable`
   align-items: center;
 `
 
-interface Props {
+interface NavigationHeaderLeftProps {
   title: string
   onPress: () => void
   isCloseButton: boolean
 }
 
-const NavigationHeaderLeft = ({ onPress, title, isCloseButton }: Props): ReactElement => {
+const NavigationHeaderLeft = ({ onPress, title, isCloseButton }: NavigationHeaderLeftProps): ReactElement => {
   const [pressed, setPressed] = useState<boolean>(false)
 
   const closeIcon = pressed ? CloseCircleIconBlue : CloseCircleIconWhite

diff --git a/src/components/PressableOpacity.tsx b/src/components/PressableOpacity.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement, ReactNode, useState } from 'react'
 import { StyleProp, ViewStyle } from 'react-native'
 import styled from 'styled-components/native'
 
-interface Props {
+interface PressableOpacityProps {
   children: ReactNode
   onPress: () => void
   style?: StyleProp<ViewStyle>
@@ -15,7 +15,13 @@ const PressableContainer = styled.Pressable<{ isPressed: boolean }>`
   opacity: ${props => (props.isPressed ? props.theme.styles.pressOpacity.min : props.theme.styles.pressOpacity.max)};
 `
 
-const PressableOpacity = ({ children, onPress, style, testID, disabled = false }: Props): ReactElement => {
+const PressableOpacity = ({
+  children,
+  onPress,
+  style,
+  testID,
+  disabled = false,
+}: PressableOpacityProps): ReactElement => {
   const [isPressed, setIsPressed] = useState<boolean>(false)
 
   return (

diff --git a/src/components/RouteWrapper.tsx b/src/components/RouteWrapper.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components/native'
 
 import theme from '../constants/theme'
 
-interface Props {
+interface RouteWrapperProps {
   backgroundColor?: string
   lightStatusBarContent?: boolean
   children: ReactNode
@@ -22,7 +22,7 @@ const RouteWrapper = ({
   lightStatusBarContent = false,
   children,
   bottomBackgroundColor,
-}: Props): ReactElement => (
+}: RouteWrapperProps): ReactElement => (
   <>
     <Container backgroundColor={backgroundColor} shouldTakeSpace>
       <StatusBar

diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
@@ -5,12 +5,12 @@ import { getLabels } from '../services/helpers'
 import CustomTextInput from './CustomTextInput'
 import PressableOpacity from './PressableOpacity'
 
-interface Props {
+interface SearchBarProps {
   query: string
   setQuery: (input: string) => void
 }
 
-const SearchBar = ({ query, setQuery }: Props): ReactElement => (
+const SearchBar = ({ query, setQuery }: SearchBarProps): ReactElement => (
   <CustomTextInput
     value={query}
     onChangeText={setQuery}

diff --git a/src/components/VocabularyDetail.tsx b/src/components/VocabularyDetail.tsx
@@ -12,11 +12,11 @@ const ItemContainer = styled.View`
   align-self: center;
 `
 
-interface Props {
+interface VocabularyDetailProps {
   document: Document
 }
 
-const VocabularyDetail = ({ document }: Props): ReactElement => (
+const VocabularyDetail = ({ document }: VocabularyDetailProps): ReactElement => (
   <>
     <DocumentImageSection document={document} />
     <ItemContainer>

diff --git a/src/components/__tests__/Modal.spec.tsx b/src/components/__tests__/Modal.spec.tsx
@@ -3,14 +3,14 @@ import React from 'react'
 import { Text } from 'react-native'
 
 import render from '../../testing/render'
-import Modal, { Props } from '../Modal'
+import Modal, { ModalProps } from '../Modal'
 
 describe('Modal', () => {
   const onClose = jest.fn()
   const confirmationAction = jest.fn()
   const childText = 'Children'
 
-  const defaultProps: Props = {
+  const defaultProps: ModalProps = {
     visible: false,
     onClose,
     text: 'Are you sure?',

diff --git a/src/routes/UserVocabularyOverviewScreen.tsx b/src/routes/UserVocabularyOverviewScreen.tsx
@@ -13,11 +13,11 @@ const Root = styled.View`
   padding: ${props => props.theme.spacings.md};
 `
 
-interface PropsType {
+interface UserVocabularyOverviewScreenProps {
   navigation: StackNavigationProp<RoutesParams, 'UserVocabularyOverview'>
 }
 
-const UserVocabularyOverviewScreen = ({ navigation }: PropsType): JSX.Element => {
+const UserVocabularyOverviewScreen = ({ navigation }: UserVocabularyOverviewScreenProps): JSX.Element => {
   const { myWords } = getLabels().userVocabulary
   const { list, create, practice } = getLabels().userVocabulary.overview
   return (

diff --git a/src/routes/VocabularyDetailScreen.tsx b/src/routes/VocabularyDetailScreen.tsx
@@ -5,11 +5,11 @@ import RouteWrapper from '../components/RouteWrapper'
 import VocabularyDetail from '../components/VocabularyDetail'
 import { RoutesParams } from '../navigation/NavigationTypes'
 
-interface Props {
+interface VocabularyDetailScreenProps {
   route: RouteProp<RoutesParams, 'DictionaryDetail'>
 }
 
-const VocabularyDetailScreen = ({ route }: Props): ReactElement => {
+const VocabularyDetailScreen = ({ route }: VocabularyDetailScreenProps): ReactElement => {
   const { document } = route.params
   return (
     <RouteWrapper>

diff --git a/src/routes/add-custom-discipline/components/NotAuthorisedView.tsx b/src/routes/add-custom-discipline/components/NotAuthorisedView.tsx
@@ -20,11 +20,11 @@ const Description = styled(ContentSecondary)`
   text-align: center;
 `
 
-interface Props {
+interface NotAuthorizedViewProps {
   setVisible: (visible: boolean) => void
 }
 
-const NotAuthorisedView = ({ setVisible }: Props): ReactElement => {
+const NotAuthorisedView = ({ setVisible }: NotAuthorizedViewProps): ReactElement => {
   const openSettings = () => {
     Linking.openSettings().catch(reportError)
   }

diff --git a/src/routes/add-custom-discipline/components/QRCodeReaderOverlay.tsx b/src/routes/add-custom-discipline/components/QRCodeReaderOverlay.tsx
@@ -26,12 +26,12 @@ const Camera = styled(RNCamera)`
   position: relative;
 `
 
-interface Props {
+interface AddCustomDisciplineScreenProps {
   setVisible: (visible: boolean) => void
   setCode: (code: string) => void
 }
 
-const AddCustomDisciplineScreen = ({ setVisible, setCode }: Props): ReactElement => {
+const AddCustomDisciplineScreen = ({ setVisible, setCode }: AddCustomDisciplineScreenProps): ReactElement => {
   const appState = useRef(AppState.currentState)
 
   const [isPressed, setIsPressed] = useState<boolean>(false)

diff --git a/src/routes/dictionary/DictionaryScreen.tsx b/src/routes/dictionary/DictionaryScreen.tsx
@@ -22,11 +22,11 @@ const Header = styled.View`
   padding-bottom: ${props => props.theme.spacings.md};
 `
 
-interface Props {
+interface DictionaryScreenProps {
   navigation: StackNavigationProp<RoutesParams, 'Dictionary'>
 }
 
-const DictionaryScreen = ({ navigation }: Props): ReactElement => {
+const DictionaryScreen = ({ navigation }: DictionaryScreenProps): ReactElement => {
   const documents = useLoadAllDocuments()
   const [searchString, setSearchString] = useState<string>('')
 

diff --git a/src/routes/dictionary/components/DictionaryItem.tsx b/src/routes/dictionary/components/DictionaryItem.tsx
@@ -14,13 +14,13 @@ const AlternativeWords = styled(ContentSecondary)`
   font-style: italic;
 `
 
-interface Props {
+interface DictionaryItemProps {
   document: Document
   showAlternatives: boolean
   navigateToDetail: (document: Document) => void
 }
 
-class DictionaryItem extends PureComponent<Props> {
+class DictionaryItem extends PureComponent<DictionaryItemProps> {
   render(): ReactElement {
     const { document, navigateToDetail, showAlternatives } = this.props
 

diff --git a/src/routes/exercise-finished/ExerciseFinishedScreen.tsx b/src/routes/exercise-finished/ExerciseFinishedScreen.tsx
@@ -53,12 +53,12 @@ const Results = styled(Content)<{ color: Color }>`
   padding: ${props => props.theme.spacings.md} 0 ${props => props.theme.spacings.xs};
 `
 
-interface Props {
+interface ExerciseFinishedScreenProps {
   route: RouteProp<RoutesParams, 'ExerciseFinished'>
   navigation: StackNavigationProp<RoutesParams, 'ExerciseFinished'>
 }
 
-const ExerciseFinishedScreen = ({ navigation, route }: Props): ReactElement => {
+const ExerciseFinishedScreen = ({ navigation, route }: ExerciseFinishedScreenProps): ReactElement => {
   const { exercise, results, disciplineTitle, disciplineId, documents, closeExerciseAction, unlockedNextExercise } =
     route.params
   const correctResults = results.filter(doc => doc.result === 'correct')

diff --git a/src/routes/exercise-finished/components/ShareButton.tsx b/src/routes/exercise-finished/components/ShareButton.tsx
@@ -7,12 +7,12 @@ import { BUTTONS_THEME } from '../../../constants/data'
 import { DocumentResult } from '../../../navigation/NavigationTypes'
 import { getLabels } from '../../../services/helpers'
 
-interface Props {
+interface ShareButtonProps {
   disciplineTitle: string
   results: DocumentResult[]
 }
 
-const ShareButton = ({ disciplineTitle, results }: Props): ReactElement => {
+const ShareButton = ({ disciplineTitle, results }: ShareButtonProps): ReactElement => {
   const share = async () => {
     const correctWords = results.filter(doc => doc.result === 'correct').length
     const xOfAllWords = `${correctWords} ${getLabels().results.of} ${results.length}`

diff --git a/src/routes/exercise-finished/components/ShareSection.tsx b/src/routes/exercise-finished/components/ShareSection.tsx
@@ -26,12 +26,12 @@ const Description = styled.Text`
   padding-bottom: ${props => props.theme.spacings.sm};
 `
 
-interface Props {
+interface ShareSectionProps {
   disciplineTitle: string
   results: DocumentResult[]
 }
 
-const ShareSection = ({ disciplineTitle, results }: Props): ReactElement => (
+const ShareSection = ({ disciplineTitle, results }: ShareSectionProps): ReactElement => (
   <Container>
     <Description>{getLabels().results.share.description}</Description>
     <ShareButton disciplineTitle={disciplineTitle} results={results} />

diff --git a/src/routes/exercises/components/LockingLane.tsx b/src/routes/exercises/components/LockingLane.tsx
@@ -19,12 +19,12 @@ const Line = styled.View<{ color: string }>`
   margin: ${props => props.theme.spacings.xs} 10px;
 `
 
-interface PropsType {
+interface LockingLaneProps {
   nextExercise: Exercise | null
   index: number
 }
 
-const LockingLane = ({ nextExercise, index }: PropsType): ReactElement => {
+const LockingLane = ({ nextExercise, index }: LockingLaneProps): ReactElement => {
   let Icon
   if (nextExercise && nextExercise.level < index) {
     Icon = LockIcon

diff --git a/src/routes/home/components/AddCustomDiscipline.tsx b/src/routes/home/components/AddCustomDiscipline.tsx
@@ -11,11 +11,11 @@ const Explanation = styled(ContentSecondary)`
   padding: ${props => props.theme.spacings.xs};
 `
 
-interface Props {
+interface AddCustomDisciplineProps {
   navigate: () => void
 }
 
-const AddCustomDiscipline = ({ navigate }: Props): ReactElement => (
+const AddCustomDiscipline = ({ navigate }: AddCustomDisciplineProps): ReactElement => (
   <Card heading={getLabels().home.customDisciplineSection} icon={<HeaderCircleIcon />}>
     <Explanation>{getLabels().home.customDisciplineExplanation}</Explanation>
     <AddElement onPress={navigate} label={getLabels().home.addCustomDiscipline} />

diff --git a/src/routes/home/components/Card.tsx b/src/routes/home/components/Card.tsx
@@ -36,14 +36,14 @@ const IconContainer = styled.View`
   padding-right: ${props => props.theme.spacings.sm};
 `
 
-interface PropsType {
+interface CardProps {
   heading?: string
   icon?: string | ReactElement
   onPress?: () => void
   children: ReactNode
 }
 
-const Card = (props: PropsType): ReactElement => {
+const Card = (props: CardProps): ReactElement => {
   const { heading, icon, onPress, children } = props
   return (
     <Box onPress={onPress}>