From e04d5842dd70a15aafb952a79d838ad26aebbc67 Mon Sep 17 00:00:00 2001
From: eson <474420502@qq.com>
Date: Sun, 9 Jul 2023 12:32:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=A4=9A=E6=AC=A1=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E7=9A=84=E9=97=AE=E9=A2=98,=20=20=E6=8A=8Aparams?=
 =?UTF-8?q?=E8=BD=AC=E4=B8=BA=E5=AF=B9=E8=B1=A1=E5=AD=98=E5=82=A8,=20?=
 =?UTF-8?q?=E6=89=80=E6=9C=89=E7=8A=B6=E6=80=81=E9=83=BD=E5=AD=98=E5=82=A8?=
 =?UTF-8?q?=E5=9C=A8=E6=9C=AC=E5=9C=B0=E5=AD=98=E5=82=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Main.jsx | 177 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 103 insertions(+), 74 deletions(-)

diff --git a/src/Main.jsx b/src/Main.jsx
index 01a5a6a..f7919e9 100644
--- a/src/Main.jsx
+++ b/src/Main.jsx
@@ -1,5 +1,4 @@
-// Main.js
-import React, { useState, useEffect, useContext, useCallback } from 'react';
+import React, { useState, useEffect, useContext, useCallback, useRef} from 'react';
 import axios from 'axios';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
@@ -21,22 +20,39 @@ const Main = () => {
     { label: '大于60min', idx: 3 },
   ];
 
-
   const limit = 20;
- 
-  const [currentCategory, setCurrentCategory] = useState(parseInt(localStorage.getItem('lastCategory'), 10) || 0);
 
+  const getInitialParams = () => {
+    const storedParams = localStorage.getItem('params');
+    if (storedParams) {
+      return JSON.parse(storedParams);
+    } else {
+      return {
+        lastPage: {
+          0: 1,
+          1: 1,
+          2: 1,
+          3: 1,
+        },
+        lastCategory: 0,
+      };
+    }
+  };
+
+  const [params, setParams] = useState(getInitialParams());
 
   const [pagination, setPagination] = useState({
     movies: [],
-    page: 1,
+    page: params.lastPage[params.lastCategory],
     total: 1,
     length: 1,
   });
 
