Add latest polls leaderboard

Changed some go json marshaling keys to be more coherent with the other
calls

rankings.go

@@ -66,10 +66,10 @@ func (v *vocdoniHandler) lastElectionsHandler(_ *apirest.APIdata, ctx *httproute
 		CreatedTime  time.Time `json:"createdTime"`
 		ElectionID   string    `json:"electionId"`
 		LastVoteTime time.Time `json:"lastVoteTime"`
-		Question     string    `json:"question"`
-		CastedVotes  uint64    `json:"castedVotes"`
-		Username     string    `json:"username"`
-		Displayname  string    `json:"displayname"`
+		Question     string    `json:"title"`
+		CastedVotes  uint64    `json:"voteCount"`
+		Username     string    `json:"createdByUsername"`
+		Displayname  string    `json:"createdByDisplayname"`
 	}
 
 	var elections []*Election

webapp/src/components/MutedUsersList.tsx

@@ -19,6 +19,7 @@ import { useQuery } from 'react-query'
 import { fetchMutedUsers } from '../queries/profile'
 import { appUrl } from '../util/constants'
 import { useAuth } from './Auth/useAuth'
+import { Profile } from './Auth/useAuthProvider'
 import { Check } from './Check'
 
 export const MutedUsersList: React.FC = (props: StackProps) => {
@@ -74,7 +75,7 @@ export const MutedUsersList: React.FC = (props: StackProps) => {
         {data ? (
           data?.map((user) => (
             <HStack
-              key={user.userID}
+              key={user.fid}
               spacing={4}
               p={4}
               bg='white'

webapp/src/components/Top.tsx

@@ -2,7 +2,14 @@ import { Box, BoxProps, Link, Stack, Tag, Text } from '@chakra-ui/react'
 import { PropsWithChildren } from 'react'
 import { useQuery } from 'react-query'
 import { Link as RouterLink } from 'react-router-dom'
-import { fetchPollsByVotes, fetchTopCreators, fetchTopVoters, Poll, UserRanking } from '../queries/tops'
+import {
+  fetchLatestPolls,
+  fetchPollsByVotes,
+  fetchTopCreators,
+  fetchTopVoters,
+  Poll,
+  UserRanking,
+} from '../queries/tops'
 import { useAuth } from './Auth/useAuth'
 import { Check } from './Check'
 
@@ -21,6 +28,19 @@ export const TopTenPolls = (props: BoxProps) => {
   return <TopPolls polls={data} title='Top 10 polls (by votes)' {...props} />
 }
 
+export const LatestPolls = (props: BoxProps) => {
+  const { bfetch } = useAuth()
+  const { data, error, isLoading } = useQuery<Poll[], Error>('latestPolls', fetchLatestPolls(bfetch))
+
+  if (isLoading || error) {
+    return <Check isLoading={isLoading} error={error} />
+  }
+
+  if (!data || !data.length) return null
+
+  return <TopPolls polls={data} title='Latest polls' {...props} />
+}
+
 export const TopCreators = (props: BoxProps) => {
   const { bfetch } = useAuth()
   const { data, error, isLoading } = useQuery<Poll[], Error>('topCreators', fetchTopCreators(bfetch))
@@ -64,8 +84,8 @@ export const TopPolls = ({ polls, title, ...rest }: { polls: Poll[]; title: stri
           style={{ textDecoration: 'none' }}
         >
           <TopCard>
-            <Text color='purple.500' fontWeight='medium' maxW='80%'>
-              {poll.title} — by {poll.createdByUsername}
+            <Text color='purple.500' fontWeight='medium'>
+              {poll.title} — by {poll.createdByDisplayname || poll.createdByUsername}
             </Text>
             <Text color='gray.500' alignSelf={{ base: 'start', sm: 'end' }}>
               {poll.voteCount} votes

webapp/src/pages/Leaderboards.tsx

@@ -1,15 +1,15 @@
 import { Grid, GridItem } from '@chakra-ui/react'
-import { TopCreators, TopTenPolls, TopVoters } from '../components/Top'
+import { LatestPolls, TopCreators, TopTenPolls, TopVoters } from '../components/Top'
 
 export const Leaderboards = () => (
   <Grid
     gap={3}
     templateAreas={{
-      base: '"creators" "voters" "polls"',
-      sm: '"creators voters" "polls polls"',
-      lg: '"creators voters polls"',
+      base: '"creators" "voters" "polls" "latest"',
+      sm: '"creators voters" "polls latest"',
+      xl: '"creators voters polls latest"',
     }}
-    templateColumns={{ base: 'full', sm: '50%', lg: 'auto auto 50%' }}
+    templateColumns={{ base: 'full', sm: '50%', xl: 'auto auto 30% 30%' }}
     w='full'
   >
     <GridItem area='polls'>
@@ -21,5 +21,8 @@ export const Leaderboards = () => (
     <GridItem area='voters'>
       <TopVoters w='full' />
     </GridItem>
+    <GridItem area='latest'>
+      <LatestPolls w='full' />
+    </GridItem>
   </Grid>
 )

webapp/src/queries/tops.ts

@@ -1,7 +1,11 @@
 export type Poll = {
+  electionId: string
   title: string
   createdByUsername: string
+  createdByDisplayname: string
   voteCount: number
+  createdTime: Date
+  lastVoteTime: Date
 }
 
 export const fetchPollsByVotes = (bfetch) => async (): Promise<Poll[]> => {
@@ -16,14 +20,20 @@ export type UserRanking = {
   count: number
 }
 
-export const fetchTopVoters = (bfetch) => async (): Promise<Poll[]> => {
+export const fetchTopVoters = (bfetch) => async (): Promise<UserRanking[]> => {
   const response = await bfetch(`${import.meta.env.APP_URL}/rankings/usersByCastedVotes`)
   const { users } = (await response.json()) as { users: UserRanking[] }
   return users
 }
 
-export const fetchTopCreators = (bfetch) => async (): Promise<Poll[]> => {
+export const fetchTopCreators = (bfetch) => async (): Promise<UserRanking[]> => {
   const response = await bfetch(`${import.meta.env.APP_URL}/rankings/usersByCreatedPolls`)
   const { users } = (await response.json()) as { users: UserRanking[] }
   return users
 }
+
+export const fetchLatestPolls = (bfetch) => async (): Promise<Poll[]> => {
+  const response = await bfetch(`${import.meta.env.APP_URL}/rankings/lastElections`)
+  const { polls } = (await response.json()) as { polls: Poll[] }
+  return polls
+}