Merge pull request #593 from andrew-bierman/dev

Dev to main

.github/workflows/expo.build.yml

@@ -46,9 +46,9 @@ jobs:
     # If you need additional setup or configurations, add them here
 
     - name: Run Local Build for Android
-      working-directory: ./client
+      working-directory: ./apps/expo
       run: eas build --non-interactive --platform android --local
 
     - name: Run Local Build for iOS
-      working-directory: ./client
+      working-directory: ./apps/expo
       run: eas build --non-interactive --platform ios --local

.github/workflows/node.js.dev.yml

@@ -73,9 +73,9 @@ jobs:
         cd server
         yarn start &
 
-    - name: Start Client in Background
+    - name: Start Expo in Background
       run: |
-        cd client
+        cd apps/expo
         yarn web &
 
     - name: Wait for a while

README.md

@@ -107,14 +107,27 @@ The main apps are:
 - `packages` shared packages across apps
   - `ui` includes your custom UI kit that will be optimized by Tamagui
   - `app` you'll be importing most files from `app/`
-    - `features` (don't use a `screens` folder. organize by feature.)
+    - `features` (don't use a `screens` folder. organize by feature.) [pending]
     - `provider` (all the providers that wrap the app, and some no-ops for Web.)
+    - `api` - intended to be our services, but tRPC eliminated a lot of this need due to custom hooks. [mostly deprecated]
+    - `assets` - images and branding
+    - `auth` - auth provider and hook, currently set up for expo router auth. Once we have next js config done, will refactor to support next js auth somehow
+    - `components` - built components from our primitive ui elements (root/packages/ui), and custom logic hooks (/hooks)
+    - `config` - axios config, we have almost no axios needs with trpc. Once fully migrated away this will be removed.
+    - `constants` - strings and arrays that don’t change
+    - `context` - all react context stuff
+    - `hooks` - custom hooks for logic and data fetching with trpc
+    - `media` - media query in react native config
+    - `public` - web only assets like favicon
+/store - redux store. TRPC query reduced the need for a lot of these files. Will likely clean up soon.
+/theme - tracks dark and light mode theming logic and tamagui config
+/utils - utility functions that can be reused
 
 ## UI Kit
 
 Note we're following the [design systems guide](https://tamagui.dev/docs/guides/design-systems) and creating our own package for components.
 
-See `packages/ui` named `@my/ui` for how this works.
+See `packages/ui` named `@packrat/ui` for how this works.
 
 ## 🆕 Add new dependencies
 
@@ -186,7 +199,7 @@ cd PackRat
 
 3. Set up the environment variables for the client and server.
    - If you have access to the development env files, use those. Otherwise, replace the values with your own.
-   - See the `.env.example` files in the `client` and `server` directories for the necessary environment variables.
+   - See the `.env.example` files in the `apps/expo` and `server` directories for the necessary environment variables.
 
 #### Automated Setup 🛠️
 
@@ -199,10 +212,10 @@ yarn setup
 
 1. Navigate to the `PackRat` directory if you are not already there.
 
-2. Navigate to the `client` directory.
+2. Navigate to the `apps/expo` directory.
 
 ```
-cd client
+cd apps/expo
 ```
 
 - Note that for the client to run, you need to also make the following changes:

client/app/(app)/_layout.tsx → apps/expo/app/(app)/_layout.tsx

@@ -1,5 +1,5 @@
 import { Stack } from 'expo-router';
-import { useProtectedRoute, useSession } from '../../context/auth';
+import { useProtectedRoute, useSession } from 'app/context/auth';
 
 export default function AppLayout() {
   const { session } = useSession();

client/app/(app)/about/index.tsx → apps/expo/app/(app)/about/index.tsx

@@ -1,4 +1,4 @@
-import About from '../../../screens/about';
+import About from 'app/screens/about';
 import { Platform, ScrollView, StyleSheet } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';

client/app/(app)/appearance/index.tsx → apps/expo/app/(app)/appearance/index.tsx

@@ -1,7 +1,7 @@
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import AppearanceContainer from '../../../screens/appearance/AppearanceContainer';
+import AppearanceContainer from 'app/screens/appearance/AppearanceContainer';
 
 export default function Appearance() {
   return (

client/app/(app)/destination/[destinationId].tsx → apps/expo/app/(app)/destination/[destinationId].tsx

@@ -1,5 +1,5 @@
 import { Platform } from 'react-native';
-import { DestinationPage } from '../../../components/destination';
+import { DestinationPage } from 'app/components/destination';
 // import DestinationPage from "../../components/destination";
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';

client/app/(app)/drawer/index.tsx → apps/expo/app/(app)/drawer/index.tsx

@@ -7,14 +7,14 @@ import {
   MaterialCommunityIcons,
   MaterialIcons,
 } from '@expo/vector-icons';
-import { theme, darkTheme } from '../../../theme';
+import { theme, darkTheme } from 'app/theme';
 // import { useAuth } from "../../auth/provider";
-import useTheme from '../../../hooks/useTheme';
-import { signOut } from '../../../store/authStore';
+import useTheme from 'app/hooks/useTheme';
+import { signOut } from 'app/store/authStore';
 
 import { useDispatch, useSelector } from 'react-redux';
-import { useSession } from '../../../context/auth';
-import useCustomStyles from '~/hooks/useCustomStyles';
+import { useSession } from 'app/context/auth';
+import useCustomStyles from 'app/hooks/useCustomStyles';
 
 export default function Drawer() {
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =

client/app/(app)/feed/index.tsx → apps/expo/app/(app)/feed/index.tsx

@@ -1,4 +1,4 @@
-import Feed from '../../../screens/feed/Feed';
+import Feed from 'app/screens/feed/Feed';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';

apps/expo/app/(app)/items/index.tsx

@@ -0,0 +1,123 @@
+import { View } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, Platform } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+import { theme } from 'app/theme';
+import useTheme from 'app/hooks/useTheme';
+import { RTooltip, RButton, RScrollView, BaseModal } from '@packrat/ui';
+import { AddItemGlobal } from 'app/components/item/AddItemGlobal';
+import { ItemsTable } from 'app/components/itemtable/itemTable';
+import { useDispatch, useSelector } from 'react-redux';
+import { getItemsGlobal } from 'app/store/globalItemsStore';
+import { Stack } from 'expo-router';
+import Head from 'expo-router/head';
+import { useFetchGlobalItems } from 'app/hooks/globalItems';
+import useCustomStyles from 'app/hooks/useCustomStyles';
+
+export default function Items() {
+  // pagination index limit
+  const [limit, setLimit] = useState(5);
+  // page number for pagination
+  const [page, setPage] = useState(1);
+
+  const [refetch, setRefetch] = useState(false);
+
+  const { data, isLoading, isError } = useFetchGlobalItems(limit, page);
+  return (
+    <RScrollView>
+      {Platform.OS === 'web' && (
+        <Head>
+          <title>Items</title>
+        </Head>
+      )}
+      <Stack.Screen
+        options={{
+          title: 'Items',
+          name: 'Items',
+        }}
+      />
+      <View>
+        <>
+          <BaseModal
+            title="Add a global Item"
+            trigger="Add Item"
+            triggerComponent={<ModalTriggerButton />}
+          >
+            <AddItemGlobal setRefetch={setRefetch} refetch={refetch} />
+          </BaseModal>
+        </>
+        {!isError &&
+        data?.globalItems &&
+        Array.isArray(data?.globalItems?.items) ? (
+          <ItemsTable
+            limit={limit}
+            setLimit={setLimit}
+            page={page}
+            setPage={setPage}
+            data={data}
+            isLoading={isLoading}
+            totalPages={data?.globalItems?.totalPages ?? 0}
+            refetch={refetch}
+            setRefetch={setRefetch}
+          />
+        ) : null}
+      </View>
+    </RScrollView>
+  );
+}
+const loadStyles = () => {
+  const currentTheme = theme;
+  return {
+    container: {
+      display: 'flex',
+      justifyContent: 'center',
+      marginTop: '1rem',
+      alignItems: 'center',
+    },
+    button: {
+      backgroundColor: currentTheme.colors.background,
+      color: currentTheme.colors.white,
+      width: Platform.OS === 'web' ? '20rem' : '20%',
+      alignItems: 'center',
+      textAlign: 'center',
+    },
+  };
+};
+
+const ModalTriggerButton = ({ setIsModalOpen }) => {
+  const styles = useCustomStyles(loadStyles);
+  const { currentTheme } = useTheme();
+
+  return (
+    <View
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        marginTop: '2rem',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <RButton
+        style={styles.button}
+        onPress={() => {
+          setIsModalOpen(true);
+        }}
+      >
+        Add Item
+      </RButton>
+      {Platform.OS === 'web' ? (
+        <RTooltip
+          Label="Add a global item"
+          Icon={
+            <MaterialIcons
+              name="info-outline"
+              size={24}
+              color={currentTheme.colors.background}
+            />
+          }
+        />
+      ) : null}
+    </View>
+  );
+};

client/app/(app)/map/index.tsx → apps/expo/app/(app)/map/index.tsx

@@ -4,17 +4,16 @@ import {
   StyleSheet,
   Text,
   View,
-  Picker,
   TouchableOpacity,
 } from 'react-native';
 import Mapbox from '@rnmapbox/maps';
 // get mapbox access token from .env file
 import { MAPBOX_ACCESS_TOKEN } from '@env';
 import { FontAwesome, MaterialCommunityIcons } from '@expo/vector-icons';
-import { theme } from '../../../theme';
-import useTheme from '../../../hooks/useTheme';
+import { theme } from 'app/theme';
+import useTheme from 'app/hooks/useTheme';
 import ErrorBoundary from '@packrat/ui';
-import { useCustomStyles } from '~/hooks/useCustomStyles';
+import { useCustomStyles } from 'app/hooks/useCustomStyles';
 
 Mapbox.setAccessToken(MAPBOX_ACCESS_TOKEN);
 

client/app/(app)/maps/index.tsx → apps/expo/app/(app)/maps/index.tsx

@@ -2,14 +2,15 @@ import { Modal, Text, View, Image, Dimensions } from 'react-native';
 import Mapbox, { offlineManager } from '@rnmapbox/maps';
 import { useEffect, useState } from 'react';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import MapButtonsOverlay from '../../../components/map/MapButtonsOverlay';
-import { theme } from '../../../theme';
-import useTheme from '../../../hooks/useTheme';
+import MapButtonsOverlay from 'app/components/map/MapButtonsOverlay';
+import { theme } from 'app/theme';
+import useTheme from 'app/hooks/useTheme';
 import { StyleSheet } from 'react-native';
 import {
   calculateZoomLevel,
   getShapeSourceBounds,
-} from '../../../utils/mapFunctions';
+} from 'app/utils/mapFunctions';
+import { api } from 'app/constants/api';
 
 function CircleCapComp() {
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
@@ -91,11 +92,9 @@ export default function DownloadedMaps() {
                       borderRadius: 10,
                     }}
                     source={{
-                      uri: `https://api.mapbox.com/styles/v1/mapbox/streets-v12/static/${
+                      uri: `${api}/mapPreview/${
                         pack?.bounds[0] + ',' + pack?.bounds[1]
-                      },10,60,60/600x600?access_token=${
-                        process.env.MAPBOX_ACCESS_TOKEN
-                      }`,
+                      },10,60,60/600x600`,
                     }}
                   />
                 )}

client/app/(app)/pack/[packId].tsx → apps/expo/app/(app)/pack/[packId].tsx

@@ -1,6 +1,6 @@
-import PackContainer from '../../../components/pack/PackContainer';
-import { PackDetails } from '../../../components/pack/PackDetails';
-import { DetailsComponent } from '../../../components/details';
+import PackContainer from 'app/components/pack/PackContainer';
+import { PackDetails } from 'app/components/pack/PackDetails';
+import { DetailsComponent } from 'app/components/details';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';

client/app/(app)/pack/create.tsx → apps/expo/app/(app)/pack/create.tsx

@@ -1,4 +1,4 @@
-import { AddPack } from '../../../components/pack/AddPack';
+import { AddPack } from 'app/components/pack/AddPack';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';

client/app/(app)/packs/index.tsx → apps/expo/app/(app)/packs/index.tsx

@@ -1,4 +1,4 @@
-import Feed from '../../../screens/feed/Feed';
+import Feed from 'app/screens/feed/Feed';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';

client/app/(app)/password-reset/index.tsx → apps/expo/app/(app)/password-reset/index.tsx

@@ -1,10 +1,7 @@
 import { Platform } from 'react-native';
-import {
-  RequestPasswordReset,
-  ResetPassword,
-} from '../../../components/password-reset';
+import { RequestPasswordReset } from 'app/components/password-reset';
 import { Stack } from 'expo-router';
-import { PasswordResetForm } from '../../../components/password-reset/PasswordResetForm';
+import { PasswordResetForm } from 'app/components/password-reset/PasswordResetForm';
 import Head from 'expo-router/head';
 
 export default function ResetPasswordRoute() {

client/app/(app)/profile/[id].tsx → apps/expo/app/(app)/profile/[id].tsx

@@ -1,7 +1,7 @@
 import { useSearchParams, Stack } from 'expo-router';
 import { useEffect, useState } from 'react';
 import { StyleSheet, Text, View, Platform } from 'react-native';
-import ProfileContainer from '../../../screens/user/ProfileContainer';
+import ProfileContainer from 'app/screens/user/ProfileContainer';
 import Head from 'expo-router/head';
 
 const Profile = () => {

client/app/(app)/profile/index.tsx → apps/expo/app/(app)/profile/index.tsx

@@ -1,4 +1,4 @@
-import ProfileContainer from '../../../screens/user/ProfileContainer';
+import ProfileContainer from 'app/screens/user/ProfileContainer';
 import { Platform, ScrollView } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';

client/app/(app)/profile/settings/index.tsx → apps/expo/app/(app)/profile/settings/index.tsx

@@ -1,6 +1,6 @@
 import { Platform, ScrollView } from 'react-native';
 import { Stack } from 'expo-router';
-import Settings from '../../../../screens/user/Settings';
+import Settings from 'app/screens/user/Settings';
 import Head from 'expo-router/head';
 
 export default function SettingsPage() {

client/app/(app)/trip/[tripId].tsx → apps/expo/app/(app)/trip/[tripId].tsx

@@ -1,6 +1,6 @@
-import PackContainer from '../../../components/pack/PackContainer';
-import { TripDetails } from '../../../screens/trip/TripDetails';
-import { DetailsComponent } from '../../../components/details';
+import PackContainer from 'app/components/pack/PackContainer';
+import { TripDetails } from 'app/screens/trip/TripDetails';
+import { DetailsComponent } from 'app/components/details';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';

client/app/(app)/trip/create.tsx → apps/expo/app/(app)/trip/create.tsx

@@ -1,4 +1,4 @@
-import CreateTrip from '../../../screens/trip/createTrip';
+import CreateTrip from 'app/screens/trip/createTrip';
 
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';

client/app/(app)/trips/index.tsx → apps/expo/app/(app)/trips/index.tsx

@@ -1,4 +1,4 @@
-import Feed from '../../../screens/feed/Feed';
+import Feed from 'app/screens/feed/Feed';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';

client/app/(auth)/_layout.tsx → apps/expo/app/(auth)/_layout.tsx

@@ -1,5 +1,5 @@
 import { Stack } from 'expo-router';
-import { useProtectedRoute, useSession } from '../../context/auth';
+import { useProtectedRoute, useSession } from 'app/context/auth';
 
 export default function AppLayout() {
   const { session } = useSession();