From 8b4161642915f4ce9cbf2dc21c691a062c8ed986 Mon Sep 17 00:00:00 2001
From: LASER-Yi <ly0007@yeah.net>
Date: Sun, 9 May 2021 21:42:34 +0800
Subject: [PATCH] no log: use useDidUpdate hook to detect loading state

---
 frontend/src/Movies/Detail/index.tsx          |  4 +--
 frontend/src/Series/Episodes/index.tsx        |  4 +--
 frontend/src/Settings/components/provider.tsx |  4 +--
 frontend/src/utilites/hooks.ts                | 33 +++++--------------
 4 files changed, 14 insertions(+), 31 deletions(-)

diff --git a/frontend/src/Movies/Detail/index.tsx b/frontend/src/Movies/Detail/index.tsx
index 593fabf50..5415d2c8c 100644
--- a/frontend/src/Movies/Detail/index.tsx
+++ b/frontend/src/Movies/Detail/index.tsx
@@ -25,7 +25,7 @@ import {
 import { ManualSearchModal } from "../../components/modals/ManualSearchModal";
 import ItemOverview from "../../generic/ItemOverview";
 import { RouterEmptyPath } from "../../special-pages/404";
-import { useWhenLoadingFinish } from "../../utilites";
+import { useOnLoadingFinish } from "../../utilites";
 import Table from "./table";
 
 const download = (item: any, result: SearchResultType) => {
@@ -63,7 +63,7 @@ const MovieDetailView: FunctionComponent<Props> = ({ match }) => {
     }
   }, [movie.data]);
 
-  useWhenLoadingFinish(movie, validator);
+  useOnLoadingFinish(movie, validator);
 
   if (isNaN(id) || !valid) {
     return <Redirect to={RouterEmptyPath}></Redirect>;
diff --git a/frontend/src/Series/Episodes/index.tsx b/frontend/src/Series/Episodes/index.tsx
index aebbefac8..169a30ba3 100644
--- a/frontend/src/Series/Episodes/index.tsx
+++ b/frontend/src/Series/Episodes/index.tsx
@@ -27,7 +27,7 @@ import {
 } from "../../components";
 import ItemOverview from "../../generic/ItemOverview";
 import { RouterEmptyPath } from "../../special-pages/404";
-import { useWhenLoadingFinish } from "../../utilites";
+import { useOnLoadingFinish } from "../../utilites";
 import Table from "./table";
 
 interface Params {
@@ -70,7 +70,7 @@ const SeriesEpisodesView: FunctionComponent<Props> = (props) => {
     }
   }, [serie.data]);
 
-  useWhenLoadingFinish(serie, validator);
+  useOnLoadingFinish(serie, validator);
 
   const profile = useProfileBy(serie.data?.profileId);
 
diff --git a/frontend/src/Settings/components/provider.tsx b/frontend/src/Settings/components/provider.tsx
index bb136328a..1c66e97b7 100644
--- a/frontend/src/Settings/components/provider.tsx
+++ b/frontend/src/Settings/components/provider.tsx
@@ -14,7 +14,7 @@ import { useSystemSettings } from "../../@redux/hooks";
 import { useUpdateLocalStorage } from "../../@storage/local";
 import { SystemApi } from "../../apis";
 import { ContentHeader } from "../../components";
-import { useWhenLoadingFinish } from "../../utilites";
+import { useOnLoadingFinish } from "../../utilites";
 import { log } from "../../utilites/logger";
 import {
   enabledLanguageKey,
@@ -65,7 +65,7 @@ const SettingsProvider: FunctionComponent<Props> = (props) => {
   }, []);
 
   const [settings] = useSystemSettings();
-  useWhenLoadingFinish(settings, cleanup);
+  useOnLoadingFinish(settings, cleanup);
 
   const saveSettings = useCallback((settings: LooseObject) => {
     submitHooks(settings);
diff --git a/frontend/src/utilites/hooks.ts b/frontend/src/utilites/hooks.ts
index a0b3f9310..532d60227 100644
--- a/frontend/src/utilites/hooks.ts
+++ b/frontend/src/utilites/hooks.ts
@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useMemo } from "react";
 import { useHistory } from "react-router";
+import { useDidUpdate } from "rooks";
 import { getBaseUrl } from ".";
 
 export function useBaseUrl(slash: boolean = false) {
@@ -43,31 +44,13 @@ export function useSessionStorage(
   return [sessionStorage.getItem(key), dispatch];
 }
 
-export function useWatcher<T>(
-  curr: T,
-  expected: T,
-  onSame?: () => void,
-  onDiff?: () => void
-) {
-  const [, setPrevious] = useState(curr);
-
-  useEffect(() => {
-    setPrevious((prev) => {
-      if (prev !== curr) {
-        if (curr !== expected) {
-          onDiff && onDiff();
-        } else {
-          onSame && onSame();
-        }
-      }
-      return curr;
-    });
-  }, [curr, expected, onDiff, onSame]);
-}
-
-export function useWhenLoadingFinish(
+export function useOnLoadingFinish(
   state: Readonly<AsyncState<any>>,
   callback: () => void
 ) {
-  return useWatcher(state.updating, true, undefined, callback);
+  return useDidUpdate(() => {
+    if (!state.updating) {
+      callback();
+    }
+  }, [state.updating]);
 }