From f618d1442c93e2d9c99ca37e2534b1aac109230c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Fri, 10 Mar 2023 17:07:56 +0800
Subject: [PATCH] =?UTF-8?q?fix(view):=E4=BF=AE=E5=A4=8D=E9=87=8D=E6=96=B0?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=85=B6=E4=BB=96=E6=BC=AB=E7=94=BB=E7=9B=AE?=
 =?UTF-8?q?=E5=BD=95=E5=90=8E=EF=BC=8C=E5=9B=BE=E7=89=87=E9=AB=98=E5=BA=A6?=
 =?UTF-8?q?=E8=AE=B0=E5=BF=86=E4=B8=8D=E6=B8=85=E9=99=A4=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ComicView.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/ComicView.tsx b/src/components/ComicView.tsx
index 6ad8988..d55d874 100644
--- a/src/components/ComicView.tsx
+++ b/src/components/ComicView.tsx
@@ -1,16 +1,20 @@
 //@ts-nocheck
 import { Box } from '@mantine/core';
-import { equals } from 'ramda';
-import { FC, useLayoutEffect } from 'react';
-import { useMeasure } from 'react-use';
+import { equals, head } from 'ramda';
+import { FC, useLayoutEffect, useMemo } from 'react';
+import { useMeasure, useUpdate } from 'react-use';
+import { sortedFilesSelector, useFileListStore } from '../states/files';
 import { useZoomState } from '../states/zoom';
 import { ContinuationView } from './ContinuationView';
 import { SingleView } from './SingleView';
 
 export const ComicView: FC = () => {
+  const forceUpdate = useUpdate();
+  const files = useFileListStore(sortedFilesSelector());
   const viewMode = useZoomState.use.viewMode();
   const updateViewHeight = useZoomState.use.updateViewHeight();
   const [containerRef, { height }] = useMeasure();
+  const firstFileId = useMemo(() => head(files)?.id ?? '', [files, files.length]);
 
   useLayoutEffect(() => {
     updateViewHeight(height);
@@ -19,7 +23,7 @@ export const ComicView: FC = () => {
   return (
     <Box w="100%" h="100%" sx={{ overflow: 'hidden' }} ref={containerRef}>
       {equals(viewMode, 'single') && <SingleView />}
-      {equals(viewMode, 'continuation') && <ContinuationView />}
+      {equals(viewMode, 'continuation') && <ContinuationView key={firstFileId} />}
     </Box>
   );
 };