chore(deps): bump all (#294)

frontend/README.md

@@ -1,44 +0,0 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).

frontend/package.json

@@ -8,32 +8,32 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.4.3",
-    "@types/jest": "29.5.2",
-    "@types/node": "18.16.19",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
+    "@testing-library/user-event": "14.5.1",
+    "@types/jest": "29.5.5",
+    "@types/node": "20.6.2",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
     "@types/react-router-dom": "5.3.3",
     "@types/recharts": "1.8.24",
-    "@vitejs/plugin-react": "4.0.1",
-    "autoprefixer": "10.4.14",
-    "axios": "0.27.2",
+    "@vitejs/plugin-react": "4.0.4",
+    "autoprefixer": "10.4.15",
+    "axios": "1.5.0",
     "date-fns": "2.30.0",
     "eslint-config-react-app": "7.0.1",
     "jsdom": "22.1.0",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.24",
-    "prettier": "2.8.8",
+    "postcss": "8.4.29",
+    "prettier": "3.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "6.14.1",
-    "recharts": "2.7.2",
-    "tailwindcss": "3.3.2",
-    "typescript": "5.1.6",
-    "vite": "4.3.9",
-    "vitest": "0.32.2"
+    "react-router-dom": "6.16.0",
+    "recharts": "2.8.0",
+    "tailwindcss": "3.3.3",
+    "typescript": "5.2.2",
+    "vite": "4.4.9",
+    "vitest": "0.34.4"
   },
   "scripts": {
     "format": "prettier --write \"./*.js\" \"src/**/*.(tsx|ts|css)\"",

frontend/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

frontend/src/api/api.ts

@@ -19,7 +19,7 @@ export class UnauthenticatedError extends Error {}
 
 export const getRecentListens = async (
   options: PaginationOptions = { page: 1, limit: 10 },
-  client: AxiosInstance
+  client: AxiosInstance,
 ): Promise<Pagination<Listen>> => {
   const { page, limit } = options;
 
@@ -44,7 +44,7 @@ export const getRecentListens = async (
 
 export const getListensReport = async (
   options: ListenReportOptions,
-  client: AxiosInstance
+  client: AxiosInstance,
 ): Promise<ListenReportItem[]> => {
   const {
     timeFrame,
@@ -60,7 +60,7 @@ export const getListensReport = async (
         customTimeStart: formatISO(customTimeStart),
         customTimeEnd: formatISO(customTimeEnd),
       },
-    }
+    },
   );
 
   switch (res.status) {
@@ -83,7 +83,7 @@ export const getListensReport = async (
 
 export const getTopArtists = async (
   options: TopArtistsOptions,
-  client: AxiosInstance
+  client: AxiosInstance,
 ): Promise<TopArtistsItem[]> => {
   const {
     time: { timePreset, customTimeStart, customTimeEnd },
@@ -97,7 +97,7 @@ export const getTopArtists = async (
         customTimeStart: formatISO(customTimeStart),
         customTimeEnd: formatISO(customTimeEnd),
       },
-    }
+    },
   );
 
   switch (res.status) {
@@ -120,7 +120,7 @@ export const getTopArtists = async (
 
 export const getTopAlbums = async (
   options: TopAlbumsOptions,
-  client: AxiosInstance
+  client: AxiosInstance,
 ): Promise<TopAlbumsItem[]> => {
   const {
     time: { timePreset, customTimeStart, customTimeEnd },
@@ -134,7 +134,7 @@ export const getTopAlbums = async (
         customTimeStart: formatISO(customTimeStart),
         customTimeEnd: formatISO(customTimeEnd),
       },
-    }
+    },
   );
 
   switch (res.status) {
@@ -157,7 +157,7 @@ export const getTopAlbums = async (
 
 export const getTopTracks = async (
   options: TopTracksOptions,
-  client: AxiosInstance
+  client: AxiosInstance,
 ): Promise<TopTracksItem[]> => {
   const {
     time: { timePreset, customTimeStart, customTimeEnd },
@@ -171,7 +171,7 @@ export const getTopTracks = async (
         customTimeStart: formatISO(customTimeStart),
         customTimeEnd: formatISO(customTimeEnd),
       },
-    }
+    },
   );
 
   switch (res.status) {
@@ -194,7 +194,7 @@ export const getTopTracks = async (
 
 export const getTopGenres = async (
   options: TopGenresOptions,
-  client: AxiosInstance
+  client: AxiosInstance,
 ): Promise<TopGenresItem[]> => {
   const {
     time: { timePreset, customTimeStart, customTimeEnd },
@@ -208,7 +208,7 @@ export const getTopGenres = async (
         customTimeStart: formatISO(customTimeStart),
         customTimeEnd: formatISO(customTimeEnd),
       },
-    }
+    },
   );
 
   switch (res.status) {
@@ -230,7 +230,7 @@ export const getTopGenres = async (
 };
 
 export const getApiTokens = async (
-  client: AxiosInstance
+  client: AxiosInstance,
 ): Promise<ApiToken[]> => {
   const res = await client.get<ApiToken[]>(`/api/v1/auth/api-tokens`);
 
@@ -251,7 +251,7 @@ export const getApiTokens = async (
 
 export const createApiToken = async (
   description: string,
-  client: AxiosInstance
+  client: AxiosInstance,
 ): Promise<NewApiToken> => {
   const res = await client.post<NewApiToken>(`/api/v1/auth/api-tokens`, {
     description,
@@ -274,7 +274,7 @@ export const createApiToken = async (
 
 export const revokeApiToken = async (
   id: string,
-  client: AxiosInstance
+  client: AxiosInstance,
 ): Promise<void> => {
   const res = await client.delete<NewApiToken>(`/api/v1/auth/api-tokens/${id}`);
 

frontend/src/components/AuthApiTokens.tsx

@@ -13,7 +13,7 @@ export const AuthApiTokens: React.FC = () => {
   const { apiTokens, isLoading, createToken, revokeToken } = useApiTokens();
   const sortedTokens = useMemo(
     () => apiTokens.sort((a, b) => (a.createdAt > b.createdAt ? -1 : 1)),
-    [apiTokens]
+    [apiTokens],
   );
 
   requireUser();
@@ -97,7 +97,7 @@ const NewTokenForm: React.FC<{
       createToken,
       setNewToken,
       setNewTokenDescription,
-    ]
+    ],
   );
 
   return (

frontend/src/components/RecentListens.tsx

@@ -111,7 +111,7 @@ const Pagination: React.FC<{
           >
             ...
           </div>
-        )
+        ),
       )}
       <button
         className={`${

frontend/src/components/ReportListens.tsx

@@ -23,7 +23,7 @@ export const ReportListens: React.FC = () => {
   const { requireUser } = useAuthProtection();
 
   const [timeFrame, setTimeFrame] = useState<"day" | "week" | "month" | "year">(
-    "day"
+    "day",
   );
 
   const [timeOptions, setTimeOptions] = useState<TimeOptions>({
@@ -34,7 +34,7 @@ export const ReportListens: React.FC = () => {
 
   const reportOptions = useMemo(
     () => ({ timeFrame, time: timeOptions }),
-    [timeFrame, timeOptions]
+    [timeFrame, timeOptions],
   );
 
   const { report, isLoading } = useListensReport(reportOptions);
@@ -59,7 +59,7 @@ export const ReportListens: React.FC = () => {
                 className="block appearance-none min-w-full md:win-w-0 md:w-1/4 bg-white dark:bg-gray-700 border border-gray-400 hover:border-gray-500 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:text-gray-200 p-2 rounded shadow leading-tight focus:outline-none focus:ring"
                 onChange={(e) =>
                   setTimeFrame(
-                    e.target.value as "day" | "week" | "month" | "year"
+                    e.target.value as "day" | "week" | "month" | "year",
                   )
                 }
               >
@@ -163,7 +163,7 @@ const ReportGraph: React.FC<{
 };
 
 const shortDateFormatFromTimeFrame = (
-  timeFrame: "day" | "week" | "month" | "year"
+  timeFrame: "day" | "week" | "month" | "year",
 ): string => {
   const FORMAT_DAY = "P";
   const FORMAT_WEEK = "'Week' w yyyy";
@@ -186,7 +186,7 @@ const shortDateFormatFromTimeFrame = (
 };
 
 const dateFormatFromTimeFrame = (
-  timeFrame: "day" | "week" | "month" | "year"
+  timeFrame: "day" | "week" | "month" | "year",
 ): string => {
   const FORMAT_DAY = "PPPP";
   const FORMAT_WEEK = "'Week starting on' PPPP";

frontend/src/components/ReportTopAlbums.tsx

@@ -22,7 +22,7 @@ export const ReportTopAlbums: React.FC = () => {
     () => ({
       time: timeOptions,
     }),
-    [timeOptions]
+    [timeOptions],
   );
 
   const { topAlbums, isLoading } = useTopAlbums(options);

frontend/src/components/ReportTopArtists.tsx

@@ -21,7 +21,7 @@ export const ReportTopArtists: React.FC = () => {
     () => ({
       time: timeOptions,
     }),
-    [timeOptions]
+    [timeOptions],
   );
 
   const { topArtists, isLoading } = useTopArtists(options);

frontend/src/components/ReportTopGenres.tsx

@@ -25,7 +25,7 @@ export const ReportTopGenres: React.FC = () => {
     () => ({
       time: timeOptions,
     }),
-    [timeOptions]
+    [timeOptions],
   );
 
   const { topGenres, isLoading } = useTopGenres(options);

frontend/src/components/ReportTopTracks.tsx

@@ -22,7 +22,7 @@ export const ReportTopTracks: React.FC = () => {
     () => ({
       time: timeOptions,
     }),
-    [timeOptions]
+    [timeOptions],
   );
 
   const { topTracks, isLoading } = useTopTracks(options);

frontend/src/hooks/use-api-client.tsx

@@ -1,4 +1,8 @@
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
+import axios, {
+  AxiosInstance,
+  InternalAxiosRequestConfig,
+  AxiosResponse,
+} from "axios";
 import React, {
   createContext,
   useContext,
@@ -13,7 +17,7 @@ interface ApiClientContext {
 }
 
 const apiClientContext = createContext<ApiClientContext>(
-  undefined as any as ApiClientContext
+  undefined as any as ApiClientContext,
 );
 
 export const ProvideApiClient: React.FC<{ children: React.ReactNode }> = ({
@@ -35,13 +39,13 @@ export function useApiClient() {
 function useProvideApiClient(): ApiClientContext {
   const { accessToken, refreshAccessToken } = useAuth();
 
-  // Wrap value to immediatly update when refreshing access token
+  // Wrap value to immediately update when refreshing access token
   // and always having access to newest access token in interceptor
   const localAccessToken = useRef(accessToken);
 
   // initialState must be passed as function as return value of axios.create()
   // is also callable and react will call it and then use that result (promise)
-  // as the initial state instead of the axios instace.
+  // as the initial state instead of the axios instance.
   const [client] = useState<AxiosInstance>(() => axios.create());
 
   useEffect(() => {
@@ -54,15 +58,11 @@ function useProvideApiClient(): ApiClientContext {
     // Setup Axios Interceptors
     const requestInterceptor = client.interceptors.request.use(
       (config) => {
-        if (!config.headers) {
-          config.headers = {};
-        }
-
         config.headers.Authorization = `Bearer ${localAccessToken.current}`;
 
         return config;
       },
-      (err) => Promise.reject(err)
+      (err) => Promise.reject(err),
     );
     const responseInterceptor = client.interceptors.response.use(
       (data) => data,
@@ -73,7 +73,7 @@ function useProvideApiClient(): ApiClientContext {
 
         const { response, config } = err as {
           response: AxiosResponse;
-          config: AxiosRequestConfig;
+          config: InternalAxiosRequestConfig;
         };
 
         if (response && response.status !== 401) {
@@ -84,7 +84,7 @@ function useProvideApiClient(): ApiClientContext {
         localAccessToken.current = await refreshAccessToken();
 
         return client.request(config);
-      }
+      },
     );
 
     return () => {

frontend/src/hooks/use-api.tsx

@@ -27,7 +27,7 @@ export const useRecentListens = (options: PaginationOptions) => {
 
   const fetchData = useMemo(
     () => () => getRecentListens(options, client),
-    [options, client]
+    [options, client],
   );
 
   const {
@@ -48,7 +48,7 @@ export const useListensReport = (options: ListenReportOptions) => {
 
   const fetchData = useMemo(
     () => () => getListensReport(options, client),
-    [options, client]
+    [options, client],
   );
 
   const {
@@ -65,7 +65,7 @@ export const useTopArtists = (options: TopArtistsOptions) => {
 
   const fetchData = useMemo(
     () => () => getTopArtists(options, client),
-    [options, client]
+    [options, client],
   );
 
   const {
@@ -82,7 +82,7 @@ export const useTopAlbums = (options: TopAlbumsOptions) => {
 
   const fetchData = useMemo(
     () => () => getTopAlbums(options, client),
-    [options, client]
+    [options, client],
   );
 
   const {
@@ -99,7 +99,7 @@ export const useTopTracks = (options: TopTracksOptions) => {
 
   const fetchData = useMemo(
     () => () => getTopTracks(options, client),
-    [options, client]
+    [options, client],
   );
 
   const {
@@ -116,7 +116,7 @@ export const useTopGenres = (options: TopGenresOptions) => {
 
   const fetchData = useMemo(
     () => () => getTopGenres(options, client),
-    [options, client]
+    [options, client],
   );
 
   const {
@@ -149,7 +149,7 @@ export const useApiTokens = () => {
 
       return apiToken;
     },
-    [client, reload]
+    [client, reload],
   );
 
   const revokeToken = useCallback(
@@ -157,7 +157,7 @@ export const useApiTokens = () => {
       await revokeApiToken(id, client);
       await reload();
     },
-    [client, reload]
+    [client, reload],
   );
 
   return { apiTokens, isLoading, error, createToken, revokeToken };

frontend/src/hooks/use-async.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState, useTransition } from "react";
 
 type UseAsync = <T>(
   asyncFunction: () => Promise<T>,
-  initialValue: T
+  initialValue: T,
 ) => {
   pending: boolean;
   value: T;
@@ -12,7 +12,7 @@ type UseAsync = <T>(
 
 export const useAsync: UseAsync = <T extends any>(
   asyncFunction: () => Promise<T>,
-  initialValue: T
+  initialValue: T,
 ) => {
   const [pending, setPending] = useState(false);
   const [value, setValue] = useState<T>(initialValue);

frontend/src/hooks/use-outside-click.tsx

@@ -5,7 +5,7 @@ import React, { useEffect } from "react";
  */
 export const useOutsideClick = (
   ref: React.MutableRefObject<any>,
-  callback: () => void
+  callback: () => void,
 ) => {
   useEffect(() => {
     /**

frontend/src/icons/Cogwheel.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 export const CogwheelIcon: React.FC<React.SVGProps<SVGSVGElement>> = (
-  props
+  props,
 ) => {
   return (
     <svg

frontend/src/icons/Trashcan.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 export const TrashcanIcon: React.FC<React.SVGProps<SVGSVGElement>> = (
-  props
+  props,
 ) => {
   return (
     <svg

frontend/src/index.tsx

@@ -17,5 +17,5 @@ root.render(
         </BrowserRouter>
       </ProvideApiClient>
     </ProvideAuth>
-  </React.StrictMode>
+  </React.StrictMode>,
 );

frontend/src/util/getPaginationItems.ts

@@ -1,7 +1,7 @@
 export const getPaginationItems = (
   currentPage: number,
   totalPages: number,
-  delta: number = 1
+  delta: number = 1,
 ): (number | null)[] => {
   const left = currentPage - delta;
   const right = currentPage + delta;

frontend/src/util/queryString.ts

@@ -5,7 +5,7 @@ export const qs = (parameters: QueryParameters): string => {
   const queryParams = new URLSearchParams();
 
   Object.entries(parameters).forEach(([key, value]) =>
-    queryParams.append(key, value)
+    queryParams.append(key, value),
   );
 
   return queryParams.toString();