Skip to content

Commit

Permalink
Merge pull request #846 from andrew-bierman/pack/search_and_chat
Browse files Browse the repository at this point in the history 
search functionality and chat enhancement
  • Loading branch information
@andrew-bierman
andrew-bierman authored Apr 24, 2024
2 parents 68588d7 + 1d9f49a commit 7a17368
Show file tree
Hide file tree
Showing 21 changed files with 1,459 additions and 182 deletions.
8 changes: 7 additions & 1 deletion packages/app/components/SearchInput/SearchInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
handleSearchChange,
showSearchResults,
isLoadingMobile,
isVisible,
} = useSearchInput({ onSelect, onChange, searchString });

const { currentTheme } = useTheme();
Expand Down Expand Up @@ -95,7 +96,12 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
)}
</RStack>

<RStack style={{ position: 'relative' }}>
<RStack
style={{
position: 'relative',
display: isVisible ? 'block' : 'none',
}}
>
{showSearchResults && results && results?.length > 0 && (
<RScrollView
position="absolute"
Expand Down
6 changes: 6 additions & 0 deletions packages/app/components/SearchInput/useSearchInput.ts
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
import { set } from 'lodash';
import { useState } from 'react';

const useSearchInput = ({ onSelect, onChange, searchString }) => {
const [isLoadingMobile, setIsLoadingMobile] = useState(false);
const showSearchResults = !!searchString;
const [isVisible, setIsVisible] = useState(false);

const handleSearchResultClick = (result) => {
if (onSelect) {
const newSearchValue = onSelect(result);
onChange(newSearchValue);
setIsVisible(false);
}
};

const handleClearSearch = () => {
onChange('');
setIsVisible(false);
};

const handleSearchChange = (text) => {
onChange(text);
setIsVisible(true);
};

return {
Expand All @@ -26,6 +31,7 @@ const useSearchInput = ({ onSelect, onChange, searchString }) => {
handleClearSearch,
handleSearchChange,
isLoadingMobile,
isVisible,
};
};

Expand Down
122 changes: 46 additions & 76 deletions packages/app/components/chat/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import {
View,
Text,
FlatList,
TextInput,
TouchableOpacity,
ScrollView,
} from 'react-native';
import {
BaseModal,
Expand All @@ -18,6 +19,7 @@ import { sendMessage } from '@packrat/validations';
import useCustomStyles from 'app/hooks/useCustomStyles';
import { useChat } from 'app/hooks/chat/useChat';
import { loadStyles } from './chat.style';
import { Box } from 'native-base';
// import { Select } from "tamagui";

// TODO check if we've fixed the chat screen on another branch
Expand Down Expand Up @@ -45,11 +47,13 @@ interface ChatSelectorProps {
interface ChatComponentProps {
showChatSelector?: boolean;
defaultChatId?: string | null;
itemTypeId?: string | null;
}

interface ChatModalTriggerProps {
title: string;
trigger: string;
itemTypeId: string | null;
}

const MessageBubble: React.FC<MessageBubbleProps> = ({ message }) => {
Expand All @@ -74,102 +78,68 @@ const MessageList = ({ messages }: MessageListProps) => {
data={messages}
renderItem={({ item }) => <MessageBubble message={item} />}
keyExtractor={(item, index) => index.toString()}
style={{ maxWidth: 500, maxHeight: 500, flex: 1 }}
/>
);
};

const Chator: React.FC<ChatSelectorProps> = ({
conversation,
onSelect,
isActive,
}) => {
const styles = useCustomStyles(loadStyles);
return (
<TouchableOpacity
key={conversation.id}
onPress={() => onSelect(conversation.id)}
style={[styles.chator, isActive && styles.activeChator]}
>
<Text style={styles.chatorText}>{conversation.id}</Text>
</TouchableOpacity>
);
};
// const ChatSelector: React.FC<ChatSelectorProps> = ({
// conversation,
// onSelect,
// isActive,
// }) => {
// const styles = useCustomStyles(loadStyles);
// return (
// <TouchableOpacity
// key={conversation._id}
// onPress={() => onSelect(conversation._id)}
// style={[styles.chator, isActive && styles.activeChator]}
// >
// <Text style={styles.chatorText}>{conversation._id}</Text>
// </TouchableOpacity>
// );
// };

const ChatComponent: React.FC<ChatComponentProps> = ({
showChatSelector = true,
defaultChatId = null,
itemTypeId = null,
}) => {
const styles = useCustomStyles(loadStyles);
const {
conversations,
conversationId,
typeId,
parsedMessages,
userInput,
handleSendMessage,
setUserInput,
setConversationId,
} = useChat({ defaultChatId });

const options = Array.isArray(conversations)
? conversations.map((conversation) => conversation.id)
: [];

console.log(options);
setTypeId,
} = useChat({ itemTypeId });

return (
<View style={styles.container}>
<RStack style={{ alignItems: 'center' }}>
{showChatSelector && (
<Form>
<>
{options?.length ? (
<>
<FormSelect
options={options}
style={{ width: '100%' }}
placeholder="Select conversation ..."
name="conversation"
/>
</>
) : (
<Text>You don't have conversations yet</Text>
)}
</>
</Form>
// <ScrollView horizontal showsHorizontalScrollIndicator={false}>
// <Box
// borderRadius="lg"
// borderColor="coolGray.200"
// borderWidth={1}
// p={3}
// >
// <FlatList
// data={conversations}
// renderItem={({ item }) => (
// <ChatSelector
// conversation={item}
// onSelect={setConversationId}
// />
// )}
// keyExtractor={(item) => item.id}
// contentContainerStyle={styles.flatList}
// />
// <TouchableOpacity
// style={styles.newChatButton}
// onPress={() => {
// setConversationId(null);
// setParsedMessages([]);
// }}
// >
// <Text style={styles.newChatButtonText}>New Chat</Text>
// </TouchableOpacity>
// </Box>
// </ScrollView>
<>
{!parsedMessages?.length && (
<Text>You don't have conversations yet</Text>
)}
</>
)}
<MessageList messages={parsedMessages} />
<Form validationSchema={sendMessage}>
<ScrollView style={{ maxWidth: 500, maxHeight: 500 }}>
<MessageList messages={parsedMessages} />
</ScrollView>
<Form
// validationSchema={sendMessage}
>
<RStack style={{ marginTop: 16, gap: 8 }}>
<FormInput name="message" placeholder="Type a message..." />
<FormInput
name="message"
placeholder="Type a message..."
value={userInput}
onChange={(e) => setUserInput(e.target.value)}
onChangeText={(text) => setUserInput(text)}
/>
<SubmitButton onSubmit={handleSendMessage}>
<Text style={styles.sendText}>Send</Text>
</SubmitButton>
Expand All @@ -180,13 +150,13 @@ const ChatComponent: React.FC<ChatComponentProps> = ({
);
};

const ChatModalTrigger: React.FC<ChatModalTriggerProps> = () => {
const ChatModalTrigger: React.FC<ChatModalTriggerProps> = ({ itemTypeId }) => {
const styles = useCustomStyles(loadStyles);

return (
<View style={styles.container}>
<BaseModal title="Chat" trigger="Open Chat" footerComponent={undefined}>
<ChatComponent />
<ChatComponent itemTypeId={itemTypeId} />
</BaseModal>
</View>
);
Expand Down
8 changes: 6 additions & 2 deletions packages/app/components/feed/FeedSearchFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,23 +52,27 @@ const FeedSearchFilter = ({
}: FeedSearchFilterProps) => {
const { currentTheme } = useTheme();
const styles = useCustomStyles(loadStyles);
const [searchValue, setSearchValue] = useState('');

const onSearch = ({ search }) => setSearchQuery(search);
const onSearch = (search) => setSearchQuery(search);

return (
<View style={styles.filterContainer}>
<View style={styles.searchContainer}>
<Form onSubmit={onSearch}>
<Form>
<RStack
space={3}
style={{ flexDirection: 'row', justifyContent: 'center' }}
>
<FormInput
placeholder={`Search ${feedType || 'Feed'}`}
name="search"
value={searchValue}
onChange={(event) => setSearchValue(event.nativeEvent.text)}
/>
<RIconButton
backgroundColor="transparent"
onPress={() => onSearch(searchValue)}
icon={
<AntDesign
name="search1"
Expand Down
6 changes: 5 additions & 1 deletion packages/app/components/pack/PackDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,11 @@ export function PackDetails() {
case SECTION.CHAT:
return (
<View style={styles.boxStyle}>
<ChatContainer />
<ChatContainer
itemTypeId={currentPackId}
title="Chat"
trigger="Open Chat"
/>
</View>
);
default:
Expand Down
Loading

0 comments on commit 7a17368

Please sign in to comment.