Move types to dedicated file (#168)

* Move types to dedicated file * Add newline to the end of file * Reorganize props and add comments to identify groups * Re-added env import --------- Co-authored-by: h1divp <[email protected]>
ufosc · Mar 19, 2024 · 0c14ef7 · 0c14ef7
1 parent 6d46a9e
commit 0c14ef7
Show file tree

Hide file tree

Showing 12 changed files with 115 additions and 79 deletions.
diff --git a/client/src/components/Common/ChatMessage.tsx b/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();

diff --git a/client/src/components/Common/CustomButtons.tsx b/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 (

diff --git a/client/src/components/Common/CustomInputs.tsx b/client/src/components/Common/CustomInputs.tsx
@@ -1,36 +1,19 @@
-import React from "react";
-import {
-  TextInput,
-  View,
-  StyleSheet,
-  Dimensions,
-  Platform,
-} from "react-native";
-import { useFonts } from "expo-font";
-import { ChatSendButton } from "./CustomButtons";
+import React from 'react'
+import { TextInput, View, StyleSheet, Dimensions, Platform } from 'react-native'
+import { ChatInputProps } from '../../types/Props';
+import { ChatSendButton } from './CustomButtons'
 
-interface ChatInputProps {
-  value?: string;
-  onChangeText?: (text: string) => void;
-  invalid?: boolean;
-  onSend?: () => void;
+export const WelcomeEmailInput: React.FC<ChatInputProps> = ({ value, onChangeText }) => {
+    return (
+        <TextInput style={styles.welcomeEmailInput}
+        placeholder='Email'
+        multiline={false}
+        value={value}
+        onChangeText={onChangeText}
+        />
+    )
 }
 
-export const WelcomeEmailInput: React.FC<ChatInputProps> = ({
-  value,
-  onChangeText,
-}) => {
-  return (
-    <TextInput
-      style={styles.welcomeEmailInput}
-      placeholder="Email"
-      multiline={false}
-      value={value}
-      onChangeText={onChangeText}
-    />
-  );
-};
-
 // Maybe will put LogInEmailInput & LogInPasswordInput two together into a single component
 
 export const LogInEmailInput: React.FC<ChatInputProps> = ({

diff --git a/client/src/components/Common/LogInButton.tsx b/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;
diff --git a/client/src/components/Common/MessageChannel.tsx b/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}
           />
         )}

diff --git a/client/src/components/Common/NearbyCount.tsx b/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 (

diff --git a/client/src/components/Common/NearbyHeader.tsx b/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 (

diff --git a/client/src/components/Common/SafeAreaWrapper.tsx b/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();

diff --git a/client/src/components/Common/SignUpButton.tsx b/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,

diff --git a/client/src/configs/firebaseConfig.ts b/client/src/configs/firebaseConfig.ts
@@ -1,7 +1,7 @@
 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!
+import {API_KEY, AUTH_DOMAIN} from "@env"; // Don't worry about this env error!
 
 const firebaseConfig = {
   apiKey: API_KEY || "Mock-Key",

diff --git a/client/src/types/Props.ts b/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;
+}
+
+
diff --git a/client/src/utils/types.ts b/client/src/utils/types.ts