refactor(components): use arrow function syntax and improve consistency

packages/web/src/components/game/states/Responses.tsx

@@ -1,48 +1,25 @@
 "use client"
 
 import { ManagerStatusDataMap } from "@rahoot/common/types/game/status"
+import AnswerButton from "@rahoot/web/components/AnswerButton"
 import {
   ANSWERS_COLORS,
   ANSWERS_ICONS,
   SFX_ANSWERS_MUSIC,
   SFX_RESULTS_SOUND,
 } from "@rahoot/web/utils/constants"
+import { calculatePercentages } from "@rahoot/web/utils/score"
 import clsx from "clsx"
 import { useEffect, useState } from "react"
 import useSound from "use-sound"
-import AnswerButton from "../../AnswerButton"
-
-const calculatePercentages = (
-  objectResponses: Record<string, number>,
-): Record<string, string> => {
-  const keys = Object.keys(objectResponses)
-  const values = Object.values(objectResponses)
-
-  if (!values.length) {
-    return {}
-  }
-
-  const totalSum = values.reduce(
-    (accumulator, currentValue) => accumulator + currentValue,
-    0,
-  )
-
-  const result: Record<string, string> = {}
-
-  keys.forEach((key) => {
-    result[key] = `${((objectResponses[key] / totalSum) * 100).toFixed()}%`
-  })
-
-  return result
-}
 
 type Props = {
   data: ManagerStatusDataMap["SHOW_RESPONSES"]
 }
 
-export default function Responses({
+const Responses = ({
   data: { question, answers, responses, correct },
-}: Props) {
+}: Props) => {
   const [percentages, setPercentages] = useState<Record<string, string>>({})
   const [isMusicPlaying, setIsMusicPlaying] = useState(false)
 
@@ -123,3 +100,5 @@ export default function Responses({
     </div>
   )
 }
+
+export default Responses