connect components to state

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",

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
+  blur: boolean
-  reply: 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 (
     <BlurView
@@ -62,15 +65,13 @@ const Composer = (props: Props) => {
           elevation: 10,
         }}
       >
-        {reply && (
+        {chatState?.type === 'reply' && (
           <Stack paddingLeft={4} paddingBottom={4}>
             <Reply
               type="text"
               name="Alisher"
               src="https://images.unsplash.com/photo-1524638431109-93d95c968f03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=MnwxfDB8MXxyYW5kb218MHx8Z2lybHx8fHx8fDE2NzM4ODQ0NzU&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=500"
-              onClose={() => {
+              onClose={() => chatDispatch({ type: 'cancel' })}
-                console.log('close')
-              }}
             />
           </Stack>
         )}
@@ -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}

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 */}
-      {/* <IconButton
+      <IconButton variant="outline" icon={<EditIcon />} onPress={onEditPress} />
-        variant="outline"
-        icon={<EditIcon />}
-        onPress={onEditPress}
-      /> */}
 
       {/* DELETE */}
       {/* <IconButton
@@ -90,12 +86,12 @@ export const Actions = (props: Props) => {
           <DropdownMenu.Item
             icon={<EditIcon />}
             label="Edit message"
-            onSelect={() => console.log('edit')}
+            onSelect={onEditPress}
           />
           <DropdownMenu.Item
             icon={<ReplyIcon />}
             label="Reply"
-            onSelect={() => console.log('reply')}
+            onSelect={onReplyPress}
           />
           <DropdownMenu.Item
             icon={<CopyIcon />}

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
   // <Sheet press="long">
 
+  const dispatch = useChatDispatch()
+
   return (
     <YStack
       position="relative"
@@ -48,9 +51,8 @@ const Message = (props: Props) => {
           <Actions
             reactions={reactions}
             onOpenChange={setActionsOpen}
-            onReplyPress={() => {
+            onReplyPress={() => dispatch({ type: 'reply', messageId: '1' })}
-              console.log('reply')
+            onEditPress={() => dispatch({ type: 'edit', messageId: '1' })}
-            }}
           />
         </Unspaced>
       )}

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 { ChannelGroup } from './mock-data'
-import type { GetProps } from '@tamagui/core'
-import type { ReactNode } from 'react'
-
-type BaseProps = GetProps<typeof Stack>
 
 type Props = {
-  name: string
+  community: {
-  description: string
+    name: string
-  membersCount: number
+    description: string
-  selectedChannel?: string
+    membersCount: number
-  communities?: CommunityProps[]
+    imageUrl: string
-  onChannelPress: (channelId: string, channelIcon?: ReactNode) => void
+  }
-} & BaseProps
+  channels?: ChannelGroup[]
+  selectedChannelId?: string
+  onChannelPress: (channelId: string) => void
+}
 
 const Sidebar = (props: Props) => {
   const {
-    name,
+    community,
-    description,
+    channels = CHANNEL_GROUPS,
-    membersCount,
+    selectedChannelId,
-    communities = COMMUNITIES,
-    selectedChannel,
     onChannelPress,
   } = props
 
+  const { name, description, membersCount, imageUrl } = community
+
   return (
     <Stack
       backgroundColor="$background"
@@ -42,11 +41,7 @@ const Sidebar = (props: Props) => {
       height="100%"
       overflow="scroll"
     >
-      <Image
+      <Image src={imageUrl} width="full" aspectRatio={2.6} />
-        src="https://images.unsplash.com/photo-1574786527860-f2e274867c91?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1764&q=80"
-        width="full"
-        aspectRatio={2.6}
-      />
       <Stack
         paddingBottom={16}
         marginTop={-16}
@@ -72,17 +67,16 @@ const Sidebar = (props: Props) => {
 
           <Button>Join community</Button>
         </Stack>
-        {communities.map(community => (
+        {channels.map(group => (
           <Accordion
-            key={community.id}
+            key={group.id}
-            // This is just for the demo
+            initialExpanded={group.id === 'welcome'}
-            initialExpanded={community.id === 'welcome'}
+            title={group.title}
-            title={community.title}
+            numberOfNewMessages={group.unreadCount}
-            numberOfNewMessages={community.numberOfNewMessages}
           >
-            {community.channels.map((channel, index) => {
+            {group.channels.map((channel, index) => {
-              const isLastChannelOfTheList =
+              const isLastChannelOfTheList = index === group.channels.length - 1
-                index === community.channels.length - 1
+
               return (
                 <AccordionItem
                   key={channel.id}
@@ -90,8 +84,8 @@ const Sidebar = (props: Props) => {
                   title={channel.title}
                   channelStatus={channel.channelStatus}
                   numberOfMessages={channel.numberOfMessages}
-                  isSelected={selectedChannel === channel.id}
+                  isSelected={selectedChannelId === channel.id}
-                  onPress={() => onChannelPress(channel.id, channel.icon)}
+                  onPress={() => onChannelPress(channel.id)}
                   mb={isLastChannelOfTheList ? 8 : 0}
                 />
               )