Typescript Migration - Front End

packages/app/.eslintrc.json

@@ -1,17 +1,23 @@
 {
-  "plugins": ["react", "react-native"],
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["react", "react-native","@typescript-eslint"],
   "env": {
     "react-native/react-native": true
   },
   "parserOptions": {
     "sourceType": "module",
     "ecmaVersion": 2023,
-    "ecmaFeatures": { "jsx": true }
+    "ecmaFeatures": { "jsx": true },
+    "project": ["./tsconfig.json"],
+    "tsconfigRootDir": "packages/app/"
   },
+  "ignorePatterns": ["babel.config.js", "metro.config.js"],
   "extends": [
     "prettier",
     "eslint:recommended",
     "plugin:react-native/all",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
   ]
 }

packages/app/Root.js → packages/app/Root.tsx

@@ -21,9 +21,7 @@ import Constants from "expo-constants";
 const Tab = createBottomTabNavigator();
 const Stack = createNativeStackNavigator();
 
-import {
-  GoogleSignin,
-} from "@react-native-google-signin/google-signin";
+import { GoogleSignin } from "@react-native-google-signin/google-signin";
 
 function TabNavigation() {
   return (
@@ -39,7 +37,8 @@ function App() {
   const { user, setUser } = useUserContext();
 
   const currentSession = async () => {
-    let accessToken = await SecureStore.getValueFor("accessToken");
+    const accessToken = await SecureStore.getValueFor("accessToken");
+    let refreshToken = await SecureStore.getValueFor("refreshToken");
 
     if (!accessToken) {
       return;
@@ -68,7 +67,7 @@ function App() {
     }
 
     // If access token is invalid/expired, try to get a new one with the refresh token
-    const refreshToken = await SecureStore.getValueFor("refreshToken");
+    refreshToken = await SecureStore.getValueFor("refreshToken");
     try {
       const { data: response } = await axios.post(`${ENDPOINT}/auth/token`, {
         refreshToken: refreshToken,
@@ -97,10 +96,10 @@ function App() {
 
   useEffect(() => {
     GoogleSignin.configure({
-      webClientId: Constants.expoConfig.extra.webClientId,
-      iosClientId: Constants.expoConfig.extra.iosClientId,
+      webClientId: Constants?.expoConfig?.extra?.webClientId,
+      iosClientId: Constants?.expoConfig?.extra?.iosClientId,
     });
-    
+
     currentSession();
   }, []);
 

packages/app/__tests__/FeedDrawer.test.js → packages/app/__tests__/FeedDrawer.test.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import FeedDrawer from "../screens/feed/FeedDrawer";
 import { render } from "@testing-library/react-native";
 import { NavigationContainer } from "@react-navigation/native";
-import jest, { test, expect } from "jest";
 
 // This section is used to mock the user data information within the FeedScreen.
 // Without this, Jest does not recognize the user data and throws an error.

packages/app/__tests__/GroupScreen.test.js → packages/app/__tests__/GroupScreen.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { render } from "@testing-library/react-native";
 import GroupScreen from "@app/screens/group/GroupScreen";
 import GroupHeader from "@app/components/GroupScreen/GroupHeader";
-import jest, { describe, it, expect } from "jest";
+import { GroupHeaderProps } from "@app/types/Group";
 
 jest.mock("@expo/vector-icons/Ionicons", () => ({
   Ionicons: () => null,
@@ -12,6 +12,8 @@ jest.mock("@expo/vector-icons/FontAwesome5", () => ({
   FontAwesome5: () => null,
 }));
 
+let props: GroupHeaderProps;
+
 describe("GroupScreen Tests", () => {
   describe(GroupScreen, () => {
     it("renders the GroupHeader component", () => {
@@ -35,25 +37,25 @@ describe("GroupScreen Tests", () => {
 
   describe(GroupHeader, () => {
     it("renders group icon", () => {
-      const { getByTestId } = render(<GroupHeader />);
+      const { getByTestId } = render(<GroupHeader {...props} />);
       const groupIcon = getByTestId("groupIcon");
       expect(groupIcon).toBeTruthy();
     });
 
     it("renders club banner", () => {
-      const { getByTestId } = render(<GroupHeader />);
+      const { getByTestId } = render(<GroupHeader {...props} />);
       const clubBanner = getByTestId("clubBanner");
       expect(clubBanner).toBeTruthy();
     });
 
     it("renders group header info", () => {
-      const { getByTestId } = render(<GroupHeader />);
+      const { getByTestId } = render(<GroupHeader {...props} />);
       const groupHeaderInfo = getByTestId("groupHeaderInfo");
       expect(groupHeaderInfo).toBeTruthy();
     });
 
     it("renders group media icons", () => {
-      const { getByTestId } = render(<GroupHeader />);
+      const { getByTestId } = render(<GroupHeader {...props} />);
       const groupMediaIcon = getByTestId("groupMediaIcon");
       expect(groupMediaIcon).toBeTruthy();
     });

packages/app/__tests__/Login.test.js → packages/app/__tests__/Login.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { render, fireEvent } from "@testing-library/react-native";
 import LandingScreen from "@app/screens/landing/LandingScreen";
-import jest, { describe, it, expect } from "jest";
+import { LandingScreenNavigationProps } from "@app/types/Landing";
 
 // Need these to avoid "Cannot use import statement outside a module" error
 jest.mock("expo-web-browser", () => ({
@@ -14,24 +14,31 @@ jest.mock("expo-constants", () => ({
   Constants: () => null,
 }));
 
+let props: LandingScreenNavigationProps;
+const mockedNavigate = jest.fn();
+
+jest.mock("@react-navigation/native", () => ({
+  useNavigation: () => ({ navigate: mockedNavigate }),
+}));
+
 describe(LandingScreen, () => {
   it("renders logo text", () => {
-    const { getByTestId } = render(<LandingScreen />);
+    const { getByTestId } = render(<LandingScreen {...props} />);
     const logo = getByTestId("logo");
     expect(logo).toBeTruthy();
   });
 
   describe("Email/Password Text Inputs", () => {
     it("renders correctly", () => {
-      const { getByTestId } = render(<LandingScreen />);
+      const { getByTestId } = render(<LandingScreen {...props} />);
       const emailInput = getByTestId("emailInput.textInput");
       const passwordInput = getByTestId("passwordInput.textInput");
       expect(emailInput).toBeTruthy();
       expect(passwordInput).toBeTruthy();
     });
 
     it("displays the placeholder text", () => {
-      const { getByTestId } = render(<LandingScreen />);
+      const { getByTestId } = render(<LandingScreen {...props} />);
 
       const emailInput = getByTestId("emailInput.textInput");
       const passwordInput = getByTestId("passwordInput.textInput");
@@ -41,7 +48,7 @@ describe(LandingScreen, () => {
     });
 
     it("accepts inputs", () => {
-      const { getByTestId } = render(<LandingScreen />);
+      const { getByTestId } = render(<LandingScreen {...props} />);
 
       const emailInput = getByTestId("emailInput.textInput");
       const passwordInput = getByTestId("passwordInput.textInput");
@@ -54,7 +61,9 @@ describe(LandingScreen, () => {
     });
 
     it("doesn't accept an invalid email/password", () => {
-      const { queryByTestId, getByTestId } = render(<LandingScreen />);
+      const { queryByTestId, getByTestId } = render(
+        <LandingScreen {...props} />
+      );
       const loginButton = getByTestId("loginButton");
       const emailInput = getByTestId("emailInput.textInput");
       const passwordInput = getByTestId("passwordInput.textInput");
@@ -69,7 +78,7 @@ describe(LandingScreen, () => {
     });
 
     it("visibility icon toggles password visibility", () => {
-      const { getByTestId } = render(<LandingScreen />);
+      const { getByTestId } = render(<LandingScreen {...props} />);
       const hidePasswordButton = getByTestId("passwordInput.visibility");
       const passwordInput = getByTestId("passwordInput.textInput");
 
@@ -81,33 +90,30 @@ describe(LandingScreen, () => {
 
   describe("Buttons", () => {
     it("login button renders correctly", () => {
-      const { getByTestId } = render(<LandingScreen />);
+      const { getByTestId } = render(<LandingScreen {...props} />);
       const loginButton = getByTestId("loginButton");
       expect(loginButton).toBeTruthy();
       fireEvent.press(loginButton);
     });
 
     it("google button renders correctly", () => {
-      const { getByTestId } = render(<LandingScreen />);
+      const { getByTestId } = render(<LandingScreen {...props} />);
       const googleButton = getByTestId("googleButton");
       expect(googleButton).toBeTruthy();
       fireEvent.press(googleButton);
     });
 
     it("signup button renders correctly", () => {
-      const mockNavigation = {
-        navigate: jest.fn(),
-      };
       const { getByTestId } = render(
-        <LandingScreen navigation={mockNavigation} />
+        <LandingScreen {...props} />
       );
       const signupButton = getByTestId("signupButton");
       expect(signupButton).toBeTruthy();
       fireEvent.press(signupButton);
     });
 
     it("forgot password button renders correctly", () => {
-      const { getByTestId } = render(<LandingScreen />);
+      const { getByTestId } = render(<LandingScreen {...props} />);
       const forgotPassButton = getByTestId("forgotPassButton");
       expect(forgotPassButton).toBeTruthy();
       fireEvent.press(forgotPassButton);

packages/app/__tests__/todo.test.js → packages/app/__tests__/todo.test.tsx

@@ -1,5 +1,3 @@
-import { test, expect } from "jest";
-
 test("test", () => {
   expect(true).toBe(true);
 });

packages/app/app.config.js → packages/app/app.config.ts

@@ -1,4 +1,5 @@
-require("dotenv").config();
+import dotenv from 'dotenv';
+dotenv.config();
 
 module.exports = {
   name: "Icebreak",

packages/app/assets/eye-line-off.js → packages/app/assets/eye-line-off.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import Svg, { Path } from "react-native-svg";
 
-const EyeOff = (props) => (
+const EyeOff = (props: any) => (
   <Svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"

packages/app/assets/eye-line-on.js → packages/app/assets/eye-line-on.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import Svg, { Path } from "react-native-svg";
 
-const EyeOn = (props) => (
+const EyeOn = (props: any) => (
   <Svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"

packages/app/assets/google-icon.js → packages/app/assets/google-icon.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import Svg, { Path } from "react-native-svg";
 
-const GoogleIcon = (props) => (
+const GoogleIcon = (props: any) => (
   <Svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48"

packages/app/babel.config.js

@@ -1,7 +1,11 @@
 module.exports = function (api) {
   api.cache(false);
   return {
-    presets: ["babel-preset-expo"],
+    presets: [
+      ["@babel/preset-env", { targets: { node: "current" } }],
+      "babel-preset-expo",
+      "@babel/preset-typescript",
+    ],
     plugins: [
       [
         require.resolve("babel-plugin-module-resolver"),

packages/app/components/Button.js → packages/app/components/Button.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleSheet, TouchableHighlight, View, Text } from "react-native";
-import PropTypes from "prop-types";
+import { ButtonProps } from "@app/types/Button.ts";
 
 const styles = StyleSheet.create({
   container: {
@@ -13,9 +13,13 @@ const styles = StyleSheet.create({
   },
 });
 
-function Button(props) {
+function Button(props: ButtonProps) {
   return (
-    <TouchableHighlight {...props}>
+    <TouchableHighlight
+      {...props}
+      style={[styles.container, props.style]}
+      onPress={props.onPress}
+      disabled={props.disabled}>
       <View style={styles.container}>
         {props.icon}
 
@@ -35,12 +39,4 @@ function Button(props) {
   );
 }
 
-Button.propTypes = {
-  fontColor: PropTypes.string,
-  fontWeight: PropTypes.string,
-  icon: PropTypes.node,
-  textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  title: PropTypes.string,
-};
-
 export default Button;

packages/app/components/DividerWithText.js → packages/app/components/DividerWithText.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleSheet, View, Text } from "react-native";
-import PropTypes from "prop-types";
+import { DividerWithTextProps } from "@app/types/DividerWithText";
 
 const GRAY = "#c4c4c4";
 
@@ -27,7 +27,7 @@ const styles = StyleSheet.create({
   },
 });
 
-function DividerWithText(props) {
+function DividerWithText(props: DividerWithTextProps) {
   return (
     <View style={styles.container}>
       <View style={styles.lineDivider} />
@@ -37,8 +37,4 @@ function DividerWithText(props) {
   );
 }
 
-DividerWithText.propTypes = {
-  title: PropTypes.string,
-};
-
 export default DividerWithText;

packages/app/components/EventCard/EventCard.js → packages/app/components/EventCard/EventCard.tsx

@@ -1,11 +1,12 @@
-import React from "react";
+import React, { FC } from "react";
 import { Image, StyleSheet, View } from "react-native";
 import EventCardText from "./EventCardText";
 import EventCardRegistration from "./EventCardRegistration";
-import PropTypes from "prop-types";
+import { EventCardProps } from "@app/types/EventCard";
 
 const cardColor = "white";
 
+// Stylesheet for the EventCard component
 const styles = StyleSheet.create({
   banner: {
     borderTopLeftRadius: 15,
@@ -26,7 +27,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const EventCard = ({
+const EventCard: FC<EventCardProps> = ({
   style,
   banner,
   title,
@@ -56,14 +57,4 @@ const EventCard = ({
   );
 };
 
-EventCard.propTypes = {
-  banner: PropTypes.number,
-  description: PropTypes.string,
-  location: PropTypes.string,
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  timeBegin: PropTypes.string,
-  timeEnd: PropTypes.string,
-  title: PropTypes.string,
-};
-
 export default EventCard;