⬆️ Bump Next, React and FontAwesome

- Next 12 -> 13
- React Dom 17 -> 18
- React FontAwesome 0.1.17 -> 0.2.2
- FontAwesome 6.0.0 -> 6.7.1
- React Bootstrap 2.1.2 -> 2.10.6
- Bootstrap 5.1.3 -> 5.3.3

package.json

@@ -4,25 +4,25 @@
   "version": "2024.12.08",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.3.0",
-    "@fortawesome/free-brands-svg-icons": "^6.0.0",
-    "@fortawesome/free-regular-svg-icons": "^6.0.0",
-    "@fortawesome/free-solid-svg-icons": "^6.0.0",
-    "@fortawesome/react-fontawesome": "^0.1.17",
+    "@fortawesome/fontawesome-svg-core": "^6.7.1",
+    "@fortawesome/free-brands-svg-icons": "^6.7.1",
+    "@fortawesome/free-regular-svg-icons": "^6.7.1",
+    "@fortawesome/free-solid-svg-icons": "^6.7.1",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.4.0",
     "@types/node": "^22.10.1",
     "@types/react": "^18",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^18",
     "assert": "^2.0.0",
     "axios": "^0.26.0",
-    "bootstrap": "5.1.3",
+    "bootstrap": "^5.3.3",
     "edilkamin": "^1.5.0",
-    "next": "^12",
+    "next": "13",
     "react": "^18",
-    "react-bootstrap": "^2.1.2",
+    "react-bootstrap": "^2.10.6",
     "react-dom": "^18",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
@@ -66,7 +66,7 @@
     "@typescript-eslint/eslint-plugin": "^8.17.0",
     "@typescript-eslint/parser": "^8.17.0",
     "eslint": "^9.16.0",
-    "eslint-config-next": "^15.0.4",
+    "eslint-config-next": "13",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",

src/components/Login.tsx

@@ -56,7 +56,7 @@ const Login = (): JSX.Element => {
         aria-label="Password"
         onChange={onPasswordChange}
       />
-      <Button type="submit" onClick={onLogin}>
+      <Button variant="primary" type="submit" onClick={onLogin}>
         Login
       </Button>
     </Form>

src/components/Logout.tsx

@@ -8,7 +8,7 @@ const Logout = (): JSX.Element => {
   const onLogoutClick = (): void => logout();
 
   return (
-    <Button type="submit" onClick={onLogoutClick}>
+    <Button variant="primary" type="submit" onClick={onLogoutClick}>
       Logout
     </Button>
   );

src/components/PowerToggle.tsx

@@ -25,6 +25,7 @@ const PowerToggle = ({
   >
     {togglePowerProps.map(({ value, label, icon }) => (
       <ToggleButton
+        variant="primary"
         id={`set-power-${value}`}
         key={value}
         value={value}

src/components/TemperatureAdjuster.tsx

@@ -11,7 +11,10 @@ const TemperatureAdjuster = ({
   loading: boolean;
 }) => (
   <InputGroup size="lg">
-    <Button onClick={() => onTemperatureChange(currentTemperature - 0.5)}>
+    <Button
+      variant="primary"
+      onClick={() => onTemperatureChange(currentTemperature - 0.5)}
+    >
       <FontAwesomeIcon icon={"minus"} />
     </Button>
     <FormControl
@@ -20,7 +23,10 @@ const TemperatureAdjuster = ({
       onChange={(e) => onTemperatureChange(Number(e.target.value))}
       disabled={loading}
     />
-    <Button onClick={() => onTemperatureChange(currentTemperature + 0.5)}>
+    <Button
+      variant="primary"
+      onClick={() => onTemperatureChange(currentTemperature + 0.5)}
+    >
       <FontAwesomeIcon icon={"plus"} />
     </Button>
   </InputGroup>

src/pages/_app.tsx

@@ -1,6 +1,5 @@
 import "bootstrap/dist/css/bootstrap.min.css";
 
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { fab } from "@fortawesome/free-brands-svg-icons";
 import { far } from "@fortawesome/free-regular-svg-icons";
 import { fas } from "@fortawesome/free-solid-svg-icons";
@@ -14,6 +13,10 @@ import Header from "../components/Header";
 import { ErrorContextProvider } from "../context/error";
 import { TokenContextProvider } from "../context/token";
 
+// workaround SSR issue, refs:
+// https://github.com/FortAwesome/Font-Awesome/issues/19348
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const { library } = require("@fortawesome/fontawesome-svg-core");
 library.add(fab, far, fas);
 
 const MyApp = ({ Component, pageProps }: AppProps): React.ReactElement => (

src/pages/fireplace/[mac].tsx

@@ -17,7 +17,7 @@ const Fireplace: NextPage = () => {
   const mac = router.query.mac as string;
   const [info, setInfo] = useState<DeviceInfoType | null>(null);
   const [powerState, setPowerState] = useState(false);
-  const [temperature, setTemperature] = useState<number>(20);
+  const [temperature, setTemperature] = useState<number>(0);
   const [loading, setLoading] = useState(true);
   const { token } = useContext(TokenContext);
   const { addError } = useContext(ErrorContext);