Standardize file names and fix eslint/prettier warnings

db/firebase-export-metadata.json

@@ -1,12 +1,12 @@
 {
-  "version": "10.1.4",
+  "version": "10.9.2",
   "firestore": {
-    "version": "1.13.1",
+    "version": "1.14.3",
     "path": "firestore_export",
     "metadata_file": "firestore_export/firestore_export.overall_export_metadata"
   },
   "auth": {
-    "version": "10.1.4",
+    "version": "10.9.2",
     "path": "auth_export"
   }
 }

frontend/App.tsx

@@ -1,23 +1,23 @@
-import { NavigationContainer, DefaultTheme } from "@react-navigation/native";
+import { DefaultTheme, NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import React, { useCallback, useEffect, useState } from "react";
-import { StyleSheet, Image, Text, TouchableOpacity } from "react-native";
+import React, { useState } from "react";
+import { Image, StyleSheet, Text } from "react-native";
 
 import BackButton from "./src/components/Button/BackButton";
-import FirebaseInteractor from "./src/firebase/firebaseInteractor";
-import { User, Word, UID, GameType } from "./src/models/types";
-import GameScreenFlow from "./src/screens/GameScreen/GameScreenFlow";
-import AccountSettings from "./src/screens/Login/accountSettings";
-import ChangePasswordScreen from "./src/screens/Login/changePassword";
-import SettingsScreen from "./src/screens/Login/settings";
-import signInFlow from "./src/screens/Login/signInFlow";
-import OnboardingScreens from "./src/screens/Onboarding/OnboardingScreens";
-import TestWelcomeScreen from "./src/screens/TestScreen/TestWelcomeScreen";
-import AdminScreen from "./src/screens/adminScreen";
-import EmailVerificationScreen from "./src/screens/emailVerificationScreen";
-import Homescreen from "./src/screens/homescreen";
-import TestScreen from "./src/screens/TestScreen/TestScreen";
-import TestResultsScreen from "./src/screens/TestScreen/TestResultsScreen";
+import FirebaseInteractor from "./src/firebase/FirebaseInteractor";
+import { UID } from "./src/models/types";
+import AdminScreen from "./src/screens/AdminScreen";
+import ConsentScreen from "./src/screens/ConsentScreen";
+import EmailVerificationScreen from "./src/screens/EmailVerificationScreen";
+import GameFlow from "./src/screens/Game/GameFlow";
+import HomeScreen from "./src/screens/HomeScreen";
+import ChangePassword from "./src/screens/Login/ChangePassword";
+import SettingsScreen from "./src/screens/Login/Settings";
+import signInFlow from "./src/screens/Login/SignInFlow";
+import OnboardingSwiper from "./src/screens/Onboarding/OnboardingSwiper";
+import Test from "./src/screens/Test/Test";
+import TestResults from "./src/screens/Test/TestResults";
+import TestWelcome from "./src/screens/Test/TestWelcome";
 import { GameStateContext } from "./src/utils/context";
 
 const Stack = createNativeStackNavigator();
@@ -27,7 +27,7 @@ export default function App() {
       return (
         <Image
           style={styles.mainImage}
-          source={require("./src/assets/flow-icon.png")}
+          source={require("./src/assets/logos/flow-icon.png")}
         />
       );
     },
@@ -80,14 +80,19 @@ export default function App() {
         >
           <Stack.Screen
             name="Onboarding"
-            component={OnboardingScreens}
+            component={OnboardingSwiper}
             options={{ headerShown: false }}
           />
           <Stack.Screen
             name="SignInFlow"
             component={signInFlow}
             options={{ headerShown: false, gestureEnabled: false }}
           />
+          <Stack.Screen
+            name="ConsentScreen"
+            component={ConsentScreen}
+            options={{ headerBackVisible: false }}
+          />
           <Stack.Screen
             name="EmailVerification"
             component={EmailVerificationScreen}
@@ -99,7 +104,7 @@ export default function App() {
           />
           <Stack.Screen
             name="HomeScreen"
-            component={Homescreen}
+            component={HomeScreen}
             options={{ gestureEnabled: false, headerBackVisible: false }}
           />
           <Stack.Screen
@@ -116,8 +121,8 @@ export default function App() {
             }}
           />
           <Stack.Screen
-            name="ChangePasswordScreen"
-            component={ChangePasswordScreen}
+            name="ChangePassword"
+            component={ChangePassword}
             options={{
               headerTitle: () => (
                 <Text style={{ color: "#5eafdf", fontSize: 20 }}>Settings</Text>
@@ -131,8 +136,8 @@ export default function App() {
             }}
           />
           <Stack.Screen
-            name="GameScreen"
-            component={GameScreenFlow}
+            name="Game"
+            component={GameFlow}
             options={{
               headerTitle: () => {
                 return (
@@ -173,23 +178,20 @@ export default function App() {
               gestureEnabled: false,
             }}
           />
+          <Stack.Screen name="TestWelcome" component={TestWelcome} />
           <Stack.Screen
-            name="TestWelcomeScreen"
-            component={TestWelcomeScreen}
-          />
-          <Stack.Screen
-            name="TestScreen"
-            component={TestScreen}
+            name="Test"
+            component={Test}
             options={{ headerBackVisible: false }}
           />
           <Stack.Screen
-            name="TestResultsScreen"
-            component={TestResultsScreen}
+            name="TestResults"
+            component={TestResults}
             options={{ headerBackVisible: false }}
           />
           <Stack.Screen
             name="RevisitOnboarding"
-            component={OnboardingScreens}
+            component={OnboardingSwiper}
             options={{ headerShown: false }}
           />
         </Stack.Navigator>

frontend/app.json

@@ -5,9 +5,9 @@
     "owner": "flow-in-the-field",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./src/assets/flow-icon-square.png",
+    "icon": "./src/assets/logos/flow-icon-square.png",
     "splash": {
-      "image": "./src/assets/splash-screen.png",
+      "image": "./src/assets/logos/splash-screen.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
@@ -22,12 +22,12 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./src/assets/flow-icon-square.png",
+        "foregroundImage": "./src/assets/logos/flow-icon-square.png",
         "backgroundColor": "#FFFFFF"
       }
     },
     "web": {
-      "favicon": "./src/assets/flow-icon-square.png"
+      "favicon": "./src/assets/logos/flow-icon-square.png"
     },
     "description": "Main branch of *Flow in the Field* - currently in development.\n\nA language learning mobile app designed to study the relationship between mutual information and flow.",
     "githubUrl": "https://github.com/sandboxnu/flow-in-the-field"

frontend/package.json

@@ -92,4 +92,4 @@
       }
     ]
   }
-}
+}

frontend/src/components/Button/BackButton.tsx

@@ -1,25 +1,43 @@
 import { useNavigation } from "@react-navigation/native";
 import React from "react";
-import { Text, Image, View, TouchableOpacity } from "react-native";
-import Icon from 'react-native-vector-icons/FontAwesome';
+import { Image, View, TouchableOpacity } from "react-native";
 interface BackButtonProps {
-    onPress: () => void;
-    isHome?: boolean;
+  onPress: () => void;
+  isHome?: boolean;
 }
 
-export default function BackButton({ onPress, isHome = true }: BackButtonProps) {
-    let navigation = useNavigation();
+export default function BackButton({
+  onPress,
+  isHome = true,
+}: BackButtonProps) {
+  const navigation = useNavigation();
 
-    return <TouchableOpacity
-        onPress={() => {
-            onPress();
-            navigation.goBack();
-        }}>
-        <View style={{ flexDirection: 'row' }}>
-            <Image style={{ resizeMode: "contain", width: 20, height: 20, marginRight: 2 }} source={require('../../assets/back-arrow.png')} />
-            {isHome && <Image style={{ resizeMode: "contain", width: 20, height: 20 }} source={require('../../assets/home-icon.png')} />}
-        </View>
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        onPress();
+        navigation.goBack();
+      }}
+    >
+      <View style={{ flexDirection: "row" }}>
+        <Image
+          style={{
+            resizeMode: "contain",
+            width: 20,
+            height: 20,
+            marginRight: 2,
+          }}
+          source={require("../../assets/icons/back-arrow.png")}
+        />
+        {isHome && (
+          <Image
+            style={{ resizeMode: "contain", width: 20, height: 20 }}
+            source={require("../../assets/icons/home-icon.png")}
+          />
+        )}
+      </View>
     </TouchableOpacity>
+  );
 }
 
 // TODO: Edge case: Android hardware back button (bottom of screen)

