Skip to content

Commit ab8f1a2

Browse files
isekovanicisekovanic
committed
fix: refactor some of the buttons
1 parent de095b0 commit ab8f1a2

File tree

5 files changed

+319
-311
lines changed

5 files changed

+319
-311
lines changed

‎package/src/components/Poll/Poll.tsx‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
33

44
import { PollOption as PollOptionClass } from 'stream-chat';
55

6-
import {
7-
AddCommentButton,
8-
EndVoteButton,
9-
PollOption,
10-
ShowAllCommentsButton,
11-
ShowAllOptionsButton,
12-
SuggestOptionButton,
13-
ViewResultsButton,
14-
} from './components';
6+
import { PollButtons, PollOption } from './components';
157

168
import { usePollState } from './hooks/usePollState';
179

@@ -34,17 +26,6 @@ export type PollContentProps = {
3426
PollHeader?: React.ComponentType;
3527
};
3628

37-
export const PollButtons = () => (
38-
<>
39-
<ShowAllOptionsButton />
40-
<ShowAllCommentsButton />
41-
<SuggestOptionButton />
42-
<AddCommentButton />
43-
<ViewResultsButton />
44-
<EndVoteButton />
45-
</>
46-
);
47-
4829
export const PollHeader = () => {
4930
const { t } = useTranslationContext();
5031
const { enforceUniqueVote, isClosed, maxVotesAllowed, name } = usePollState();

‎package/src/components/Poll/components/Button.tsx‎

Lines changed: 1 addition & 286 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
import React, { useCallback, useState } from 'react';
2-
import { Modal, SafeAreaView, StyleSheet, Text, TouchableOpacity } from 'react-native';
2+
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
33

44
import { Poll, PollOption } from 'stream-chat';
55

6-
import { PollAnswersList } from './PollAnswersList';
76
import { PollInputDialog } from './PollInputDialog';
8-
import { PollModalHeader } from './PollModalHeader';
9-
import { PollAllOptions } from './PollOption';
10-
11-
import { PollOptionFullResults, PollResults } from './PollResults';
127

138
import {
14-
useChatContext,
159
useOwnCapabilitiesContext,
1610
usePollContext,
1711
useTheme,
@@ -34,21 +28,6 @@ export type PollButtonProps<
3428
}) => void;
3529
};
3630

37-
export type ShowAllVotesButtonProps<
38-
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
39-
> = {
40-
option: PollOption<StreamChatGenerics>;
41-
onPress?: ({
42-
message,
43-
option,
44-
poll,
45-
}: {
46-
message: MessageType<StreamChatGenerics>;
47-
option: PollOption<StreamChatGenerics>;
48-
poll: Poll<StreamChatGenerics>;
49-
}) => void;
50-
};
51-
5231
export type PollVoteButtonProps = {
5332
option: PollOption;
5433
} & Pick<PollButtonProps, 'onPress'>;
@@ -70,142 +49,6 @@ export const GenericPollButton = ({ onPress, title }: { onPress?: () => void; ti
7049
);
7150
};
7251

