恢复

package.json

@@ -21,8 +21,7 @@
     "react-swipe-handler": "^1.1.2",
     "react-swipeable": "^7.0.1",
     "swipeable": "^1.0.5",
-    "web-vitals": "^2.1.4",
+    "web-vitals": "^2.1.4"
-    "yarn": "^1.22.19"
   },
   "scripts": {
     "start": "react-scripts start",

src/Main.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useCallback, useReducer } from 'react';
+import React, { useState, useEffect, useContext, useCallback } from 'react';
 import axios from 'axios';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
@@ -10,63 +10,49 @@ import ConfigContext from './Config';
 import MovieCard from './components/MovieCard';
 import CategoryNav from './components/CategoryNav';
 
-const initialState = {
-  lastCategory: 0,
-  history: {
-    0: { lastPage: 1, scrollPos: 0 },
-    1: { lastPage: 1, scrollPos: 0 },
-    2: { lastPage: 1, scrollPos: 0 },
-    3: { lastPage: 1, scrollPos: 0 },
-  },
-  pagination: {
-    movies: [],
-    page: 1,
-    total: 1,
-    length: 1,
-  },
-  loading: false,
-};
-
-function reducer(state, action) {
-  switch (action.type) {
-    case 'UPDATE_LAST_CATEGORY':
-      return { ...state, lastCategory: action.payload.lastCategory };
-    case 'UPDATE_HISTORY':
-      return {
-        ...state,
-        history: {
-          ...state.history,
-          [action.payload.category]: action.payload.newData,
-        },
-      };
-    case 'SET_PAGINATION':
-      return { ...state, pagination: action.payload.pagination };
-    case 'SET_LOADING':
-      return { ...state, loading: action.payload.loading };
-    default:
-      return state;
-  }
-}
-
 const Main = () => {
   const config = useContext(ConfigContext);
+  const [loading, setLoading] = useState(false);
+  const categories = [
+    { label: '15min', idx: 0 },
+    { label: '30min', idx: 1 },
+    { label: '60min', idx: 2 },
+    { label: '大于60min', idx: 3 },
+  ];
 
-  const [state, dispatch] = useReducer(reducer, initialState);
+  const limit = 20;
 
-  const updateLastCategory = useCallback((newCategory) => {
+  const getInitialParams = () => {
-    dispatch({ type: 'UPDATE_LAST_CATEGORY', payload: { lastCategory: newCategory } });
+    const storedParams = localStorage.getItem('params');
-  }, []);
+    if (storedParams) {
+      return JSON.parse(storedParams);
+    } else {
+      return {
+        lastCategory: 0,
+        history: {
+          0: { lastPage: 1, scrollPos: 0 },
+          1: { lastPage: 1, scrollPos: 0 },
+          2: { lastPage: 1, scrollPos: 0 },
+          3: { lastPage: 1, scrollPos: 0 },
+        },
+      };
+    }
+  };
 
-  const updateHistory = useCallback((category, newData) => {
+  const [params, setParams] = useState(getInitialParams());
-    dispatch({ type: 'UPDATE_HISTORY', payload: { category, newData } });
+
-  }, []);
+  const [pagination, setPagination] = useState({
+    movies: [],
+    page: params.history[params.lastCategory].lastPage,
+    total: 1,
+    length: 1,
+  });
 
   const fetchMovies = useCallback(async (category, page) => {
-    dispatch({ type: 'SET_LOADING', payload: { loading: true } });
+    setLoading(true);
-
     try {
       const response = await axios.get(
-        `${config.Host}/movie/?page=${page}&limit=${config.limit}&category=${category}` // 修改这里
+        `${config.Host}/movie/?page=${page}&limit=${limit}&category=${category}`
       );
 
       if (response.status === 200) {
@@ -75,85 +61,104 @@ const Main = () => {
         if (data.items.length === 0 && page > 1) {
           fetchMovies(category, page - 1);
         } else {
-          dispatch({
+          setPagination({
-            type: 'SET_PAGINATION',
+            movies: data.items,
-            payload: {
+            page: page,
-              pagination: {
+            total: data.total,
-                movies: data.items,
+            length: Math.ceil(data.total / limit),
-                page: page,
-                total: data.total,
-                length: Math.ceil(data.total / config.limit), // 修改这里
-              },
-            },
           });
         }
       }
     } catch (error) {
       console.error('Error fetching movies:', error);
     } finally {
-      dispatch({ type: 'SET_LOADING', payload: { loading: false } });
+      setLoading(false);
     }
-  }, [config.Host, config.limit]); // 修改这里
+  }, [config.Host, limit]);
 
   useEffect(() => {
-    const currentCategory = state.lastCategory;
+    const currentCategory = params.lastCategory;
-    const currentPage = state.history[currentCategory].lastPage;
+    const currentPage = params.history[currentCategory].lastPage;
     fetchMovies(currentCategory, currentPage);
-  }, [fetchMovies, state]);
+  }, [fetchMovies, params]);
+
+  const updateParams = useCallback((newParams) => {
+    setParams((prevParams) => {
+      const updatedParams = { ...prevParams, ...newParams };
+      localStorage.setItem('params', JSON.stringify(updatedParams));
+      return updatedParams;
+    });
+  }, []);
 
   const handlePageChange = useCallback(
     (event, page) => {
-      const currentCategory = state.lastCategory;
+      const currentCategory = params.lastCategory;
-      updateHistory(currentCategory, { ...state.history[currentCategory], lastPage: page });
+      updateParams({
+        history: {
+          ...params.history,
+          [currentCategory]: { ...params.history[currentCategory], lastPage: page },
+        },
+      });
       fetchMovies(currentCategory, page);
     },
-    [fetchMovies, state, updateHistory]
+    [fetchMovies, params, updateParams]
   );
 
