From b26f95d8b3db83a0ac2f4afc78e9fdf87203cb49 Mon Sep 17 00:00:00 2001 From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com> Date: Sat, 7 Sep 2024 01:53:30 -0400 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20add=20native=20toasts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/app/config/axios.ts | 31 +++++++++---------- packages/app/config/trpcAxiosClient.ts | 16 +++++----- .../app/context/ThirdPartyThemeProviders.tsx | 2 ++ .../password-reset/useRequestEmailModal.ts | 10 +++--- .../pack/components/PackCard/PackImage.tsx | 4 +-- packages/app/package.json | 2 +- packages/app/utils/ToastUtils.ts | 29 ++--------------- yarn.lock | 4 +-- 8 files changed, 35 insertions(+), 63 deletions(-) diff --git a/packages/app/config/axios.ts b/packages/app/config/axios.ts index 340e9becc..efadbd78a 100644 --- 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 index 6eed78e04..cd690c149 100644 --- a/packages/app/config/trpcAxiosClient.ts +++ b/packages/app/config/trpcAxiosClient.ts @@ -1,5 +1,5 @@ import axios, { 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'; @@ -25,11 +25,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; @@ -52,11 +51,10 @@ const responseErrorInterceptor = (response: AxiosResponse) => { const responseMessage = getErrorMessageFromError(response); 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 index e26f75fb1..337398fe8 100644 --- a/packages/app/context/ThirdPartyThemeProviders.tsx +++ b/packages/app/context/ThirdPartyThemeProviders.tsx @@ -12,6 +12,7 @@ import { } from '../theme'; import FontLoader from './FontLoader'; import { setupDev } from 'tamagui'; +import { Toaster } from 'burnt/web'; const ThirdPartyProviders = ({ children, isDark = false }) => { setupDev({ @@ -34,6 +35,7 @@ const ThirdPartyProviders = ({ children, isDark = false }) => { {children} + diff --git a/packages/app/hooks/password-reset/useRequestEmailModal.ts b/packages/app/hooks/password-reset/useRequestEmailModal.ts index c066663c3..3843019ec 100644 --- 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/pack/components/PackCard/PackImage.tsx b/packages/app/modules/pack/components/PackCard/PackImage.tsx index 868841090..18e6cec94 100644 --- 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 = ({ style = {} }) => { ]} > - + ); diff --git a/packages/app/package.json b/packages/app/package.json index 4e1b34761..ed82bad5b 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -70,7 +70,7 @@ "@trpc/server": "^10.45.1", "axios": "^1.4.0", "babel-plugin-transform-inline-environment-variables": "^0.4.4", - "burnt": "^0.12.1", + "burnt": "^0.12.2", "date-fns": "^2.29.3", "dotenv": "^16.0.3", "eslint-plugin-react-native": "^4.0.0", diff --git a/packages/app/utils/ToastUtils.ts b/packages/app/utils/ToastUtils.ts index f72203797..d4a9c859a 100644 --- a/packages/app/utils/ToastUtils.ts +++ b/packages/app/utils/ToastUtils.ts @@ -1,28 +1,3 @@ -import { Toast } from 'native-base'; +import { toast } from 'burnt'; -/** - * Show a toast message to inform the user. - * - * @function InformUser - * @param {Object} options - The options object for the toast message. - * @param {string} options.title - The title of the toast message. - * @param {string} [options.placement="top"] - The placement of the toast message. Possible values are "top", "bottom", "left", or "right". - * @param {number} [options.duration=2000] - The duration in milliseconds for which the toast message should be displayed. - * @param {Object} [options.style={backgroundColor: 'green'}] - The style object for the toast message. - * @returns {void} - * - * @example - * // Show a toast message with default options - * InformUser({ title: "Hello, world!" }); - * - * // Show a toast message with custom options - * InformUser({ title: "Custom Toast", placement: "bottom", duration: 3000 }); - */ -export const InformUser = ({ title, placement, duration, style }) => { - Toast.show({ - title, - placement, - duration, - style, - }); -}; +export { toast }; diff --git a/yarn.lock b/yarn.lock index 9ccf90679..88f32c3fd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13641,7 +13641,7 @@ __metadata: "@typescript-eslint/eslint-plugin": "npm:^6.21.0" axios: "npm:^1.4.0" babel-plugin-transform-inline-environment-variables: "npm:^0.4.4" - burnt: "npm:^0.12.1" + burnt: "npm:^0.12.2" date-fns: "npm:^2.29.3" dotenv: "npm:^16.0.3" eslint: "npm:^8.56.0" @@ -15640,7 +15640,7 @@ __metadata: languageName: unknown linkType: soft -"burnt@npm:^0.12.1": +"burnt@npm:^0.12.1, burnt@npm:^0.12.2": version: 0.12.2 resolution: "burnt@npm:0.12.2" dependencies: From e54550c507db3b91c19066389cc0750ed525a5c1 Mon Sep 17 00:00:00 2001 From: Taron Date: Sat, 7 Sep 2024 12:19:58 +0400 Subject: [PATCH 2/4] fix: fix profile screen crop --- packages/app/modules/user/screens/SettingsScreen.tsx | 8 ++++++-- packages/app/modules/user/widgets/ProfileContainer.tsx | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/app/modules/user/screens/SettingsScreen.tsx b/packages/app/modules/user/screens/SettingsScreen.tsx index 719ef9e58..82c096ca3 100644 --- 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} > diff --git a/packages/app/modules/user/widgets/ProfileContainer.tsx b/packages/app/modules/user/widgets/ProfileContainer.tsx index 725ae076e..58201ceb0 100644 --- a/packages/app/modules/user/widgets/ProfileContainer.tsx +++ b/packages/app/modules/user/widgets/ProfileContainer.tsx @@ -210,7 +210,7 @@ export function ProfileContainer({ id = null }) { styles.mainContainer, Platform.OS == 'web' ? { minHeight: '100vh' } - : { minHeight: '100%', paddingBottom: 40 }, + : { minHeight: '100%', paddingBottom: 100 }, ]} >
Date: Sat, 7 Sep 2024 11:48:38 -0400 Subject: [PATCH 3/4] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20replace=20native=20bas?= =?UTF-8?q?e=20usage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../expo/app/(app)/(drawer)/(tabs)/search.tsx | 14 +++++----- packages/app/components/chat/index.tsx | 1 - packages/app/components/progress/index.tsx | 27 ++++++++++++------- .../app/context/ThirdPartyThemeProviders.tsx | 25 +++++++---------- .../item/components/ItemRow/ItemRow.tsx | 7 +++-- .../pack/screens/PackDetailsScreen.tsx | 9 +++++-- 6 files changed, 44 insertions(+), 39 deletions(-) diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx index e63bf7dd0..47dc6ba82 100644 --- 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/chat/index.tsx b/packages/app/components/chat/index.tsx index fe18c7e51..cccdf031e 100644 --- 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/progress/index.tsx b/packages/app/components/progress/index.tsx index e4990eb08..4e57e1072 100644 --- 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 ( - + + + ); }; diff --git a/packages/app/context/ThirdPartyThemeProviders.tsx b/packages/app/context/ThirdPartyThemeProviders.tsx index 337398fe8..3e0eb739d 100644 --- 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, @@ -27,20 +26,16 @@ const ThirdPartyProviders = ({ children, isDark = false }) => { return ( - - - - - - {children} - - - - - - + + + + + {children} + + + + + ); }; diff --git a/packages/app/modules/item/components/ItemRow/ItemRow.tsx b/packages/app/modules/item/components/ItemRow/ItemRow.tsx index 53e50afbd..6f1b60e6b 100644 --- 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 = ({ packName }) => { const styles = useCustomStyles(loadStyles); return ( - + = ({ packName }) => { - + ); }; diff --git a/packages/app/modules/pack/screens/PackDetailsScreen.tsx b/packages/app/modules/pack/screens/PackDetailsScreen.tsx index a64752568..e0e5def68 100644 --- 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 Loading...; + if (isLoading) + return ( + + + + ); return ( From c20839ca9e375a6b4392ee8d7272d70d6f112be9 Mon Sep 17 00:00:00 2001 From: Andrew Bierman <94939237+andrew-bierman@users.noreply.github.com> Date: Sat, 7 Sep 2024 12:01:41 -0400 Subject: [PATCH 4/4] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20improve=20feed=20previ?= =?UTF-8?q?ew=20ui=20on=20native?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/app/components/carousel/index.tsx | 10 ++++++---- packages/app/components/layout/Layout.tsx | 1 + 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/app/components/carousel/index.tsx b/packages/app/components/carousel/index.tsx index 49ede65bd..099405f72 100644 --- 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 = ({ children = [], @@ -37,7 +37,7 @@ const Carousel: React.FC = ({ 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 = ({ + {/* Show buttons only on web */} {Platform.OS === 'web' && ( = ({ 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 = ({ = ({ ))} + {/* Show buttons only on web */} {Platform.OS === 'web' && (