73-
export const ViewResultsButton = (props: PollButtonProps) => {
74-
const { t } = useTranslationContext();
75-
const { message, poll } = usePollContext();
76-
const [showResults, setShowResults] = useState(false);
77-
const { onPress } = props;
78-
79-
const onPressHandler = useCallback(() => {
80-
if (onPress) {
81-
onPress({ message, poll });
82-
return;
83-
}
84-
85-
setShowResults(true);
86-
}, [message, onPress, poll]);
87-
88-
const {
89-
theme: {
90-
colors: { white },
91-
},
92-
} = useTheme();
93-
94-
return (
95-
<>
96-
<GenericPollButton onPress={onPressHandler} title={t<string>('View Results')} />
97-
{showResults ? (
98-
<Modal
99-
animationType='slide'
100-
onRequestClose={() => setShowResults(false)}
101-
visible={showResults}
102-
>
103-
<SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
104-
<PollModalHeader
105-
onPress={() => setShowResults(false)}
106-
title={t<string>('Poll Results')}
107-
/>
108-
<PollResults message={message} poll={poll} />
109-
</SafeAreaView>
110-
</Modal>
111-
) : null}
112-
</>
113-
);
114-
};
115-
116-
export const EndVoteButton = () => {
117-
const { t } = useTranslationContext();
118-
const { createdBy, endVote, isClosed } = usePollState();
119-
const { client } = useChatContext();
120-
121-
return !isClosed && createdBy?.id === client.userID ? (
122-
<GenericPollButton onPress={endVote} title={t<string>('End Vote')} />
123-
) : null;
124-
};
125-
126-
export const AddCommentButton = (props: PollButtonProps) => {
127-
const { t } = useTranslationContext();
128-
const { message, poll } = usePollContext();
129-
const { addComment, allowAnswers, isClosed, ownAnswer } = usePollState();
130-
const [showAddCommentDialog, setShowAddCommentDialog] = useState(false);
131-
const { onPress } = props;
132-
133-
const onPressHandler = useCallback(() => {
134-
if (onPress) {
135-
onPress({ message, poll });
136-
return;
137-
}
138-
139-
setShowAddCommentDialog(true);
140-
}, [message, onPress, poll]);
141-
142-
return (
143-
<>
144-
{!isClosed && allowAnswers ? (
145-
<GenericPollButton onPress={onPressHandler} title={t<string>('Add a comment')} />
146-
) : null}
147-
{showAddCommentDialog ? (
148-
<PollInputDialog
149-
closeDialog={() => setShowAddCommentDialog(false)}
150-
initialValue={ownAnswer?.answer_text ?? ''}
151-
onSubmit={addComment}
152-
title={t<string>('Add a comment')}
153-
visible={showAddCommentDialog}
154-
/>
155-
) : null}
156-
</>
157-
);
158-
};
159-
160-
export const ShowAllCommentsButton = (props: PollButtonProps) => {
161-
const { t } = useTranslationContext();
162-
const { message, poll } = usePollContext();
163-
const { answersCount } = usePollState();
164-
const [showAnswers, setShowAnswers] = useState(false);
165-
const { onPress } = props;
166-
167-
const onPressHandler = useCallback(() => {
168-
if (onPress) {
169-
onPress({ message, poll });
170-
return;
171-
}
172-
173-
setShowAnswers(true);
174-
}, [message, onPress, poll]);
175-
176-
const {
177-
theme: {
178-
colors: { white },
179-
},
180-
} = useTheme();
181-
182-
return (
183-
<>
184-
{answersCount && answersCount > 0 ? (
185-
<GenericPollButton
186-
onPress={onPressHandler}
187-
title={t<string>('View {{count}} comments', { count: answersCount })}
188-
/>
189-
) : null}
190-
{showAnswers ? (
191-
<Modal
192-
animationType='slide'
193-
onRequestClose={() => setShowAnswers(false)}
194-
visible={showAnswers}
195-
>
196-
<SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
197-
<PollModalHeader
198-
onPress={() => setShowAnswers(false)}
199-
title={t<string>('Poll Comments')}
200-
/>
201-
<PollAnswersList message={message} poll={poll} />
202-
</SafeAreaView>
203-
</Modal>
204-
) : null}
205-
</>
206-
);
207-
};
208-
20952
export const AnswerListAddCommentButton = (props: PollButtonProps) => {
21053
const { t } = useTranslationContext();
21154
const { message, poll } = usePollContext();
@@ -259,88 +102,6 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
259102
);
260103
};
261104

