fix: solve final cyclical dep

Author: isekovanic

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

@@ -3,7 +3,7 @@ import { FlatList, type FlatListProps, StyleSheet, Text, View } from 'react-nati
 
 import { PollOption, PollVote as PollVoteClass } from 'stream-chat';
 
-import { PollVote } from './PollResultItem';
+import { PollVote } from './PollVote';
 
 import {
   PollContextProvider,

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

@@ -1,9 +1,10 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Modal, SafeAreaView, StyleSheet, Text, View } from 'react-native';
 
-import { Poll, PollOption, PollVote as PollVoteClass, VotingVisibility } from 'stream-chat';
+import { Poll, PollOption, PollVote as PollVoteClass } from 'stream-chat';
 
 import { PollOptionFullResults } from './PollOptionFullResults';
+import { PollVote } from './PollVote';
 
 import {
   useOwnCapabilitiesContext,
@@ -12,8 +13,6 @@ import {
   useTranslationContext,
 } from '../../../../contexts';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
-import { getDateString } from '../../../../utils/i18n/getDateString';
-import { Avatar } from '../../../Avatar/Avatar';
 import { MessageType } from '../../../MessageList/hooks/useMessageList';
 import { usePollState } from '../../hooks/usePollState';
 import { GenericPollButton } from '../Button';
@@ -86,51 +85,6 @@ export type PollResultItemProps<
   option: PollOption<StreamChatGenerics>;
 };
 
-export const PollVote = ({ vote }: { vote: PollVoteClass }) => {
-  const { t, tDateTimeParser } = useTranslationContext();
-  const { votingVisibility } = usePollState();
-  const {
-    theme: {
-      colors: { black, text_low_emphasis },
-      poll: {
-        results: {
-          vote: { container, dateText, userName },
-        },
-      },
-    },
-  } = useTheme();
-
-  const dateString = useMemo(
-    () =>
-      getDateString({
-        date: vote.created_at,
-        t,
-        tDateTimeParser,
-        timestampTranslationKey: 'timestamp/PollVote',
-      }),
-    [vote.created_at, t, tDateTimeParser],
-  );
-
-  const isAnonymous = useMemo(
-    () => votingVisibility === VotingVisibility.anonymous,
-    [votingVisibility],
-  );
-
-  return (
-    <View style={[styles.voteContainer, container]}>
-      <View style={{ flexDirection: 'row' }}>
-        {!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>
-  );
-};
-
 const PollResultsVoteItem = (vote: PollVoteClass) => (
   <PollVote key={`results_vote_${vote.id}`} vote={vote} />
 );
@@ -177,13 +131,5 @@ const styles = StyleSheet.create({
   },
   headerContainer: { flexDirection: 'row', justifyContent: 'space-between' },
   title: { flex: 1, fontSize: 16, fontWeight: '500' },
-  voteContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 8,
-    paddingVertical: 8,
-  },
   voteCount: { fontSize: 16, marginLeft: 16 },
-  voteDate: { fontSize: 14 },
-  voteUserName: { fontSize: 14, marginLeft: 2 },
 });

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

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react';
+
+import { StyleSheet, Text, View } from 'react-native';
+
+import { PollVote as PollVoteClass, VotingVisibility } from 'stream-chat';
+
+import { useTheme, useTranslationContext } from '../../../../contexts';
+import { getDateString } from '../../../../utils/i18n/getDateString';
+
+import { Avatar } from '../../../Avatar/Avatar';
+import { usePollState } from '../../hooks/usePollState';
+
+export const PollVote = ({ vote }: { vote: PollVoteClass }) => {
+  const { t, tDateTimeParser } = useTranslationContext();
+  const { votingVisibility } = usePollState();
+  const {
+    theme: {
+      colors: { black, text_low_emphasis },
+      poll: {
+        results: {
+          vote: { container, dateText, userName },
+        },
+      },
+    },
+  } = useTheme();
+
+  const dateString = useMemo(
+    () =>
+      getDateString({
+        date: vote.created_at,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey: 'timestamp/PollVote',
+      }),
+    [vote.created_at, t, tDateTimeParser],
+  );
+
+  const isAnonymous = useMemo(
+    () => votingVisibility === VotingVisibility.anonymous,
+    [votingVisibility],
+  );
+
+  return (
+    <View style={[styles.voteContainer, container]}>
+      <View style={{ flexDirection: 'row' }}>
+        {!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>
+  );
+};
+
+const styles = StyleSheet.create({
+  voteContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+    paddingVertical: 8,
+  },
+  voteCount: { fontSize: 16, marginLeft: 16 },
+  voteDate: { fontSize: 14 },
+  voteUserName: { fontSize: 14, marginLeft: 2 },
+});