feat: poll actions modals adjustments

src/components/Dialog/styling/Viewer.scss

@@ -6,6 +6,8 @@
   max-width: 520px;
   height: 100%;
   max-height: 640px;
+  display: flex;
+  flex-direction: column;
 
   .str-chat__viewer__header {
     display: flex;
@@ -48,6 +50,8 @@
 
   .str-chat__viewer__body {
     padding: 0 var(--spacing-xl);
+    flex: 1;
+    min-height: 0;
 
     .str-chat__viewer__title {
       margin-bottom: 1rem;

src/components/Poll/PollActions/AddCommentPrompt.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useStateStore } from '../../../store';
 import { useModalContext, usePollContext, useTranslationContext } from '../../../context';
 import type { PollAnswer, PollState } from 'stream-chat';
@@ -20,6 +20,7 @@ export const AddCommentPrompt = ({ messageId }: AddCommentPromptProps) => {
   const { close } = useModalContext();
   const { poll } = usePollContext();
   const { ownAnswer } = useStateStore(poll.state, pollStateSelector);
+  const [input, setInput] = useState<HTMLInputElement | null>(null);
 
   const initialComment = ownAnswer?.answer_text ?? '';
   const initialValue = useMemo(() => ({ comment: initialComment }), [initialComment]);
@@ -50,6 +51,10 @@ export const AddCommentPrompt = ({ messageId }: AddCommentPromptProps) => {
     validators,
   });
 
+  useEffect(() => {
+    input?.focus();
+  }, [input]);
+
   const title = ownAnswer ? t('Update your comment') : t('Add a comment');
   const submitDisabled =
     !value.comment?.trim() || value.comment === ownAnswer?.answer_text;
@@ -65,6 +70,7 @@ export const AddCommentPrompt = ({ messageId }: AddCommentPromptProps) => {
             id='comment'
             name='comment'
             onChange={(e) => setFieldValue('comment', e.target.value)}
+            ref={setInput}
             required
             title={title}
             type='text'
@@ -85,7 +91,7 @@ export const AddCommentPrompt = ({ messageId }: AddCommentPromptProps) => {
               disabled={Object.keys(fieldErrors).length > 0 || submitDisabled}
               type='submit'
             >
-              {t('Send')}
+              {initialComment ? t('Update') : t('Send')}
             </Prompt.FooterControlsButtonPrimary>
           </Prompt.FooterControls>
         </Prompt.Footer>

src/components/Poll/PollActions/PollAnswerList.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
+import { Button } from '../../Button';
 import { Viewer } from '../../Dialog';
 import { PollVote } from '../PollVote';
 import { usePollAnswerPagination } from '../hooks';
 import { InfiniteScrollPaginator } from '../../InfiniteScrollPaginator/InfiniteScrollPaginator';
 import { LoadingIndicator } from '../../Loading';
 import { useStateStore } from '../../../store';
-import { useModalContext, usePollContext, useTranslationContext } from '../../../context';
+import {
+  useChatContext,
+  useModalContext,
+  usePollContext,
+  useTranslationContext,
+} from '../../../context';
 
 import type { PollAnswer, PollState } from 'stream-chat';
 
@@ -23,10 +29,11 @@ export type PollAnswerListProps = {
 };
 
 export const PollAnswerList = ({ onUpdateOwnAnswerClick }: PollAnswerListProps) => {
+  const { client } = useChatContext();
   const { t } = useTranslationContext();
   const { poll } = usePollContext();
   const { close } = useModalContext();
-  const { is_closed, ownAnswer } = useStateStore(poll.state, pollStateSelector);
+  const { is_closed } = useStateStore(poll.state, pollStateSelector);
 
   const { answers, error, hasNextPage, loading, loadMore } = usePollAnswerPagination();
 
@@ -38,10 +45,25 @@ export const PollAnswerList = ({ onUpdateOwnAnswerClick }: PollAnswerListProps)
           <InfiniteScrollPaginator loadNextOnScrollToBottom={loadMore} threshold={40}>
             {answers.map((answer) => (
               <div className='str-chat__poll-answer' key={`comment-${answer.id}`}>
-                {answer.answer_text && (
-                  <p className='str-chat__poll-answer__text'>{answer.answer_text}</p>
+                <div className='str-chat__poll-answer__data'>
+                  {answer.answer_text && (
+                    <p className='str-chat__poll-answer__text'>{answer.answer_text}</p>
+                  )}
+                  <PollVote key={`poll-vote-${answer.id}`} vote={answer} />
+                </div>
+                {!is_closed && answer.user?.id === client.user?.id && (
+                  <div className='str-chat__poll-vote__update-vote-button-container'>
+                    <Button
+                      appearance='ghost'
+                      className='str-chat__poll-vote__update-vote-button'
+                      onClick={onUpdateOwnAnswerClick}
+                      size='md'
+                      variant='secondary'
+                    >
+                      {t('Update your comment')}
+                    </Button>
+                  </div>
                 )}
-                <PollVote key={`poll-vote-${answer.id}`} vote={answer} />
               </div>
             ))}
 
@@ -54,18 +76,18 @@ export const PollAnswerList = ({ onUpdateOwnAnswerClick }: PollAnswerListProps)
         </div>
         {error?.message && <div>{error?.message}</div>}
       </Viewer.Body>
-      <Viewer.Footer>
-        {answers.length > 0 && !is_closed && (
-          <Viewer.FooterControls>
-            <Viewer.FooterControlsButtonSecondary
-              className='str-chat__poll-action'
-              onClick={onUpdateOwnAnswerClick}
-            >
-              {ownAnswer ? t('Update your comment') : t('Add a comment')}
-            </Viewer.FooterControlsButtonSecondary>
-          </Viewer.FooterControls>
-        )}
-      </Viewer.Footer>
+      {/*<Viewer.Footer>*/}
+      {/*  {answers.length > 0 && !is_closed && (*/}
+      {/*    <Viewer.FooterControls>*/}
+      {/*      <Viewer.FooterControlsButtonSecondary*/}
+      {/*        className='str-chat__poll-action'*/}
+      {/*        onClick={onUpdateOwnAnswerClick}*/}
+      {/*      >*/}
+      {/*        {ownAnswer ? t('Update your comment') : t('Add a comment')}*/}
+      {/*      </Viewer.FooterControlsButtonSecondary>*/}
+      {/*    </Viewer.FooterControls>*/}
+      {/*  )}*/}
+      {/*</Viewer.Footer>*/}
     </Viewer.Root>
   );
 };

src/components/Poll/PollActions/PollResults/PollOptionWithVotes.tsx

@@ -10,7 +10,6 @@ import {
 import type { PollOption, PollState, PollVote } from 'stream-chat';
 import { Button } from '../../../Button';
 import clsx from 'clsx';
-import { PollVotesPaginatedList } from './PollVotesPaginatedList';
 
 type PollStateSelectorReturnValue = {
   latest_votes_by_option: Record<string, PollVote[]>;
@@ -50,11 +49,7 @@ export const PollOptionWithVotes = ({
       })}
     >
       <PollOptionWithVotesHeader option={option} optionOrderNumber={orderNumber} />
-      {!votes ? null : isVotesPreview ? (
-        <PollVoteListing votes={votes.slice(0, countVotesPreview)} />
-      ) : (
-        <PollVotesPaginatedList option={option} />
-      )}
+      {!!votes && <PollVoteListing votes={votes.slice(0, countVotesPreview)} />}
       {channelCapabilities['query-poll-votes'] &&
         showAllVotes &&
         isVotesPreview &&

src/components/Poll/PollActions/PollResults/PollOptionWithVotesList.tsx

@@ -0,0 +1,46 @@
+import React, { useMemo } from 'react';
+import { PollVoteListing } from '../../PollVote';
+import { usePollOptionVotesPagination } from '../../hooks';
+import { LoadingIndicator } from '../../../Loading';
+import { InfiniteScrollPaginator } from '../../../InfiniteScrollPaginator/InfiniteScrollPaginator';
+import type { PollOption, PollOptionVotesQueryParams } from 'stream-chat';
+import { PollOptionWithVotesHeader } from './PollOptionWithVotesHeader';
+
+export type PollOptionWithVotesListProps = {
+  option: PollOption;
+  optionOrderNumber: number;
+};
+
+export const PollOptionWithVotesList = ({
+  option,
+  optionOrderNumber,
+}: PollOptionWithVotesListProps) => {
+  const paginationParams = useMemo<PollOptionVotesQueryParams>(
+    () => ({ filter: { option_id: option.id } }),
+    [option.id],
+  );
+  const { hasNextPage, loading, loadMore, votes } = usePollOptionVotesPagination({
+    paginationParams,
+  });
+
+  return (
+    <InfiniteScrollPaginator loadNextOnScrollToBottom={loadMore} threshold={40}>
+      <div className='str-chat_poll-option-with-votes-list'>
+        <div className='str-chat__poll-option'>
+          <div className='str-chat__poll-option__votes-paginated-list'>
+            <PollOptionWithVotesHeader
+              option={option}
+              optionOrderNumber={optionOrderNumber}
+            />
+            <PollVoteListing votes={votes} />
+            {hasNextPage && (
+              <div className='str-chat__loading-indicator-placeholder'>
+                {loading && <LoadingIndicator />}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </InfiniteScrollPaginator>
+  );
+};

src/components/Poll/PollActions/PollResults/PollResults.tsx

@@ -11,6 +11,7 @@ import {
 import type { PollOption, PollState } from 'stream-chat';
 import { COUNT_OPTION_VOTES_PREVIEW } from '../../constants';
 import { PollQuestion } from '../PollQuestion';
+import { PollOptionWithVotesList } from './PollOptionWithVotesList';
 
 const pollStateSelector = ({
   name,
@@ -49,12 +50,10 @@ export const PollResults = () => {
         <>
           <Viewer.Header close={close} goBack={goBack} title={t('Votes')} />
           <Viewer.Body className='str-chat__modal__poll-results__body'>
-            <div className='str-chat__modal__poll-results__option-detail'>
-              <PollOptionWithVotes
-                option={optionToView?.option}
-                orderNumber={optionToView?.optionOrderNumber}
-              />
-            </div>
+            <PollOptionWithVotesList
+              option={optionToView?.option}
+              optionOrderNumber={optionToView?.optionOrderNumber}
+            />
           </Viewer.Body>
         </>
       ) : (

src/components/Poll/PollActions/SuggestPollOptionPrompt.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   useChatContext,
   useModalContext,
@@ -26,6 +26,7 @@ export const SuggestPollOptionPrompt = ({ messageId }: SuggestPollOptionFormProp
   const { poll } = usePollContext();
   const { close } = useModalContext();
   const { options } = useStateStore(poll.state, pollStateSelector);
+  const [input, setInput] = useState<HTMLInputElement | null>(null);
 
   const initialValue = useMemo(() => ({ optionText: '' }), []);
   const validators = useMemo(
@@ -64,6 +65,10 @@ export const SuggestPollOptionPrompt = ({ messageId }: SuggestPollOptionFormProp
     validators,
   });
 
+  useEffect(() => {
+    input?.focus();
+  }, [input]);
+
   const submitDisabled = !value.optionText?.trim();
 
   return (
@@ -77,6 +82,7 @@ export const SuggestPollOptionPrompt = ({ messageId }: SuggestPollOptionFormProp
             id='optionText'
             name='optionText'
             onChange={(e) => setFieldValue('optionText', e.target.value)}
+            ref={setInput}
             required
             title={t('Suggest an option')}
             type='text'

src/components/Poll/PollVote.tsx

@@ -36,7 +36,9 @@ type PollVoteProps = {
   vote: PollVoteType;
 };
 
-const PollVoteAuthor = ({ vote }: PollVoteProps) => {
+type PollVoteAuthor = PollVoteProps;
+
+const PollVoteAuthor = ({ vote }: PollVoteAuthor) => {
   const { t } = useTranslationContext();
   const { client } = useChatContext();
   const { handleEnter, handleLeave, tooltipVisible } =