Typescript Migration - Front End

packages/app/__tests__/FeedDrawer.test.js

@@ -1,3 +1,4 @@
+
 import React from 'react';
 import FeedDrawer from '../screens/feed/FeedDrawer';
 import { render, fireEvent } from '@testing-library/react-native';

packages/app/components/Button.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button as RNButton, NativeSyntheticEvent, NativeTouchEvent, ColorValue } from 'react-native';
+
+type ButtonProps = {
+  title: string;
+  onPress: (ev: NativeSyntheticEvent<NativeTouchEvent>) => void;
+  color?: ColorValue | undefined;
+  accessibilityLabel?: string | undefined;
+  disabled?: boolean | undefined;
+}
+
+
+function Button(props: ButtonProps) {
+  return <RNButton {...props} />;
+}
+
+export default Button;

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { GestureResponderEvent, Image, ImageSourcePropType, StyleSheet, View } from 'react-native';
 import EventCardText from './EventCardText';
 import EventCardRegistration from './EventCardRegistration';
 
+// Stylesheet for the EventCard component
 const styles = StyleSheet.create({
   banner: {
     width: '100%',
@@ -24,21 +25,32 @@ const styles = StyleSheet.create({
   }
 });
 
-const EventCard = (props) => {
+export type EventCardProps = {
+  banner: ImageSourcePropType,
+  title: string,
+  timeBegin: string,
+  timeEnd: string,
+  location: string,
+  description: string,
+}
+
+const EventCard: React.FC<EventCardProps> = ({
+  banner, title, timeBegin, timeEnd, location, description
+}) => {
   const onRegisterClicked = () => {
     alert("Register button works!");
   }
 
   return (
     <View style={styles.card}>
-      { props.banner ? <Image source={props.banner} style={styles.banner}/> : null}
+      { banner ? <Image source={banner} style={styles.banner}/> : null}
       <View style={{ padding: 10, marginBottom: 0 }}>
         <EventCardText 
-          title={props.title}
-          timeBegin={props.timeBegin}
-          timeEnd={props.timeEnd}
-          location={props.location}
-          description={props.description}
+          title={title}
+          timeBegin={timeBegin}
+          timeEnd={timeEnd}
+          location={location}
+          description={description}
         />
         <EventCardRegistration register={onRegisterClicked} />
       </View>

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

@@ -1,35 +1,20 @@
 import React from "react";
-import { StyleSheet, Button, View } from "react-native";
+import { StyleSheet, Button, View, GestureResponderEvent } from "react-native";
 import FaceIcon from "./FaceIcon";
 
 // Sample array for testing
 const sampleArray = [0,1,2,3];
 
-const styles = StyleSheet.create({
-  buttonView: {
-    flex: 7,
-    justifyContent: 'center',
-  },
-  button: {
-    marginBottom: 0,
-    marginLeft: 0,
-    marginRight: 0,
-  },
-  faceView: {
-    flexDirection: 'row',
-    flex: 3,
-    justifyContent: 'center'
-  }
-}); 
+export type EventCardRegistrationProps = {
+  register: () => void;
+}
+
+const EventCardRegistration: React.FC<EventCardRegistrationProps> = ({register}) => {
 
-export default function EventCardRegistration(props) {
-  const { register } = props;
-
   return (
     <View style={{ flexDirection: 'row' }}>
       <View style={styles.buttonView}>
         <Button
-          style={styles.button}
           title='Going'
           onPress={register}
         />
@@ -45,4 +30,24 @@ export default function EventCardRegistration(props) {
       </View>
     </View>
   )
-};
+};
+
+const styles = StyleSheet.create({
+  buttonView: {
+    flex: 7,
+    justifyContent: 'center',
+  },
+  button: {
+    marginBottom: 0,
+    marginLeft: 0,
+    marginRight: 0,
+  },
+  faceView: {
+    flexDirection: 'row',
+    flex: 3,
+    justifyContent: 'center'
+  }
+});
+
+
+export default EventCardRegistration;

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

@@ -16,21 +16,35 @@ const styles = StyleSheet.create({
   }
 });
 
-export default function EventCardText(props) {
+export type EventTextProps = {
+  timeBegin: string;
+  timeEnd: string;
+  title: string;
+  location: string;
+  description: string;
+}
+
+
+const EventCardText: React.FC<EventTextProps> = ({
+  timeBegin, timeEnd, title, location, description
+}) => {
+
   return (
     <View>
-      <Text style={styles.smallText}>
-        {props.timeBegin} - {props.timeEnd}
+      <Text style={styles.smallText}> 
+        {timeBegin} - {timeEnd}
       </Text>
       <Text style={styles.eventTitle}>
-        {props.title}
+        {title}
       </Text>
       <Text style={styles.smallText}>
-        📌 {props.location}
+        📌 {location}
       </Text>
       <Text style={styles.description} numberOfLines={3}>
-        {props.description}
+        {description}
       </Text>
     </View>
   )
-}
+};
+
+export default EventCardText;

packages/app/components/EventCard/FaceIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { StyleSheet, Image, ImageSourcePropType } from "react-native";
+
+export type FaceIconProps = {
+  index: number;
+  iconUrl: string
+}
+
+
+const FaceIcon: React.FC<FaceIconProps> = ({index, iconUrl}) => {
+
+  return <Image source={{ uri: iconUrl }} key={index} 
+    style={{
+      height: 36,
+      width: 36,
+      borderRadius: 18,
+      transform: [{translateX: 30 - index * 20}]
+    }}/>
+};
+
+
+export default FaceIcon;
+

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

@@ -1,7 +1,11 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { SafeAreaView, StatusBar } from 'react-native';
 
-function Screen(props) {
+type ScreenProps = {
+  children: ReactNode
+}
+
+function Screen(props: ScreenProps ) {
   const { children, ...rest } = props;
 
   return (

packages/app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "app",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "index.tsx",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
@@ -24,17 +24,23 @@
     "expo-web-browser": "~12.0.0",
     "react": "18.1.0",
     "react-native": "0.70.5",
-    "react-native-safe-area-context": "4.4.1",
-    "react-native-screens": "~3.18.0",
     "react-native-gesture-handler": "~2.8.0",
     "react-native-reanimated": "~2.12.0",
+    "react-native-safe-area-context": "4.4.1",
+    "react-native-screens": "~3.18.0",
     "react-test-renderer": "^18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
     "@testing-library/react-native": "^11.5.0",
+    "@tsconfig/react-native": "^2.0.3",
+    "@types/jest": "^29.4.0",
+    "@types/react": "^18.0.28",
+    "@types/react-native": "^0.71.2",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-plugin-module-resolver": "^4.1.0",
     "jest": "^29.3.1",
-    "babel-plugin-module-resolver": "^4.1.0"
+    "typescript": "^4.9.5"
   },
   "private": true
 }

packages/app/screens/feed/FeedScreen.js → packages/app/screens/feed/FeedScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Text, Image, StyleSheet, View, FlatList } from "react-native";
+import { Text, Image, ImageProps as DefaultImageProps, ImageURISource, ImageSourcePropType, StyleSheet, View, FlatList } from "react-native";
 import axios from "axios";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
@@ -11,6 +11,30 @@ import { useUserContext } from "@app/utils/UserContext";
 import { logoutUser } from "@app/utils/datalayer";
 import { ENDPOINT } from "@app/utils/constants";
 
+type EventType = {
+  event_id: string,
+  guild_id: string,
+  title: string,
+  description: string,
+  start_date: number,
+  end_date: number,
+  location: string,
+  thumbnail: string
+}
+
+type ItemType = {
+  banner: ImageSourcePropType,
+  title: string,
+  description: string,
+  location: string,
+  start_date: string,
+  end_date: string
+}
+
+type ImageProps = DefaultImageProps & {
+  source: ImageURISource;
+};
+
 function FeedScreen() {
   const { user, setUser } = useUserContext();
   const [events, setEvents] = useState([]);
@@ -30,11 +54,11 @@ function FeedScreen() {
     const response = await axios.get(`${ENDPOINT}/events`, {
       withCredentials: true,
       headers: {
-        Authorization: token,
+        Authorization: token ?? "",
       },
     });
 
-    const serializeEvents = response.data.events.map(event => {
+    const serializeEvents = response.data.events.map((event: EventType) => {
       return {
         ...event,
         key: event.event_id
@@ -54,9 +78,10 @@ function FeedScreen() {
     setRefreshing(false);
   }, []);
 
-  const handleRenderItem = useCallback(({ item }) => {
+  const handleRenderItem = useCallback(( item: ItemType ) => {
     return (
       <CardEvent
+        banner={item.banner}
         title={item.title}
         description={item.description}
         location={item.location}

packages/app/screens/group/GroupScreen.js → packages/app/screens/group/GroupScreen.tsx

@@ -3,7 +3,7 @@ import { Text } from 'react-native';
 
 import Screen from '@app/components/Screen';
 
-function GroupScreen() {
+function GroupScreen(): JSX.Element {
   return (
     <Screen>
       <Text>group</Text>

packages/app/screens/group/GroupStack.js → packages/app/screens/group/GroupStack.tsx

@@ -5,7 +5,7 @@ import GroupScreen from './GroupScreen';
 
 const Group = createNativeStackNavigator();
 
-function GroupStack() {
+function GroupStack(): JSX.Element {
   return (
     <Group.Navigator
       screenOptions={{ headerShown: false }}