chore: move coherence percent function to utils, change name for clarity

Author: kemuru

web/src/pages/Home/TopJurors/JurorCard/Coherence.tsx

@@ -1,6 +1,9 @@
-import { Tooltip } from "@kleros/ui-components-library";
 import React from "react";
+
 import styled from "styled-components";
+import { Tooltip } from "@kleros/ui-components-library";
+
+import { getCoherencePercent } from "utils/getCoherencePercent";
 
 const Container = styled.div`
   display: flex;
@@ -11,11 +14,6 @@ const Container = styled.div`
   justify-content: center;
 `;
 
-export const getPercent = (num: number, den: number): string => {
-  if (den === 0) return "0%";
-  return `${Math.floor((num * 100) / den)}%`;
-};
-
 interface ICoherence {
   totalCoherentVotes: string;
   totalResolvedVotes: string;
@@ -26,7 +24,9 @@ const Coherence: React.FC<ICoherence> = ({ totalCoherentVotes, totalResolvedVote
 
   return (
     <Container>
-      <Tooltip text={coherenceRatio}>{getPercent(Number(totalCoherentVotes), Number(totalResolvedVotes))}</Tooltip>
+      <Tooltip text={coherenceRatio}>
+        {getCoherencePercent(Number(totalCoherentVotes), Number(totalResolvedVotes))}
+      </Tooltip>
     </Container>
   );
 };

web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
-import { getUserLevelData } from "utils/userLevelCalculation";
-
 import { landscapeStyle } from "styles/landscapeStyle";
 
+import { getUserLevelData } from "utils/userLevelCalculation";
+import { getCoherencePercent } from "utils/getCoherencePercent";
+
 import PixelArt from "pages/Profile/JurorInfo/PixelArt";
-import { getPercent } from "./Coherence";
 
 const Container = styled.div`
   display: flex;
@@ -46,7 +46,7 @@ interface IJurorLevel {
 }
 
 const JurorLevel: React.FC<IJurorLevel> = ({ totalCoherentVotes, totalResolvedVotes, totalResolvedDisputes }) => {
-  const coherencePercentage = getPercent(Number(totalCoherentVotes), Number(totalResolvedVotes));
+  const coherencePercentage = getCoherencePercent(Number(totalCoherentVotes), Number(totalResolvedVotes));
   const userLevelData = getUserLevelData(coherencePercentage, Number(totalResolvedDisputes));
   const level = userLevelData.level;
 

web/src/pages/Profile/JurorInfo/index.tsx

@@ -4,6 +4,7 @@ import styled, { css } from "styled-components";
 import { Card as _Card } from "@kleros/ui-components-library";
 
 import { getUserLevelData } from "utils/userLevelCalculation";
+import { getCoherencePercent } from "utils/getCoherencePercent";
 
 import { useUserQuery } from "queries/useUser";
 
@@ -14,7 +15,6 @@ import Coherence from "./Coherence";
 import Header from "./Header";
 import JurorRewards from "./JurorRewards";
 import PixelArt from "./PixelArt";
-import { getPercent } from "pages/Home/TopJurors/JurorCard/Coherence";
 
 const Container = styled.div``;
 
@@ -47,7 +47,7 @@ const JurorInfo: React.FC<IJurorInfo> = ({ addressToQuery }) => {
   const totalCoherentVotes = data?.user ? parseInt(data?.user?.totalCoherentVotes) : 0;
   const totalResolvedVotes = data?.user ? parseInt(data?.user?.totalResolvedVotes) : 0;
   const totalResolvedDisputes = data?.user ? parseInt(data?.user?.totalResolvedDisputes) : 0;
-  const coherencePercentage = getPercent(Number(totalCoherentVotes), Number(totalResolvedVotes));
+  const coherencePercentage = getCoherencePercent(Number(totalCoherentVotes), Number(totalResolvedVotes));
   const userLevelData = getUserLevelData(coherencePercentage, totalResolvedDisputes);
 
   return (

web/src/utils/getCoherencePercent.tsx

@@ -0,0 +1,4 @@
+export const getCoherencePercent = (num: number, den: number): string => {
+  if (den === 0) return "0%";
+  return `${Math.floor((num * 100) / den)}%`;
+};