Merge pull request #390 from SquareTable/389-feat-add-vote-view-page-…

…for-polls feat: added poll vote view page
SquareTable · Feb 12, 2024 · 1b9e9ad · 1b9e9ad
2 parents 2e737b1 + 93c1248
commit 1b9e9ad
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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."
+            />
+        </>
+    )
+}