262-
export const SuggestOptionButton = (props: PollButtonProps) => {
263-
const { t } = useTranslationContext();
264-
const { message, poll } = usePollContext();
265-
const { addOption, allowUserSuggestedOptions, isClosed } = usePollState();
266-
const [showAddOptionDialog, setShowAddOptionDialog] = useState(false);
267-
const { onPress } = props;
268-
269-
const onPressHandler = useCallback(() => {
270-
if (onPress) {
271-
onPress({ message, poll });
272-
return;
273-
}
274-
275-
setShowAddOptionDialog(true);
276-
}, [message, onPress, poll]);
277-
278-
return (
279-
<>
280-
{!isClosed && allowUserSuggestedOptions ? (
281-
<GenericPollButton onPress={onPressHandler} title={t<string>('Suggest an option')} />
282-
) : null}
283-
{showAddOptionDialog ? (
284-
<PollInputDialog
285-
closeDialog={() => setShowAddOptionDialog(false)}
286-
onSubmit={addOption}
287-
title={t<string>('Suggest an option')}
288-
visible={showAddOptionDialog}
289-
/>
290-
) : null}
291-
</>
292-
);
293-
};
294-
295-
export const ShowAllOptionsButton = (props: PollButtonProps) => {
296-
const { t } = useTranslationContext();
297-
const [showAllOptions, setShowAllOptions] = useState(false);
298-
const { message, poll } = usePollContext();
299-
const { options } = usePollState();
300-
const { onPress } = props;
301-
302-
const onPressHandler = useCallback(() => {
303-
if (onPress) {
304-
onPress({ message, poll });
305-
return;
306-
}
307-
308-
setShowAllOptions(true);
309-
}, [message, onPress, poll]);
310-
311-
const {
312-
theme: {
313-
colors: { white },
314-
},
315-
} = useTheme();
316-
317-
return (
318-
<>
319-
{options && options.length > 10 ? (
320-
<GenericPollButton
321-
onPress={onPressHandler}
322-
title={t<string>('See all {{count}} options', { count: options.length })}
323-
/>
324-
) : null}
325-
{showAllOptions ? (
326-
<Modal
327-
animationType='slide'
328-
onRequestClose={() => setShowAllOptions(false)}
329-
visible={showAllOptions}
330-
>
331-
<SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
332-
<PollModalHeader
333-
onPress={() => setShowAllOptions(false)}
334-
title={t<string>('Poll Options')}
335-
/>
336-
<PollAllOptions message={message} poll={poll} />
337-
</SafeAreaView>
338-
</Modal>
339-
) : null}
340-
</>
341-
);
342-
};
343-
344105
export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
345106
const { message, poll } = usePollContext();
346107
const { isClosed, ownVotesByOptionId } = usePollState();
@@ -395,52 +156,6 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
395156
) : null;
396157
};
397158

398-
export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
399-
const { t } = useTranslationContext();
400-
const { message, poll } = usePollContext();
401-
const { voteCountsByOption } = usePollState();
402-
const ownCapabilities = useOwnCapabilitiesContext();
403-
const [showAllVotes, setShowAllVotes] = useState(false);
404-
const { onPress, option } = props;
405-
406-
const onPressHandler = useCallback(() => {
407-
if (onPress) {
408-
onPress({ message, option, poll });
409-
return;
410-
}
411-
412-
setShowAllVotes(true);
413-
}, [message, onPress, option, poll]);
414-
415-
const {
416-
theme: {
417-
colors: { white },
418-
},
419-
} = useTheme();
420-
421-
return (
422-
<>
423-
{ownCapabilities.queryPollVotes &&
424-
voteCountsByOption &&
425-
voteCountsByOption?.[option.id] > 5 ? (
426-
<GenericPollButton onPress={onPressHandler} title={t<string>('Show All')} />
427-
) : null}
428-
{showAllVotes ? (
429-
<Modal
430-
animationType='fade'
431-
onRequestClose={() => setShowAllVotes(false)}
432-
visible={showAllVotes}
433-
>
434-
<SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
435-
<PollModalHeader onPress={() => setShowAllVotes(false)} title={option.text} />
436-
<PollOptionFullResults message={message} option={option} poll={poll} />
437-
</SafeAreaView>
438-
</Modal>
439-
) : null}
440-
</>
441-
);
442-
};
443-
444159
const styles = StyleSheet.create({
445160
answerListAddCommentContainer: {
446161
alignItems: 'center',

0 commit comments

Comments
 (0)