andrew-bierman · taronaleksanian · Dec 4, 2024 · Aug 7, 2024 · Aug 9, 2024 · Aug 12, 2024
diff --git a/.github/workflows/eas-cloud.yml b/.github/workflows/eas-cloud.yml
@@ -1,11 +1,11 @@
-# Native production pipeline 
+# Native production pipeline
 # Builds on EAS Cloud with auto submission
 name: EAS Build & Submit
 
 on:
-  workflow_dispatch: 
+  workflow_dispatch:
   push:
-    branches: 
+    branches:
       - main
     paths:
       - 'packages/app/**'
@@ -46,4 +46,4 @@ jobs:
 
       - name: Build on EAS
         working-directory: ./apps/expo
-        run: eas build --platform all --profile production --non-interactive --no-wait --auto-submit
+        run: eas build --platform all --profile production --non-interactive --no-wait --auto-submit
diff --git a/app.json b/app.json
@@ -0,0 +1,14 @@
+{
+  "expo": {
+    "name": "packrat-world",
+    "slug": "packrat-world",
+    "version": "0.0.1",
+    "description": "PackRat is the ultimate adventure planner designed for those who love to explore the great outdoors. Our app helps users plan and organize their trips with ease, whether it's a weekend camping trip, a day hike, or a cross-country road trip.",
+    "sdkVersion": "50.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ]
+  }
+}
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/item/[itemId].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/item/[itemId].tsx
@@ -16,13 +16,12 @@ export default function Item() {
       <Stack.Screen
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
-          title: 'Pack',
+          title: 'Item',
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      {/* <DetailsComponent type='pack'/> */}
       <ItemDetailsScreen />
     </>
   );

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack-templates/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack-templates/[id].tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+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';
+import { PackTemplateDetailsScreen } from 'app/modules/pack-templates';
+
+export default function Pack() {
+  const { currentTheme } = useTheme();
+
+  return (
+    <>
+      {Platform.OS === 'web' && (
+        <Head>
+          <title>Pack Template</title>
+          <meta name="description" content="Pack Template" />
+        </Head>
+      )}
+      <Stack.Screen
+        options={{
+          // https://reactnavigation.org/docs/headers#setting-the-header-title
+          title: 'Pack Template',
+          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
+        }}
+      />
+      <PackTemplateDetailsScreen />
+    </>
+  );
+}
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack-templates/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack-templates/index.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+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 PackTemplates() {
+  const { currentTheme } = useTheme();
+
+  return (
+    <>
+      {Platform.OS === 'web' && (
+        <Head>
+          <title>Pack Templates</title>
+        </Head>
+      )}
+      <Stack.Screen
+        options={{
+          // https://reactnavigation.org/docs/headers#setting-the-header-title
+          title: 'Pack Templates',
+          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
+        }}
+      />
+      <FeedScreen feedType="packTemplates" />
+    </>
+  );
+}
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/products/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/products/index.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ProductsScreen } 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 ProductsPage() {
+  const { currentTheme } = useTheme();
+
+  return (
+    <>
+      {Platform.OS === 'web' && (
+        <Head>
+          <title>Products</title>
+        </Head>
+      )}
+      <Stack.Screen
+        options={{
+          // https://reactnavigation.org/docs/headers#setting-the-header-title
+          title: 'Products',
+          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
+        }}
+      />
+      <ProductsScreen />
+    </>
+  );
+}
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/index.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { Platform, View } from 'react-native';
-import { Stack } from 'expo-router';
+import { Redirect, Stack } from 'expo-router';
 import { theme } from 'app/theme';
 import { DashboardScreen } from 'app/modules/dashboard';
 import useTheme from 'app/hooks/useTheme';
 import { useAuthUser, LoginScreen } from 'app/modules/auth';
 import Head from 'expo-router/head';
+import { useOfflineStore } from 'app/atoms';
 
 export default function HomeScreen() {
   const {
@@ -17,6 +18,7 @@ export default function HomeScreen() {
   } = useTheme();
 
   const user = useAuthUser();
+  const { connectionStatus } = useOfflineStore();
 
   const mutualStyles = {
     backgroundColor: currentTheme.colors.background,
@@ -35,9 +37,12 @@ export default function HomeScreen() {
           title: 'Home',
         }}
       />
-      <View style={mutualStyles}>
-        {!user ? <LoginScreen /> : <DashboardScreen />}
-      </View>
+      {connectionStatus === 'connected' && (
+        <View style={mutualStyles}>
+          {!user ? <LoginScreen /> : <DashboardScreen />}
+        </View>
+      )}
+      {connectionStatus === 'offline' && <Redirect href="offline/maps" />}
     </>
   );
 }
