Skip to content

Commit

Permalink
Chat session screen fix (#261)
Browse files Browse the repository at this point in the history 
* confilts solved

* Chat session broken into two pages

* Fixed the name for chat session follow up

* Grid action button removed
  • Loading branch information
@bhujoshi
bhujoshi authored Nov 10, 2024
1 parent 135b26d commit 0f88c05
Show file tree
Hide file tree
Showing 7 changed files with 324 additions and 168 deletions.
39 changes: 25 additions & 14 deletions ApplicationRoot.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState, useCallback, useEffect} from 'react';
import React, { useState, useCallback, useEffect } from 'react';
import { StyleSheet, View, TouchableOpacity, Linking, Platform, Animated } from 'react-native';
import AboutUsScreen from './screens/AboutUsScreen';
import ChatSessionScreen from './screens/ChatSessionScreen';
import HomeSearchScreen from './screens/HomeSearchScreen.js';
import ChatSessionHistoriesScreen from './screens/ChatSessionHistoriesScreen';
import MyPalettesScreen from './screens/MyPalettesScreen.js';
import Colors from './constants/Styles';
Expand All @@ -10,6 +10,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ColorDetailsScreen from './screens/ColorDetailScreen';
import PalettesScreen from './screens/PalettesScreen';
import SavePaletteScreen from './screens/SavePaletteScreen';
import ChatSessionScreen from './screens/ChatSessionScreen';
import ColorListScreen from './screens/ColorListScreen';
import PaletteViewScreen from './screens/PaletteViewScreen.js';
import PaletteEditScreen from './screens/PaletteEditScreen.js';
Expand All @@ -29,7 +30,7 @@ import UserProfile from './screens/UserProfileScreen.js';
import useApplicationStore from './hooks/useApplicationStore.js';
import ExplorePaletteScreen from './screens/ExplorePaletteScreen.js';
import { notifyMessage } from './libs/Helpers.js';
import FlashMessage from "react-native-flash-message";
import FlashMessage from 'react-native-flash-message';
import ShareMenu from 'react-native-share-menu';
import Color from 'pigment/full';
import { logEvent } from './libs/Helpers.js';
Expand All @@ -43,11 +44,11 @@ export default function App() {
const { loadInitPaletteFromStore } = applicationState;
const [isMenuOpen, setMenu] = useState(false);
const navigationRef = useNavigationContainerRef();
useIAPConnection(function(error) {
useIAPConnection(function (error) {
if (error) {
// TODO: figure out a better way to handle this error and show user a way to retry, ask for help or continue.
notifyMessage("Error during purchase initialization. Purchase might not work. Please retry");
}
notifyMessage('Error during purchase initialization. Purchase might not work. Please retry');
}
loadInitPaletteFromStore(); // Still load the palettes. Specially simulator will always face this issue.
});

Expand Down Expand Up @@ -84,7 +85,7 @@ export default function App() {
});
} catch (error) {
notifyMessage('Error parsing url: ' + error.message);
navigationRef.navigate(ROUTE_NAMES.HOME);
navigationRef.navigate(ROUTE_NAMES.HOME_SEARCH);
}
},
[navigationRef]
Expand Down Expand Up @@ -165,20 +166,30 @@ export default function App() {
height: HEADER_HEIGHT
}
}}>
<Stack.Screen
name={ROUTE_NAMES.HOME_SEARCH}
options={{
headerLeft: hamburgerMenuIcon,
headerTitleContainerStyle: { left: 40 },
title: t('HueHive AI')
}}
component={HomeSearchScreen}
/>
<Stack.Screen
name={ROUTE_NAMES.CHAT_SESSION}
options={{
options={{
headerLeft: hamburgerMenuIcon,
headerTitleContainerStyle: { left: 40 },
title: t('HueHive AI') }}
headerTitleContainerStyle: { left: 40 },
title: t('HueHive AI chat')
}}
component={ChatSessionScreen}
/>
<Stack.Screen
name={ROUTE_NAMES.MY_PALETTES}
options={() => {
return {
headerLeft: hamburgerMenuIcon,
headerTitleContainerStyle: { left: 40 },
headerTitleContainerStyle: { left: 40 },
title: t('My Palettes')
};
}}
Expand All @@ -189,7 +200,7 @@ export default function App() {
options={{ title: t('About us') }}
component={AboutUsScreen}
/>

<Stack.Screen
name={ROUTE_NAMES.CHAT_SESSION_HISTORIES}
options={{ title: t('Your chats') }}
Expand Down Expand Up @@ -238,7 +249,7 @@ export default function App() {
</AppAuthProvider>
</NavigationContainer>
</View>
<FlashMessage floating={true} position={{bottom: 100}} />
<FlashMessage floating={true} position={{ bottom: 100 }} />
</SideMenu>
</GestureHandlerRootView>
);
Expand All @@ -248,7 +259,7 @@ const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
flexDirection: 'row',
flexDirection: 'row'
},
sideMenuIcon: {
fontSize: 25,
Expand Down
92 changes: 46 additions & 46 deletions components/GridActionButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
Text,
Image,
TouchableOpacity,
Platform,
Platform
} from 'react-native';
import Color from 'pigment/full';
import RNColorThief from 'react-native-color-thief';
Expand All @@ -30,8 +30,7 @@ import useApplicationStore from '../hooks/useApplicationStore';
import MultiColorView from './MultiColorView';
import { ROUTE_NAMES } from '../libs/constants';


