Enforce more linting rules (#435)

* chore: add plugin for disabling lodash/chain * style: fix chain import * chore: enforce lodash import syntax * refactor: tidy up * chore: restrict lodash chain import * chore: disallow unnecessary curly braces * chore: fix lint
project-slippi · Apr 15, 2024 · 2d92cc0 · 2d92cc0
1 parent 916ce4e
commit 2d92cc0
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 27 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -7,7 +7,7 @@ module.exports = {
     tsconfigRootDir: __dirname,
     createDefaultProgram: true,
   },
-  plugins: ["simple-import-sort", "strict-booleans", "react-hooks", "prettier", "@stylexjs"],
+  plugins: ["simple-import-sort", "strict-booleans", "react-hooks", "prettier", "@stylexjs", "lodash"],
   extends: [
     "plugin:react/recommended",
     "eslint:recommended",
@@ -101,6 +101,10 @@ module.exports = {
     "react/jsx-boolean-value": ["error", "always"],
     "react/no-unstable-nested-components": "error",
     "@stylexjs/valid-styles": "error",
+    "lodash/chaining": "error",
+    "lodash/import-scope": [2, "method"],
+    "no-restricted-imports": ["error", "lodash/chain"],
+    "react/jsx-curly-brace-presence": ["error", "never"]
   },
   ignorePatterns: ["/*.js", "node_modules"],
 };
diff --git a/package.json b/package.json
@@ -111,6 +111,7 @@
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jest": "^25.3.2",
     "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.28.0",

diff --git a/src/renderer/containers/login_form.tsx b/src/renderer/containers/login_form.tsx
@@ -153,7 +153,7 @@ export const LoginForm = ({ className, onSuccess, disableAutoFocus }: LoginFormP
               label="Confirm password"
               value={confirmPassword}
               onChange={(e) => setConfirmPassword(e.target.value)}
-              type={"password"}
+              type="password"
               fullWidth={true}
               required={true}
             />

diff --git a/src/renderer/pages/home/sidebar/ranked_status.tsx b/src/renderer/pages/home/sidebar/ranked_status.tsx
@@ -2,7 +2,6 @@ import { Button, Card, Typography } from "@mui/material";
 import * as stylex from "@stylexjs/stylex";
 import type { Duration } from "date-fns";
 import { formatDuration, intervalToDuration } from "date-fns";
-import { chain } from "lodash";
 import React from "react";
 
 import { ExternalLink } from "@/components/external_link";
@@ -12,6 +11,7 @@ import { ReactComponent as RankedDayActiveIcon } from "@/styles/images/ranked_da
 import { ReactComponent as RankedDayInactiveIcon } from "@/styles/images/ranked_day_inactive.svg";
 import { colors } from "@/styles/tokens.stylex";
 
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
 const FREE_ACCESS_START_AT = new Date(Date.UTC(2024, 3, 15, 14, 0, 0)); // Note: Month is 0-indexed, so 3 is April
 const FREE_ACCESS_OFFSET_FROM = new Date(Date.UTC(2024, 3, 15, 8, 0, 0)); // Note: Month is 0-indexed, so 3 is April
 
@@ -48,29 +48,31 @@ const styles = stylex.create({
 });
 
 const getFullAccessTimes = (now: Date): { isActive: boolean; nextStartTime: Date; nextEndTime: Date } => {
-  const msPerDay = 24 * 60 * 60 * 1000;
   const startTime = FREE_ACCESS_START_AT;
   const offsetTime = FREE_ACCESS_OFFSET_FROM;
   if (now < startTime) {
-    return { isActive: false, nextStartTime: startTime, nextEndTime: new Date(offsetTime.getTime() + msPerDay) };
+    return { isActive: false, nextStartTime: startTime, nextEndTime: new Date(offsetTime.getTime() + MS_PER_DAY) };
   }
 
-  const daysSinceStart = Math.floor((now.getTime() - offsetTime.getTime()) / msPerDay);
+  const daysSinceStart = Math.floor((now.getTime() - offsetTime.getTime()) / MS_PER_DAY);
   let daysUntilNextRankedDay = 4 - (daysSinceStart % 4);
   if (daysUntilNextRankedDay === 4) {
     daysUntilNextRankedDay = 0;
   }
-  const nextRankedDayTime = new Date(offsetTime.getTime() + (daysSinceStart + daysUntilNextRankedDay) * msPerDay);
+  const nextRankedDayTime = new Date(offsetTime.getTime() + (daysSinceStart + daysUntilNextRankedDay) * MS_PER_DAY);
 
   return {
     isActive: daysUntilNextRankedDay === 0,
     nextStartTime: nextRankedDayTime,
-    nextEndTime: new Date(nextRankedDayTime.getTime() + msPerDay),
+    nextEndTime: new Date(nextRankedDayTime.getTime() + MS_PER_DAY),
   };
 };
 
 const convertCodeToSlug = (code: string | undefined) => {
-  return chain(code).toLower().replace("#", "-").value();
+  if (code) {
+    return code.toLowerCase().replace("#", "-");
+  }
+  return "";
 };
 
 const InternalRankedStatus = ({
@@ -89,22 +91,16 @@ const InternalRankedStatus = ({
     <div {...stylex.props(styles.container)}>
       <Card {...stylex.props(styles.card)}>
         <div {...stylex.props(styles.centerStack)}>
-          <Typography
-            variant="h6"
-            color={colors.purpleLight}
-            fontSize={"14px"}
-            fontWeight={"semibold"}
-            marginBottom={"8px"}
-          >
+          <Typography variant="h6" color={colors.purpleLight} fontSize="14px" fontWeight="semibold" marginBottom="8px">
             RANKED DAY
           </Typography>
           {isFullAccess ? <RankedDayActiveIcon width={40} /> : <RankedDayInactiveIcon width={40} />}
           <Typography
             {...stylex.props(styles.stroke)}
             variant="body1"
             color={isFullAccess ? colors.greenDark : colors.textDim}
-            fontSize={"20px"}
-            fontWeight={"medium"}
+            fontSize="20px"
+            fontWeight="medium"
           >
             {isFullAccess ? "ACTIVE" : "STARTING SOON"}
           </Typography>
@@ -114,16 +110,17 @@ const InternalRankedStatus = ({
           <Typography
             variant="h6"
             color={colors.purpleLight}
-            fontSize={"14px"}
-            fontWeight={"semibold"}
-            marginBottom={"4px"}
+            className="14px"
+            fontSize="14px"
+            fontWeight="semibold"
+            marginBottom="4px"
           >
             {isFullAccess ? "ENDING IN" : "STARTING IN"}
           </Typography>
-          <Typography fontWeight="medium" fontSize={"20px"}>
+          <Typography fontWeight="medium" fontSize="20px">
             {countdown}
           </Typography>
-          <Typography fontSize={"12px"} color={colors.textDim} marginTop={"-4px"}>
+          <Typography fontSize="12px" color={colors.textDim} marginTop="-4px">
             {nextTime.toLocaleString(undefined, {
               year: "numeric",
               month: "numeric",
@@ -134,7 +131,7 @@ const InternalRankedStatus = ({
             })}
           </Typography>
         </div>
-        <Typography fontSize={"11px"} color={colors.textDim} marginTop={"12px"}>
+        <Typography fontSize="11px" color={colors.textDim} marginTop="12px">
           {isFullAccess
             ? "Ranked play is currently available for everyone. Try it now! Available once every 4 days."
             : "Once every 4 days, ranked play is available to all users including non-subs. Check back soon!"}

diff --git a/src/renderer/pages/replays/replay_file_stats/replay_file_stats.tsx b/src/renderer/pages/replays/replay_file_stats/replay_file_stats.tsx
@@ -147,7 +147,7 @@ export const ReplayFileStats = (props: ReplayFileStatsProps) => {
       />
       <Content>
         {!file || loading ? (
-          <LoadingScreen message={"Crunching numbers..."} />
+          <LoadingScreen message="Crunching numbers..." />
         ) : game.mode == GameMode.TARGET_TEST ? (
           <TargetTestProfile file={file} stats={stadiumStats}></TargetTestProfile>
         ) : game.mode == GameMode.HOME_RUN_CONTEST ? (

diff --git a/src/renderer/pages/settings/chat_settings/chat_messages_input.tsx b/src/renderer/pages/settings/chat_settings/chat_messages_input.tsx
@@ -38,7 +38,7 @@ const genChatMessageItem = (
   let adornment = null;
   if (isDefault) {
     adornment = (
-      <Typography fontSize="12px" color={"#FFFFFFB0"} marginRight={"6px"} padding={"4px 8px"}>
+      <Typography fontSize="12px" color="#FFFFFFB0" marginRight="6px" padding="4px 8px">
         Default
       </Typography>
     );
@@ -272,7 +272,7 @@ const ChatMessagesSection = ({
         margin-bottom: 32px;
       `}
     >
-      <Typography fontSize={15} color={"#FFFFFFAA"} marginBottom={"5px"}>
+      <Typography fontSize={15} color="#FFFFFFAA" marginBottom="5px">
         Chat Group: {capitalize(direction)}
       </Typography>
       <ChatMessageSelector

diff --git a/yarn.lock b/yarn.lock