Merge pull request #1169 from andrew-bierman/refactor/frontend-refactor

Refactor/frontend refactor
andrew-bierman · Aug 18, 2024 · 8a4c3b7 · 8a4c3b7
2 parents f79f50d + 3008f7f
commit 8a4c3b7
Show file tree

Hide file tree

Showing 309 changed files with 1,929 additions and 2,093 deletions.
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/_layout.tsx
@@ -4,7 +4,7 @@ import { View, Text, SafeAreaView, TouchableOpacity } from 'react-native';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { useIsMobileView } from 'app/hooks/common';
 import { useNavigate } from 'app/hooks/navigation';
-import { useAuthUser } from 'app/auth/hooks';
+import { useAuthUser } from 'app/modules/auth';
 import { Button } from 'tamagui';
 import { EvilIcons } from '@expo/vector-icons';
 import SVGLogoComponent from 'app/components/logo';

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
@@ -3,13 +3,17 @@ import About from 'app/screens/about';
 import { Platform, ScrollView, StyleSheet } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
+import useTheme from 'app/hooks/useTheme';
+import { DrawerToggleButton } from '@react-navigation/drawer';
 
 /**
  * Renders the AboutRoute component.
  *
  * @return {JSX.Element} The rendered component.
  */
 export default function AboutRoute() {
+  const { currentTheme } = useTheme();
+
   return (
     <>
       {Platform.OS === 'web' && (
@@ -22,6 +26,17 @@ export default function AboutRoute() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'About',
+          headerRight: () => (
+            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          ),
+
+          headerStyle: {
+            backgroundColor: currentTheme.colors.background,
+          },
+          headerTitleStyle: {
+            fontSize: 24,
+          },
+          headerTintColor: currentTheme.colors.tertiaryBlue,
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component

diff --git a/.../app/(app)/(drawer)/(tabs)/feed/index.tsx → ...p)/(drawer)/(tabs)/(stack)/feed/index.tsx b/.../app/(app)/(drawer)/(tabs)/feed/index.tsx → ...p)/(drawer)/(tabs)/(stack)/feed/index.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
-import Feed from 'app/screens/feed/Feed';
+import { FeedScreen } from 'app/modules/feed';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
+import useTheme from 'app/hooks/useTheme';
+import { DrawerToggleButton } from '@react-navigation/drawer';
 
 export default function FeedNav() {
+  const { currentTheme } = useTheme();
   return (
     <>
       {Platform.OS === 'web' && (
@@ -16,12 +19,23 @@ export default function FeedNav() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Feed',
+          headerRight: () => (
+            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          ),
+
+          headerStyle: {
+            backgroundColor: currentTheme.colors.background,
+          },
+          headerTitleStyle: {
+            fontSize: 24,
+          },
+          headerTintColor: currentTheme.colors.tertiaryBlue,
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      <Feed />
+      <FeedScreen />
     </>
   );
 }
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/item/[itemId].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/item/[itemId].tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ItemDetails from 'app/screens/items/item-details';
+import { ItemDetailsScreen } from 'app/modules/item';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
@@ -23,7 +23,7 @@ export default function Item() {
         }}
       />
       {/* <DetailsComponent type='pack'/> */}
-      <ItemDetails />
+      <ItemDetailsScreen />
     </>
   );
 }
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/items/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/items/index.tsx
@@ -1,10 +1,14 @@
 import React from 'react';
-import Items from 'app/screens/items';
+import { ItemsScreen } from 'app/modules/item';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
+import useTheme from 'app/hooks/useTheme';
+import { DrawerToggleButton } from '@react-navigation/drawer';
+
+export default function ItemsPage() {
+  const { currentTheme } = useTheme();
 
-export default function ItemsScreen() {
   return (
     <>
       {Platform.OS === 'web' && (
@@ -16,12 +20,23 @@ export default function ItemsScreen() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Items',
+          headerRight: () => (
+            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          ),
+
+          headerStyle: {
+            backgroundColor: currentTheme.colors.background,
+          },
+          headerTitleStyle: {
+            fontSize: 24,
+          },
+          headerTintColor: currentTheme.colors.tertiaryBlue,
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      <Items />
+      <ItemsScreen />
     </>
   );
 }
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx
@@ -3,8 +3,12 @@ import Maps from 'app/screens/maps';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
+import useTheme from 'app/hooks/useTheme';
+import { DrawerToggleButton } from '@react-navigation/drawer';
 
 export default function MapsScreen() {
+  const { currentTheme } = useTheme();
+
   return (
     <>
       {Platform.OS === 'web' && (
@@ -16,6 +20,17 @@ export default function MapsScreen() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Maps',
+          headerRight: () => (
+            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          ),
+
+          headerStyle: {
+            backgroundColor: currentTheme.colors.background,
+          },
+          headerTitleStyle: {
+            fontSize: 24,
+          },
+          headerTintColor: currentTheme.colors.tertiaryBlue,
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx
@@ -1,12 +1,16 @@
 import React from 'react';
 import PackContainer from 'app/components/pack/PackContainer';
-import { PackDetails } from 'app/components/pack/PackDetails';
+import { PackDetailsScreen } from 'app/modules/pack';
 import { DetailsComponent } from 'app/components/details';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
+import useTheme from 'app/hooks/useTheme';
+import { DrawerToggleButton } from '@react-navigation/drawer';
 
 export default function Pack() {
+  const { currentTheme } = useTheme();
+
   return (
     <>
       {Platform.OS === 'web' && (
@@ -19,13 +23,24 @@ export default function Pack() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Pack',
+          headerRight: () => (
+            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          ),
+
+          headerStyle: {
+            backgroundColor: currentTheme.colors.background,
+          },
+          headerTitleStyle: {
+            fontSize: 24,
+          },
+          headerTintColor: currentTheme.colors.tertiaryBlue,
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
       {/* <DetailsComponent type='pack'/> */}
-      <PackDetails />
+      <PackDetailsScreen />
     </>
   );
 }
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/create.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/create.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { AddPack } from 'app/components/pack/AddPack';
+import { AddPackScreen } from 'app/modules/pack';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
@@ -22,7 +22,7 @@ export default function Pack() {
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      <AddPack />
+      <AddPackScreen />
     </>
   );
 }
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx
@@ -1,10 +1,14 @@
 import React from 'react';
-import Feed from 'app/screens/feed/Feed';
+import { FeedScreen } from 'app/modules/feed';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
+import useTheme from 'app/hooks/useTheme';
+import { DrawerToggleButton } from '@react-navigation/drawer';
 
 export default function Packs() {
+  const { currentTheme } = useTheme();
+
   return (
     <>
       {Platform.OS === 'web' && (
@@ -16,12 +20,24 @@ export default function Packs() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Packs',
+          headerRight: () => (
+            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          ),
+
+          headerStyle: {
+            backgroundColor: currentTheme.colors.background,
+          },
+          headerTitleStyle: {
+            fontSize: 24,
+          },
+          headerTintColor: currentTheme.colors.tertiaryBlue,
+
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      <Feed feedType="userPacks" />
+      <FeedScreen feedType="userPacks" />
     </>
   );
 }
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx
@@ -2,9 +2,8 @@ import React from 'react';
 import { Stack } from 'expo-router';
 import { useEffect, useState } from 'react';
 import { StyleSheet, Text, View, Platform } from 'react-native';
-import ProfileContainer from 'app/screens/user/ProfileContainer';
+import { ProfileScreen, useProfile, useProfileId } from 'app/modules/user';
 import Head from 'expo-router/head';
-import { useProfile, useProfileId } from 'app/hooks/user';
 
 const Profile = () => {
   const [id] = useProfileId();
@@ -24,7 +23,7 @@ const Profile = () => {
           title: userRealName ? `${userRealName}'s Profile` : '',
         }}
       />
-      <ProfileContainer id={id} />
+      <ProfileScreen userId={id} />
     </>
   );
 };

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Platform, ScrollView } from 'react-native';
 import { Stack } from 'expo-router';
-import Settings from 'app/screens/user/Settings';
+import { SettingsScreen } from 'app/modules/user';
 import Head from 'expo-router/head';
 
 export default function SettingsPage() {
@@ -21,7 +21,7 @@ export default function SettingsPage() {
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      <Settings />
+      <SettingsScreen />
     </>
   );
 }
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Feed from 'app/screens/feed/Feed';
+import { FeedScreen } from 'app/modules/feed';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
@@ -21,7 +21,7 @@ export default function FeedNav() {
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      <Feed feedType="userTrips" />
+      <FeedScreen feedType="userTrips" />
     </>
   );
 }
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/index.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
-import { Platform, StyleSheet, View, Text } from 'react-native';
+import { Platform, View } from 'react-native';
 import { Stack } from 'expo-router';
-import { darkTheme, theme } from 'app/theme';
-import LandingPage from 'app/components/landing_page';
-import Dashboard from 'app/screens/dashboard';
+import { theme } from 'app/theme';
+import { DashboardScreen } from 'app/modules/dashboard';
 import useTheme from 'app/hooks/useTheme';
-import { useAuthUser } from 'app/auth/hooks';
-import { current } from '@reduxjs/toolkit';
+import { useAuthUser, LoginScreen } from 'app/modules/auth';
 import Head from 'expo-router/head';
-import Login from 'app/screens/LoginScreen';
 
 export default function HomeScreen() {
   const {
@@ -38,7 +35,9 @@ export default function HomeScreen() {
           title: 'Home',
         }}
       />
-      <View style={mutualStyles}>{!user ? <Login /> : <Dashboard />}</View>
+      <View style={mutualStyles}>
+        {!user ? <LoginScreen /> : <DashboardScreen />}
+      </View>
     </>
   );
 }
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/profile/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/profile/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ProfileContainer from 'app/screens/user/ProfileContainer';
+import { ProfileScreen } from 'app/modules/user';
 import { Platform, ScrollView } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
@@ -21,7 +21,7 @@ export default function Profile() {
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      <ProfileContainer />
+      <ProfileScreen />
     </>
   );
 }
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx
@@ -61,7 +61,10 @@ export default function Search() {
 
   return (
     <RStack
-      style={{ paddingTop: 24, backgroundColor: currentTheme.colors.text }}
+      style={{
+        paddingTop: 24,
+        backgroundColor: currentTheme.colors.white,
+      }}
     >
       {Platform.OS === 'web' && (
         <Head>

diff --git a/apps/expo/app/(app)/_layout.tsx b/apps/expo/app/(app)/_layout.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link, Slot } from 'expo-router';
-import { AuthWrapper } from 'app/auth/AuthWrapper';
+import { AuthWrapper } from 'app/modules/auth';
 import { Stack } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';