const GridActionButton = ({ navigation}) => {
const GridActionButton = ({ navigation }) => {
const { t } = useTranslation();
const [pickImageLoading, setPickImageLoading] = useState(false);
const [isColorPickerVisible, setIsColorPickerVisible] = React.useState(false);
Expand Down Expand Up @@ -174,38 +173,38 @@ const GridActionButton = ({ navigation}) => {
logEvent('chat_session_action_button');
props.navigation.reset({
index: 0,
routes: [{ name: ROUTE_NAMES.CHAT_SESSION }],
routes: [{ name: ROUTE_NAMES.HOME_SEARCH }]
});
}
},
Platform.OS == 'android' ? (
pro.plan !== 'starter'
? {
id: 6,
icon: <MaterialIcons name="create" size={20} />,
text1: t('Create palette'),
text2: t(' manually'),
onPress: () => {
logEvent('create_new_palette');
navigation.navigate('SavePalette');
Platform.OS == 'android'
? pro.plan !== 'starter'
? {
id: 6,
icon: <MaterialIcons name="create" size={20} />,
text1: t('Create palette'),
text2: t(' manually'),
onPress: () => {
logEvent('create_new_palette');
navigation.navigate('SavePalette');
}
}
}
: {
id: 7,
icon: <FontAwesome5 name="unlock" size={20} />,
text1: t('Unlock'),
text2: t('Pro'),
onPress: () => {
logEvent('home_screen_pro_button');
navigation.navigate('ProVersion');
: {
id: 7,
icon: <FontAwesome5 name="unlock" size={20} />,
text1: t('Unlock'),
text2: t('Pro'),
onPress: () => {
logEvent('home_screen_pro_button');
navigation.navigate('ProVersion');
}
}
}) : null
: null
].filter(Boolean)
];
return (
<>
<ActionButtonContainer
config={actionButtonConfig} />
<ActionButtonContainer config={actionButtonConfig} />
<Modal
visible={isColorPickerVisible}
animationType="slide"
Expand All @@ -232,9 +231,9 @@ const GridActionButton = ({ navigation}) => {
setSelectedImage(null);
setAutomaticColors([]);
}}>
{pickImageLoading &&
<ActivityIndicator size="large" color={Colors.primary} style={styles.loadingIndicator} />
}
{pickImageLoading && (
<ActivityIndicator size="large" color={Colors.primary} style={styles.loadingIndicator} />
)}
<TouchableWithoutFeedback
onPress={() => {
setIsImagePickerModalVisible(false);
Expand All @@ -256,22 +255,23 @@ const GridActionButton = ({ navigation}) => {
<Text style={styles.nextButtonText}>{t('Next')}</Text>
<MaterialIcons name="arrow-forward" size={24} color={Color.primaryDark} />
</TouchableOpacity>
{Platform.OS == 'android' && (<><View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<Text style={{ backgroundColor: '#ccc', height: 1, flex: 1 }}> </Text>
<Text style={{ marginHorizontal: 10 }}> {t('OR')}</Text>
<Text style={{ backgroundColor: '#ccc', height: 1, flex: 1 }}> </Text>
</View>
<TouchableOpacity style={styles.pickColorsButton} onPress={handlePickColors}>
<Text style={styles.pickColorsButtonText}>{t('Pick colors Manually')}</Text>
</TouchableOpacity>
</>
{Platform.OS == 'android' && (
<>
<View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<Text style={{ backgroundColor: '#ccc', height: 1, flex: 1 }}> </Text>
<Text style={{ marginHorizontal: 10 }}> {t('OR')}</Text>
<Text style={{ backgroundColor: '#ccc', height: 1, flex: 1 }}> </Text>
</View>
<TouchableOpacity style={styles.pickColorsButton} onPress={handlePickColors}>
<Text style={styles.pickColorsButtonText}>{t('Pick colors Manually')}</Text>
</TouchableOpacity>
</>
)}
</View>

</View>
</TouchableWithoutFeedback>
</View>
Expand Down Expand Up @@ -319,7 +319,7 @@ const styles = {
height: 120
},
imageExtractedColorPreview: {
margin: 16,
margin: 16
},
colorPickerModalContent: {
backgroundColor: 'white',
Expand All @@ -333,7 +333,7 @@ const styles = {
previewImage: {
height: 150,
resizeMode: 'contain',
marginHorizontal: 20,
marginHorizontal: 20
},
colorPreviewContainer: {
display: 'flex',
Expand All @@ -349,7 +349,7 @@ const styles = {
},
pickColorsButton: {
alignItems: 'center',
marginVertical: 8,
marginVertical: 8
},
pickColorsButtonText: {
fontSize: 18,
Expand Down
41 changes: 21 additions & 20 deletions components/HamburgerMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,14 @@ const HamburgerMenu = (props) => {

<ScrollView>
<View style={styles.menu}>
<TouchableOpacity
<TouchableOpacity
style={styles.menuItem}
onPress={async () => {
logEvent('home');
props.toggleSideMenu();
props.navigation.reset({
index: 0,
routes: [{ name: ROUTE_NAMES.HOME }],
routes: [{ name: ROUTE_NAMES.HOME_SEARCH }]
});
}}>
<View style={styles.menuItemView}>
Expand Down Expand Up @@ -100,20 +100,21 @@ const HamburgerMenu = (props) => {
<Text style={styles.textAreaMenuItem}>{t('Explore Palettes')}</Text>
</View>
</TouchableOpacity>
{Platform.OS == 'ios' && <TouchableOpacity
style={styles.menuItem}
onPress={async () => {
logEvent('hm_palette_library');
navigate('PaletteLibrary');
}}>
<View style={styles.menuItemView}>
<View style={styles.menuIcon}>
<MaterialCommunityIcons name="palette-swatch-outline" style={styles.icon} />
{Platform.OS == 'ios' && (
<TouchableOpacity
style={styles.menuItem}
onPress={async () => {
logEvent('hm_palette_library');
navigate('PaletteLibrary');
}}>
<View style={styles.menuItemView}>
<View style={styles.menuIcon}>
<MaterialCommunityIcons name="palette-swatch-outline" style={styles.icon} />
</View>
<Text style={styles.textAreaMenuItem}>{t('Palette Library')}</Text>
</View>
<Text style={styles.textAreaMenuItem}>{t('Palette Library')}</Text>
</View>
</TouchableOpacity>
}
</TouchableOpacity>
)}
{
<MenuLink
id={'rate-us'}
Expand All @@ -123,7 +124,7 @@ const HamburgerMenu = (props) => {
: 'https://apps.apple.com/app/id1596763657?action=write-review'
}
icon={<MaterialIcons name="star-outline" style={styles.icon} />}>
{t('Rate us on ' + (Platform.OS == 'android' ? 'PlayStore' : "AppStore"))}
{t('Rate us on ' + (Platform.OS == 'android' ? 'PlayStore' : 'AppStore'))}
</MenuLink>
}
<TouchableOpacity
Expand Down Expand Up @@ -152,7 +153,7 @@ const HamburgerMenu = (props) => {
<Text style={[styles.textAreaMenuItem]}>{t('About us')}</Text>
</View>
</TouchableOpacity>
{ Platform.OS == 'android' && // right now histories requires login. That's why enabling it in only android.
{Platform.OS == 'android' && ( // right now histories requires login. That's why enabling it in only android.
<TouchableOpacity
style={styles.menuItem}
onPress={async () => {
Expand All @@ -166,8 +167,8 @@ const HamburgerMenu = (props) => {
<Text style={styles.textAreaMenuItem}>{t('Huehive AI chat history')}</Text>
</View>
</TouchableOpacity>
}
{(Platform.OS == 'android' && !userData) && (
)}
{Platform.OS == 'android' && !userData && (
<TouchableOpacity
style={styles.menuItem}
onPress={async () => {
Expand All @@ -183,7 +184,7 @@ const HamburgerMenu = (props) => {
</View>
</TouchableOpacity>
)}
{(Platform.OS == 'android') && (
{Platform.OS == 'android' && (
<TouchableOpacity
style={styles.menuItem}
onPress={async () => {
Expand Down
4 changes: 2 additions & 2 deletions libs/constants.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export const ROUTE_NAMES = {
MY_PALETTES: 'MyPalettes',
HOME: 'ChatSession',
ABOUT_US: 'AboutUs',
HOME_SEARCH: 'HomeSearch',
CHAT_SESSION: 'ChatSession',
CHAT_SESSION_HISTORIES: 'ChatSessionHistories',
COLOR_DETAILS: 'ColorDetails',
Expand All @@ -16,6 +16,6 @@ export const ROUTE_NAMES = {

export const NUMBER_OF_COLORS_PRO_COUNT = 10;
export const PRIVATE_ROUTES = new Set([
ROUTE_NAMES.CHAT_SESSION,
ROUTE_NAMES.HOME_SEARCH,
ROUTE_NAMES.CHAT_SESSION_HISTORIES
]);
Loading

0 comments on commit 0f88c05

Please sign in to comment.