From 32a8fed0be79a8b5c69790e1bcfd72eeb6081486 Mon Sep 17 00:00:00 2001 From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com> Date: Tue, 28 Feb 2023 15:01:04 +0100 Subject: [PATCH] connect components to state --- packages/components/package.json | 4 +- packages/components/src/composer/composer.tsx | 19 +++--- .../src/messages/components/actions.tsx | 14 ++--- packages/components/src/messages/message.tsx | 8 ++- packages/components/src/sidebar/sidebar.tsx | 62 +++++++++---------- 5 files changed, 51 insertions(+), 56 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index 7745ce0e..5bc32f13 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -33,7 +33,9 @@ "@tamagui/react-native-media-driver": "1.0.15", "@tamagui/shorthands": "1.0.15", "@tamagui/theme-base": "1.0.15", - "tamagui": "1.0.15" + "tamagui": "1.0.15", + "expo-blur": "~12.0.1", + "zustand": "^4.3.4" }, "devDependencies": { "@storybook/addon-essentials": "7.0.0-beta.21", diff --git a/packages/components/src/composer/composer.tsx b/packages/components/src/composer/composer.tsx index 0b9b7f73..4d35e72b 100644 --- a/packages/components/src/composer/composer.tsx +++ b/packages/components/src/composer/composer.tsx @@ -16,15 +16,15 @@ import { Button } from '../button' import { IconButton } from '../icon-button' import { Image } from '../image' import { Input } from '../input' +import { useChatDispatch, useChatState } from '../provider' import { Reply } from '../reply' interface Props { - isBlurred: boolean - reply: boolean + blur: boolean } const Composer = (props: Props) => { - const { isBlurred, reply } = props + const { blur } = props const [isFocused, setIsFocused] = useState(false) const [text, setText] = useState('') @@ -37,7 +37,10 @@ const Composer = (props: Props) => { isDisabled: isImageUploadDisabled, } = useImageUpload() - const iconButtonBlurred = isBlurred && !isFocused && imagesData.length === 0 + const iconButtonBlurred = blur && !isFocused && imagesData.length === 0 + + const chatState = useChatState() + const chatDispatch = useChatDispatch() return ( { elevation: 10, }} > - {reply && ( + {chatState?.type === 'reply' && ( { - console.log('close') - }} + onClose={() => chatDispatch({ type: 'cancel' })} /> )} @@ -80,7 +81,7 @@ const Composer = (props: Props) => { placeholder="Type something..." px={0} borderWidth={0} - blurred={isBlurred} + blurred={blur} onBlur={() => setIsFocused(false)} onFocus={() => setIsFocused(true)} onChangeText={setText} diff --git a/packages/components/src/messages/components/actions.tsx b/packages/components/src/messages/components/actions.tsx index 85d4d552..1e4a37e7 100644 --- a/packages/components/src/messages/components/actions.tsx +++ b/packages/components/src/messages/components/actions.tsx @@ -23,12 +23,12 @@ interface Props { reactions: ReactionsType onOpenChange: (open: boolean) => void onReplyPress: VoidFunction - // onEditPress: VoidFunction + onEditPress: VoidFunction // onDeletePress: VoidFunction } export const Actions = (props: Props) => { - const { reactions, onOpenChange, onReplyPress } = props + const { reactions, onOpenChange, onReplyPress, onEditPress } = props useEffect(() => { return () => onOpenChange(false) @@ -70,11 +70,7 @@ export const Actions = (props: Props) => { /> {/* EDIT */} - {/* } - onPress={onEditPress} - /> */} + } onPress={onEditPress} /> {/* DELETE */} {/* { } label="Edit message" - onSelect={() => console.log('edit')} + onSelect={onEditPress} /> } label="Reply" - onSelect={() => console.log('reply')} + onSelect={onReplyPress} /> } diff --git a/packages/components/src/messages/message.tsx b/packages/components/src/messages/message.tsx index 548a1af9..06f0efdb 100644 --- a/packages/components/src/messages/message.tsx +++ b/packages/components/src/messages/message.tsx @@ -6,6 +6,7 @@ import { Stack, Unspaced, XStack, YStack } from 'tamagui' import { Author } from '../author/author' import { Avatar } from '../avatar' import { Image } from '../image' +import { useChatDispatch } from '../provider' import { Reply } from '../reply' import { Paragraph } from '../typography' import { Actions } from './components/actions' @@ -30,6 +31,8 @@ const Message = (props: Props) => { const active = actionsOpen || hovered // + const dispatch = useChatDispatch() + return ( { { - console.log('reply') - }} + onReplyPress={() => dispatch({ type: 'reply', messageId: '1' })} + onEditPress={() => dispatch({ type: 'edit', messageId: '1' })} /> )} diff --git a/packages/components/src/sidebar/sidebar.tsx b/packages/components/src/sidebar/sidebar.tsx index a532607f..9aff2897 100644 --- a/packages/components/src/sidebar/sidebar.tsx +++ b/packages/components/src/sidebar/sidebar.tsx @@ -7,33 +7,32 @@ import { Avatar } from '../avatar' import { Button } from '../button' import { Image } from '../image' import { Heading, Paragraph } from '../typography' -import { COMMUNITIES } from './mock-data' +import { CHANNEL_GROUPS } from './mock-data' -import type { CommunityProps } from './mock-data' -import type { GetProps } from '@tamagui/core' -import type { ReactNode } from 'react' - -type BaseProps = GetProps +import type { ChannelGroup } from './mock-data' type Props = { - name: string - description: string - membersCount: number - selectedChannel?: string - communities?: CommunityProps[] - onChannelPress: (channelId: string, channelIcon?: ReactNode) => void -} & BaseProps + community: { + name: string + description: string + membersCount: number + imageUrl: string + } + channels?: ChannelGroup[] + selectedChannelId?: string + onChannelPress: (channelId: string) => void +} const Sidebar = (props: Props) => { const { - name, - description, - membersCount, - communities = COMMUNITIES, - selectedChannel, + community, + channels = CHANNEL_GROUPS, + selectedChannelId, onChannelPress, } = props + const { name, description, membersCount, imageUrl } = community + return ( { height="100%" overflow="scroll" > - + { - {communities.map(community => ( + {channels.map(group => ( - {community.channels.map((channel, index) => { - const isLastChannelOfTheList = - index === community.channels.length - 1 + {group.channels.map((channel, index) => { + const isLastChannelOfTheList = index === group.channels.length - 1 + return ( { title={channel.title} channelStatus={channel.channelStatus} numberOfMessages={channel.numberOfMessages} - isSelected={selectedChannel === channel.id} - onPress={() => onChannelPress(channel.id, channel.icon)} + isSelected={selectedChannelId === channel.id} + onPress={() => onChannelPress(channel.id)} mb={isLastChannelOfTheList ? 8 : 0} /> )