fix: answer and results list anonymity fixes

Author: isekovanic

package/src/components/Poll/components/PollAnswersList.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { FlatList, type FlatListProps, StyleSheet, Text, View } from 'react-native';
 
-import { PollAnswer } from 'stream-chat';
+import { PollAnswer, VotingVisibility } from 'stream-chat';
 
 import { AnswerListAddCommentButton } from './Button';
 
@@ -15,6 +15,7 @@ import { DefaultStreamChatGenerics } from '../../../types/types';
 import { getDateString } from '../../../utils/i18n/getDateString';
 import { Avatar } from '../../Avatar/Avatar';
 import { usePollAnswersPagination } from '../hooks/usePollAnswersPagination';
+import { usePollState } from '../hooks/usePollState';
 
 export type PollAnswersListProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -25,6 +26,8 @@ export type PollAnswersListProps<
 
 export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => {
   const { t, tDateTimeParser } = useTranslationContext();
+  const { voting_visibility } = usePollState();
+
   const {
     theme: {
       colors: { bg_user, black },
@@ -37,12 +40,17 @@ export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => {
   const dateString = useMemo(
     () =>
       getDateString({
-        date: answer.created_at,
+        date: answer.updated_at,
         t,
         tDateTimeParser,
         timestampTranslationKey: 'timestamp/PollVote',
       }),
-    [answer.created_at, t, tDateTimeParser],
+    [answer.updated_at, t, tDateTimeParser],
+  );
+
+  const isAnonymous = useMemo(
+    () => voting_visibility === VotingVisibility.anonymous,
+    [voting_visibility],
   );
 
   return (
@@ -52,8 +60,12 @@ export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => {
       </Text>
       <View style={[styles.listItemInfoContainer, itemStyle.infoContainer]}>
         <View style={[styles.listItemUserInfoContainer, itemStyle.userInfoContainer]}>
-          <Avatar image={answer.user?.image as string} size={20} />
-          <Text style={{ color: black, fontSize: 14, marginLeft: 2 }}>{answer.user?.name}</Text>
+          {!isAnonymous && answer.user?.image ? (
+            <Avatar image={answer.user?.image as string} size={20} />
+          ) : null}
+          <Text style={{ color: black, fontSize: 14, marginLeft: 2 }}>
+            {isAnonymous ? t<string>('Anonymous') : answer.user?.name}
+          </Text>
         </View>
         <Text style={{ color: black }}>{dateString}</Text>
       </View>

package/src/components/Poll/components/PollResults/PollResultItem.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { PollOption, PollVote as PollVoteClass } from 'stream-chat';
+import { PollOption, PollVote as PollVoteClass, VotingVisibility } from 'stream-chat';
 
 import { useTheme, useTranslationContext } from '../../../../contexts';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
@@ -18,6 +18,7 @@ export type PollResultItemProps<
 
 export const PollVote = (vote: PollVoteClass) => {
   const { t, tDateTimeParser } = useTranslationContext();
+  const { voting_visibility } = usePollState();
   const {
     theme: {
       colors: { black, text_low_emphasis },
@@ -40,11 +41,20 @@ export const PollVote = (vote: PollVoteClass) => {
     [vote.created_at, t, tDateTimeParser],
   );
 
+  const isAnonymous = useMemo(
+    () => voting_visibility === VotingVisibility.anonymous,
+    [voting_visibility],
+  );
+
   return (
     <View key={`results_vote_${vote.id}`} style={[styles.voteContainer, container]}>
       <View style={{ flexDirection: 'row' }}>
-        <Avatar image={vote.user?.image as string} key={vote.id} size={20} />
-        <Text style={[styles.voteUserName, { color: black }, userName]}>{vote.user?.name}</Text>
+        {!isAnonymous && vote.user?.image ? (
+          <Avatar image={vote.user.image as string} key={vote.id} size={20} />
+        ) : null}
+        <Text style={[styles.voteUserName, { color: black }, userName]}>
+          {isAnonymous ? t<string>('Anonymous') : vote.user?.name}
+        </Text>
       </View>
       <Text style={[styles.voteDate, { color: text_low_emphasis }, dateText]}>{dateString}</Text>
     </View>

package/src/components/Poll/hooks/usePollAnswersPagination.ts

@@ -34,7 +34,7 @@ export const usePollAnswersPagination = ({
       const { next: newNext, votes: answers } = await poll.queryAnswers({
         filter: paginationParams?.filter,
         options: !next ? paginationParams?.options : { ...paginationParams?.options, next },
-        sort: { created_at: -1, ...paginationParams?.sort },
+        sort: { updated_at: -1, ...paginationParams?.sort },
       });
       cursorRef.current = newNext || null;
       setPollAnswers((prev) => uniqBy([...prev, ...answers], 'id'));

package/src/components/Poll/hooks/usePollState.ts

@@ -1,6 +1,13 @@
 import { useCallback } from 'react';
 
-import type { PollAnswer, PollOption, PollState, PollVote, UserResponse } from 'stream-chat';
+import {
+  PollAnswer,
+  PollOption,
+  PollState,
+  PollVote,
+  UserResponse,
+  VotingVisibility,
+} from 'stream-chat';
 
 import { usePollStateStore } from './usePollStateStore';
 
@@ -22,6 +29,7 @@ export type UsePollStateSelectorReturnType = [
   boolean | undefined,
   boolean | undefined,
   UserResponse | null,
+  VotingVisibility | undefined,
 ];
 
 const selector = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
@@ -40,6 +48,7 @@ const selector = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   nextValue.allow_answers,
   nextValue.allow_user_suggested_options,
   nextValue.created_by,
+  nextValue.voting_visibility,
 ];
 
 export const usePollState = () => {
@@ -58,6 +67,7 @@ export const usePollState = () => {
     allow_answers,
     allow_user_suggested_options,
     created_by,
+    voting_visibility,
   ] = usePollStateStore(selector);
 
   const addOption = useCallback(
@@ -90,5 +100,6 @@ export const usePollState = () => {
     ownAnswer,
     ownVotesByOptionId,
     vote_counts_by_option,
+    voting_visibility,
   };
 };

package/src/i18n/en.json

@@ -6,6 +6,7 @@
   "Allow access to your Gallery": "Allow access to your Gallery",
   "Allow camera access in device settings": "Allow camera access in device settings",
   "Also send to channel": "Also send to channel",
+  "Anonymous": "Anonymous",
   "Anonymous poll": "Anonymous poll",
   "Are you sure you want to permanently delete this message?": "Are you sure you want to permanently delete this message?",
   "Are you sure?": "Are you sure?",

package/src/i18n/es.json

@@ -6,6 +6,7 @@
   "Allow access to your Gallery": "Permitir acceso a tu galería",
   "Allow camera access in device settings": "Permitir el acceso a la cámara en la configuración del dispositivo",
   "Also send to channel": "También enviar al canal",
+  "Anonymous": "Anónimo",
   "Anonymous poll": "Encuesta anónima",
   "Are you sure you want to permanently delete this message?": "¿Estás seguro de que deseas eliminar permanentemente este mensaje?",
   "Are you sure?": "¿Estás seguro?",

package/src/i18n/fr.json

@@ -6,6 +6,7 @@
   "Allow access to your Gallery": "Autoriser l'accès à votre galerie",
   "Allow camera access in device settings": "Autoriser l'accès à la caméra dans les paramètres de l'appareil",
   "Also send to channel": "Envoyer également à la chaîne",
+  "Anonymous": "Anonyme",
   "Anonymous poll": "Sondage anonyme",
   "Are you sure you want to permanently delete this message?": "Êtes-vous sûr de vouloir supprimer définitivement ce message?",
   "Are you sure?": "Es-tu sûr ?",

package/src/i18n/he.json

@@ -6,6 +6,7 @@
   "Allow access to your Gallery": "אפשר גישה לגלריה שלך",
   "Allow camera access in device settings": "אפשר גישה למצלמה בהגדרות המכשיר",
   "Also send to channel": "שלח/י הודעה לשיחה",
+  "Anonymous": "אנונימי",
   "Anonymous poll": "סקר אנונימי",
   "Are you sure you want to permanently delete this message?": "האם את/ה בטוח/ה שאת/ה רוצה למחוק את ההודעה הזו לצמיתות?",
   "Are you sure?": "האם אתה בטוח?",

package/src/i18n/hi.json

@@ -6,6 +6,7 @@
   "Allow access to your Gallery": "अपनी गैलरी तक पहुँचने की अनुमति दें",
   "Allow camera access in device settings": "डिवाइस सेटिंग्स में कैमरा एक्सेस की अनुमति दें",
   "Also send to channel": "चैनल को भी भेजें",
+  "Anonymous": "गुमनाम",
   "Anonymous poll": "अनाम सर्वेक्षण",
   "Are you sure you want to permanently delete this message?": "क्या आप वाकई इस संदेश को स्थायी रूप से हटाना चाहते हैं?",
   "Are you sure?": "क्या आप सुनिश्चित हैं?",

package/src/i18n/it.json

@@ -6,6 +6,7 @@
   "Allow access to your Gallery": "Consenti l'accesso alla tua galleria",
   "Allow camera access in device settings": "Consenti l'accesso alla fotocamera nelle impostazioni del dispositivo",
   "Also send to channel": "Invia anche al canale",
+  "Anonymous": "Anonimo",
   "Anonymous poll": "Sondaggio anonimo",
   "Are you sure you want to permanently delete this message?": "Sei sicuro di voler eliminare definitivamente questo messaggio?",
   "Are you sure?": "Sei sicuro?",