From d556a76faf46fc1a8c988563573653074204371b Mon Sep 17 00:00:00 2001
From: Peter Pan <littlepanzh@gmail.com>
Date: Fri, 29 Jan 2021 16:59:06 +0800
Subject: [PATCH] fix: selected model missing when switch between pages (#922)

---
 .../core/src/components/Loader/RunList.tsx      |  4 ++--
 frontend/packages/core/src/pages/graph.tsx      | 17 +++++++++++++----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/packages/core/src/components/Loader/RunList.tsx b/frontend/packages/core/src/components/Loader/RunList.tsx
index 4ce412bf..fab31cea 100644
--- a/frontend/packages/core/src/components/Loader/RunList.tsx
+++ b/frontend/packages/core/src/components/Loader/RunList.tsx
@@ -22,11 +22,11 @@ const RunList: FunctionComponent<{count?: number}> = ({count}) => {
     return (
         <ContentLoader viewBox={`0 0 220 ${(count ?? 2) * 36}`}>
             {Array.from({length: count ?? 2}).map((_, i) => (
-                <>
+                <React.Fragment key={i}>
                     <rect x="0" y={`${11 * (i + 1) + 25 * i + 4.5}`} width="16" height="16" />
                     <circle cx="32" cy={`${11 * (i + 1) + 25 * i + 12.5}`} r="6" />
                     <rect x="46" y={`${11 * (i + 1) + 25 * i + 5.5}`} rx="3" ry="3" width="100" height="14" />
-                </>
+                </React.Fragment>
             ))}
         </ContentLoader>
     );
diff --git a/frontend/packages/core/src/pages/graph.tsx b/frontend/packages/core/src/pages/graph.tsx
index 7efdd1e3..b8b9fb1e 100644
--- a/frontend/packages/core/src/pages/graph.tsx
+++ b/frontend/packages/core/src/pages/graph.tsx
@@ -94,6 +94,13 @@ const Graph: FunctionComponent = () => {
     const graph = useRef<GraphRef>(null);
     const file = useRef<HTMLInputElement>(null);
     const [files, setFiles] = useState<FileList | File[] | null>(storeModel);
+    const setModelFile = useCallback(
+        (f: FileList | File[]) => {
+            storeDispatch(actions.graph.setModel(f));
+            setFiles(f);
+        },
+        [storeDispatch]
+    );
     const onClickFile = useCallback(() => {
         if (file.current) {
             file.current.value = '';
@@ -104,11 +111,10 @@ const Graph: FunctionComponent = () => {
         (e: React.ChangeEvent<HTMLInputElement>) => {
             const target = e.target;
             if (target && target.files && target.files.length) {
-                storeDispatch(actions.graph.setModel(target.files));
-                setFiles(target.files);
+                setModelFile(target.files);
             }
         },
-        [storeDispatch]
+        [setModelFile]
     );
 
     const {data, loading} = useRequest<BlobResponse>(files ? null : '/graph/graph');
@@ -280,7 +286,10 @@ const Graph: FunctionComponent = () => {
         nodeDocumentation
     ]);
 
-    const uploader = useMemo(() => <Uploader onClickUpload={onClickFile} onDropFiles={setFiles} />, [onClickFile]);
+    const uploader = useMemo(() => <Uploader onClickUpload={onClickFile} onDropFiles={setModelFile} />, [
+        onClickFile,
+        setModelFile
+    ]);
 
     return (
         <>
-- 
GitLab