refactor: keep poll answers list UI together

GetStream · Oct 17, 2024 · 32349c0 · 32349c0
1 parent 75ac167
commit 32349c0
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 17 deletions.
diff --git a/src/components/Poll/PollActions.tsx b/src/components/Poll/PollActions.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useCallback, useState } from 'react';
-import { PollAnswersList } from './modals/PollAnswersList';
+import { PollAnswerList } from './modals/PollAnswerList';
 import { PollOptionsFullList } from './modals/PollOptionsFullList';
 import { FormDialog, PromptDialog } from '../Dialog';
 import { MAX_OPTIONS_DISPLAYED } from './config';
@@ -68,6 +68,7 @@ export const PollActions = <
   const [modalOpen, setModalOpen] = useState<ModalName | undefined>();
 
   const closeModal = useCallback(() => setModalOpen(undefined), []);
+  const onUpdateAnswerClick = useCallback(() => setModalOpen('add-comment'), []);
 
   return (
     <div className='str-chat__poll-actions'>
@@ -88,6 +89,7 @@ export const PollActions = <
         <PollAction
           buttonText={t<string>('Suggest an option')}
           closeModal={closeModal}
+          modalClassName='str-chat__suggest-poll-option-modal'
           modalIsOpen={modalOpen === 'suggest-option'}
           openModal={() => setModalOpen('suggest-option')}
         >
@@ -119,6 +121,7 @@ export const PollActions = <
         <PollAction
           buttonText={ownAnswer ? t<string>('Update your comment') : t<string>('Add a comment')}
           closeModal={closeModal}
+          modalClassName='str-chat__add-poll-answer-modal'
           modalIsOpen={modalOpen === 'add-comment'}
           openModal={() => setModalOpen('add-comment')}
         >
@@ -152,19 +155,22 @@ export const PollActions = <
         <PollAction
           buttonText={t<string>('View {{count}} comments', { count: answers_count })}
           closeModal={closeModal}
+          modalClassName='str-chat__poll-answer-list-modal'
           modalIsOpen={modalOpen === 'view-comments'}
           openModal={() => setModalOpen('view-comments')}
         >
-          <PollAnswersList close={closeModal} />
-          <button className='str-chat__poll-action' onClick={() => setModalOpen('add-comment')}>
-            {ownAnswer ? t<string>('Update your comment') : t<string>('Add a comment')}
-          </button>
+          <PollAnswerList
+            close={closeModal}
+            onUpdateOwnAnswerClick={onUpdateAnswerClick}
+            ownAnswerExists={!!ownAnswer}
+          />
         </PollAction>
       )}
 
       <PollAction
         buttonText={t<string>('View results')}
         closeModal={closeModal}
+        modalClassName='str-chat__poll-results-modal'
         modalIsOpen={modalOpen === 'view-results'}
         openModal={() => setModalOpen('view-results')}
       >
@@ -175,6 +181,7 @@ export const PollActions = <
         <PollAction
           buttonText={t<string>('End vote')}
           closeModal={closeModal}
+          modalClassName='str-chat__end-poll-modal'
           modalIsOpen={modalOpen === 'end-vote'}
           openModal={() => setModalOpen('end-vote')}
         >

diff --git a/src/components/Poll/hooks/index.ts b/src/components/Poll/hooks/index.ts
@@ -1,4 +1,4 @@
 export * from './usePoll';
 export * from './usePollState';
-export * from './usePollAnswersPagination';
+export * from './usePollAnswerPagination';
 export * from './usePollOptionVotesPagination';
diff --git a/...ts/Poll/hooks/usePollAnswersPagination.ts → ...nts/Poll/hooks/usePollAnswerPagination.ts b/...ts/Poll/hooks/usePollAnswersPagination.ts → ...nts/Poll/hooks/usePollAnswerPagination.ts
@@ -7,24 +7,24 @@ import {
 } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';
 import { usePollContext } from '../../../context';
 
-import type { DefaultStreamChatGenerics } from '../../../types';
-import type { PollAnswer, PollAnswersQueryParams, PollVote } from 'stream-chat';
 import { useStateStore } from '../../../store';
+import type { PollAnswer, PollAnswersQueryParams, PollVote } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../../types';
 
 const paginationStateSelector = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >(
   state: CursorPaginatorState<PollVote<StreamChatGenerics>>,
 ): [Error | undefined, boolean, boolean] => [state.error, state.hasNextPage, state.loading];
 
-type UsePollAnswersPaginationParams = {
+type UsePollAnswerPaginationParams = {
   paginationParams?: PollAnswersQueryParams;
 };
 
-export const usePollAnswersPagination = <
+export const usePollAnswerPagination = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
->({ paginationParams }: UsePollAnswersPaginationParams = {}) => {
-  const { poll } = usePollContext<StreamChatGenerics>('usePollAnswersPagination');
+>({ paginationParams }: UsePollAnswerPaginationParams = {}) => {
+  const { poll } = usePollContext<StreamChatGenerics>('usePollAnswerPagination');
 
   const paginationFn = useCallback<PaginationFn<PollAnswer>>(
     async (next) => {

diff --git a/...omponents/Poll/modals/PollAnswersList.tsx → ...components/Poll/modals/PollAnswerList.tsx b/...omponents/Poll/modals/PollAnswersList.tsx → ...components/Poll/modals/PollAnswerList.tsx
@@ -1,29 +1,33 @@
 import React from 'react';
 import { ModalHeader } from '../../Modal/ModalHeader';
 import { PollVote } from '../PollVote';
-import { usePollAnswersPagination } from '../hooks';
+import { usePollAnswerPagination } from '../hooks';
 import { InfiniteScrollPaginator } from '../../InfiniteScrollPaginator/InfiniteScrollPaginator';
 import { LoadingIndicator } from '../../Loading';
 import { useTranslationContext } from '../../../context';
 import type { DefaultStreamChatGenerics } from '../../../types';
 
-export type PollAnswersListProps = {
+export type PollAnswerListProps = {
+  onUpdateOwnAnswerClick: () => void;
+  ownAnswerExists: boolean;
   close?: () => void;
 };
 
-export const PollAnswersList = <
+export const PollAnswerList = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >({
   close,
-}: PollAnswersListProps) => {
+  onUpdateOwnAnswerClick,
+  ownAnswerExists,
+}: PollAnswerListProps) => {
   const { t } = useTranslationContext();
   const {
     answers,
     error,
     hasNextPage,
     loading,
     loadMore,
-  } = usePollAnswersPagination<StreamChatGenerics>();
+  } = usePollAnswerPagination<StreamChatGenerics>();
 
   return (
     <div className='str-chat__modal__poll-answer-list'>
@@ -48,6 +52,11 @@ export const PollAnswersList = <
         </InfiniteScrollPaginator>
         {error?.message && <div>{error?.message}</div>}
       </div>
+      {answers.length > 0 && (
+        <button className='str-chat__poll-action' onClick={onUpdateOwnAnswerClick}>
+          {ownAnswerExists ? t<string>('Update your comment') : t<string>('Add a comment')}
+        </button>
+      )}
     </div>
   );
 };