Move types to dedicated file

client/src/components/Common/ChatMessage.tsx

@@ -1,12 +1,7 @@
 import React, { useContext } from "react";
 import { View, StyleSheet, Text, Image, Dimensions } from "react-native";
 import { useSettings } from "../../contexts/SettingsContext";
-
-interface MessageProps {
-  messageContent: string;
-  author: string,
-  time: number // Unix timestamp; Date.now() returns a Number.
-};
+import { MessageProps } from "../../types/Props";
 
 const Message: React.FC<MessageProps> = ({ messageContent, time, author }) => {
   const settings = useSettings();

client/src/components/Common/CustomButtons.tsx

@@ -1,9 +1,6 @@
 import React from 'react'
 import { View, StyleSheet, Text, TouchableOpacity, Image, Dimensions } from 'react-native'
-
-interface ChatSendButtonProps {
-  onPress?: () => void,
-}
+import { ChatSendButtonProps } from '../../types/Props';
 
 export const ChatSendButton: React.FC<ChatSendButtonProps> = ({ onPress }) => {
   return (

client/src/components/Common/CustomInputs.tsx

@@ -1,11 +1,6 @@
 import React from 'react'
 import { TextInput, View, StyleSheet, Dimensions, Platform } from 'react-native'
-
-interface ChatInputProps {
-    value?: string,
-    onChangeText?: (text: string) => void
-    invalid?: boolean,
-}
+import { ChatInputProps } from '../../types/Props';
 
 export const WelcomeEmailInput: React.FC<ChatInputProps> = ({ value, onChangeText }) => {
     return (

client/src/components/Common/LogInButton.tsx

@@ -0,0 +1,47 @@
+import { router } from "expo-router";
+import React from "react";
+import { useFonts } from "expo-font";
+import { StyleSheet, Text, TouchableOpacity, Dimensions } from "react-native";
+import { LogInButtonProps } from "../../types/Props";
+
+
+const LogInButton: React.FC<LogInButtonProps> = ({ onPress }) => {
+
+  const [fontsLoaded, fontError] = useFonts({
+    'Gilroy-ExtraBold': require('../../../assets/fonts/Gilroy-ExtraBold.otf'),
+    'Gilroy-Light': require('../../../assets/fonts/Gilroy-Light.otf'),
+  });
+
+  if (!fontsLoaded && !fontError) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity style={styles.button} onPress={onPress}>
+      <Text style={styles.button_text}>Log In</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+
+
+  button: {
+    backgroundColor: "#5dbea3",
+    width: Dimensions.get("window").width * 0.5,
+    height: Dimensions.get("window").height * 0.05,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 10,
+  },
+
+  button_text: {
+    color: "white",
+    fontFamily: "Gilroy-ExtraBold",
+    fontSize: Dimensions.get("window").height * 0.03,
+
+  },
+});
+
+export default LogInButton;

client/src/components/Common/MessageChannel.tsx

@@ -1,11 +1,8 @@
 import React from 'react'
 import Message from './ChatMessage'
 import { FlatList, StyleSheet, View } from 'react-native'
-import { MessageType } from '../../types/Message'
+import { MessageChannelProps } from '../../types/Props';
 
-interface MessageChannelProps {
-  messages: MessageType[],
-}
 
 const MessageChannel: React.FC<MessageChannelProps> = ({ messages }) => {
   const reverseMessages = [...messages].reverse()
@@ -16,11 +13,11 @@ const MessageChannel: React.FC<MessageChannelProps> = ({ messages }) => {
           width: '100%',
         }}
         data={reverseMessages}
-        keyExtractor={(item) => item.msgId.toString()}
+        keyExtractor={(item) => item.msgId}
         renderItem={({ item }) => (
           <Message
             messageContent={item.msgContent}
-            author={item.author.uid} 
+            author={item.author.uid} // TODO: call server to get author name from UID. Or should this stored with MessageType?
             time={item.timeSent}
           />
         )}

client/src/components/Common/NearbyCount.tsx

@@ -6,10 +6,7 @@ import {
     Text,
     Dimensions
 } from 'react-native';
-
-interface CounterProps {
-    count: number;
-}
+import { CounterProps } from '../../types/Props';
 
 const NearbyCount: React.FC<CounterProps> = ({count}) => {
     return (

client/src/components/Common/NearbyHeader.tsx

@@ -1,10 +1,7 @@
-import { View, Text, StyleSheet, Dimensions } from "react-native";
-import React from "react";
-import NearbyCount from "./NearbyCount";
 
-interface CounterProps {
-  count: number;
-}
+import { View, Text, StyleSheet, Dimensions, Image } from 'react-native'
+import React from 'react'
+import { CounterProps } from '../../utils/types'
 
 export const NearbyHeader: React.FC<CounterProps> = ({ count }) => {
   return (

client/src/components/Common/SafeAreaWrapper.tsx

@@ -1,10 +1,7 @@
 import React from "react";
 import { useSettings } from "../../contexts/SettingsContext";
 import { SafeAreaView, Platform, StyleSheet, StatusBar } from "react-native";
-
-interface SafeAreaWrapperProps {
-  children: React.ReactNode;
-}
+import { SafeAreaWrapperProps } from "../../utils/types";
 
 const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({ children }) => {
   const settings = useSettings();

client/src/components/Common/SignUpButton.tsx

@@ -2,11 +2,7 @@ import { router } from "expo-router";
 import React from "react";
 import { useFonts } from "expo-font";
 import { StyleSheet, Text, TouchableOpacity, Dimensions } from "react-native";
-
-// Interface for props function onPress
-interface SignUpButtonProps {
-  onPress?: () => void;
-}
+import { SignUpButtonProps } from "../../utils/types";
 
 const SignUpButton: React.FC<SignUpButtonProps> = ({ onPress }) => {
 
@@ -27,8 +23,6 @@ const SignUpButton: React.FC<SignUpButtonProps> = ({ onPress }) => {
 };
 
 const styles = StyleSheet.create({
-
-
   button: {
     backgroundColor: "#5dbea3",
     width: Dimensions.get("window").width * 0.5,

client/src/configs/firebaseConfig.ts

@@ -1,15 +1,14 @@
 import { initializeApp, getApp, getApps } from "firebase/app";
 import { initializeAuth, getReactNativePersistence, getAuth, Auth } from "firebase/auth";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import {API_KEY, AUTH_DOMAIN, PROJECT_ID, STORAGE_BUCKET, MESSAGING_SENDER_ID, APP_ID} from "@env"; // Don't worry about this env error!
 
 const firebaseConfig = {
-  apiKey: API_KEY || "Mock-Key",
-  authDomain: AUTH_DOMAIN,
-  projectId: PROJECT_ID,
-  storageBucket: STORAGE_BUCKET,
-  messagingSenderId: MESSAGING_SENDER_ID,
-  appId: APP_ID,
+  apiKey: process.env.EXPO_PUBLIC_API_KEY,
+  authDomain: process.env.EXPO_PUBLIC_AUTH_DOMAIN,
+  projectId: process.env.EXPO_PUBLIC_PROJECT_ID,
+  storageBucket: process.env.EXPO_PUBLIC_STORAGE_BUCKET,
+  messagingSenderId: process.env.EXPO_PUBLIC_MESSAGING_SENDER_ID,
+  appId: process.env.EXPO_PUBLIC_APP_ID,
 };
 
 let app;

client/src/types/Props.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import { MessageType } from "./Message";
+
+/* button props */
+export type LogInButtonProps = {
+  onPress?: () => void;
+}
+
+export type SignUpButtonProps = {
+    onPress?: () => void;
+}
+
+export type ChatSendButtonProps = {
+    onPress?: () => void,
+}
+
+/* input props */
+export type ChatInputProps = {
+    value?: string,
+    onChangeText?: (text: string) => void
+}
+
+/* message related props */
+export type MessageProps =  {
+    messageContent: string;
+    time: number;
+    author: string;
+}
+
+export type MessageChannelProps = {
+  messages: MessageType[],
+}
+
+/* misc props*/
+export type CounterProps = {
+  count: number;
+}
+
+export type SafeAreaWrapperProps = {
+  children: React.ReactNode;
+}
+
+