Make the build not fail

.eslintrc.js

@@ -1,5 +1,12 @@
 module.exports = {
-  extends: ["eslint:recommended", "plugin:react-hooks/recommended"],
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  extends: [
+    "eslint:recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended",
+  ],
   rules: {
     maxClassesPerFile: 0,
     maxLineLength: 0,

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Bastian Meissner
+Copyright (c) 2022 Bastian Meissner
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -3,30 +3,29 @@
   "version": "1.0.0",
   "license": "MIT",
   "repository": "git@github.com:phntxx/dashboard",
-  "contributors": [
-    "phntxx <hello@phntxx.com>"
-  ],
+  "contributors": ["phntxx <hello@phntxx.com>"],
   "private": false,
   "dependencies": {
-    "@types/node": "^14.14.37",
-    "@types/react-dom": "^17.0.3",
+    "@types/node": "^17.0.23",
+    "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.9",
     "browserslist": "^4.16.6",
     "http-server": "^14.1.0",
     "npm-run-all": "^4.1.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "^5.0.0",
     "styled-components": "^5.2.1",
     "typescript": "^4.2.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^13.0.6",
-    "@types/jest": "^26.0.22",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^14.0.4",
+    "@types/jest": "^27.4.1",
+    "@typescript-eslint/parser": "^5.18.0",
     "codecov": "^3.8.2",
-    "eslint": "^7.28.0",
+    "eslint": "^8.13.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "prettier": "^2.3.1"
   },
@@ -47,11 +46,7 @@
     "extends": "react-app"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

src/app.tsx

@@ -40,7 +40,7 @@ const App = () => {
   } = useFetch();
 
   const theme = getTheme();
-  let isDark = useMediaQuery("(prefers-color-scheme: dark)");
+  const isDark = useMediaQuery("(prefers-color-scheme: dark)");
   setScheme(isDark ? "dark-theme" : "light-theme");
 
   return (

src/components/greeter.tsx

@@ -55,7 +55,7 @@ export const isBetween = (a: number, b: number, c: number): boolean =>
  * @returns {string} a greeting
  */
 export const getGreeting = (greetings: Array<IGreetingProps>): string => {
-  let hours = Math.floor(new Date().getHours());
+  const hours = Math.floor(new Date().getHours());
   let result = "";
 
   greetings.forEach((greeting) => {
@@ -95,14 +95,14 @@ export const getDateString = (
   months: Array<string>,
   format: string,
 ) => {
-  let currentDate = new Date();
+  const currentDate = new Date();
 
-  let weekday = weekdays[currentDate.getDay()];
-  let day = currentDate.getDate();
-  let month = months[currentDate.getMonth()];
-  let extension = getExtension(day);
-  let year = currentDate.getFullYear();
-  let isodate = currentDate.toISOString().slice(0, 10);
+  const weekday = weekdays[currentDate.getDay()];
+  const day = currentDate.getDate();
+  const month = months[currentDate.getMonth()];
+  const extension = getExtension(day);
+  const year = currentDate.getFullYear();
+  const isodate = currentDate.toISOString().slice(0, 10);
 
   return format
     .replace("%wd", weekday)

src/components/searchBar.tsx

@@ -56,14 +56,14 @@ export const handleQueryWithProvider = (
   search: ISearchProps,
   query: string,
 ) => {
-  let queryArray: Array<string> = query.split(" ");
-  let prefix: string = queryArray[0];
+  const queryArray: Array<string> = query.split(" ");
+  const prefix: string = queryArray[0];
 
   queryArray.shift();
 
-  let searchQuery: string = queryArray.join(" ");
+  const searchQuery: string = queryArray.join(" ");
 
-  let providerFound: boolean = false;
+  let providerFound = false;
   if (search.providers) {
     search.providers.forEach((provider: ISearchProviderProps) => {
       if (provider.prefix === prefix) {
@@ -81,15 +81,15 @@ export const handleQueryWithProvider = (
  * @param {ISearchBarProps} search - The search providers for the search bar to use
  */
 const SearchBar = ({ search }: ISearchBarProps) => {
-  let [input, setInput] = useState<string>("");
-  let [buttonsHidden, setButtonsHidden] = useState<boolean>(true);
+  const [input, setInput] = useState<string>("");
+  const [buttonsHidden, setButtonsHidden] = useState<boolean>(true);
 
   useEffect(() => setButtonsHidden(input === ""), [input]);
 
   if (search === undefined) return <></>;
 
   const handleSearchQuery = (e: React.FormEvent) => {
-    var query: string = input || "";
+    const query: string = input || "";
 
     if (query.split(" ")[0].includes("/")) {
       handleQueryWithProvider(search, query);

src/lib/useFetch.tsx

@@ -49,7 +49,7 @@ interface IFetchProps {
  * Fetches app, bookmark, search, theme and imprint data and returns it.
  */
 export const useFetcher = (): IFetchProps => {
-  let defaults: IDataProps<any> = { error: true };
+  const defaults: IDataProps<any> = { error: true };
 
   const [appData, setAppData] = useState<IDataProps<IAppListProps>>(defaults);
   const [bookmarkData, setBookmarkData] =
@@ -64,7 +64,14 @@ export const useFetcher = (): IFetchProps => {
     useState<IDataProps<IGreeterDataProps>>(defaults);
 
   const callback = useCallback(() => {
-    let files = ["apps", "bookmarks", "search", "themes", "imprint", "greeter"];
+    const files = [
+      "apps",
+      "bookmarks",
+      "search",
+      "themes",
+      "imprint",
+      "greeter",
+    ];
 
     Promise.all(files.map((f) => fetchFile(f))).then(
       ([apps, bookmarks, search, themes, imprint, greeter]: any) => {

src/lib/useTheme.tsx

@@ -58,7 +58,7 @@ export const getTheme = (scheme?: string): IThemeProps => {
     currentScheme = "dark-theme";
   }
 
-  let theme =
+  const theme =
     currentScheme === "dark-theme"
       ? localStorage.getItem("dark-theme")
       : localStorage.getItem("light-theme");