- 
-  const fetchMovies = useCallback(async (category, page) => {
 
+  const paramsRef = useRef(params);
+  paramsRef.current = params;
+
+  const fetchMovies = useCallback(async (category, page) => {
     setLoading(true);
     try {
       const response = await axios.get(
@@ -47,7 +63,6 @@ const Main = () => {
         const data = response.data.data;
 
         if (data.items.length === 0 && page > 1) {
-          // 如果返回的数据为空且请求的页码大于1，则尝试获取上一页的数据
           fetchMovies(category, page - 1);
         } else {
           setPagination({
@@ -56,7 +71,7 @@ const Main = () => {
             total: data.total,
             length: Math.ceil(data.total / limit),
           });
-          localStorage.setItem('lastPage', page);
+          updateParams(category, page);
         }
       }
     } catch (error) {
@@ -67,86 +82,100 @@ const Main = () => {
   }, [config.Host, limit]);
 
   useEffect(() => {
-    const lastPage = parseInt(localStorage.getItem('lastPage'), 10) || 1;
-    const lastCategory = localStorage.getItem('lastCategory') || 0;
-    fetchMovies(lastCategory, lastPage);
+
+    fetchMovies(paramsRef.current.lastCategory, paramsRef.current.lastPage[paramsRef.current.lastCategory]);
   }, [fetchMovies]);
 
-  const handlePageChange = useCallback(async (event, page) => {
-    // console.log("handlePageChange");
-    fetchMovies(currentCategory, page);
-  }, [fetchMovies, currentCategory]);
+  const updateParams = (category, page) => {
+    setParams((prevParams) => {
+      const newParams = {
+        ...prevParams,
+        lastPage: {
+          ...prevParams.lastPage,
+          [category]: page,
+        },
+      };
+      localStorage.setItem('params', JSON.stringify(newParams));
+      return newParams;
+    });
+  };
 
-  const handleCategoryChange = useCallback(async (category) => {
-    // console.log("handleCategoryChange");
-    setCurrentCategory(category);
-    localStorage.setItem('lastCategory', category);
-    fetchMovies(category, 1);
+  const handlePageChange = useCallback((event, page) => {
+    fetchMovies(params.lastCategory, page);
+    updateParams(params.lastCategory, page);
+  }, [fetchMovies, params]);
+
+  const handleCategoryChange = useCallback((category) => {
+    setParams((prevParams) => {
+      const newParams = {
+        ...prevParams,
+        lastCategory: category,
+      };
+      localStorage.setItem('params', JSON.stringify(newParams));
+      return newParams;
+    });
+    // 从 paramsRef.current 获取当前 category 对应的页面
+    fetchMovies(category, paramsRef.current.lastPage[category]);
   }, [fetchMovies]);
 
   return (
     <Container style={{ marginTop: 20 }}>
       <CategoryNav
         categories={categories}
-        currentCategory={currentCategory}
+        currentCategory={params.lastCategory}
         onCategoryChange={handleCategoryChange}
       />
 
-      <div style={{ textAlign: 'center', marginBottom: 20 }}>
+      <PaginationWrapper page={pagination.page} length={pagination.length} onPageChange={handlePageChange} />
 
-        <Pagination
-          count={pagination.length}
-          page={pagination.page}
-          onChange={handlePageChange}
-          shape="rounded"
-          color="primary"
-          size="large"
-        />
+      {loading ? (
+        <Loading />
+      ) : (
+        <MoviesGrid movies={pagination.movies} config={config} />
+      )}
 
-      </div>
-
-      <div>
-        {loading ? (
-          <div
-            style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}
-          >
-            <CircularProgress />
-          </div>
-        ) : (
-
-          <Grid container spacing={2} style={{ marginTop: 3 }}>
-            {pagination.movies.map((item) => (
-              <Grid item xs={6} sm={4} md={3} lg={2}
-                style={{ display: 'flex', justifyContent: 'space-between' }}
-                key={item.filename}
-              >
-                <Link
-                  to={`/res/${item.filename}`}
-                  style={{ textDecoration: 'none', paddingBottom: 10 }}
-                >
-                  <MovieCard movie={item} config={config} />
-                </Link>
-              </Grid>
-            ))}
-          </Grid>
-        )}
-      </div>
-
-      <div style={{ textAlign: 'center', marginBottom: 20 }}>
-
-        <Pagination
-
-          count={pagination.length}
-          page={pagination.page}
-          onChange={handlePageChange}
-          shape="rounded"
-          color="primary"
-          size="large"
-        />
-
-      </div>
+      <PaginationWrapper page={pagination.page} length={pagination.length} onPageChange={handlePageChange} />
     </Container>
   );
 };
 
+const PaginationWrapper = ({ page, length, onPageChange }) => (
+  <div style={{ textAlign: 'center', marginBottom: 20 }}>
+    <Pagination
+      count={length}
+      page={page}
+      onChange={onPageChange}
+      shape="rounded"
+      color="primary"
+      size="large"
+    />
+  </div>
+);
+
+const Loading = () => (
+  <div
+    style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}
+  >
+    <CircularProgress />
+  </div>
+);
+
+const MoviesGrid = ({ movies, config }) => (
+  <Grid container spacing={2} style={{ marginTop: 3 }}>
+    {movies.map((item) => (
+      <Grid item xs={6} sm={4} md={3} lg={2}
+        style={{ display: 'flex', justifyContent: 'space-between' }}
+        key={item.filename}
+      >
+        <Link
+          to={`/res/${item.filename}`}
+          style={{ textDecoration: 'none', paddingBottom: 10 }}
+        >
+          <MovieCard movie={item} config={config} />
+        </Link>
+      </Grid>
+    ))}
+  </Grid>
+);
+
 export default Main;
\ No newline at end of file