diff --git a/apps/expo/app/entry.tsx b/apps/expo/app/entry.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import LandingPage from 'app/components/landing_page';
+import { ConnectionGate } from 'app/components/ConnectionGate';
+import { Redirect } from 'expo-router';
+
+export default function Entry() {
+  return (
+    <>
+      <ConnectionGate mode="connected">
+        <LandingPage />
+      </ConnectionGate>
+      <ConnectionGate mode="offline">
+        <Redirect href="offline/maps" />
+      </ConnectionGate>
+    </>
+  );
+}
diff --git a/apps/expo/app/offline/_layout.tsx b/apps/expo/app/offline/_layout.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { OfflineTabs } from 'app/components/navigation/OfflineTabs';
+import { useUserInOfflineMode } from 'app/modules/auth';
+import { Redirect } from 'expo-router';
+import { SafeArea } from 'app/provider/safe-area';
+
+export default function OfflineLayout() {
+  const { isLoading } = useUserInOfflineMode();
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <SafeArea>
+      <OfflineTabs />
+    </SafeArea>
+  );
+}
diff --git a/apps/expo/app/offline/maps.tsx b/apps/expo/app/offline/maps.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Stack } from 'expo-router';
+import { OfflineMapsScreen } from 'app/modules/map/screens/OfflineMapsScreen';
+import { EmptyState } from '@packrat/ui';
+import { MapPin } from '@tamagui/lucide-icons';
+import { OfflineMessage } from 'app/components/OfflineMessage';
+
+export default function OfflineMaps() {
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: 'Map',
+        }}
+      />
+      <OfflineMessage />
+      <OfflineMapsScreen
+        fallback={
+          <EmptyState
+            icon={<MapPin size={32} />}
+            text="No maps available. Connect to the network to add maps."
+          />
+        }
+      />
+    </>
+  );
+}
diff --git a/apps/expo/app/offline/pack.tsx b/apps/expo/app/offline/pack.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Stack } from 'expo-router';
+import { FeedScreen } from 'app/modules/feed';
+import { OfflineMessage } from 'app/components/OfflineMessage';
+
+export default function OfflineMaps() {
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: 'Packs',
+          headerShown: false,
+        }}
+      />
+      <OfflineMessage />
+      <FeedScreen feedType="userPacks" listStyle={{ paddingTop: 50 }} />
+    </>
+  );
+}
diff --git a/apps/expo/package.json b/apps/expo/package.json
@@ -126,6 +126,7 @@
     "react-native": "0.73.6",
     "react-native-dotenv": "^3.4.8",
     "react-native-elements": "^3.4.3",
+    "react-native-fast-image": "^8.6.3",
     "react-native-flash-message": "^0.4.2",
     "react-native-gesture-handler": "~2.14.0",
     "react-native-google-places-autocomplete": "^2.5.1",

diff --git a/apps/next/pages/pack-templates/[id].tsx b/apps/next/pages/pack-templates/[id].tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { PackTemplateDetailsScreen } from 'app/modules/pack-templates';
+import { AuthWrapper } from 'app/modules/auth';
+
+// export const runtime = 'experimental-edge'
+
+function PackTemplate() {
+  return (
+    <>
+      <PackTemplateDetailsScreen />
+    </>
+  );
+}
+
+export default PackTemplate;
+
+PackTemplate.getLayout = function getLayout(page: any) {
+  return <AuthWrapper>{page}</AuthWrapper>;
+};
diff --git a/apps/next/pages/pack-templates/index.tsx b/apps/next/pages/pack-templates/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { FeedScreen } from 'app/modules/feed';
+import { AuthWrapper } from 'app/modules/auth';
+
+// export const runtime = 'experimental-edge'
+
+function PackTemplates() {
+  return <FeedScreen feedType="packTemplates" />;
+}
+
+export default PackTemplates;
+
+PackTemplates.getLayout = function getLayout(page: any) {
+  return <AuthWrapper>{page}</AuthWrapper>;
+};
diff --git a/apps/next/pages/products/index.tsx b/apps/next/pages/products/index.tsx
@@ -0,0 +1,15 @@
+import { ProductsScreen } from 'app/modules/item';
+import { AuthWrapper } from 'app/modules/auth';
+// export const runtime = 'experimental-edge';
+
+export default function ProductsPage() {
+  return (
+    <>
+      <ProductsScreen />
+    </>
+  );
+}
+
+ProductsPage.getLayout = function getLayout(page: any) {
+  return <AuthWrapper>{page}</AuthWrapper>;
+};