From 93c12480d4e27c5ba992badae6d78496392b476e Mon Sep 17 00:00:00 2001
From: Sebastian-Webster <84299475+Sebastian-Webster@users.noreply.github.com>
Date: Tue, 13 Feb 2024 02:21:53 +1300
Subject: [PATCH] feat: added poll vote view page

---
 components/Posts/PollWithVotes.js | 52 ++++++++++++++++++++-----------
 navigation/StackNavigator.js      |  4 +++
 screens/PollVoteViewPage.js       | 37 ++++++++++++++++++++++
 3 files changed, 75 insertions(+), 18 deletions(-)
 create mode 100644 screens/PollVoteViewPage.js

diff --git a/components/Posts/PollWithVotes.js b/components/Posts/PollWithVotes.js
index 06749c6..003932c 100644
--- a/components/Posts/PollWithVotes.js
+++ b/components/Posts/PollWithVotes.js
@@ -165,6 +165,10 @@ class PollWithVotes extends PollClass {
         this.props.navigation.navigate('VotesViewPage', {postId: this.props.post._id, postFormat: 'Poll'})
     }
 
+    navigateToPollVotesViewPage = (pollOption) => {
+        this.props.navigation.navigate('PollVoteViewPage', {pollId: this.props.post._id, pollOption})
+    }
+
     render() {
         this.votes = this.props.post.optionOnesVotes + this.props.post.optionTwosVotes + this.props.post.optionThreesVotes + this.props.post.optionFoursVotes + this.props.post.optionFivesVotes + this.props.post.optionSixesVotes;
         this.optionOnesBarLength = this.votes === 0 ? this.calculateZeroVoteLength(1) : this.props.post.optionOnesVotes / this.votes * 100
@@ -246,9 +250,11 @@ class PollWithVotes extends PollClass {
                     
                     <PollPostHorizontalView visible={this.props.post.openPollVoteMenu === "One"}>
                         <PollHorizontalViewItem>
-                            <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> Votes </PollPostSubTitle>
-                            <ProfIcons source={require('../../assets/icomoon-icons/IcoMoon-Free-master/PNG/64px/273-checkmark.png')}/>
-                            <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> {this.props.post.optionOnesVotes} </PollPostSubTitle>
+                            <TouchableOpacity onPress={() => this.navigateToPollVotesViewPage("One")} style={{width: '100%', alignItems: 'center'}}>
+                                <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> Votes </PollPostSubTitle>
+                                <ProfIcons source={require('../../assets/icomoon-icons/IcoMoon-Free-master/PNG/64px/273-checkmark.png')}/>
+                                <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> {this.props.post.optionOnesVotes} </PollPostSubTitle>
+                            </TouchableOpacity>
                         </PollHorizontalViewItem>
 
                         <PollHorizontalViewItemCenter onPress={() => {this.props.post.votedFor === "One" ? this.handleRemoveVoteOnPoll() : this.handleVoteOnPoll("One")}} disabled={this.props.post.pollVoteChanging}>
@@ -284,9 +290,11 @@ class PollWithVotes extends PollClass {
                     
                     <PollPostHorizontalView visible={this.props.post.openPollVoteMenu === "Two"}>
                         <PollHorizontalViewItem>
-                            <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> Votes </PollPostSubTitle>
-                            <ProfIcons source={require('../../assets/icomoon-icons/IcoMoon-Free-master/PNG/64px/273-checkmark.png')}/>
-                            <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> {this.props.post.optionTwosVotes} </PollPostSubTitle>
+                            <TouchableOpacity onPress={() => this.navigateToPollVotesViewPage("Two")} style={{width: '100%', alignItems: 'center'}}>
+                                <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> Votes </PollPostSubTitle>
+                                <ProfIcons source={require('../../assets/icomoon-icons/IcoMoon-Free-master/PNG/64px/273-checkmark.png')}/>
+                                <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> {this.props.post.optionTwosVotes} </PollPostSubTitle>
+                            </TouchableOpacity>
                         </PollHorizontalViewItem>
 
                         <PollHorizontalViewItemCenter onPress={() => {this.props.post.votedFor === "Two" ? this.handleRemoveVoteOnPoll() : this.handleVoteOnPoll("Two")}}>
@@ -320,9 +328,11 @@ class PollWithVotes extends PollClass {
                     
                     <PollPostHorizontalView visible={this.props.post.openPollVoteMenu === "Three"}>
                         <PollHorizontalViewItem>
-                            <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> Votes </PollPostSubTitle>
-                            <ProfIcons source={require('../../assets/icomoon-icons/IcoMoon-Free-master/PNG/64px/273-checkmark.png')}/>
-                            <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> {this.props.post.optionThreesVotes} </PollPostSubTitle>
+                            <TouchableOpacity onPress={() => this.navigateToPollVotesViewPage("Three")} style={{width: '100%', alignItems: 'center'}}>
+                                <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> Votes </PollPostSubTitle>
+                                <ProfIcons source={require('../../assets/icomoon-icons/IcoMoon-Free-master/PNG/64px/273-checkmark.png')}/>
+                                <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> {this.props.post.optionThreesVotes} </PollPostSubTitle>
+                            </TouchableOpacity>
                         </PollHorizontalViewItem>
 
                         <PollHorizontalViewItemCenter onPress={() => {this.props.post.votedFor === "Three" ? this.handleRemoveVoteOnPoll() : this.handleVoteOnPoll("Three")}}>
@@ -356,9 +366,11 @@ class PollWithVotes extends PollClass {
 
                     <PollPostHorizontalView visible={this.props.post.openPollVoteMenu === "Four"}>
                         <PollHorizontalViewItem>
-                            <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> Votes </PollPostSubTitle>
-                            <ProfIcons source={require('../../assets/icomoon-icons/IcoMoon-Free-master/PNG/64px/273-checkmark.png')}/>
-                            <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> {this.props.post.optionFoursVotes} </PollPostSubTitle>
+                            <TouchableOpacity onPress={() => this.navigateToPollVotesViewPage("Four")} style={{width: '100%', alignItems: 'center'}}>
+                                <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> Votes </PollPostSubTitle>
+                                <ProfIcons source={require('../../assets/icomoon-icons/IcoMoon-Free-master/PNG/64px/273-checkmark.png')}/>
+                                <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> {this.props.post.optionFoursVotes} </PollPostSubTitle>
+                            </TouchableOpacity>
                         </PollHorizontalViewItem>
 
                         <PollHorizontalViewItemCenter onPress={() => {this.props.post.votedFor === "Four" ? this.handleRemoveVoteOnPoll() : this.handleVoteOnPoll("Four")}}>
@@ -392,9 +404,11 @@ class PollWithVotes extends PollClass {
 
                     <PollPostHorizontalView visible={this.props.post.openPollVoteMenu === "Five"}>
                         <PollHorizontalViewItem>
-                            <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> Votes </PollPostSubTitle>
-                            <ProfIcons source={require('../../assets/icomoon-icons/IcoMoon-Free-master/PNG/64px/273-checkmark.png')}/>
-                            <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> {this.props.post.optionFivesVotes} </PollPostSubTitle>
+                            <TouchableOpacity onPress={() => this.navigateToPollVotesViewPage("Five")} style={{width: '100%', alignItems: 'center'}}>
+                                <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> Votes </PollPostSubTitle>
+                                <ProfIcons source={require('../../assets/icomoon-icons/IcoMoon-Free-master/PNG/64px/273-checkmark.png')}/>
+                                <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> {this.props.post.optionFivesVotes} </PollPostSubTitle>
+                            </TouchableOpacity>
                         </PollHorizontalViewItem>
 
                         <PollHorizontalViewItemCenter onPress={() => {this.props.post.votedFor === "Five" ? this.handleRemoveVoteOnPoll() : this.handleVoteOnPoll("Five")}}>
@@ -428,9 +442,11 @@ class PollWithVotes extends PollClass {
 
                     <PollPostHorizontalView visible={this.props.post.openPollVoteMenu === "Six"}>
                         <PollHorizontalViewItem>
-                            <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> Votes </PollPostSubTitle>
-                            <ProfIcons source={require('../../assets/icomoon-icons/IcoMoon-Free-master/PNG/64px/273-checkmark.png')}/>
-                            <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> {this.props.post.optionSixesVotes} </PollPostSubTitle>
+                            <TouchableOpacity onPress={() => this.navigateToPollVotesViewPage("Six")} style={{width: '100%', alignItems: 'center'}}>
+                                <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> Votes </PollPostSubTitle>
+                                <ProfIcons source={require('../../assets/icomoon-icons/IcoMoon-Free-master/PNG/64px/273-checkmark.png')}/>
+                                <PollPostSubTitle style={{color: this.props.colors.tertiary}} welcome={true}> {this.props.post.optionSixesVotes} </PollPostSubTitle>
+                            </TouchableOpacity>
                         </PollHorizontalViewItem>
 
                         <PollHorizontalViewItemCenter onPress={() => {this.props.post.votedFor === "Six" ? this.handleRemoveVoteOnPoll() : this.handleVoteOnPoll("Six")}}>
diff --git a/navigation/StackNavigator.js b/navigation/StackNavigator.js
index 46e411a..d35e481 100644
--- a/navigation/StackNavigator.js
+++ b/navigation/StackNavigator.js
@@ -83,6 +83,7 @@ import LoginActivitySettings from "../screens/SecuritySettingsScreens/LoginActiv
 import PostUpvoteDownvoteActivity from "../screens/ActivityScreens/PostUpvoteDownvoteActivity.js";
 import VotesViewPage from "../screens/VotesViewPage.js";
 import CategoryMemberViewPage from "../screens/CategoryMemberViewPage.js";
+import PollVoteViewPage from "../screens/PollVoteViewPage.js";
 
 
 const Stack = createStackNavigator();
@@ -136,6 +137,7 @@ const RootStack = () => {
         <Stack.Screen name="AccountBadges" component={AccountBadges}/>
         <Stack.Screen name="ViewImagePostPage" component={ViewImagePostPage}/>
         <Stack.Screen name="ViewPollPostPage" component={ViewPollPostPage}/>
+        <Stack.Screen name="PollVoteViewPage" component={PollVoteViewPage}/>
         <Stack.Screen name="ThreadViewPage" component={ThreadViewPage}/>
         <Stack.Screen name="EditProfile" component={EditProfile}/>
         <Stack.Screen name="CategoryViewPage" component={CategoryViewPage}/>
@@ -172,6 +174,7 @@ const FindScreen_Stack = () => {
         <Stack.Screen name="SelectCategorySearchScreen" component={SelectCategorySearchScreen}/>
         <Stack.Screen name="ViewImagePostPage" component={ViewImagePostPage}/>
         <Stack.Screen name="ViewPollPostPage" component={ViewPollPostPage}/>
+        <Stack.Screen name="PollVoteViewPage" component={PollVoteViewPage}/>
         <Stack.Screen name="ThreadViewPage" component={ThreadViewPage}/>
         <Stack.Screen name="VotesViewPage" component={VotesViewPage}/>
       </Stack.Group>
@@ -204,6 +207,7 @@ const HomeScreenStack = () => {
       <Stack.Screen name="AccountFollowRequestsScreen" component={AccountFollowRequestsScreen}/>
       <Stack.Screen name="ViewImagePostPage" component={ViewImagePostPage}/>
       <Stack.Screen name="ViewPollPostPage" component={ViewPollPostPage}/>
+      <Stack.Screen name="PollVoteViewPage" component={PollVoteViewPage}/>
       <Stack.Screen name="ThreadViewPage" component={ThreadViewPage}/>
       <Stack.Screen name="ProfilePages" component={ProfilePages}/>
       <Stack.Screen name="CategoryViewPage" component={CategoryViewPage}/>
diff --git a/screens/PollVoteViewPage.js b/screens/PollVoteViewPage.js
new file mode 100644
index 0000000..63dd76b
--- /dev/null
+++ b/screens/PollVoteViewPage.js
@@ -0,0 +1,37 @@
+import ItemAutoList from '../components/ItemAutoList';
+import TopNavBar from '../components/TopNavBar';
+import useItemReducer from '../hooks/useItemReducer';
+import UserItem from "../components/Users/UserItem";
+
+export default function PollVoteViewPage({route}) {
+    const {pollId, pollOption} = route.params;
+    const [state, dispatch] = useItemReducer();
+
+    return (
+        <>
+            <TopNavBar screenName={`Votes on Option ${pollOption}`}/>
+            <ItemAutoList
+                noItemsFoundText="No votes could be found."
+                centreIfNoItems
+                url="/tempRoute/getpollvoteusers"
+                extraPOSTData={{
+                    pollId,
+                    pollOption
+                }}
+                DisplayComponent={UserItem}
+                extraProps={{
+                    getItemLayout: (data, index) => {
+                        return {
+                            length: 70,
+                            offset: 70 * index,
+                            index
+                        }
+                    }
+                }}
+                state={state}
+                dispatch={dispatch}
+                noMoreItemsText="No more votes left."
+            />
+        </>
+    )
+}
\ No newline at end of file