chore(deps): update dependency eslint-plugin-react to v7.33.0 (#3205)

* chore(deps): update dependency eslint-plugin-react to v7.33.0

* chore: have linter try to autofix and commit linter warnings

* Linter fixes

* chore: tweak how js formatting is run within actions

* fix: type mismatch

* Prettified Code!

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Co-authored-by: Owncast <owncast@owncast.online>
Co-authored-by: gabek <gabek@users.noreply.github.com>

.github/workflows/javascript-formatting.yml

@@ -1,4 +1,4 @@
-name: Lint
+name: Javascript Formatting
 
 # This action works with pull requests and pushes
 on:
@@ -10,39 +10,8 @@ on:
       - web/**
 
 jobs:
-  prettier:
-    name: Javascript prettier
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./web
-
-    if: ${{ github.actor != 'dependabot[bot]' }}
-    steps:
-      - id: skip_check
-        uses: fkirc/skip-duplicate-actions@v5
-        with:
-          concurrent_skipping: 'same_content_newer'
-
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          # Make sure the actual branch is checked out when running on pull requests
-          ref: ${{ github.event.pull_request.head.ref }}
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
-          fetch-depth: 0
-
-      - name: Prettify code
-        uses: creyD/prettier_action@v4.3
-        with:
-          # This part is also where you can pass other options, for example:
-          prettier_options: --write **/*.{js,ts,jsx,tsx,css,md}
-          only_changed: true
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  linter:
-    name: Javascript linter
+  formatting:
+    name: Javascript code formatting
     runs-on: ubuntu-latest
     defaults:
       run:
@@ -62,11 +31,38 @@ jobs:
           repository: ${{ github.event.pull_request.head.repo.full_name }}
           fetch-depth: 0
 
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v37
+        with:
+          files_yaml: |
+            src:
+              - '**.js'
+              - '**.ts'
+              - '**.tsx'
+              - '**.jsx'
+              - '**.css'
+              - '**.md'
+
       - name: Install Dependencies
         run: npm install
 
       - name: Lint
-        run: npm run lint
+        if: steps.changed-files.outputs.any_changed == 'true'
+        run: npx eslint --fix ${{ steps.changed-files.outputs.all_changed_files }}
+
+      - name: Prettier
+        if: steps.changed-files.outputs.any_changed == 'true'
+        run: npx prettier --write ${{ steps.changed-files.outputs.all_changed_files }}
+
+      - name: Commit changes
+        if: steps.changed-files.outputs.any_changed == 'true'
+        uses: EndBug/add-and-commit@v9
+        with:
+          author_name: Owncast
+          author_email: owncast@owncast.online
+          message: 'Javascript formatting autofixes'
+          pull: '--rebase --autostash'
 
   unused-code:
     name: Test for unused code

web/components/action-buttons/ActionButton/ActionButton.tsx

@@ -25,7 +25,7 @@ export const ActionButton: FC<ActionButtonProps> = ({
       style={{ backgroundColor: color }}
       title={description || title}
     >
-      {icon && <img src={icon} className={`${styles.icon}`} alt={description} />}
+      {icon && <img src={icon} className={styles.icon} alt={description} />}
       {title}
     </Button>
   );

web/components/action-buttons/ActionButtonRow/ActionButtonRow.tsx

@@ -6,5 +6,5 @@ export type ActionButtonRowProps = {
 };
 
 export const ActionButtonRow: FC<ActionButtonRowProps> = ({ children }) => (
-  <div className={`${styles.row}`}>{children}</div>
+  <div className={styles.row}>{children}</div>
 );

web/components/action-buttons/NotifyButton.tsx

@@ -17,7 +17,7 @@ export type NotifyButtonProps = {
 export const NotifyButton: FC<NotifyButtonProps> = ({ onClick, text }) => (
   <Button
     type="primary"
-    className={`${styles.button}`}
+    className={styles.button}
     icon={<BellFilled />}
     onClick={onClick}
     id="notify-button"

web/components/chat/ChatModerationDetailsModal/ChatModerationDetailsModal.tsx

@@ -75,7 +75,7 @@ const ConnectedClient = ({ client }: { client: Client }) => {
 
   return (
     <div>
-      <ValueRow label="Messages Sent" value={`${messageCount}`} />
+      <ValueRow label="Messages Sent" value={messageCount.toString()} />
       {geo !== 'N/A' && <ValueRow label="Geo" value={geo} />}
       <ValueRow label="Connected At" value={connectedAtDate} />
     </div>
@@ -162,9 +162,7 @@ export const ChatModerationDetailsModal: FC<ChatModerationDetailsModalProps> = (
     >
       <Spin spinning={loading}>
         <UserColorBlock color={displayColor} />
-        {scopes?.map(scope => (
-          <Tag key={scope}>{scope}</Tag>
-        ))}
+        {scopes?.map(scope => <Tag key={scope}>{scope}</Tag>)}
         {authenticated && <Tag>Authenticated</Tag>}
         {isBot && <Tag>Bot</Tag>}
         <ValueRow label="Messages Sent Across Clients" value={totalMessagesSent.toString()} />

web/package-lock.json

@@ -22,7 +22,7 @@
 				"@xstate/react": "3.2.2",
 				"antd": "4.24.12",
 				"autoprefixer": "^10.4.14",
-				"chart.js": "^4.3.2",
+				"chart.js": "^4.2.0",
 				"classnames": "2.3.2",
 				"date-fns": "^2.29.3",
 				"graphemer": "^1.4.0",
@@ -95,7 +95,7 @@
 				"eslint-plugin-import": "^2.27.5",
 				"eslint-plugin-jsx-a11y": "6.7.1",
 				"eslint-plugin-prettier": "4.2.1",
-				"eslint-plugin-react": "7.32.2",
+				"eslint-plugin-react": "7.33.0",
 				"eslint-plugin-react-hooks": "4.6.0",
 				"eslint-plugin-storybook": "0.6.13",
 				"handlebars": "^4.7.7",
@@ -21415,9 +21415,9 @@
 			}
 		},
 		"node_modules/eslint-plugin-react": {
-			"version": "7.32.2",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
-			"integrity": "sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==",
+			"version": "7.33.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.33.0.tgz",
+			"integrity": "sha512-qewL/8P34WkY8jAqdQxsiL82pDUeT7nhs8IsuXgfgnsEloKCT4miAV9N9kGtx7/KM9NH/NCGUE7Edt9iGxLXFw==",
 			"dev": true,
 			"dependencies": {
 				"array-includes": "^3.1.6",
@@ -21433,7 +21433,7 @@
 				"object.values": "^1.1.6",
 				"prop-types": "^15.8.1",
 				"resolve": "^2.0.0-next.4",
-				"semver": "^6.3.0",
+				"semver": "^6.3.1",
 				"string.prototype.matchall": "^4.0.8"
 			},
 			"engines": {

web/package.json

@@ -6,11 +6,12 @@
 		"dev": "next dev",
 		"build": "next build && next export",
 		"start": "next start",
-		"lint": "eslint --ext .js,.ts,.tsx types/ pages/ components/ stories/",
+		"lint": "eslint --fix --ext .js,.ts,.tsx types/ pages/ components/ stories/",
 		"storybook": "start-storybook -p 6006",
 		"build-storybook": "build-storybook",
 		"build-styles": "cd ./style-definitions && style-dictionary build && ./build.sh && cd -",
-		"test": "jest"
+		"test": "jest",
+		"format": "prettier --write  **/*.{js,ts,jsx,tsx,css,md}"
 	},
 	"dependencies": {
 		"@ant-design/icons": "4.8.0",
@@ -100,7 +101,7 @@
 		"eslint-plugin-import": "^2.27.5",
 		"eslint-plugin-jsx-a11y": "6.7.1",
 		"eslint-plugin-prettier": "4.2.1",
-		"eslint-plugin-react": "7.32.2",
+		"eslint-plugin-react": "7.33.0",
 		"eslint-plugin-react-hooks": "4.6.0",
 		"eslint-plugin-storybook": "0.6.13",
 		"handlebars": "^4.7.7",
@@ -128,4 +129,4 @@
 		"ts-jest": "^29.1.0",
 		"typescript": "4.9.5"
 	}
-}
+}

web/pages/admin/hardware-info.tsx

@@ -101,7 +101,7 @@ export default function HardwareInfo() {
           <Col>
             <StatisticItem
               title={series[0].name}
-              value={`${Math.round(currentCPUUsage) || 0}`}
+              value={Math.round(currentCPUUsage) || 0}
               prefix={<LaptopOutlined style={{ color: series[0].color }} />}
               color={series[0].color}
               progress
@@ -111,7 +111,7 @@ export default function HardwareInfo() {
           <Col>
             <StatisticItem
               title={series[1].name}
-              value={`${Math.round(currentRamUsage) || 0}`}
+              value={Math.round(currentRamUsage) || 0}
               prefix={<BulbOutlined style={{ color: series[1].color }} />}
               color={series[1].color}
               progress
@@ -121,7 +121,7 @@ export default function HardwareInfo() {
           <Col>
             <StatisticItem
               title={series[2].name}
-              value={`${Math.round(currentDiskUsage) || 0}`}
+              value={Math.round(currentDiskUsage) || 0}
               prefix={<SaveOutlined style={{ color: series[2].color }} />}
               color={series[2].color}
               progress

web/pages/admin/stream-health.tsx

@@ -292,7 +292,7 @@ const StreamHealth = () => {
               <div style={statStyle}>
                 <Statistic
                   title="Viewer Playback Speed"
-                  value={`${currentSpeed}`}
+                  value={currentSpeed.toString()}
                   prefix={<WifiOutlined style={{ marginRight: '5px' }} />}
                   precision={0}
                   suffix="kbps"
@@ -306,7 +306,7 @@ const StreamHealth = () => {
                 <div style={statStyle}>
                   <Statistic
                     title="Viewer Latency"
-                    value={`${latencyStat}`}
+                    value={latencyStat}
                     prefix={<ClockCircleOutlined style={{ marginRight: '5px' }} />}
                     precision={0}
                     suffix="seconds"
@@ -320,7 +320,7 @@ const StreamHealth = () => {
               <div style={statStyle}>
                 <Statistic
                   title="Recent Playback Errors"
-                  value={`${recentErrorCount || 0}`}
+                  value={recentErrorCount || 0}
                   valueStyle={{ color: errorStatColor }}
                   prefix={<WarningOutlined style={{ marginRight: '5px' }} />}
                   suffix=""