+  // 导致递归刷新
   const handleCategoryChange = useCallback(
     (category) => {
-      const currentPage = state.history[category].lastPage;
+      const currentPage = params.history[category].lastPage;
       fetchMovies(category, currentPage);
 
-      const currentCategory = state.lastCategory;
+      const currentCategory = params.lastCategory;
-      updateHistory(currentCategory, { ...state.history[currentCategory], scrollPos: window.scrollY });
+      updateParams({
-      updateLastCategory(category);
+        lastCategory: category,
+        history: {
+          ...params.history,
+          [currentCategory]: { ...params.history[currentCategory], scrollPos: window.scrollY },
+        },
+      });
     },
-    [fetchMovies, state, updateHistory, updateLastCategory]
+    [fetchMovies, params, updateParams]
   );
 
   const handleRenderComplete = useCallback(() => {
-    const { scrollPos } = state.history[state.lastCategory];
+    const { scrollPos } = params.history[params.lastCategory];
     window.scrollTo(0, scrollPos);
-  }, [state]);
+  }, [params]);
 
   const handleMovieCardClick = () => {
-    const currentCategory = state.lastCategory;
+    const currentCategory = params.lastCategory;
-    updateHistory(currentCategory, { ...state.history[currentCategory], scrollPos: window.scrollY });
+    updateParams({
+      history: {
+        ...params.history,
+        [currentCategory]: { ...params.history[currentCategory], scrollPos: window.scrollY },
+      },
+    });
   };
 
   return (
     <Container style={{ marginTop: 20 }}>
       <CategoryNav
-        categories={config.categories} // 修改这里
+        categories={categories}
-        currentCategory={state.lastCategory} // 修改这里
+        currentCategory={params.lastCategory}
         onCategoryChange={handleCategoryChange}
       />
 
-      <PaginationWrapper page={state.pagination.page} length={state.pagination.length} onPageChange={handlePageChange} />
+      <PaginationWrapper page={pagination.page} length={pagination.length} onPageChange={handlePageChange} />
 
-      {state.loading ? (
+      {loading ? (
         <Loading />
       ) : (
         <MoviesGrid
-          movies={state.pagination.movies}
+          movies={pagination.movies}
           config={config}
           onRenderComplete={handleRenderComplete}
-          onMovieCardClick={handleMovieCardClick}
+         onMovieCardClick={handleMovieCardClick}
         />
       )}
 
-      <PaginationWrapper page={state.pagination.page} length={state.pagination.length} onPageChange={handlePageChange} />
+      <PaginationWrapper page={pagination.page} length={pagination.length} onPageChange={handlePageChange} />
     </Container>
   );
 };
@@ -163,6 +168,7 @@ const PaginationWrapper = ({ page, length, onPageChange }) => (
     <Pagination count={length} page={page} onChange={onPageChange} />
   </Grid>
 );
+ 
 
 const MoviesGrid = ({ movies, config, onRenderComplete, onMovieCardClick }) => {
   useEffect(() => {
@@ -179,7 +185,7 @@ const MoviesGrid = ({ movies, config, onRenderComplete, onMovieCardClick }) => {
           <Link
             to={`/res/${item.filename}`}
             style={{ textDecoration: 'none', paddingBottom: 10 }}
-            onClick={onMovieCardClick}
+            onClick={onMovieCardClick} // 修改这里
           >
             <MovieCard movie={item} config={config} />
           </Link>