V1.0.4 Pre Release (#52)

.eslintrc

@@ -3,16 +3,20 @@
   "parser": "@typescript-eslint/parser",
   "plugins": [
     "@typescript-eslint",
-    "prettier"
+    "prettier",
+    "react"
   ],
   "extends": [
     "eslint:recommended",
+    "plugin:react/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
     "prettier"
   ],
   "rules": {
     "no-console": 1,
-    "prettier/prettier": 2
+    "prettier/prettier": 2,
+    "@typescript-eslint/no-explicit-any": 0,
+    "react/display-name": 0
   }
 }

App.tsx

@@ -3,8 +3,6 @@ import * as Notifications from 'expo-notifications'
 
 import * as NativeNotifs from './utils/notification/NotificationManager'
 import Stack from './components/layout/Routes'
-import theme from './config/theme'
-import { AsyncStorage } from 'react-native'
 
 Notifications.setNotificationHandler({
   handleNotification: async () => ({
@@ -14,12 +12,12 @@ Notifications.setNotificationHandler({
   })
 })
 
-export default function App() {
+const App = (): JSX.Element => {
   useEffect(() => {
-    const token = NativeNotifs.registerForNotificationsAsync()
+    NativeNotifs.registerForNotificationsAsync()
     // const subscription = Notifications.addPushTokenListener()
     Notifications.addNotificationReceivedListener((notification) => {
-      console.log('Notification', notification)
+      if (!notification.request.content.title) return
     })
     // return () => {
     //   subscription.remove()
@@ -28,3 +26,5 @@ export default function App() {
 
   return <Stack />
 }
+
+export default App

app.json

@@ -3,7 +3,7 @@
     "name": "Prayer Notification App",
     "description": "Get notifications for prayer",
     "slug": "prayer-notification-app",
-    "version": "0.0.4",
+    "version": "1.0.4",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "privacy": "unlisted",
@@ -29,7 +29,7 @@
       "package": "com.prayernotifs.app",
       "icon": "./assets/icon-medium.png",
       "useNextNotificationsApi": true,
-      "versionCode": 3,
+      "versionCode": 4,
       "adaptiveIcon": {
         "foregroundImage": "./assets/icon-adaptive.png",
         "backgroundImage": "./assets/icon.png",

components/layout/Routes.tsx

@@ -17,18 +17,21 @@ type MainStack = {
   Home: unknown
 }
 
-function Logo() {
-  return (
-    <Image
-      style={{ width: 40, height: 40, marginRight: 5 }}
-      source={require('../../assets/icon-tiny.png')}
-    />
-  )
+type LogoProps = {
+  width: number
+  height: number
 }
 
+const Logo = ({ width, height }: LogoProps): JSX.Element => (
+  <Image
+    style={{ width, height, marginRight: 5 }}
+    source={require('../../assets/icon-tiny.png')}
+  />
+)
+
 const MainStack = createNativeStackNavigator()
 
-const Stack = () => (
+const Stack = (): JSX.Element => (
   <NavigationContainer>
     <MainStack.Navigator
       initialRouteName="Home"
@@ -37,18 +40,34 @@ const Stack = () => (
           backgroundColor: '#35415A'
         },
         headerTintColor: '#EBEBEB',
-        headerRight: (props: any) => <Logo {...props} />
+        headerRight: () => <Logo width={40} height={40} />
       }}
     >
-      <MainStack.Screen name="Home" component={Home} />
+      <MainStack.Screen
+        name="Home"
+        component={Home}
+        options={{ title: 'Acceuil' }}
+      />
       <MainStack.Screen
         name="ManageNotifs"
         component={ManageNotificationsSubs}
-        options={{ title: 'Manage Notifications' }}
+        options={{ title: 'Gérer les Notifications' }}
+      />
+      <MainStack.Screen
+        name="Evangile"
+        component={GospelScreen}
+        options={{ title: 'Evangile' }}
+      />
+      <MainStack.Screen
+        name="Prayer"
+        component={PrayerScreen}
+        options={{ title: 'Prière' }}
+      />
+      <MainStack.Screen
+        name="MyPrayer"
+        component={MyPrayerScreen}
+        options={{ title: 'Ma Prière' }}
       />
-      <MainStack.Screen name="Evangile" component={GospelScreen} />
-      <MainStack.Screen name="Prayer" component={PrayerScreen} />
-      <MainStack.Screen name="MyPrayer" component={MyPrayerScreen} />
     </MainStack.Navigator>
   </NavigationContainer>
 )

components/list/RegisterNotification.tsx

@@ -1,4 +1,4 @@
-import React, { SyntheticEvent } from 'react'
+import React from 'react'
 import { Prayer } from 'config/types/Prayer'
 import {
   Text,
@@ -17,7 +17,7 @@ type RegisterNotificationProps = {
 const RegisterNotification = ({
   prayer,
   onPress
-}: RegisterNotificationProps) => {
+}: RegisterNotificationProps): JSX.Element => {
   return (
     <View style={styles.card}>
       <View style={{ width: '70%' }}>
@@ -26,7 +26,7 @@ const RegisterNotification = ({
       </View>
       <View style={{ width: '30%', flexDirection: 'column-reverse' }}>
         <TouchableOpacity onPress={onPress} style={styles.roundedButton}>
-          <Text style={{ color: '#ffffff' }}>S'inscrire</Text>
+          <Text style={{ color: '#ffffff' }}>S&apos;inscrire</Text>
         </TouchableOpacity>
       </View>
     </View>

elements/buttons/BaseButton.tsx

@@ -12,11 +12,11 @@ type ButtonProps = {
   onPress: (ev: NativeSyntheticEvent<NativeTouchEvent>) => void
 }
 
-const Button = ({ title, onPress }: ButtonProps) => (
+const Button = ({ title, onPress }: ButtonProps): JSX.Element => (
   <BaseButton title={title} onPress={onPress} color={theme.colors.blue} />
 )
 
-const AccentButton = ({ title, onPress }: ButtonProps) => (
+export const AccentButton = ({ title, onPress }: ButtonProps): JSX.Element => (
   <BaseButton title={title} onPress={onPress} color={theme.colors.red} />
 )
 

elements/layout/Card.tsx

@@ -21,7 +21,7 @@ type WelcomeCardProps = {
   evangile: string
 }
 
-const Card = ({ title, body, onPress }: CardProps) => {
+const Card = ({ title, body, onPress }: CardProps): JSX.Element => {
   return (
     <View>
       <TouchableOpacity style={styles.card} onPress={onPress}>
@@ -32,19 +32,22 @@ const Card = ({ title, body, onPress }: CardProps) => {
   )
 }
 
-export const WelcomeCard = ({ saint, evangile }: WelcomeCardProps) => {
+export const WelcomeCard = ({
+  saint,
+  evangile
+}: WelcomeCardProps): JSX.Element => {
   const navigation = useNavigation()
   return (
     <View style={styles.card}>
       <Text style={styles.Title}>Saint Du Jour</Text>
       <Text style={styles.description}>{saint}</Text>
-      <Text style={styles.Title}>Phrase de l'Evangile du Jour</Text>
+      <Text style={styles.Title}>Phrase de l&apos;Evangile du Jour</Text>
       <Text style={styles.description}>{evangile}</Text>
       <TouchableOpacity
         style={{ alignSelf: 'flex-end', padding: 10 }}
         onPress={() => navigation.navigate('Evangile')}
       >
-        <Text style={styles.see}>Voir l'Evangile</Text>
+        <Text style={styles.see}>Voir l&apos;Evangile</Text>
       </TouchableOpacity>
     </View>
   )

elements/text/Text.tsx

@@ -7,15 +7,15 @@ type Props = {
   children: any
 }
 
-const Text = ({ children }: Props) => (
+const Text = ({ children }: Props): JSX.Element => (
   <BaseText style={styles.Text}>{children}</BaseText>
 )
 
-const Title = ({ children }: Props) => (
+const Title = ({ children }: Props): JSX.Element => (
   <BaseText style={styles.Title}>{children}</BaseText>
 )
 
-const Header = ({ children }: Props) => (
+const Header = ({ children }: Props): JSX.Element => (
   <BaseText style={styles.Header}>{children}</BaseText>
 )
 

elements/ui/LineElement.tsx

@@ -11,7 +11,7 @@ type Props = {
   activeInitial: boolean
 }
 
-export const PrayerHome = ({ title }: { title: string }) => {
+export const PrayerHome = ({ title }: { title: string }): JSX.Element => {
   return (
     <View style={styles.row}>
       <View style={{ width: '60%' }}>
@@ -23,7 +23,7 @@ export const PrayerHome = ({ title }: { title: string }) => {
   )
 }
 
-const LineElement = ({ title, activeInitial }: Props) => {
+const LineElement = ({ title, activeInitial }: Props): JSX.Element => {
   const [active, setActive] = useState(activeInitial)
   const toggleSwitch = () => setActive((prev) => !prev)
 

package.json

@@ -48,6 +48,7 @@
     "eslint": "^7.5.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.6",
     "husky": "^4.2.5",
     "prettier": "^2.0.5",
     "typescript": "~3.9.5"

screens/GospelScreen.tsx

@@ -1,13 +1,11 @@
 import React, { useEffect, useState } from 'react'
-import { ScrollView, View, Text } from 'react-native'
+import { ScrollView, Text } from 'react-native'
 
-import * as Storage from 'utils/storage/StorageManager'
 import { LectureAelf, getDailyGospel } from 'utils/aelf/fetchAelf'
-import baseStyle from 'config/style'
 
-import { Title, Header } from 'elements/text/Text'
+import { Header } from 'elements/text/Text'
 
-const GospelScreen = () => {
+const GospelScreen = (): JSX.Element => {
   const [evangile, setEvangile] = useState<LectureAelf>()
   let _isMounted: boolean
 
@@ -27,7 +25,7 @@ const GospelScreen = () => {
       setEvangile(data)
     })
     return () => {
-      _isMounted = false
+      if (_isMounted) _isMounted = false
     }
   })
 

screens/HomeScreen.tsx

@@ -36,7 +36,7 @@ Amen.
 `
 }
 
-const Home = () => {
+const Home = (): JSX.Element => {
   const navigation = useNavigation()
   const [myPrayer, setPrayer] = useState(defaultValues)
   const [firstname, setFirstName] = useState('')
@@ -48,6 +48,7 @@ const Home = () => {
   const [currentPrayer, setCurrentPrayer] = useState('')
 
   const onDateChange = (event: any, selectedDate?: Date | undefined) => {
+    if (!event) return
     const currentDate = selectedDate || date
     setDate(currentDate)
     setShow(false)
@@ -167,7 +168,7 @@ class HomeScreen extends React.Component {
   //   }, 5000)
   // }
 
-  render() {
+  render(): JSX.Element {
     return (
       <Tabs.Navigator
         tabBarOptions={{

screens/ManageNotificationsSubs.tsx

@@ -50,14 +50,15 @@ const PrayerLine = ({ prayer, onReactivate }: PrayerLineProps) => {
   )
 }
 
-const ManageNotificationsSubs = () => {
+const ManageNotificationsSubs = (): JSX.Element => {
   const [data, setData] = useState<Prayer[]>()
   const [date, setDate] = useState(new Date(Date.now()))
   const [show, setShow] = useState(false)
   const [currentPrayer, setCurrentPrayer] = useState('')
   let _isMounted: boolean
 
   const onDateChange = (event: any, selectedDate?: Date | undefined) => {
+    if (!event) return
     const currentDate = selectedDate || date
     setDate(currentDate)
     setShow(false)
@@ -80,7 +81,7 @@ const ManageNotificationsSubs = () => {
       setData(JSON.parse(res))
     })
     return () => {
-      _isMounted = false
+      if (_isMounted) _isMounted = false
     }
   }, [])
 

screens/MyPrayerScreen.tsx

@@ -5,7 +5,7 @@ import * as Storage from 'utils/storage/StorageManager'
 import { Header } from 'elements/text/Text'
 import { MyPrayer } from 'config/types/Prayer'
 
-const MyPrayerPage = () => {
+const MyPrayerPage = (): JSX.Element => {
   const [myPrayer, setMyPrayer] = useState<MyPrayer>()
   let _isMounted: boolean
 
@@ -17,7 +17,7 @@ const MyPrayerPage = () => {
       setMyPrayer(parsed)
     })
     return () => {
-      _isMounted = false
+      if (_isMounted) _isMounted = false
     }
   })
 

screens/PrayerScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { ScrollView, View, Text } from 'react-native'
+import { ScrollView, Text } from 'react-native'
 import { PinchGestureHandler } from 'react-native-gesture-handler'
 import { Title } from 'elements/text/Text'
 import prayers from 'data/prayers.json'
@@ -12,7 +12,7 @@ type Route = {
   }
 }
 
-const PrayerScreen = ({ route }: { route: Route }) => {
+const PrayerScreen = ({ route }: { route: Route }): JSX.Element => {
   const prayer = prayers.find((p) => p.name === route.params.name)
   const [size, setSize] = useState(16)
   const onGestureChange = (event: any) => {

screens/PrayersScreen.tsx

@@ -17,7 +17,7 @@ type PrayerLineProps = {
   prayer: Prayer
 }
 
-const PrayerLine = ({ prayer }: PrayerLineProps) => {
+const PrayerLine = ({ prayer }: PrayerLineProps): JSX.Element => {
   const navigation = useNavigation()
   return (
     <TouchableOpacity
@@ -32,7 +32,7 @@ const PrayerLine = ({ prayer }: PrayerLineProps) => {
   )
 }
 
-const PrayersScreen = () => {
+const PrayersScreen = (): JSX.Element => {
   return (
     <ScrollView style={{ paddingHorizontal: 20 }}>
       <Title>Prières</Title>

screens/ProfileScreen.tsx

@@ -16,7 +16,7 @@ import { MyPrayer } from 'config/types/Prayer'
 import { Header } from 'elements/text/Text'
 import theme from 'config/theme'
 
-const Profile = () => {
+const Profile = (): JSX.Element => {
   const [modalVisible, setModalVisible] = useState(false)
   const [firstName, onFirstNameChange] = useState('')
   const [prayerTitle, onPrayerTitleChange] = useState('')