frontend/src/components/Button/CustomButton.tsx

@@ -1,23 +1,33 @@
-import React, { ReactNode } from "react";
-import { TouchableOpacity, Text, StyleSheet, View, StyleSheetProperties, StyleProp, ViewStyle } from "react-native";
+import React from "react";
+import { StyleProp, Text, TouchableOpacity, ViewStyle } from "react-native";
 
 interface CustomButtonProps {
-    onPress: () => void;
-    disabled: boolean;
-    enabledStyle: StyleProp<ViewStyle>;
-    disabledStyle: StyleProp<ViewStyle>;
-    enabledTextStyle: StyleProp<ViewStyle>;
-    disabledTextStyle: StyleProp<ViewStyle>;
-    text: String
+  onPress: () => void;
+  disabled: boolean;
+  enabledStyle: StyleProp<ViewStyle>;
+  disabledStyle: StyleProp<ViewStyle>;
+  enabledTextStyle: StyleProp<ViewStyle>;
+  disabledTextStyle: StyleProp<ViewStyle>;
+  text: string;
+}
+export default function CustomButton({
+  onPress,
+  disabled,
+  enabledStyle,
+  disabledStyle,
+  enabledTextStyle,
+  disabledTextStyle,
+  text,
+}: CustomButtonProps) {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      style={disabled ? disabledStyle : enabledStyle}
+    >
+      <Text style={disabled ? disabledTextStyle : enabledTextStyle}>
+        {text}
+      </Text>
+    </TouchableOpacity>
+  );
 }
