docs: add docs for Poll and PollContent components

isekovanic · isekovanic · commit bda97ba894ff · 2024-10-29T13:09:26.000+01:00
diff --git a/docusaurus/docs/reactnative/common-content/contexts/poll-context/poll.mdx b/docusaurus/docs/reactnative/common-content/contexts/poll-context/poll.mdx
@@ -0,0 +1,13 @@
+An instance of the [`Poll` class](https://github.com/GetStream/stream-chat-js/blob/master/src/poll.ts) containing reactive state.
+
+It is used by the underlying `usePollContext`, `usePollStateStore` and `usePollState` hooks to provide us with the reactive `Poll` state.
+
+:::note
+
+If you need the `Poll` instance you may get it from `client.polls.fromState(pollId)`.
+
+:::
+
+| Type   |
+| ------ |
+| object |
diff --git a/docusaurus/docs/reactnative/common-content/ui-components/poll/poll-content.mdx b/docusaurus/docs/reactnative/common-content/ui-components/poll/poll-content.mdx
@@ -0,0 +1,24 @@
+A `Component` prop used to render the content of the `Poll` component in `MessageList`.
+
+| Type          | Default                                        |
+| ------------- | ---------------------------------------------- |
+| ComponentType | [`PollContent`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Poll/Poll.tsx) |
+
+#### Props
+
+##### `PollHeader`
+
+A `Component` prop used to render the header of the `PollContent` component.
+
+| Type          | Default                                        |
+| ------------- | ---------------------------------------------- |
+| ComponentType | [`PollHeader`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Poll/Poll.tsx) |
+
+##### `PollButtons`
+
+A `Component` prop used to render the buttons of the `PollContent` component.
+
+| Type          | Default                                        |
+| ------------- | ---------------------------------------------- |
+| ComponentType | [`PollButtons`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Poll/Poll.tsx) |
+
diff --git a/docusaurus/docs/reactnative/contexts/create-poll-context.mdx b/docusaurus/docs/reactnative/contexts/create-poll-context.mdx
@@ -24,7 +24,7 @@ import { CreatePollContext } from 'stream-chat-react-native';
 const value = useContext(CreatePollContext);
 ```
 
-Alternatively, you can also use `useCreatePollContext` hook provided by library to consume `CreatePollContext`.
+Alternatively, you can also use the `useCreatePollContext` hook provided by library to consume `CreatePollContext`.
 
 ```tsx
 import { useCreatePollContext } from 'stream-chat-react-native';
diff --git a/docusaurus/docs/reactnative/contexts/poll-context.mdx b/docusaurus/docs/reactnative/contexts/poll-context.mdx
@@ -2,3 +2,41 @@
 id: poll-context
 title: PollContext
 ---
+
+import MessageProp from '../common-content/contexts/message-context/message.mdx';
+import Poll from '../common-content/contexts/poll-context/poll.mdx';
+
+The `PollContext` is provided by the [`Poll`](../../ui-components/poll) component. If you are not familiar with React Context API, please read about it on [React docs](https://reactjs.org/docs/context.html).
+
+The `PollContext` needs to be used within the [`Channel` component](../../core-components/channel) as it depends on various values provided by it in order to work.
+
+## Basic Usage
+
+The `PollContext` can be consumed by any of the child components of `Channel` as following:
+
+```tsx
+import { useContext } from 'react';
+import { CreatePollContext } from 'stream-chat-react-native';
+
+const value = useContext(PollContext);
+```
+
+Alternatively, you can also use the `usePollContext` hook provided by library to consume `PollContext`.
+
+```tsx
+import { usePollContext } from 'stream-chat-react-native';
+
+const value = usePollContext();
+```
+
+## Value
+
+### <div class="label description">_forwarded from [MessageContext](../../contexts/message-context#message)_ props</div> message {#message}
+
+<MessageProp />
+
+### `poll` *
+
+<Poll />
+
+
diff --git a/docusaurus/docs/reactnative/ui-components/poll.mdx b/docusaurus/docs/reactnative/ui-components/poll.mdx
@@ -2,3 +2,27 @@
 id: poll
 title: Poll
 ---
+
+import MessageProp from '../common-content/contexts/message-context/message.mdx';
+import Poll from '../common-content/contexts/poll-context/poll.mdx';
+import PollContent from '../common-content/ui-components/poll/poll-content.mdx'
+
+A component used to render a poll within a `MessageList`. Needs to be structured inside a [`Channel` component](../core-components/channel).
+
+It will render its default `PollContent`, which can be overridden for custom UI. Its children have access to the entire `poll` state through the `usePollState` hook.
+
+## Props
+
+### <div class="label description">_forwarded from [MessageContext](../../contexts/message-context#message)_ props</div> message {#message}
+
+<MessageProp />
+
+### `poll` *
+
+<Poll />
+
+### `PollContent`
+
+<PollContent />
+
+
diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx
@@ -331,9 +331,7 @@ export type ChannelPropsWithContext<
       | 'TypingIndicatorContainer'
       | 'UrlPreview'
       | 'VideoThumbnail'
-      | 'Poll'
-      | 'PollButtons'
-      | 'PollHeader'
+      | 'PollContent'
       | 'hasCreatePoll'
     >
   > &
@@ -575,9 +573,7 @@ const ChannelWithContext = <
     openPollCreationDialog,
     OverlayReactionList = OverlayReactionListDefault,
     overrideOwnCapabilities,
-    Poll,
-    PollButtons,
-    PollHeader,
+    PollContent,
     ReactionList = ReactionListDefault,
     read,
     Reply = ReplyDefault,
@@ -2429,9 +2425,7 @@ const ChannelWithContext = <
     onPressInMessage,
     onPressMessage,
     OverlayReactionList,
-    Poll,
-    PollButtons,
-    PollHeader,
+    PollContent,
     ReactionList,
     removeMessage,
     Reply,
diff --git a/package/src/components/Channel/hooks/useCreateMessagesContext.ts b/package/src/components/Channel/hooks/useCreateMessagesContext.ts
@@ -77,9 +77,7 @@ export const useCreateMessagesContext = <
   onPressInMessage,
   onPressMessage,
   OverlayReactionList,
-  Poll,
-  PollButtons,
-  PollHeader,
+  PollContent,
   ReactionList,
   removeMessage,
   Reply,
@@ -180,9 +178,7 @@ export const useCreateMessagesContext = <
       onPressInMessage,
       onPressMessage,
       OverlayReactionList,
-      Poll,
-      PollButtons,
-      PollHeader,
+      PollContent,
       ReactionList,
       removeMessage,
       Reply,
diff --git a/package/src/components/Message/Message.tsx b/package/src/components/Message/Message.tsx
@@ -176,9 +176,7 @@ export type MessagePropsWithContext<
     | 'setQuotedMessageState'
     | 'supportedReactions'
     | 'updateMessage'
-    | 'Poll'
-    | 'PollButtons'
-    | 'PollHeader'
+    | 'PollContent'
   > &
   Pick<MessageOverlayContextValue<StreamChatGenerics>, 'setData'> &
   Pick<OverlayContextValue, 'setOverlay'> &
@@ -288,9 +286,7 @@ const MessageWithContext = <
     onThreadSelect,
     openThread,
     OverlayReactionList,
-    Poll,
-    PollButtons,
-    PollHeader,
+    PollContent,
     preventPress,
     removeMessage,
     retrySendMessage,
@@ -574,15 +570,9 @@ const MessageWithContext = <
   const PollWrapper = useCallback(() => {
     const poll = message?.poll_id ? client.polls.fromState(message.poll_id) : undefined;
     return message?.poll_id && poll ? (
-      <PollComponent<StreamChatGenerics>
-        message={message}
-        poll={poll}
-        Poll={Poll}
-        PollButtons={PollButtons}
-        PollHeader={PollHeader}
-      />
+      <PollComponent<StreamChatGenerics> message={message} poll={poll} PollContent={PollContent} />
     ) : null;
-  }, [PollButtons, PollHeader, Poll, client, message]);
+  }, [PollContent, client, message]);
 
   const showMessageOverlay = async (isMessageActionsVisible = true, error = errorOrFailed) => {
     await dismissKeyboard();
diff --git a/package/src/components/Message/MessageSimple/MessageContent.tsx b/package/src/components/Message/MessageSimple/MessageContent.tsx
@@ -145,7 +145,7 @@ const MessageContentWithContext = <
     threadList,
   } = props;
   const { client } = useChatContext();
