chore(deps): bump all (#294)

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();