-export default function CustomButton({ onPress, disabled, enabledStyle, disabledStyle,
-    enabledTextStyle, disabledTextStyle, text }: CustomButtonProps) {
-    return (
-        <TouchableOpacity
-            onPress={onPress}
-            disabled={disabled}
-            style={disabled ? disabledStyle : enabledStyle}
-        >
-            <Text style={disabled ? disabledTextStyle : enabledTextStyle}>{text}</Text>
-        </TouchableOpacity>)
-}

frontend/src/components/Button/PrimaryButton.tsx

@@ -1,13 +1,4 @@
-import React, { ReactNode } from "react";
-import {
-  TouchableOpacity,
-  Text,
-  StyleSheet,
-  View,
-  StyleSheetProperties,
-  StyleProp,
-  ViewStyle,
-} from "react-native";
+import { StyleProp, StyleSheet, ViewStyle } from "react-native";
 
 import CustomButton from "./CustomButton";
 

frontend/src/components/Button/SecondaryButton.tsx

@@ -1,46 +1,46 @@
-import React, { ReactNode } from "react";
-import { TouchableOpacity, Text, StyleSheet, View, StyleSheetProperties, StyleProp, ViewStyle } from "react-native";
+import { StyleSheet } from "react-native";
+
 import CustomButton from "./CustomButton";
 
 interface SecondaryButtonProps {
-    onPress: () => void;
-    disabled: boolean;
-    text: String;
+  onPress: () => void;
+  disabled: boolean;
+  text: string;
 }
 export default function SecondaryButton(props: SecondaryButtonProps) {
-    return CustomButton({
-        ...props,
-        enabledStyle: styles.enabledStyle,
-        disabledStyle: {
-            ...styles.enabledStyle,
-            ...styles.additionalDisabledStyle
-        },
-        enabledTextStyle: styles.enabledTextStyle,
-        disabledTextStyle: styles.disabledTextStyle
-    })
+  return CustomButton({
+    ...props,
+    enabledStyle: styles.enabledStyle,
+    disabledStyle: {
+      ...styles.enabledStyle,
+      ...styles.additionalDisabledStyle,
+    },
+    enabledTextStyle: styles.enabledTextStyle,
+    disabledTextStyle: styles.disabledTextStyle,
+  });
 }
 
 const styles = StyleSheet.create({
-    enabledStyle: {
-        backgroundColor: 'white',
-        borderColor: "#6E81E7",
-        borderWidth: 2,
-        borderRadius: 12,
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '40%',
-        paddingHorizontal: "5%",
-        marginHorizontal: '3%',
-        marginVertical: "1%",
-        paddingVertical: 10
-    },
-    additionalDisabledStyle: { borderColor: "#6E81E7" },
-    enabledTextStyle: {
-        color: "#6E81E7",
-        backgroundColor: "transparent"
-    },
-    disabledTextStyle: {
-        color: "#6E81E7",
-        backgroundColor: "transparent"
-    }
-});
+  enabledStyle: {
+    backgroundColor: "white",
+    borderColor: "#6E81E7",
+    borderWidth: 2,
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center",
+    width: "40%",
+    paddingHorizontal: "5%",
+    marginHorizontal: "3%",
+    marginVertical: "1%",
+    paddingVertical: 10,
+  },
+  additionalDisabledStyle: { borderColor: "#6E81E7" },
+  enabledTextStyle: {
+    color: "#6E81E7",
+    backgroundColor: "transparent",
+  },
+  disabledTextStyle: {
+    color: "#6E81E7",
+    backgroundColor: "transparent",
+  },
+});