Moves data fetching to a separate class

lib/Components/Voting/VotingCardView.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { motion } from 'framer-motion'
 import { total } from './Animations'
 import { getParticipantImage } from '../../Helpers/ParticipantImage'
-import { Result } from './Types'
+import { Result } from '../../Data/Types'
 import ProgressCircle from './ProgressCircle'
 import { formatNumber } from '../../Helpers/NumberFormat'
 import CounterView from './CounterView'

lib/Components/Voting/VotingView.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { motion } from 'framer-motion'
 import { cards, card, header, text, footer } from './Animations'
-import { Result } from './Types'
+import { Result } from '../../Data/Types'
 import VotingCardView from './VotingCardView'
 import MoodView from './MoodView'
 

lib/Data/Results.ts

@@ -0,0 +1,41 @@
+import { DynamoDBClient, ScanCommand } from '@aws-sdk/client-dynamodb'
+import { Result } from './Types'
+
+export default class Results {
+  client?: DynamoDBClient
+
+  constructor() {
+    this.client = new DynamoDBClient({ 
+      region: "us-east-1",
+      credentials: {
+        accessKeyId: `${process.env.ACCESS_KEY}`,
+        secretAccessKey: `${process.env.SECRET_KEY}`,
+      },
+    })
+  }
+
+  async list(): Promise<Result[] | undefined> {
+    try {
+      const data = await this.client!.send(new ScanCommand({
+        TableName: "enquete-bbb-results"
+      }))
+
+      const results = data.Items?.map((element) => {
+        return {
+          id: element.id.S,
+          totalVotes: parseInt(element.totalVotes.N || '0'),
+          status: element.status.S,
+          participants: element.participants.L?.map(participant => ({
+            name: participant.M?.name.S,
+            votesPercentage: parseFloat(participant.M?.votesPercentage.N || '0')
+          })),
+        }
+      }) || []
+
+      results
+    } catch (error) {
+      return undefined
+    }
+  }
+
+}

pages/index.tsx

@@ -1,48 +1,18 @@
-import { DynamoDBClient, ScanCommand } from '@aws-sdk/client-dynamodb'
-import { Result } from '../lib/Components/Voting/Types'
+
+import { Result } from '../lib/Data/Types'
 import VotingView from '../lib/Components/Voting/VotingView'
+import Results from '../lib/Data/Results'
 
 export default function Index(props: { results: Result[] }) {
-  return (
-    <VotingView results={props.results} />
-  )
+  return <VotingView results={props.results} />
 }
 
 export async function getStaticProps() {
-  const client = new DynamoDBClient({ 
-    region: "us-east-1",
-    credentials: {
-      accessKeyId: `${process.env.ACCESS_KEY}`,
-      secretAccessKey: `${process.env.SECRET_KEY}`,
-    },
-  })
-
-  try {
-    const data = await client.send(new ScanCommand({
-      TableName: "enquete-bbb-results"
-    }))
-
-    const results = data.Items?.map((element) => {
-      return {
-        id: element.id.S,
-        totalVotes: parseInt(element.totalVotes.N || '0'),
-        status: element.status.S,
-        participants: element.participants.L?.map(participant => ({
-          name: participant.M?.name.S,
-          votesPercentage: parseFloat(participant.M?.votesPercentage.N || '0')
-        })),
-      }
-    }) || []
+  const results = await new Results().list()
 
-    return {
-      props: {
-        results
-      },
-      revalidate: 60 * 15, // In seconds
-    }
-  } catch (error) {
-    return {
-      props: { results: [] }
-    }
+  if (results) {
+    return { props: { results }, revalidate: 60 * 15 }
+  } else {
+    return { props: { results: [] } }
   }
 }