TypeScript usage - configuration & code adaptation (#25)

* Add and configure TypeScript for RN project

* Add TypeScript types check to CI workflow

The CI will now check the TypeScript code against any errors.
All files containing JavaScript code has been renamed to indictate
TypeScript (*.tsx).

* Fix: tsc --pretty errors and type errors

* Cover review remarks

Author: BartoszKlonowski

.circleci/config.yml

@@ -43,6 +43,9 @@ jobs:
       - run:
           name: "Verify the standards and code quality"
           command: npx eslint ./src/**
+      - run:
+          name: "Check the TypeScript code quality"
+          command: yarn tsc --pretty
 
   # Application build
   build-Application-Configuration-Platform:

package.json

@@ -21,12 +21,17 @@
     "@babel/runtime": "^7.8.4",
     "@callstack/eslint-config": "^11.0.0",
     "@react-native-community/eslint-config": "^1.1.0",
+    "@types/jest": "^26.0.23",
+    "@types/react": "^17.0.13",
+    "@types/react-native": "^0.64.10",
+    "@types/react-test-renderer": "^17.0.1",
     "babel-jest": "^25.1.0",
     "eslint": "^7.29.0",
     "jest": "^25.1.0",
     "metro-react-native-babel-preset": "^0.59.0",
     "prettier": "2.3.2",
-    "react-test-renderer": "16.13.1"
+    "react-test-renderer": "16.13.1",
+    "typescript": "^4.3.5"
   },
   "husky": {
     "hooks": {

src/CreateNotePanel.js renamed to src/CreateNotePanel.tsx

@@ -14,20 +14,27 @@ import {
 } from 'react-native';
 import Colors from './Resources/Colors';
 
-class CreateNotePanel extends React.Component {
-  constructor(props) {
+interface Props {}
+
+interface State {
+  title: string;
+  message: string;
+}
+
+class CreateNotePanel extends React.Component<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = {
       title: '',
       message: '',
     };
   }
 
-  titleOnChange = (text) => {
+  titleOnChange = (text: string) => {
     this.setState({title: text});
   };
 
-  messageOnChange = (text) => {
+  messageOnChange = (text: string) => {
     this.setState({message: text});
   };
 

src/NoteWidgetDetailsPanel.js renamed to src/NoteWidgetDetailsPanel.tsx

@@ -14,8 +14,17 @@ import {
 } from 'react-native';
 import Colors from './Resources/Colors';
 
-class NoteWidgetDetailsPanel extends React.Component {
-  constructor(props) {
+interface Props {}
+
+interface State {
+  id: number;
+  title: string;
+  message: string;
+  isEditing: boolean;
+}
+
+class NoteWidgetDetailsPanel extends React.Component<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = {
       id: 0,
@@ -27,41 +36,44 @@ class NoteWidgetDetailsPanel extends React.Component {
 
   async componentDidMount() {
     await NativeModules.NoteWidgetClickHandler.openedNoteID()
-      .then((result) => {
+      .then((result: number) => {
         this.setState({id: result});
         this.getNoteTitle();
         this.getNoteMessage();
         return 0;
       })
-      .catch((error) => {
-        Alert.alert('ERROR!', `Could not find the opened note\n${error}`);
+      .catch((error: Error) => {
+        Alert.alert(
+          'ERROR!',
+          `Could not find the opened note\n${error.message}`,
+        );
       });
   }
 
-  titleOnChange = (text) => {
+  titleOnChange = (text: string) => {
     this.setState({title: text});
   };
 
-  messageOnChange = (text) => {
+  messageOnChange = (text: string) => {
     this.setState({message: text});
   };
 
   getNoteTitle = async () => {
     await NativeModules.Database.getNoteTitle(this.state.id)
-      .then((result) => {
+      .then((result: string) => {
         this.setState({title: result});
         return 0;
       })
-      .catch((error) => Alert.alert('ERROR!', `${error}`));
+      .catch((error: Error) => Alert.alert('ERROR!', `${error.message}`));
   };
 
   getNoteMessage = async () => {
     await NativeModules.Database.getNotePost(this.state.id)
-      .then((result) => {
+      .then((result: string) => {
         this.setState({message: result});
         return 0;
       })
-      .catch((error) => Alert.alert('ERROR!', `${error}`));
+      .catch((error: Error) => Alert.alert('ERROR!', `${error.message}`));
   };
 
   cancelButtonPressed = () => {

src/NotesMainPanel.js renamed to src/NotesMainPanel.tsx

@@ -16,30 +16,37 @@ import {
 import NoteWidget from './Widgets/NoteWidget';
 import Colors from './Resources/Colors';
 
-const window = Dimensions.get('window');
-const screen = Dimensions.get('screen');
-
 const noteWidgetWidth = 300;
 
-class NotesMainPanel extends React.Component {
-  constructor(props) {
+function calculateColumnWidth() {
+  return Math.floor(Dimensions.get('window').width / noteWidgetWidth);
+}
+
+interface Props {}
+
+interface INote {
+  key: number;
+  title: string;
+  shortMessage: string;
+}
+
+interface State {
+  notes: Array<INote>;
+  columns: number;
+}
+
+class NotesMainPanel extends React.Component<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = {
       notes: [],
-      dimensions: {window, screen},
-      columns: this.calculateColumnWidth(window),
-      isMounted: false,
+      columns: calculateColumnWidth(),
     };
   }
 
-  calculateColumnWidth = () => {
-    return Math.floor(Dimensions.get('window').width / noteWidgetWidth);
-  };
-
-  onChange = ({window, screen}) => {
+  onChange = () => {
     this.setState({
-      dimensions: {window, screen},
-      columns: this.calculateColumnWidth(),
+      columns: calculateColumnWidth(),
     });
   };
 
@@ -52,25 +59,16 @@ class NotesMainPanel extends React.Component {
     Dimensions.removeEventListener('change', this.onChange);
   }
 
-  createNotesKeys = async (notesIDs) => {
+  createNotesKeys = async (notesIDs: Array<INote>) => {
     this.setState({notes: notesIDs});
   };
 
   getDataFromDatabase = async () => {
     await NativeModules.Database.getAllNotesIDs()
-      .then((result) => this.createNotesKeys(result))
-      .catch((error) => Alert.alert('ERROR!', `Result: ${error}`));
-  };
-
-  renderNote = (notes) => {
-    return (
-      <NoteWidget
-        width={noteWidgetWidth}
-        ID={notes.item.key}
-        title={notes.item.title}
-        shortMessage={notes.item.shortMessage}
-      />
-    );
+      .then((result: Array<INote>) => this.createNotesKeys(result))
+      .catch((error: Error) =>
+        Alert.alert('ERROR!', `Result: ${error.message}`),
+      );
   };
 
   renderWelcomePage = () => {
@@ -89,11 +87,18 @@ class NotesMainPanel extends React.Component {
   renderNotesPage = () => {
     return (
       <View style={styles.mainContainer}>
-        <FlatList
+        <FlatList<INote>
           key={this.state.columns}
           numColumns={this.state.columns}
           data={this.state.notes}
-          renderItem={this.renderNote}
+          renderItem={({item}) => (
+            <NoteWidget
+              width={noteWidgetWidth}
+              id={item.key}
+              title={item.title}
+              shortMessage={item.shortMessage}
+            />
+          )}
         />
       </View>
     );

src/Resources/Colors.js renamed to src/Resources/Colors.tsx

@@ -15,23 +15,38 @@ import DateTimePicker from '@react-native-community/datetimepicker';
 import TaskWidget from './Widgets/TaskWidget';
 import Colors from './Resources/Colors';
 
-class ToDoListPanel extends React.Component {
-  constructor(props) {
+interface Props {}
+
+interface Task {
+  key: number;
+  message: string;
+  dueDate: Date | undefined;
+}
+
+interface State {
+  tasks: Array<Task>;
+  number: number;
+  message: string;
+  selectedDate: Date | undefined;
+}
+
+class ToDoListPanel extends React.Component<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = {
       tasks: [],
       number: 0,
       message: '',
-      selectedDate: new Date(0),
+      selectedDate: new Date(),
     };
   }
 
-  onChange = (event, selectedDate) => {
+  onChange = (event: Event, selectedDate?: Date) => {
     const currentDate = selectedDate;
     this.setState({selectedDate: currentDate});
   };
 
-  messageOnChange = (text) => {
+  messageOnChange = (text: string) => {
     this.setState({message: text});
   };
 
@@ -52,24 +67,20 @@ class ToDoListPanel extends React.Component {
     });
   };
 
-  renderTask = (tasks) => {
-    return (
-      <TaskWidget
-        ID={tasks.item.key}
-        message={tasks.item.message}
-        dueDate={tasks.item.dueDate}
-      />
-    );
-  };
-
   render() {
     return (
       <View style={styles.mainPanel}>
         <View style={styles.flatListPanel}>
           <FlatList
             numColumns={1}
             data={this.state.tasks}
-            renderItem={this.renderTask}
+            renderItem={({item}) => (
+              <TaskWidget
+                id={item.key}
+                message={item.message}
+                dueDate={item.dueDate}
+              />
+            )}
           />
         </View>
 
@@ -83,7 +94,7 @@ class ToDoListPanel extends React.Component {
           <View style={styles.createButtons}>
             <Button title={'Add'} onPress={this.addButtonPressed} />
             <DateTimePicker
-              value={this.state.selectedDate}
+              value={this.state.selectedDate || new Date()}
               is24Hour={true}
               display="default"
               onChange={this.onChange}

src/ToDoListPanel.js renamed to src/ToDoListPanel.tsx

@@ -13,11 +13,18 @@ import {
 } from 'react-native';
 import Colors from '../Resources/Colors';
 
-export default function NoteWidget(props) {
-  const {width, ID, title, shortMessage} = props;
+interface Props {
+  width: number;
+  id: number;
+  title: string;
+  shortMessage: string;
+}
+
+export default function NoteWidget(props: Props) {
+  const {width, id, title, shortMessage} = props;
 
   const enterNote = () => {
-    NativeModules.NoteWidgetClickHandler.openWidget(ID);
+    NativeModules.NoteWidgetClickHandler.openWidget(id);
   };
 
   return (

src/Widgets/NoteWidget.js renamed to src/Widgets/NoteWidget.tsx

@@ -8,7 +8,13 @@ import {AppRegistry, StyleSheet, Text, View} from 'react-native';
 import CheckBox from '@react-native-community/checkbox';
 import Colors from '../Resources/Colors';
 
-export default function TaskWidget(props) {
+interface Props {
+  id: number;
+  message: string;
+  dueDate: Date | undefined;
+}
+
+export default function TaskWidget(props: Props) {
   const {message, dueDate} = props;
 
   const [isDone, setIsDone] = useState(false);

src/Widgets/TaskWidget.js renamed to src/Widgets/TaskWidget.tsx

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "lib": ["es6"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "strict": true,
+    "target": "esnext"
+  },
+  "exclude": [
+    "node_modules",
+    "babel.config.js",
+    "metro.config.js",
+    "jest.config.js"
+  ]
+}