-  const { Poll: PollOverride, PollButtons, PollHeader } = useMessagesContext();
+  const { PollContent: PollContentOverride } = useMessagesContext();
 
   const {
     theme: {
@@ -389,9 +389,7 @@ const MessageContentWithContext = <
                     key={`poll_${message.poll_id}`}
                     message={message}
                     poll={poll}
-                    Poll={PollOverride}
-                    PollButtons={PollButtons}
-                    PollHeader={PollHeader}
+                    PollContent={PollContentOverride}
                   />
                 ) : null;
               }
diff --git a/package/src/components/Poll/Poll.tsx b/package/src/components/Poll/Poll.tsx
@@ -19,16 +19,15 @@ import {
   MessagesContextValue,
   PollContextProvider,
   PollContextValue,
-  usePollContext,
   useTheme,
   useTranslationContext,
 } from '../../contexts';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type PollProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<PollContextValue<StreamChatGenerics>, 'poll' | 'message' | 'PollHeader' | 'PollButtons'> &
-  Pick<MessagesContextValue<StreamChatGenerics>, 'Poll'>;
+> = Pick<PollContextValue<StreamChatGenerics>, 'poll' | 'message'> &
+  Pick<MessagesContextValue<StreamChatGenerics>, 'PollContent'>;
 
 export const PollButtons = () => (
   <>
@@ -70,8 +69,13 @@ export const PollHeader = () => {
   );
 };
 
