Bumpup

.github/workflows/node.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       matrix:
         node-version:
-          - 18.x
+          - 22.x
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}

.node-version

@@ -1 +1 @@
-16.16.0
+22.13.1

.tool-versions

@@ -1 +1 @@
-nodejs 18.12.1
+nodejs 22.13.1

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

package.json

@@ -3,7 +3,7 @@
   "version": "0.9.0",
   "license": "MIT",
   "engines": {
-    "node": "18.x"
+    "node": "22.x"
   },
   "scripts": {
     "dev": "next dev",
@@ -18,16 +18,16 @@
     "@mui/material": "^5.16.7",
     "@mui/styles": "^6.1.8",
     "firebase": "^11.2.0",
-    "next": "^12.3.1",
-    "react": "^17.0.2",
+    "next": "^14.2.21",
+    "react": "^18.2.0",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/node": "^20.4.8",
+    "@types/node": "^22.13.1",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^18.3.0",
-    "eslint": "8.57.1",
-    "eslint-config-next": "15.0.3",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.21",
     "firebase-tools": "^13.29.1",
     "typescript": "^5.7.3"
   },

src/components/widgets/TimeWidget/widget.tsx

@@ -6,7 +6,7 @@ interface TimeWidgetState {
 };
 
 class TimeWidget extends Component<TimeWidgetProps, TimeWidgetState> {
-  interval: NodeJS.Timer | null;
+  interval: number | null;
 
   constructor(props: TimeWidgetProps) {
     super(props)
@@ -26,12 +26,12 @@ class TimeWidget extends Component<TimeWidgetProps, TimeWidgetState> {
       position: 'absolute',
       bottom: 0,
       right: 0,
-      width: `${size*9.5}px`,
-      height: `${size*9.5}px`,
+      width: `${size * 9.5}px`,
+      height: `${size * 9.5}px`,
       borderRadius: '50%',
       color: 'white',
       background: 'rgba(0, 128, 128, 0.75)',
-      transform: `translate(${size*1.25}px, ${size*2.4}px) rotate(-20deg)`,
+      transform: `translate(${size * 1.25}px, ${size * 2.4}px) rotate(-20deg)`,
       fontSize: `${size}px`,
       fontWeight: 'bold',
       zIndex: zIndex,
@@ -72,11 +72,12 @@ class TimeWidget extends Component<TimeWidgetProps, TimeWidgetState> {
   }
 
   componentDidMount() {
-    this.interval = setInterval(this.tick.bind(this), 500)
+    this.interval = window.setInterval(this.tick.bind(this), 500);
   }
 
   componentWillUnmpount() {
-    clearInterval(this.interval)
+    if (this.interval)
+      clearInterval(this.interval)
   }
 }