Merge pull request #108 from Hugo-NF/refactor/081_types_extraction

Refactor/081 types extraction

src/components/AnimalCard/index.tsx

@@ -1,24 +1,16 @@
-import React, { ReactNode, useState } from 'react';
+import React, { useState } from 'react';
 import { ActivityIndicator } from 'react-native';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 
 import animalAPI from '../../services/animal/api';
 
 import { Images, Theme } from '../../constants';
 
+import { IAnimalCardProps } from '../../types/components/AnimalCard';
 import {
   CardBody, CardBox, CardHeader, CardImage, CardImageLoading, CardOptions, CardTitle,
 } from './styles';
 
-interface IAnimalCardProps {
-    title: string;
-    imageUrl: string | null;
-    headerOptions?: ReactNode;
-    body?: ReactNode;
-    headerBackground: string;
-    onPress?: () => void;
-}
-
 const AnimalCard = ({
   title, body, headerOptions, imageUrl, headerBackground, onPress,
 } : IAnimalCardProps) : JSX.Element => {

src/components/AnimalCard/styles.ts

@@ -1,10 +1,7 @@
 import { ImageProps, TextProps, ViewProps } from 'react-native';
 import styled from 'styled-components/native';
 import { Theme } from '../../constants';
-
-interface CardHeaderProps extends ViewProps {
-    backgroundColor: string;
-}
+import { CardHeaderProps } from '../../types/components/AnimalCard';
 
 export const CardBox = styled.View<ViewProps>`
     width: 344px;

src/components/AsyncButton/index.tsx

@@ -1,16 +1,9 @@
 import React, { useState } from 'react';
 
 import { ActivityIndicator, GestureResponderEvent } from 'react-native';
-import { Button, ButtonType } from './styles';
+import { Button } from './styles';
 import { Theme } from '../../constants';
-
-interface IButtonProps extends ButtonType {
-  children: React.ReactNode,
-  asyncAction: boolean,
-  callback: <GestureResponderEvent>(arg: GestureResponderEvent) => void,
-  activityIndicator?: Record<string, unknown>,
-  styles?: Record<string, unknown>,
-}
+import { IButtonProps } from '../../types/components/AsyncButton';
 
 const AsyncButton : React.FC<IButtonProps> = (props : IButtonProps) => {
   const [disabled, setDisabled] = useState(false);

src/components/AsyncButton/styles.ts

@@ -1,23 +1,7 @@
 import styled from 'styled-components/native';
-import { TouchableOpacityProps } from 'react-native';
 
 import { Theme } from '../../constants';
-
-export interface ButtonType extends TouchableOpacityProps {
-  flex?: number,
-  flexDirection?: string,
-  width?: string,
-  height?: string,
-  backgroundColor?: string,
-  marginTop?: string,
-  marginBottom?: string,
-  marginLeft?: string,
-  marginRight?: string,
-  borderRadius?: string,
-  alignSelf?: string,
-  alignItems?: string,
-  justifyContent?: string,
-}
+import { ButtonType } from '../../types/components/AsyncButton';
 
 export const Button = styled.TouchableOpacity<ButtonType>`
   flex: ${(props) => props.flex};

src/components/CustomTextInput/index.tsx

@@ -3,14 +3,8 @@ import {
   HelperText, TextInput,
 } from 'react-native-paper';
 
-import { FormikProps } from 'formik';
 import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
-
-interface ICustomTextInput<T> {
-  formikHelpers: FormikProps<T>,
-  fieldName: keyof T,
-  [propName: string]: unknown;
-}
+import { ICustomTextInput } from '../../types/components/CustomTextInput';
 
 const CustomTextInput = <T, >({
   formikHelpers, fieldName, ...rest

src/components/DrawerContent/index.tsx

@@ -10,19 +10,16 @@ import useIsMounted from 'ismounted';
 
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import { styledComponents, styles } from './styles';
 
 import { Theme } from '../../constants';
-import { getNameInitials } from '../../utils/getNameInitials';
+import { useAuth } from '../../contexts/user/context';
 
 import userAPI from '../../services/user/api';
 import notificationAPI from '../../services/notifications/api';
-import { useAuth } from '../../contexts/user/context';
 
-export interface IDrawerProps {
-  parentDrawerOpen: boolean,
-  setParentDrawerOpen: (_: boolean) => void,
-}
+import { getNameInitials } from '../../utils/getNameInitials';
+import { IDrawerProps } from '../../types/components/DrawerContent';
+import { styledComponents, styles } from './styles';
 
 const fetchProfile = async (currentUser: FirebaseAuthTypes.User | null) : Promise<{displayName: string, photo: string | undefined} | undefined> => {
   if (currentUser != null) {

src/components/InfiniteScroll/index.tsx

@@ -9,28 +9,8 @@ import { useFocusEffect } from '@react-navigation/native';
 // Style imports.
 import { defaultProps, styledComponents } from './styles';
 
-// Type declaration.
-type InfiniteScrollState<T> = {
-  allDataFetched: boolean,
-  data: Array<T>,
-  error: string | null,
-  loadingMore: boolean,
-  page: number,
-}
-
-// Interface declaration.
-interface IInfiniteScroll<T> {
-  activityIndicatorColor?: string,
-  contentBatchSize: number,
-  contentContainerStyles?: Record<string, unknown>,
-  dataFetchQuery: (lastEntry: T | null, pageNumber: number, pageSize: number) => Promise<Array<T>>,
-  errorContainerStyles?: Record<string, unknown>,
-  formatContent: (queryResponseData : T) => JSX.Element,
-  keyExtractorFunction: (item: T) => string,
-  loadingContainerStyles?: Record<string, unknown>,
-  noDataFoundContainerStyles?: Record<string, unknown>,
-  numColumns: number,
-}
+// Typings imports
+import { InfiniteScrollState, IInfiniteScroll } from '../../types/components/InfiniteScroll';
 
 // Styled components.
 const {

src/contexts/user/context.ts

@@ -1,9 +1,5 @@
 import React, { useContext } from 'react';
-import { FirebaseAuthTypes } from '@react-native-firebase/auth';
-
-interface IContext {
-    currentUser: FirebaseAuthTypes.User | null
-}
+import { IContext } from '../../types/contexts/user';
 
 const Context = React.createContext<IContext>({
   currentUser: null,

src/contexts/user/contextService.tsx

@@ -1,11 +1,8 @@
 import React from 'react';
-import auth, { FirebaseAuthTypes } from '@react-native-firebase/auth';
+import auth from '@react-native-firebase/auth';
 
 import Context from './context';
-
-interface IGlobalServiceState {
-    currentUser: FirebaseAuthTypes.User | null
-}
+import { IGlobalServiceState } from '../../types/contexts/user';
 
 export default class GlobalState extends React.Component<Record<string, unknown>, IGlobalServiceState> {
   constructor(props: Record<string, unknown>) {

src/layouts/HeaderLayout/index.tsx

@@ -11,35 +11,8 @@ import DrawerContent from '../../components/DrawerContent';
 
 import { Theme } from '../../constants';
 
-import { styledComponents, IHeaderProps, ITitleProps } from './styles';
-
-type HeaderActions = 'back' | 'drawer' | 'share' | 'search' | 'options';
-
-interface IButtonAction {
-  hidden?: boolean,
-  actionType?: HeaderActions,
-  iconColor?: string,
-  onPress?: () => void,
-}
-
-interface IRoutesDrawer {
-  path: string,
-  displayName: string,
-  icon: JSX.Element
-}
-
-interface IHeaderLayoutProps {
-  disableScrollView?: boolean,
-  headerShown: boolean,
-  headerStyles?: IHeaderProps,
-  title: string,
-  titleStyles?: ITitleProps,
-  leftAction: IButtonAction,
-  rightAction: IButtonAction,
-  children: React.ReactNode,
-  drawerRoutes?: Array<IRoutesDrawer>,
-  drawerUser?: boolean
-}
+import { IHeaderLayoutProps, IButtonAction } from '../../types/layouts/HeaderLayout';
+import { styledComponents } from './styles';
 
 export default function HeaderLayout({
   disableScrollView,

src/layouts/HeaderLayout/styles.ts

@@ -1,18 +1,8 @@
-import { TouchableOpacityProps, TextProps, ViewProps } from 'react-native';
+import { TouchableOpacityProps, ViewProps } from 'react-native';
 import styled from 'styled-components/native';
 import Constants from 'expo-constants';
 
-export interface ITitleProps extends TextProps {
-  fontFamily?: string,
-  fontSize?: string,
-  color?: string,
-}
-
-export interface IHeaderProps extends ViewProps {
-  maxHeight?: string,
-  height?: string,
-  backgroundColor?: string,
-}
+import { ITitleProps, IHeaderProps } from '../../types/layouts/HeaderLayout';
 
 export const styledComponents = {
   LayoutContainer: styled.View<ViewProps>`

src/mocks/MockedNavigation/index.tsx

@@ -3,15 +3,11 @@ import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 
+import { StackScreen } from '../../types/mocks/MockedNavigation';
+
 // Navigation configuration.
 const Stack = createStackNavigator();
 
-// Interfaces.
-interface StackScreen {
-  component: React.FC,
-  params?: Record<string, unknown>
-}
-
 // Component.
 export default function MockedNavigator(
   { component, params = {} } : StackScreen,

src/pages/Animal/Details/index.tsx

@@ -33,7 +33,7 @@ import { styles, styledComponents } from './styles';
 
 // Type imports.
 import * as AnimalTypes from '../../../types/animal';
-import * as CarouselTypes from '../../../types/carousel';
+import * as CarouselTypes from '../../../types/globals/Carousel';
 import * as RouteTypes from '../../../types/routes';
 
 // Utils imports.

src/pages/Animal/Interested/index.tsx

@@ -5,37 +5,31 @@ import {
   useNavigation,
   useRoute,
 } from '@react-navigation/native';
+
 import { setStatusBarBackgroundColor } from 'expo-status-bar';
 import {
   ActivityIndicator, Text, Image, TouchableOpacity, Alert,
 } from 'react-native';
+
 import { fromUnixTime, differenceInYears } from 'date-fns';
 import InfiniteScroll from '../../../components/InfiniteScroll';
-import { Theme } from '../../../constants';
 import HeaderLayout from '../../../layouts/HeaderLayout';
-import {
-  Container, LoadingContainer, LoadingText,
-} from './styles';
-import { DocumentData, DocumentRefData } from '../../../types/firebase';
-import * as RouteTypes from '../../../types/routes';
+
+import { Theme } from '../../../constants';
 
 // Service imports.
 import userAPI from '../../../services/user/api';
 import animalAPI from '../../../services/animal/api';
 import adoptionAPI from '../../../services/adoption/api';
 
-interface InterestedUser {
-  id: string;
-  ref: DocumentRefData;
-  imageURI: string;
-  userName: string;
-  birthDate: number;
-}
-
-interface UserCircleProps {
-  user: InterestedUser;
-  callback: (user: InterestedUser) => void;
-}
+// Type imports
+import * as RouteTypes from '../../../types/routes';
+import { DocumentData, DocumentRefData } from '../../../types/services/Firebase';
+import { UserCircleProps, InterestedUser } from '../../../types/pages/Animal';
+
+import {
+  Container, LoadingContainer, LoadingText,
+} from './styles';
 
 const getAge = (birthDateTimestamp: number): number => differenceInYears(new Date(), fromUnixTime(birthDateTimestamp));