-const PollWithContext = () => {
-  const { PollButtons: PollButtonsOverride, PollHeader: PollHeaderOverride } = usePollContext();
+export const PollContent = ({
+  PollButtons: PollButtonsOverride,
+  PollHeader: PollHeaderOverride,
+}: {
+  PollButtons?: React.ComponentType;
+  PollHeader?: React.ComponentType;
+}) => {
   const { options } = usePollState();
 
   const {
@@ -100,19 +104,15 @@ export const Poll = <
 >({
   message,
   poll,
-  Poll: PollOverride,
-  PollButtons,
-  PollHeader,
+  PollContent: PollContentOverride,
 }: PollProps<StreamChatGenerics>) => (
   <PollContextProvider
     value={{
       message,
       poll,
-      PollButtons,
-      PollHeader,
     }}
   >
-    {PollOverride ? <PollOverride /> : <PollWithContext />}
+    {PollContentOverride ? <PollContentOverride /> : <PollContent />}
   </PollContextProvider>
 );
 
diff --git a/package/src/contexts/messagesContext/MessagesContext.tsx b/package/src/contexts/messagesContext/MessagesContext.tsx
@@ -509,9 +509,7 @@ export type MessagesContextValue<
    * ```
    */
   onPressMessage?: (payload: MessageTouchableHandlerPayload<StreamChatGenerics>) => void;
-  Poll?: React.ComponentType;
-  PollButtons?: React.ComponentType;
-  PollHeader?: React.ComponentType;
+  PollContent?: React.ComponentType;
   /**
    * Full override of the reaction function on Message and Message Overlay
    *
diff --git a/package/src/contexts/pollContext/pollContext.tsx b/package/src/contexts/pollContext/pollContext.tsx
@@ -4,7 +4,6 @@ import { Poll } from 'stream-chat';
 
 import { MessageType } from '../../components';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { MessagesContextValue } from '../messagesContext/MessagesContext';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
@@ -14,7 +13,7 @@ export type PollContextValue<
 > = {
   message: MessageType<StreamChatGenerics>;
   poll: Poll<StreamChatGenerics>;
-} & Partial<Pick<MessagesContextValue, 'PollButtons' | 'PollHeader'>>;
+};
 
 export const PollContext = React.createContext(DEFAULT_BASE_CONTEXT_VALUE as PollContextValue);
 
