restructure files onto electron-vite boilerplate

src/renderer/hooks/index.ts

@@ -1,8 +1,8 @@
-export * from './use-theme';
-export * from './use-is-mounted';
-export * from './use-should-pad-titlebar';
+export * from './use-app-focus';
 export * from './use-container-query';
 export * from './use-fast-average-color';
 export * from './use-hide-scrollbar';
-export * from './use-app-focus';
+export * from './use-is-mounted';
 export * from './use-is-overflow';
+export * from './use-should-pad-titlebar';
+export * from './use-theme';

src/renderer/hooks/use-app-focus.ts

@@ -1,6 +1,6 @@
 // From https://learnersbucket.com/examples/interview/usehasfocus-hook-in-react/
 
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 export const useAppFocus = () => {
     const [focus, setFocus] = useState(document.hasFocus());

src/renderer/hooks/use-container-query.ts

@@ -9,7 +9,7 @@ interface UseContainerQueryProps {
 
 export const useContainerQuery = (props?: UseContainerQueryProps) => {
     const { lg, md, sm, xl } = props || {};
-    const { ref, width, height } = useElementSize();
+    const { height, ref, width } = useElementSize();
 
     const isXs = width >= 0;
     const isSm = width >= (sm || 600);

src/renderer/hooks/use-display-refresh.ts

@@ -1,29 +1,31 @@
-import { ChangeEvent, MutableRefObject, useCallback } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
+import { ChangeEvent, MutableRefObject, useCallback } from 'react';
+
+import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
+import { useListContext } from '/@/renderer/context/list-context';
 import {
     UseHandleListFilterChangeProps,
     useListFilterRefresh,
 } from '/@/renderer/hooks/use-list-filter-refresh';
-import { useListContext } from '/@/renderer/context/list-context';
-import { ListDisplayType } from '/@/renderer/types';
-import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { useListStoreActions, useListStoreByKey } from '/@/renderer/store';
+import { ListDisplayType } from '/@/renderer/types';
 
-export type UseDisplayRefreshProps = {
-    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+export type UseDisplayRefreshProps = UseHandleListFilterChangeProps & {
+    gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
     itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
-} & UseHandleListFilterChangeProps;
+};
 
 export const useDisplayRefresh = <TFilter>({
+    gridRef,
     isClientSideSort,
     itemCount,
-    gridRef,
     itemType,
     server,
     tableRef,
 }: UseDisplayRefreshProps) => {
-    const { customFilters, pageKey, handlePlay } = useListContext();
+    const { customFilters, handlePlay, pageKey } = useListContext();
     const { display, filter } = useListStoreByKey<TFilter>({ key: pageKey });
 
     const { handleRefreshGrid, handleRefreshTable } = useListFilterRefresh({

src/renderer/hooks/use-fast-average-color.tsx

@@ -1,13 +1,13 @@
-import { useEffect, useRef, useState } from 'react';
 import { FastAverageColor } from 'fast-average-color';
+import { useEffect, useRef, useState } from 'react';
 
 export const useFastAverageColor = (args: {
     algorithm?: 'dominant' | 'simple' | 'sqrt';
     id?: string;
-    src?: string | null;
+    src?: null | string;
     srcLoaded?: boolean;
 }) => {
-    const { algorithm, src, srcLoaded, id } = args;
+    const { algorithm, id, src, srcLoaded } = args;
     const idRef = useRef<string | undefined>(id);
 
     const [color, setColor] = useState<string | undefined>(undefined);

src/renderer/hooks/use-genre-route.ts

@@ -1,7 +1,8 @@
-import { useLocation } from 'react-router';
-import { GenreTarget, useSettingsStore } from '/@/renderer/store';
-import { AppRoute } from '/@/renderer/router/routes';
 import { useMemo } from 'react';
+import { useLocation } from 'react-router';
+
+import { AppRoute } from '/@/renderer/router/routes';
+import { GenreTarget, useSettingsStore } from '/@/renderer/store';
 
 const ALBUM_REGEX = /albums$/;
 const SONG_REGEX = /songs$/;

src/renderer/hooks/use-hide-scrollbar.ts

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react';
 import { useTimeout } from '@mantine/hooks';
+import { useEffect, useState } from 'react';
 
 export const useHideScrollbar = (timeout: number) => {
     const [hideScrollbar, setHideScrollbar] = useState(false);
-    const { start, clear } = useTimeout(() => setHideScrollbar(true), timeout);
+    const { clear, start } = useTimeout(() => setHideScrollbar(true), timeout);
 
     // Automatically hide the scrollbar after the timeout duration
     useEffect(() => {

src/renderer/hooks/use-is-overflow.ts

@@ -1,7 +1,7 @@
-import { MutableRefObject, useState, useLayoutEffect } from 'react';
+import { MutableRefObject, useLayoutEffect, useState } from 'react';
 
 export const useIsOverflow = (ref: MutableRefObject<HTMLDivElement | null>) => {
-    const [isOverflow, setIsOverflow] = useState<Boolean | undefined>(undefined);
+    const [isOverflow, setIsOverflow] = useState<boolean | undefined>(undefined);
 
     useLayoutEffect(() => {
         const { current } = ref;

src/renderer/hooks/use-list-filter-refresh.ts

@@ -1,27 +1,29 @@
-import { MutableRefObject, useCallback, useMemo } from 'react';
-import { IDatasource } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
+import { IDatasource } from '@ag-grid-community/core';
 import { QueryKey, useQueryClient } from '@tanstack/react-query';
+import orderBy from 'lodash/orderBy';
+import { MutableRefObject, useCallback, useMemo } from 'react';
+
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { BasePaginatedResponse, LibraryItem, ServerListItem } from '/@/renderer/api/types';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
-import orderBy from 'lodash/orderBy';
 
 export interface UseHandleListFilterChangeProps {
     isClientSideSort?: boolean;
     itemCount?: number;
     itemType: LibraryItem;
-    server: ServerListItem | null;
+    server: null | ServerListItem;
 }
 
 const BLOCK_SIZE = 500;
 
 export const useListFilterRefresh = ({
-    server,
+    isClientSideSort,
     itemCount,
     itemType,
-    isClientSideSort,
+    server,
 }: UseHandleListFilterChangeProps) => {
     const queryClient = useQueryClient();
 
@@ -134,7 +136,7 @@ export const useListFilterRefresh = ({
     );
 
     const handleRefreshGrid = useCallback(
-        async (gridRef: MutableRefObject<VirtualInfiniteGridRef | null>, filter: any) => {
+        async (gridRef: MutableRefObject<null | VirtualInfiniteGridRef>, filter: any) => {
             if (!gridRef || !queryKeyFn || !queryFn) {
                 return;
             }

src/renderer/hooks/use-server-authenticated.ts

@@ -1,10 +1,11 @@
+import { debounce } from 'lodash';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useCurrentServer } from '/@/renderer/store';
-import { AuthState, ServerListItem, ServerType } from '/@/renderer/types';
+
 import { api } from '/@/renderer/api';
 import { SongListSort, SortOrder } from '/@/renderer/api/types';
-import { debounce } from 'lodash';
 import { toast } from '/@/renderer/components';
+import { useCurrentServer } from '/@/renderer/store';
+import { AuthState, ServerListItem, ServerType } from '/@/renderer/types';
 
 export const useServerAuthenticated = () => {
     const priorServerId = useRef<string>();

src/renderer/hooks/use-server-version.ts

@@ -1,9 +1,10 @@
-import { useEffect } from 'react';
-import { useAuthStoreActions, useCurrentServer } from '/@/renderer/store';
 import { useQuery } from '@tanstack/react-query';
-import { queryKeys } from '/@/renderer/api/query-keys';
-import { controller } from '/@/renderer/api/controller';
 import isEqual from 'lodash/isEqual';
+import { useEffect } from 'react';
+
+import { controller } from '/@/renderer/api/controller';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { useAuthStoreActions, useCurrentServer } from '/@/renderer/store';
 
 export const useServerVersion = () => {
     const { updateServer } = useAuthStoreActions();
@@ -28,7 +29,7 @@ export const useServerVersion = () => {
         }
 
         if (server?.id === serverInfo.data?.id) {
-            const { version, features } = serverInfo.data || {};
+            const { features, version } = serverInfo.data || {};
             if (version !== server?.version || !isEqual(features, server?.features)) {
                 updateServer(server.id, {
                     features,

src/renderer/hooks/use-should-pad-titlebar.tsx

@@ -1,7 +1,8 @@
 import isElectron from 'is-electron';
 import { useLocation } from 'react-router';
+
 import { AppRoute } from '/@/renderer/router/routes';
-import { useSidebarRightExpanded, useGeneralSettings, useWindowSettings } from '/@/renderer/store';
+import { useGeneralSettings, useSidebarRightExpanded, useWindowSettings } from '/@/renderer/store';
 import { Platform } from '/@/renderer/types';
 
 export const useShouldPadTitlebar = () => {

src/renderer/hooks/use-song-change.ts

@@ -1,8 +1,9 @@
-import { MutableRefObject, useCallback, useEffect } from 'react';
-import { useEventStore, UserEvent } from '/@/renderer/store/event.store';
 import { RowNode } from '@ag-grid-community/core';
 import { AgGridReact } from '@ag-grid-community/react';
+import { MutableRefObject, useCallback, useEffect } from 'react';
+
 import { Song } from '/@/renderer/api/types';
+import { useEventStore, UserEvent } from '/@/renderer/store/event.store';
 
 export const useSongChange = (
     handler: (ids: string[], event: UserEvent) => void,

src/renderer/hooks/use-theme.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+
 import { useSettingsStore } from '/@/renderer/store/settings.store';
 import { AppTheme } from '/@/renderer/themes/types';