feature: UNT-T23965: Added Typescript Support

nilesh-simform · nilesh-simform · commit 3821e3ef2f01 · 2024-04-17T12:48:57.000+05:30
diff --git a/app/App.tsx b/app/App.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, {FC} from 'react';
 import {AppContainer} from './navigation';
 
-const App = () => {
+const App: FC<{}> = () => {
   return <AppContainer></AppContainer>;
 };
 
diff --git a/app/components/button/Button.tsx b/app/components/button/Button.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, {FC} from 'react';
 import {StyleSheet, TouchableOpacity} from 'react-native';
 import {Colors} from '../../constants';
+import type {ButtonProp} from './ButtonTypes';
 
-export const Button = ({
+export const Button: FC<ButtonProp> = ({
   onPress = () => {},
   children,
   style = {},
diff --git a/app/components/button/ButtonTypes.ts b/app/components/button/ButtonTypes.ts
@@ -0,0 +1,7 @@
+import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native';
+
+export interface ButtonProp {
+  children: JSX.Element[] | JSX.Element;
+  onPress?: (event: GestureResponderEvent) => void;
+  style?: StyleProp<ViewStyle>;
+}
diff --git a/app/components/row/Row.tsx b/app/components/row/Row.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, {FC} from 'react';
 import {StyleSheet, View} from 'react-native';
+import type {RowProps} from './RowTypes';
 
-export const Row = ({children, style = {}}) => {
+export const Row: FC<RowProps> = ({children, style = {}}) => {
   return <View style={[styles.container, style]}>{children}</View>;
 };
 
diff --git a/app/components/row/RowTypes.ts b/app/components/row/RowTypes.ts
@@ -0,0 +1,6 @@
+import type {StyleProp, ViewStyle} from 'react-native';
+
+export interface RowProps {
+  children: JSX.Element[] | JSX.Element;
+  style?: StyleProp<ViewStyle>;
+}
diff --git a/app/constants/Config.ts b/app/constants/Config.ts
@@ -1,8 +1,8 @@
 import SQLite from 'react-native-sqlite-storage';
 
-const DB_NAME = 'MyTSC.db';
+const DB_NAME: string = 'MyTSC.db';
 
-const scripts = [
+const scripts: string[] = [
   'CREATE TABLE IF NOT EXISTS active_user (userId INTEGER, name VARCHAR, mobile INTEGER, role VARCHAR, username VARCHAR)',
   'CREATE TABLE IF NOT EXISTS users (userId INTEGER PRIMARY KEY AUTOINCREMENT, name VARCHAR, mobile INTEGER, role VARCHAR, username VARCHAR, password VARCHAR)',
   'CREATE TABLE IF NOT EXISTS todos (id INTEGER PRIMARY KEY AUTOINCREMENT,userId INTEGER, title VARCHAR, is_completed BOOLEAN, FOREIGN KEY(userId) REFERENCES users(userId))',
@@ -14,19 +14,19 @@ class Database {
     this.db = this.initializeDatabase();
   }
 
-  initializeDatabase() {
+  initializeDatabase(): SQLite.SQLiteDatabase {
     return SQLite.openDatabase(
       {name: DB_NAME, location: 'default'},
       this.handleDbSuccess,
       this.handleDbError,
     );
   }
 
-  getDatabase() {
+  getDatabase(): SQLite.SQLiteDatabase {
     return this.db;
   }
 
-  initialSetup() {
+  initialSetup(): void {
     this.db.transaction(tx => {
       scripts.map((scpt, idx) => {
         tx.executeSql(
@@ -43,12 +43,12 @@ class Database {
     });
   }
 
-  handleDbSuccess = () => {
+  handleDbSuccess = (): void => {
     console.log('Database opened successfully');
     this.initialSetup();
   };
 
-  handleDbError = (error: SQLite.SQLError) => {
+  handleDbError = (error: SQLite.SQLError): void => {
     console.error('Error opening database: ', error);
   };
 }
diff --git a/app/modules/AddTask/AddTaskScreen.tsx b/app/modules/AddTask/AddTaskScreen.tsx
@@ -1,16 +1,18 @@
-import React, {useState} from 'react';
+import React, {FC, useState} from 'react';
 import {Alert, Text, TextInput, View} from 'react-native';
 import {Button, Row} from '../../components';
 import {styles} from './AddTaskStyles';
 import Database from '../../constants/Config';
+import type {ComponentProps} from './AddTaskTypes';
+import type {SQLiteDatabase} from 'react-native-sqlite-storage';
 
-const DB = Database.getDatabase();
+const DB: SQLiteDatabase = Database.getDatabase();
 
-export const AddTask = ({route, navigation}) => {
+export const AddTask: FC<ComponentProps> = ({route, navigation}) => {
   const [taskName, setTaskName] = useState<string>('');
 
   let {userId} = route.params;
-  const addTask = () => {
+  const addTask = (): void => {
     if (!taskName) {
       Alert.alert('Enter Task Name');
       return;
@@ -19,14 +21,14 @@ export const AddTask = ({route, navigation}) => {
     DB.executeSql(
       'insert into todos (userId, title, is_completed) values (?,?,?)',
       [userId, taskName, false],
-      (result) => {
+      result => {
         setTaskName('');
-        console.log("Success",result)
-        navigation.goBack()
+        console.log('Success', result);
+        navigation.goBack();
       },
-      (e) => {
+      e => {
         console.log('Error', e);
-      }
+      },
     );
   };
 
diff --git a/app/modules/AddTask/AddTaskTypes.ts b/app/modules/AddTask/AddTaskTypes.ts
@@ -0,0 +1,3 @@
+import type {ScreenComponentProps} from '../../navigation/AppNavigationTypes';
+
+export type ComponentProps = ScreenComponentProps<'AddTask'>;
diff --git a/app/modules/Auth/SignIn/SignInScreen.tsx b/app/modules/Auth/SignIn/SignInScreen.tsx
@@ -1,16 +1,19 @@
-import React, {useState} from 'react';
+import React, {FC, useState} from 'react';
 import {Alert, Text, TextInput, View} from 'react-native';
 import {styles} from './SignInStyles';
 import {Button, Row} from '../../../components';
 import Database from '../../../constants/Config';
+import type {ComponentProp} from './SignInTypes';
+import type {User} from '../SignUp/SignUpTypes';
+import type { ResultSet, SQLiteDatabase, Transaction } from 'react-native-sqlite-storage';
 
-const DB = Database.getDatabase();
+const DB: SQLiteDatabase = Database.getDatabase();
 
-const SignInScreen = ({navigation, setLoggedInUser}) => {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
+const SignInScreen: FC<ComponentProp> = ({navigation, setLoggedInUser}) => {
+  const [username, setUsername] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
 
-  const handleLogin = () => {
+  const handleLogin = (): void => {
     if (!username || !password) {
       Alert.alert('Enter all fields');
       return;
@@ -20,7 +23,7 @@ const SignInScreen = ({navigation, setLoggedInUser}) => {
       tx.executeSql(
         'select * from users where username = ? and password = ?',
         [username, password],
-        (result, set) => {
+        (result: Transaction, set: ResultSet) => {
           if (set.rows.length == 0) {
             Alert.alert('Invalid Credentials');
             return;
@@ -29,7 +32,7 @@ const SignInScreen = ({navigation, setLoggedInUser}) => {
           console.log('User Logged In Successfully', result);
           Alert.alert('User Logged In Successfully');
 
-          let obj;
+          let obj: User;
 
           console.log('___', set.rows.item(0));
           obj = set.rows.item(0);
diff --git a/app/modules/Auth/SignIn/SignInTypes.ts b/app/modules/Auth/SignIn/SignInTypes.ts
@@ -0,0 +1,7 @@
+import type {ScreenNavigationProp} from '../../../navigation/AppNavigationTypes';
+import type {User} from '../SignUp/SignUpTypes';
+
+export type ComponentProp = {
+  navigation: ScreenNavigationProp<'SignIn'>;
+  setLoggedInUser: (user: User) => void;
+};
diff --git a/app/modules/Auth/SignUp/SignUpScreen.tsx b/app/modules/Auth/SignUp/SignUpScreen.tsx
@@ -1,23 +1,25 @@
-import React, {useEffect, useState} from 'react';
+import React, {FC, useState} from 'react';
 import {Alert, Keyboard, Text, TextInput, View} from 'react-native';
 import {styles} from './SignUpStyles';
 import {Button, Row} from '../../../components';
 import Database from '../../../constants/Config';
+import type {ComponentProp} from './SignUpTypes';
+import type { ResultSet, SQLiteDatabase, Transaction } from 'react-native-sqlite-storage';
 
-const DB = Database.getDatabase();
+const DB: SQLiteDatabase = Database.getDatabase();
 
-const SignUpScreen = ({navigation}) => {
-  const [name, setName] = useState('');
-  const [mobileNumber, setMobileNumber] = useState();
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [role, setRole] = useState('');
+const SignUpScreen: FC<ComponentProp> = ({navigation}) => {
+  const [name, setName] = useState<string>('');
+  const [mobileNumber, setMobileNumber] = useState<number>();
+  const [username, setUsername] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [role, setRole] = useState<string>('');
 
-  const handleRegister = () => {
+  const handleRegister = (): void => {
     DB.executeSql(
       'Insert into users (name, mobile, role, username, password) values (?,?,?,?,?)',
       [name, mobileNumber, role, username, password],
-      result => {
+      (result: Transaction) => {
         console.log('User Registered Successfully');
         Alert.alert('User Registered Successfully');
 
@@ -36,17 +38,17 @@ const SignUpScreen = ({navigation}) => {
     Keyboard.dismiss();
   };
 
-  const submitHandler = async () => {
+  const submitHandler = async (): Promise<void> => {
     if (!name || !mobileNumber || !username || !password || !role) {
       Alert.alert('Enter all fields');
       return;
     }
 
-    await DB.transaction(async tx => {
+    await DB.transaction(async (tx: Transaction) => {
       tx.executeSql(
         'select * from users where username = ?',
         [username],
-        (result, set) => {
+        (result: Transaction, set: ResultSet) => {
           if (set.rows.length > 0) {
             Alert.alert('User already exists');
             return;
@@ -61,10 +63,6 @@ const SignUpScreen = ({navigation}) => {
     });
   };
 
-  useEffect(() => {
-    console.log('Navigation: ', navigation);
-  }, []);
-
   return (
     <View style={{flex: 1, padding: 20}}>
       <Text style={styles.inputTitle}>Name: </Text>
diff --git a/app/modules/Auth/SignUp/SignUpTypes.tsx b/app/modules/Auth/SignUp/SignUpTypes.tsx
@@ -0,0 +1,19 @@
+import type {ScreenNavigationProp} from '../../../navigation/AppNavigationTypes';
+
+enum Roles {
+  ADMIN = 'Admin',
+  USER = 'User',
+}
+
+export interface User {
+  userId: number;
+  name: string;
+  mobile: number;
+  role: Roles;
+  username: string;
+  password: string;
+}
+
+export type ComponentProp = {
+  navigation: ScreenNavigationProp<'SignUp'>;
+};
diff --git a/app/modules/Home/HomeScreen.tsx b/app/modules/Home/HomeScreen.tsx
@@ -1,13 +1,16 @@
-import React, {useState} from 'react';
+import React, {FC, useState} from 'react';
 import {FlatList, SafeAreaView, Text, View} from 'react-native';
 import {Button, Row} from '../../components';
 import {styles} from './HomeStyles';
 import Database from '../../constants/Config';
 import {useFocusEffect} from '@react-navigation/native';
-const DB = Database.getDatabase();
+import type {HeaderProps, HomeScreenProps, Task} from './HomeScreenTypes';
+import type { ResultSet, SQLiteDatabase, Transaction } from 'react-native-sqlite-storage';
 
-const Header = ({handleLogout}) => {
-  return (
+const DB: SQLiteDatabase = Database.getDatabase();
+
+const Header: FC<HeaderProps> = ({handleLogout}) => {
+return (
     <View style={styles.header}>
       <Text numberOfLines={1} style={styles.headerText}>
         Todo List
@@ -21,30 +24,30 @@ const Header = ({handleLogout}) => {
   );
 };
 
-const HomeScreen = ({
+const HomeScreen: FC<HomeScreenProps> = ({
   handleLogout,
   navigation,
   loggedInUser,
 }) => {
-  const [userTask, setUserTasks] = useState([]);
+  const [userTask, setUserTasks] = useState<Task[]>([]);
 
   console.log('___', userTask);
 
-  const getTodos = () => {
+  const getTodos = (): void => {
     let query = 'select * from todos where userId = ?';
 
     if (loggedInUser?.role === 'Admin') {
       query =
         'select title, is_completed, id, name, username, users.userId from todos, users where todos.userId = users.userId';
     }
 
-    let tasks = [];
+    let tasks: Task[] = [];
 
-    DB.transaction(tx => {
+    DB.transaction((tx: Transaction) => {
       tx.executeSql(
         query,
         [loggedInUser?.userId],
-        (result, set) => {
+        (result: Transaction, set: ResultSet) => {
           if (set.rows.length == 0) {
             return;
           }
@@ -69,7 +72,7 @@ const HomeScreen = ({
     }, []),
   );
 
-  const markAsCompleted = (id, isCompleted) => {
+  const markAsCompleted = (id: number, isCompleted: boolean): void => {
     DB.executeSql(
       'update todos set is_completed = ? where id = ?',
       [isCompleted, id],
@@ -82,7 +85,7 @@ const HomeScreen = ({
     );
   };
 
-  const deleteTask = (id) => {
+  const deleteTask = (id: number): void => {
     DB.executeSql(
       'delete from todos where id = ?',
       [id],
@@ -95,9 +98,10 @@ const HomeScreen = ({
     );
   };
 
-  const renderList = ({item}) => {
-    let username, userId;
+  const renderList = ({item}: {item: Task}) => {
+    let username;
 
+    // Discriminated Union Check
     if (item?.type === 'Admin') {
       username = item?.username;
     }
@@ -123,7 +127,7 @@ const HomeScreen = ({
     );
   };
 
-  const _keyExtractorFn = (item) => item?.id.toString();
+  const _keyExtractorFn = (item: Task): string => item?.id.toString();
 
   return (
     <SafeAreaView style={{flex: 1}}>
diff --git a/app/modules/Home/HomeScreenTypes.ts b/app/modules/Home/HomeScreenTypes.ts
diff --git a/app/navigation/AppNavigation.tsx b/app/navigation/AppNavigation.tsx
diff --git a/app/navigation/AppNavigationTypes.ts b/app/navigation/AppNavigationTypes.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import type {ScreenComponentProps} from '../../navigation/AppNavigationTypes';`
	`2`	`+`
	`3`	`+export type ComponentProps = ScreenComponentProps<'AddTask'>;`