Merge branch 'andrew_testing' into feat/revise-auth

andrew-bierman · Sep 7, 2024 · 917074d · 917074d
2 parents 55b8729 + 44b5ad1
commit 917074d
Show file tree

Hide file tree

Showing 17 changed files with 92 additions and 108 deletions.
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx
@@ -1,13 +1,11 @@
-import React from 'react';
-import { Platform, type TextInput } from 'react-native';
-import { useCallback, useRef } from 'react';
-import { Stack, useFocusEffect } from 'expo-router';
-import Head from 'expo-router/head';
-import { useRouter } from 'app/hooks/router';
+import { RStack, View } from '@packrat/ui';
 import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete';
-import { RStack } from '@packrat/ui';
+import { useRouter } from 'app/hooks/router';
 import useTheme from 'app/hooks/useTheme';
-import { View } from 'native-base';
+import { Stack, useFocusEffect } from 'expo-router';
+import Head from 'expo-router/head';
+import React, { useCallback, useRef } from 'react';
+import { Platform, type TextInput } from 'react-native';
 
 interface SearchResult {
   properties: {

diff --git a/packages/app/components/carousel/index.tsx b/packages/app/components/carousel/index.tsx
@@ -15,7 +15,7 @@ interface CarouselProps {
   iconColor?: string;
 }
 
-const { height, width } = Dimensions.get('window');
+const { width: screenWidth } = Dimensions.get('window');
 
 const Carousel: React.FC<CarouselProps> = ({
   children = [],
@@ -37,7 +37,7 @@ const Carousel: React.FC<CarouselProps> = ({
   const scrollToIndex = (index: number) => {
     if (index >= 0 && index < children.length && scrollViewRef.current) {
       scrollViewRef.current.scrollTo({
-        x: index * 220,
+        x: index * (itemWidth || 220), // Use itemWidth if passed
         y: 0,
         animated: true,
       });
@@ -49,13 +49,14 @@ const Carousel: React.FC<CarouselProps> = ({
     <RStack
       style={{
         alignSelf: 'center',
-        width: '90%',
+        width: Platform.OS === 'web' ? '90%' : screenWidth, // Full width on native
         justifyContent: 'center',
         alignItems: 'center',
         flexDirection: 'row',
         flex: 1,
       }}
     >
+      {/* Show buttons only on web */}
       {Platform.OS === 'web' && (
         <ScrollButton
           direction="left"
@@ -70,7 +71,6 @@ const Carousel: React.FC<CarouselProps> = ({
         ref={scrollViewRef}
         horizontal
         scrollEnabled
-        // gestureEnabled={false} // Add this prop
         style={styles.carousel}
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={{ flexDirection: 'row' }}
@@ -82,6 +82,7 @@ const Carousel: React.FC<CarouselProps> = ({
             <RStack
               key={index}
               style={{
+                ...(index === 0 ? { marginLeft: 10 } : { marginLeft: 0 }),
                 marginRight: 10,
                 marginTop: 10,
                 flexDirection: 'row',
@@ -92,6 +93,7 @@ const Carousel: React.FC<CarouselProps> = ({
           ))}
       </ScrollView>
 
+      {/* Show buttons only on web */}
       {Platform.OS === 'web' && (
         <ScrollButton
           direction="right"

diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
@@ -21,7 +21,6 @@ import {
   SuggestionList,
 } from '../../components/Suggestion';
 import useTheme from 'app/hooks/useTheme';
-import colors from 'native-base/lib/typescript/theme/base/colors';
 
 interface ChatComponentProps {
   showChatSelector?: boolean;

diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
@@ -16,6 +16,7 @@ const Layout = ({
           flex: 1,
           justifyContent: 'center',
           marginTop: 20,
+          marginBottom: 20,
           alignItems: 'center',
           backgroundColor: 'transparent',
           width: '100%',

diff --git a/packages/app/components/progress/index.tsx b/packages/app/components/progress/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { Progress } from 'native-base';
 import useTheme from 'app/hooks/useTheme';
 import { useProgressStore } from 'app/atoms/progressStore';
+import { View } from '@packrat/ui';
 
 const ProgressBarComponent = () => {
   const { currentTheme } = useTheme();
@@ -35,14 +35,23 @@ const ProgressBarComponent = () => {
   }, [localCurrentValue, targetValue, operationId]);
 
   return (
-    <Progress
-      value={localCurrentValue}
-      colorScheme="success"
-      size="sm"
-      w="100%"
-      borderRadius={0}
-      bg={currentTheme.colors.background}
-    />
+    <View
+      style={{
+        width: '100%',
+        height: 4,
+        backgroundColor: currentTheme.colors.background,
+        borderRadius: 2,
+        overflow: 'hidden',
+      }}
+    >
+      <View
+        style={{
+          width: `${(localCurrentValue / targetValue) * 100}%`,
+          height: '100%',
+          backgroundColor: currentTheme.colors.primary,
+        }}
+      />
+    </View>
   );
 };
 

diff --git a/packages/app/config/axios.ts b/packages/app/config/axios.ts
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { api } from 'app/constants/api';
 // import { store } from '../store/store';
-import { InformUser } from 'app/utils/ToastUtils';
+import { toast } from 'app/utils/ToastUtils';
 import { dispatchProgress, progressActions } from '../atoms/progressStore';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
@@ -70,11 +70,10 @@ const responseInterceptor = (response) => {
   const responseMessage = response.headers['x-response-message'];
 
   if (responseMessage) {
-    InformUser({
+    toast({
       title: responseMessage,
-      placement: 'bottom',
-      duration: 3000,
-      style: { backgroundColor: response.status === 200 ? 'green' : 'red' },
+      duration: 3,
+      preset: response.status === 200 ? 'done' : 'error',
     });
   }
 
@@ -86,11 +85,10 @@ const responseInterceptor2 = (response) => {
   const responseMessage = response.headers['x-response-message'];
 
   if (responseMessage) {
-    InformUser({
+    toast({
       title: responseMessage,
-      placement: 'bottom',
-      duration: 3000,
-      style: { backgroundColor: response.status === 200 ? 'green' : 'red' },
+      duration: 3,
+      preset: response.status === 200 ? 'done' : 'error',
     });
   }
 
@@ -116,11 +114,11 @@ const responseErrorInterceptor = (error) => {
 
   const errorMessage =
     'message' in error ? error.message : 'Something went wrong';
-  InformUser({
+
+  toast({
     title: errorMessage,
-    placement: 'bottom',
-    duration: 3000,
-    style: { backgroundColor: 'red' },
+    duration: 3,
+    preset: 'error',
   });
 
   return Promise.reject(error);
@@ -133,11 +131,10 @@ const responseErrorInterceptor2 = (error) => {
 
   const errorMessage =
     'message' in error ? error.message : 'Something went wrong';
-  InformUser({
+  toast({
     title: errorMessage,
-    placement: 'bottom',
-    duration: 3000,
-    style: { backgroundColor: 'red' },
+    duration: 3,
+    preset: 'error',
   });
 
   setTimeout(() => {

diff --git a/packages/app/config/trpcAxiosClient.ts b/packages/app/config/trpcAxiosClient.ts
@@ -1,5 +1,5 @@
 import axios, { AxiosError, AxiosResponse } from 'axios';
-import { InformUser } from 'app/utils/ToastUtils';
+import { toast } from 'app/utils/ToastUtils';
 import { logoutAuthUser } from 'app/utils/userUtils';
 import { getErrorMessageFromError } from 'app/utils/apiUtils';
 import { Storage } from 'app/utils/storage';
@@ -29,11 +29,10 @@ const responseInterceptor = (response: AxiosResponse) => {
     return response;
   }
 
-  InformUser({
+  toast({
     title: 'Confirmed! Your submission was successful.',
-    placement: 'bottom',
-    duration: 3000,
-    style: { backgroundColor: 'green' },
+    duration: 3,
+    preset: 'done',
   });
 
   return response;
@@ -83,11 +82,10 @@ const responseErrorInterceptor = async (
   const responseMessage = getErrorMessageFromError(error);
 
   if (responseMessage) {
-    InformUser({
+    toast({
       title: responseMessage,
-      placement: 'bottom',
-      duration: 3000,
-      style: { backgroundColor: 'red' },
+      duration: 3,
+      preset: 'error',
     });
   }
 

diff --git a/packages/app/context/ThirdPartyThemeProviders.tsx b/packages/app/context/ThirdPartyThemeProviders.tsx
@@ -3,7 +3,6 @@ import { TamaguiProvider, Theme as TamaguiTheme } from 'tamagui';
 import { ToastProvider } from '@tamagui/toast';
 import config from '../theme/tamagui.config';
 import { ThemeProvider as RNPaperThemeProvider } from 'react-native-paper';
-import { NativeBaseProvider } from 'native-base';
 import {
   darkPaperTheme,
   lightThemePaper,
@@ -12,6 +11,7 @@ import {
 } from '../theme';
 import FontLoader from './FontLoader';
 import { setupDev } from 'tamagui';
+import { Toaster } from 'burnt/web';
 
 const ThirdPartyProviders = ({ children, isDark = false }) => {
   setupDev({
@@ -26,19 +26,16 @@ const ThirdPartyProviders = ({ children, isDark = false }) => {
 
   return (
     <FontLoader>
-      <NativeBaseProvider
-        theme={isDark ? nativeBaseDarkTheme : nativeBaseLightTheme}
-      >
-        <TamaguiProvider config={config} disableRootThemeClass={false}>
-          <TamaguiTheme name={isDark ? 'dark' : 'light'}>
-            <ToastProvider>
-              <RNPaperThemeProvider theme={darkPaperTheme}>
-                {children}
-              </RNPaperThemeProvider>
-            </ToastProvider>
-          </TamaguiTheme>
-        </TamaguiProvider>
-      </NativeBaseProvider>
+      <TamaguiProvider config={config} disableRootThemeClass={false}>
+        <TamaguiTheme name={isDark ? 'dark' : 'light'}>
+          <ToastProvider>
+            <RNPaperThemeProvider theme={darkPaperTheme}>
+              {children}
+              <Toaster />
+            </RNPaperThemeProvider>
+          </ToastProvider>
+        </TamaguiTheme>
+      </TamaguiProvider>
     </FontLoader>
   );
 };

diff --git a/packages/app/hooks/password-reset/useRequestEmailModal.ts b/packages/app/hooks/password-reset/useRequestEmailModal.ts
@@ -1,5 +1,5 @@
 import useTheme from 'app/hooks/useTheme';
-import { InformUser } from 'app/utils/ToastUtils';
+import { toast } from 'app/utils/ToastUtils';
 import { queryTrpc } from 'app/trpc';
 
 export const useRequestEmailModal = () => {
@@ -21,11 +21,11 @@ export const useRequestEmailModal = () => {
       // TODO - switch to RTK query
       // await axios.post(`${api}/password-reset`, { email });
       closeModal();
-      InformUser({
+
+      toast({
         title: 'Password reset email sent',
-        style: { backgroundColor: currentTheme.colors.text },
-        placement: 'bottom',
-        duration: 5000,
+        duration: 3,
+        preset: 'done',
       });
     } catch (error) {}
   };

diff --git a/packages/app/modules/item/components/ItemRow/ItemRow.tsx b/packages/app/modules/item/components/ItemRow/ItemRow.tsx
@@ -1,9 +1,8 @@
-import { Container } from 'native-base';
 import { RText, RStack } from '@packrat/ui';
 import Checkbox from 'expo-checkbox';
 import { FontAwesome } from '@expo/vector-icons';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import { useItemRow } from 'app/hooks/itemrow';
+import { useItemRow } from 'app/modules/item';
 
 interface ItemRowProps {
   packName: string;
@@ -14,7 +13,7 @@ export const ItemRow: React.FC<ItemRowProps> = ({ packName }) => {
   const styles = useCustomStyles(loadStyles);
 
   return (
-    <Container style={styles.mainContainer}>
+    <RStack style={styles.mainContainer}>
       <Checkbox
         style={styles.checkbox}
         value={isChecked}
@@ -34,7 +33,7 @@ export const ItemRow: React.FC<ItemRowProps> = ({ packName }) => {
         <FontAwesome name="pencil" size={24} color="black" />
         <FontAwesome name="trash" size={24} color="black" />
       </RStack>
-    </Container>
+    </RStack>
   );
 };
 

diff --git a/packages/app/modules/pack/components/PackCard/PackImage.tsx b/packages/app/modules/pack/components/PackCard/PackImage.tsx
@@ -1,6 +1,6 @@
 import React, { type FC } from 'react';
 import { View } from '@packrat/ui';
-import { Package } from '@tamagui/lucide-icons';
+import { Backpack } from '@tamagui/lucide-icons';
 import { type ViewProps } from 'tamagui';
 
 interface PackImageProps {
@@ -22,7 +22,7 @@ export const PackImage: FC<PackImageProps> = ({ style = {} }) => {
       ]}
     >
       <View>
-        <Package />
+        <Backpack />
       </View>
     </View>
   );

diff --git a/packages/app/modules/pack/screens/PackDetailsScreen.tsx b/packages/app/modules/pack/screens/PackDetailsScreen.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { CLIENT_URL } from '@packrat/config';
-import { RH3, RText } from '@packrat/ui';
+import { RH3, RSpinner, RText } from '@packrat/ui';
 import { useAuthUser } from 'app/modules/auth';
 import Layout from 'app/components/layout/Layout';
 import {
@@ -57,7 +57,12 @@ export function PackDetailsScreen() {
 
   const isError = error !== null;
 
-  if (isLoading) return <RText>Loading...</RText>;
+  if (isLoading)
+    return (
+      <Layout>
+        <RSpinner />
+      </Layout>
+    );
 
   return (
     <Layout customStyle={{ alignItems: 'stretch' }}>

diff --git a/packages/app/modules/user/screens/SettingsScreen.tsx b/packages/app/modules/user/screens/SettingsScreen.tsx
@@ -50,8 +50,12 @@ export function SettingsScreen() {
         gap={8}
         width="fit-content"
         maw="100%"
-        paddingVertical={20}
-        paddingHorizontal={8}
+        style={{
+          paddingTop: 20,
+          paddingBottom: 100,
+          paddingLeft: 20,
+          paddingRight: 20,
+        }}
         marginHorizontal="auto"
         marginVertical={40}
       >