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 "../../utils/types";
 
 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 '../../utils/types';
 
 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 '../../utils/types';
 
 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 "../../utils/types";
+
+
+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 '../../utils/types';
 
-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.toString()}
         renderItem={({ item }) => (
           <Message
-            messageContent={item.msgContent}
-            author={item.uid} // TODO: call server to get author name from UID. Or should this stored with MessageType?
+            messageContent={item.messageContent}
+            author={item.author} // TODO: call server to get author name from UID. Or should this stored with MessageType?
             time={item.timeSent}
           />
         )}

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/utils/types.ts

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