Merged in feature/update-eslint-rules (pull request #157)

Update rule 'magic numbers' in eslint
near-daos · Jan 18, 2022 · c6193c0 · c6193c0
2 parents 5470584 + ca29846
commit c6193c0
Show file tree

Hide file tree

Showing 13 changed files with 94 additions and 50 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -27,7 +27,12 @@
     "no-use-before-define": "off",
     "@typescript-eslint/no-use-before-define": ["error"],
     "no-param-reassign": ["error", { "props": false }],
-    "no-console": ["warn", { "allow": ["warn", "error"] }],
+    "no-console": ["warn", { "allow": ["warn", "error", "info"] }],
+    "no-magic-numbers": ["error", { "ignoreDefaultValues": true,
+      "enforceConst": true,
+      "ignoreArrayIndexes": true,
+      "ignore": [1, 0, -1]
+    }],
     "padding-line-between-statements": [
       "error",
       // Always require blank lines after directive (like "use-strict"), except between directives

diff --git a/src/app/shared/governance/selectors.ts b/src/app/shared/governance/selectors.ts
@@ -8,6 +8,7 @@ import {
   governanceDaoVoteRateAdapter,
   governanceSlice,
 } from './slice';
+import { ONE_HUNDRED } from '../../../constants';
 
 const getState = (state: RootState) => state[governanceSlice.name];
 
@@ -25,7 +26,7 @@ export const selectGovernance = createSelector(
           voteRate: data?.voteRate
             ? {
                 ...data.voteRate,
-                count: Math.round(data.voteRate?.count * 100),
+                count: Math.round(data.voteRate?.count * ONE_HUNDRED),
               }
             : undefined,
         }
@@ -59,7 +60,7 @@ export const selectGovernanceVoteRate = createSelector(
       ? {
           metrics: data?.metrics?.map((metric) => ({
             ...metric,
-            count: Math.round(metric.count * 100),
+            count: Math.round(metric.count * ONE_HUNDRED),
           })),
         }
       : undefined,
@@ -71,12 +72,15 @@ export const selectGovernanceVoteRateLeaderboard = createSelector(
     metrics: data?.metrics?.map((metric) => ({
       ...metric,
       voteRate: metric?.voteRate
-        ? { ...metric.voteRate, count: Math.round(metric.voteRate.count * 100) }
+        ? {
+            ...metric.voteRate,
+            count: Math.round(metric.voteRate.count * ONE_HUNDRED),
+          }
         : undefined,
       overview: metric?.overview
         ? metric.overview.map((item) => ({
             ...item,
-            count: Math.round(item.count * 100),
+            count: Math.round(item.count * ONE_HUNDRED),
           }))
         : undefined,
     })),
@@ -106,7 +110,7 @@ export const selectGovernanceDaoById = (id: string | undefined) => (
     ...governanceDao,
     voteRate: {
       ...governanceDao?.voteRate,
-      count: Math.round(governanceDao?.voteRate?.count * 100),
+      count: Math.round(governanceDao?.voteRate?.count * ONE_HUNDRED),
     },
   };
 };
@@ -154,7 +158,7 @@ export const selectGovernanceDaoVoteRateById = (id: string | undefined) => (
   return {
     metrics: governanceDaoVoteRate?.metrics.map((metric) => ({
       ...metric,
-      count: Math.round(metric.count * 100),
+      count: Math.round(metric.count * ONE_HUNDRED),
     })),
   };
 };
diff --git a/src/components/charts/constants.ts b/src/components/charts/constants.ts
@@ -6,7 +6,3 @@ export const tickStyles = {
 };
 
 export const COLORS = ['#e33f84', '#8f40dd', '#5d75e9', '#81ceee'];
-
-export const ONE_THOUSAND = 1000;
-export const ONE_MILLION = 1000000;
-export const ONE_BILLION = 1000000000;
diff --git a/src/components/charts/helpers.ts b/src/components/charts/helpers.ts
@@ -1,8 +1,18 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { subYears, subMonths, subDays, differenceInMonths } from 'date-fns';
+import { subYears, subMonths, differenceInMonths, subWeeks } from 'date-fns';
 import { MetricItem } from 'src/api';
 import { formatDate } from 'src/utils';
-import { ONE_BILLION, ONE_MILLION, ONE_THOUSAND } from './constants';
+import {
+  FIRST_DATE,
+  ONE_BILLION,
+  ONE_MILLION,
+  ONE_MONTH,
+  ONE_THOUSAND,
+  ONE_WEEK,
+  ONE_YEAR,
+  SIX_MONTHS,
+  THREE_MONTHS,
+} from 'src/constants';
 import { ChartDataItem } from './types';
 
 export const getDateFromSelectedDate = (
@@ -12,20 +22,19 @@ export const getDateFromSelectedDate = (
   const currentDate = date || new Date();
 
   switch (range) {
-    case 'All':
-      return subYears(currentDate, 30).getTime();
     case '1y':
-      return subYears(currentDate, 1).getTime();
+      return subYears(currentDate, ONE_YEAR).getTime();
     case '6m':
-      return subMonths(currentDate, 6).getTime();
+      return subMonths(currentDate, SIX_MONTHS).getTime();
     case '3m':
-      return subMonths(currentDate, 3).getTime();
+      return subMonths(currentDate, THREE_MONTHS).getTime();
     case '1m':
-      return subMonths(currentDate, 1).getTime();
+      return subMonths(currentDate, ONE_MONTH).getTime();
     case '7d':
-      return subDays(currentDate, 7).getTime();
+      return subWeeks(currentDate, ONE_WEEK).getTime();
+    case 'All':
     default:
-      return subYears(currentDate, 1).getTime();
+      return FIRST_DATE;
   }
 };
 
@@ -72,8 +81,8 @@ export const yTickFormatter = (value: number): string => {
     return '0';
   }
 
-  if (value >= 1000) {
-    return `${value % 1000}M`;
+  if (value >= ONE_THOUSAND) {
+    return `${value % ONE_THOUSAND}M`;
   }
 
   return `${value}K`;

diff --git a/src/components/charts/pie-chart/pie-chart.tsx b/src/components/charts/pie-chart/pie-chart.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useMemo } from 'react';
 import { PieChart, Pie, Cell, Legend, ResponsiveContainer } from 'recharts';
+import { ONE_HUNDRED } from 'src/constants';
 
 import startCase from 'lodash/startCase';
 
@@ -19,7 +20,7 @@ interface PieChartProps {
 }
 
 const updatePercent = (percentages: number) =>
-  parseInt((percentages * 100).toFixed(0), 10);
+  parseInt((percentages * ONE_HUNDRED).toFixed(0), 10);
 
 export const ChartPie: React.FC<PieChartProps> = ({
   title = 'Average council size',
@@ -65,25 +66,30 @@ export const ChartPie: React.FC<PieChartProps> = ({
     outerRadius,
     percent,
   }: any) => {
-    const RADIAN = Math.PI / 180;
+    const STRAIGHT_ANGLE = 180;
+    const K = 0.5;
+    const SHIFT = 15;
+    const MAX_NUMBER = 9;
+    const FONT_WEIGHT = 500;
+    const RADIAN = Math.PI / STRAIGHT_ANGLE;
     const sin = Math.sin(-RADIAN * midAngle);
     const cos = Math.cos(-RADIAN * midAngle);
-    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+    const radius = innerRadius + (outerRadius - innerRadius) * K;
     const x = cx + radius * cos;
     const y = cy + radius * sin;
-    const sx = cx + (outerRadius + 15) * cos;
-    const sy = cy + (outerRadius + 15) * sin;
+    const sx = cx + (outerRadius + SHIFT) * cos;
+    const sy = cy + (outerRadius + SHIFT) * sin;
 
     const updatedPercent = updatePercent(percent);
 
     return (
       <text
-        x={updatedPercent >= 9 ? x : sx}
-        y={updatedPercent >= 9 ? y : sy}
+        x={updatedPercent >= MAX_NUMBER ? x : sx}
+        y={updatedPercent >= MAX_NUMBER ? y : sy}
         fill="white"
         textAnchor="middle"
         dominantBaseline="central"
-        style={{ fontWeight: 500, fontSize: '12px' }}
+        style={{ fontWeight: FONT_WEIGHT, fontSize: '12px' }}
       >
         {`${updatedPercent}%`}
       </text>

diff --git a/src/components/leaderboard/amount/amount.tsx b/src/components/leaderboard/amount/amount.tsx
@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import numeral from 'numeral';
 import clsx from 'clsx';
 import { TotalMetrics } from 'src/api';
+import { ONE_HUNDRED } from 'src/constants';
 
 import { SvgIcon } from '../../svgIcon';
 
@@ -30,7 +31,7 @@ export const Amount: FC<AmountProps> = ({
         })}
       >
         <SvgIcon icon="stats" className={styles.icon} />
-        {Math.round(growth * 100)}%
+        {Math.round(growth * ONE_HUNDRED)}%
       </div>
     ) : null}
   </div>

diff --git a/src/components/widget-info/widget-info.tsx b/src/components/widget-info/widget-info.tsx
@@ -1,6 +1,8 @@
 import React, { FC } from 'react';
 import clsx from 'clsx';
 import numeral from 'numeral';
+import { ONE_HUNDRED } from 'src/constants';
+
 import { IconName, SvgIcon } from '../svgIcon';
 
 import styles from './widget-info.module.scss';
@@ -38,7 +40,7 @@ export const WidgetInfo: FC<WidgetInfoProps> = ({
           })}
         >
           <SvgIcon icon="stats" className={styles.icon} />
-          {Math.round(percentages * 100)}%
+          {Math.round(percentages * ONE_HUNDRED)}%
         </div>
       ) : null}
     </div>

diff --git a/src/constants/dates.ts b/src/constants/dates.ts
@@ -0,0 +1,7 @@
+export const ONE_WEEK = 1;
+export const ONE_MONTH = 1;
+export const THREE_MONTHS = 1;
+export const SIX_MONTHS = 6;
+export const ONE_YEAR = 1;
+
+export const FIRST_DATE = 0;
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,3 +1,5 @@
 export * from './charts';
 export * from './routes';
 export * from './local-storage';
+export * from './dates';
+export * from './numbers';
diff --git a/src/constants/numbers.ts b/src/constants/numbers.ts
@@ -0,0 +1,4 @@
+export const ONE_HUNDRED = 1000;
+export const ONE_THOUSAND = 1000;
+export const ONE_MILLION = 1000000;
+export const ONE_BILLION = 1000000000;
diff --git a/src/hooks/use-periods.ts b/src/hooks/use-periods.ts
@@ -7,8 +7,8 @@ import {
   subWeeks,
   subYears,
 } from 'date-fns';
+import { Period, SIX_MONTHS, THREE_MONTHS } from 'src/constants';
 
-import { Period } from 'src/constants';
 import { MetricItem, FlowMetricsItem } from 'src/api';
 
 export const usePeriods = (metrics?: (MetricItem | FlowMetricsItem)[]) =>
@@ -30,15 +30,15 @@ export const usePeriods = (metrics?: (MetricItem | FlowMetricsItem)[]) =>
     }
 
     if (
-      isBefore(startDate, subMonths(endDate, 6)) ||
-      isEqual(startDate, subMonths(endDate, 6))
+      isBefore(startDate, subMonths(endDate, SIX_MONTHS)) ||
+      isEqual(startDate, subMonths(endDate, SIX_MONTHS))
     ) {
       periods.unshift('6m');
     }
 
     if (
-      isBefore(startDate, subMonths(endDate, 3)) ||
-      isEqual(startDate, subMonths(endDate, 3))
+      isBefore(startDate, subMonths(endDate, THREE_MONTHS)) ||
+      isEqual(startDate, subMonths(endDate, THREE_MONTHS))
     ) {
       periods.unshift('3m');
     }

diff --git a/src/hooks/use-prepare-leaderboard.ts b/src/hooks/use-prepare-leaderboard.ts
@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 
+import { ONE_HUNDRED } from 'src/constants';
 import { LeaderboardItem, Proposals } from 'src/api';
 import { LeaderboardDataItem } from 'src/components/leaderboard/leaderboard';
 import { TitleCellProps } from '../components/leaderboard/title-cell';
@@ -20,7 +21,7 @@ const prepareTitle = (dao: string): TitleCellProps => {
 };
 
 function percentage(partialValue: number, totalValue: number): number {
-  return parseInt(((100 * partialValue) / totalValue).toFixed(0), 10);
+  return parseInt(((ONE_HUNDRED * partialValue) / totalValue).toFixed(0), 10);
 }
 
 function prepareProposalsForChart(proposals?: Proposals): Proposals {

diff --git a/src/utils/build-periods.ts b/src/utils/build-periods.ts
@@ -6,7 +6,14 @@ import {
   subMonths,
   subWeeks,
 } from 'date-fns';
-import { Period } from 'src/constants';
+import {
+  Period,
+  ONE_MONTH,
+  SIX_MONTHS,
+  THREE_MONTHS,
+  ONE_WEEK,
+  ONE_YEAR,
+} from 'src/constants';
 import { ChartDataItem } from '../components/charts/types';
 
 export const buildPeriods = (metrics?: ChartDataItem[]) => {
@@ -20,36 +27,36 @@ export const buildPeriods = (metrics?: ChartDataItem[]) => {
   const endDate = startOfDay(metrics[metrics.length - 1].timestamp);
 
   if (
-    isBefore(startDate, subYears(endDate, 1)) ||
-    isEqual(startDate, subYears(endDate, 1))
+    isBefore(startDate, subYears(endDate, ONE_YEAR)) ||
+    isEqual(startDate, subYears(endDate, ONE_YEAR))
   ) {
     periods.unshift('1y');
   }
 
   if (
-    isBefore(startDate, subMonths(endDate, 6)) ||
-    isEqual(startDate, subMonths(endDate, 6))
+    isBefore(startDate, subMonths(endDate, SIX_MONTHS)) ||
+    isEqual(startDate, subMonths(endDate, SIX_MONTHS))
   ) {
     periods.unshift('6m');
   }
 
   if (
-    isBefore(startDate, subMonths(endDate, 3)) ||
-    isEqual(startDate, subMonths(endDate, 3))
+    isBefore(startDate, subMonths(endDate, THREE_MONTHS)) ||
+    isEqual(startDate, subMonths(endDate, THREE_MONTHS))
   ) {
     periods.unshift('3m');
   }
 
   if (
-    isBefore(startDate, subMonths(endDate, 1)) ||
-    isEqual(startDate, subMonths(endDate, 1))
+    isBefore(startDate, subMonths(endDate, ONE_MONTH)) ||
+    isEqual(startDate, subMonths(endDate, ONE_MONTH))
   ) {
     periods.unshift('1m');
   }
 
   if (
-    isBefore(startDate, subWeeks(endDate, 1)) ||
-    isEqual(startDate, subWeeks(endDate, 1))
+    isBefore(startDate, subWeeks(endDate, ONE_WEEK)) ||
+    isEqual(startDate, subWeeks(endDate, ONE_WEEK))
   ) {
     periods.unshift('7d');
   }