From 5f3d449a665cca18385cbc81762c5332fa1862c7 Mon Sep 17 00:00:00 2001
From: josc146 <josStorer@outlook.com>
Date: Mon, 25 Dec 2023 20:37:40 +0800
Subject: [PATCH] improve Models page

---
 frontend/src/pages/Models.tsx | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/Models.tsx b/frontend/src/pages/Models.tsx
index 0df7f37..d98ed05 100644
--- a/frontend/src/pages/Models.tsx
+++ b/frontend/src/pages/Models.tsx
@@ -153,24 +153,32 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
   })
 ];
 
+const getTags = () => {
+  return Array.from(new Set(
+    ['Recommended',
+      ...commonStore.modelSourceList.map(item => item.tags || []).flat()
+      .filter(i => !i.includes('Other') && !i.includes('Local'))
+      , 'Other', 'Local']));
+};
+
+const getCurrentModelList = () => {
+  if (commonStore.activeModelListTags.length === 0)
+    return commonStore.modelSourceList;
+  else
+    return commonStore.modelSourceList.filter(item => commonStore.activeModelListTags.some(tag => item.tags?.includes(tag)));
+};
+
 const Models: FC = observer(() => {
   const { t } = useTranslation();
-  const [tags, setTags] = useState<Array<string>>([]);
-  const [modelSourceList, setModelSourceList] = useState<ModelSourceItem[]>(commonStore.modelSourceList);
+  const [tags, setTags] = useState<Array<string>>(getTags());
+  const [modelSourceList, setModelSourceList] = useState<ModelSourceItem[]>(getCurrentModelList());
 
   useEffect(() => {
-    setTags(Array.from(new Set(
-      ['Recommended',
-        ...commonStore.modelSourceList.map(item => item.tags || []).flat()
-        .filter(i => !i.includes('Other') && !i.includes('Local'))
-        , 'Other', 'Local'])));
+    setTags(getTags());
   }, [commonStore.modelSourceList]);
 
   useEffect(() => {
-    if (commonStore.activeModelListTags.length === 0)
-      setModelSourceList(commonStore.modelSourceList);
-    else
-      setModelSourceList(commonStore.modelSourceList.filter(item => commonStore.activeModelListTags.some(tag => item.tags?.includes(tag))));
+    setModelSourceList(getCurrentModelList());
   }, [commonStore.modelSourceList, commonStore.activeModelListTags]);
 
   return (