From c5a5eab225fd5a890af57c8cc8a3fc621f536f11 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Thu, 21 Nov 2024 19:18:29 +0100
Subject: [PATCH] refactor: extract utility hook

---
 .../src/common/hooks-query/useProjectList.ts  | 21 +++++++++++++++++++
 .../panel/project-panel/ProjectList.tsx       | 21 +++++--------------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/common/hooks-query/useProjectList.ts b/apps/client/src/common/hooks-query/useProjectList.ts
index c9e729a85..57d3b6f01 100644
--- a/apps/client/src/common/hooks-query/useProjectList.ts
+++ b/apps/client/src/common/hooks-query/useProjectList.ts
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { ProjectFileListResponse } from 'ontime-types';
 
@@ -22,3 +23,23 @@ export function useProjectList() {
   });
   return { data: data ?? placeholderProjectList, status, refetch };
 }
+
+export function useOrderedProjectList() {
+  const response = useProjectList();
+  const { files, lastLoadedProject } = response.data;
+
+  const reorderedProjectFiles = useMemo(() => {
+    if (!files.length) return [];
+
+    const currentlyLoadedIndex = files.findIndex((project) => project.filename === lastLoadedProject);
+
+    if (currentlyLoadedIndex === -1) return files;
+
+    const projectFiles = [...files];
+    const current = projectFiles.splice(currentlyLoadedIndex, 1)[0];
+
+    return [current, ...projectFiles];
+  }, [files, lastLoadedProject]);
+
+  return { ...response, data: { reorderedProjectFiles, lastLoadedProject: response.data.lastLoadedProject } };
+}
diff --git a/apps/client/src/features/app-settings/panel/project-panel/ProjectList.tsx b/apps/client/src/features/app-settings/panel/project-panel/ProjectList.tsx
index a7ddd4475..5c90f9a12 100644
--- a/apps/client/src/features/app-settings/panel/project-panel/ProjectList.tsx
+++ b/apps/client/src/features/app-settings/panel/project-panel/ProjectList.tsx
@@ -1,6 +1,6 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 
-import { useProjectList } from '../../../../common/hooks-query/useProjectList';
+import { useOrderedProjectList } from '../../../../common/hooks-query/useProjectList';
 import * as Panel from '../../panel-utils/PanelUtils';
 
 import ProjectListItem, { EditMode } from './ProjectListItem';
@@ -8,8 +8,7 @@ import ProjectListItem, { EditMode } from './ProjectListItem';
 import style from './ProjectPanel.module.scss';
 
 export default function ProjectList() {
-  const { data, refetch } = useProjectList();
-  const { files, lastLoadedProject } = data;
+  const { data, refetch } = useOrderedProjectList();
 
   const [editingMode, setEditingMode] = useState<EditMode | null>(null);
   const [editingFilename, setEditingFilename] = useState<string | null>(null);
@@ -28,16 +27,6 @@ export default function ProjectList() {
     await refetch();
   };
 
-  const reorderedProjectFiles = useMemo(() => {
-    if (!data.files?.length) return [];
-
-    const currentlyLoadedIndex = files.findIndex((project) => project.filename === lastLoadedProject);
-    const projectFiles = [...files];
-    const current = projectFiles.splice(currentlyLoadedIndex, 1)?.[0];
-
-    return [current, ...projectFiles];
-  }, [data.files?.length, files, lastLoadedProject]);
-
   return (
     <Panel.Table>
       <thead>
@@ -48,7 +37,7 @@ export default function ProjectList() {
         </tr>
       </thead>
       <tbody>
-        {reorderedProjectFiles.map((project) => (
+        {data.reorderedProjectFiles.map((project) => (
           <ProjectListItem
             key={project.filename}
             filename={project.filename}
@@ -58,7 +47,7 @@ export default function ProjectList() {
             onRefetch={handleRefetch}
             editingFilename={editingFilename}
             editingMode={editingMode}
-            current={project.filename === lastLoadedProject}
+            current={project.filename === data.lastLoadedProject}
           />
         ))}
       </tbody>