From e13136a334366fd7c608bfddc28ce283ba68dbad Mon Sep 17 00:00:00 2001 From: makame Date: Tue, 6 Oct 2020 13:51:26 +0200 Subject: [PATCH] style: use react-service-provider --- package-lock.json | 7 ++- package.json | 1 + src/app.tsx | 27 ++++------ src/app/Auth/AuthService.tsx | 2 +- src/app/ConfigService.tsx | 2 +- src/app/Dashboard/DashboardService.tsx | 2 +- src/app/Dashboard/FavouriteService.tsx | 2 +- src/app/Dashboard/MessageService.tsx | 2 +- src/app/Dashboard/RepositoryUserService.tsx | 2 +- src/app/Layout/SearchService.tsx | 2 +- src/app/Loading/LoadingService.tsx | 2 +- src/components/Layout/LayoutService.ts | 2 +- .../ServiceProvider/ServiceProvider.tsx | 54 ------------------- src/components/ServiceProvider/context.tsx | 11 ---- 14 files changed, 27 insertions(+), 91 deletions(-) delete mode 100644 src/components/ServiceProvider/ServiceProvider.tsx delete mode 100644 src/components/ServiceProvider/context.tsx diff --git a/package-lock.json b/package-lock.json index f982a95..ad4e403 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "git-activity-team-tracker", - "version": "0.4.9", + "version": "0.4.10", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -17154,6 +17154,11 @@ } } }, + "react-service-provider": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-service-provider/-/react-service-provider-1.2.0.tgz", + "integrity": "sha512-eGNMqRbTcecgEhm2yMHpvPUuBGHyoZm4RzkitCy9fEMz0uzGXRx3kOjnb35f0qNDMB6MD7fB8Gdm2Uo9XX9l2g==" + }, "react-side-effect": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz", diff --git a/package.json b/package.json index 1d9c838..cb93707 100644 --- a/package.json +++ b/package.json @@ -113,6 +113,7 @@ "react-spring": "^8.0.27", "react-toastify": "^6.0.5", "react-virtualized": "^9.21.2", + "react-service-provider": "^1.2.0", "@reach/dialog": "^0.11.2", "recharts": "^2.0.0-beta.5", "safe-eval": "^0.4.1", diff --git a/src/app.tsx b/src/app.tsx index 022a3a7..a77d019 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -2,10 +2,7 @@ import React from "react"; import { HashRouter as Router } from "react-router-dom"; import { RoutedContent } from "./routing"; import { AppLayout } from "./app/Layout/AppLayout"; -import { - ServiceProviderFactory, - ServiceProviderHook, -} from "./components/ServiceProvider/ServiceProvider"; +import { useServiceProvider } from "react-service-provider"; import { AuthService } from "./app/Auth/AuthService"; import { LoadingScreen } from "./app/Loading/LoadingScreen"; import { LoadingService } from "./app/Loading/LoadingService"; @@ -20,18 +17,16 @@ import { LayoutService } from "./components/Layout/LayoutService"; const basePath = process.env.BASE_PATH || "/"; export const App = () => { - const [ServiceProvider] = React.useState(() => - ServiceProviderFactory( - AuthService, - LayoutService, - LoadingService, - FavouriteService, - DashboardService, - SearchService, - MessageService, - RepositoryUserService, - ConfigService - ) + const [ServiceProvider, ServiceProviderHook] = useServiceProvider( + AuthService, + LayoutService, + LoadingService, + FavouriteService, + DashboardService, + SearchService, + MessageService, + RepositoryUserService, + ConfigService ); return ( diff --git a/src/app/Auth/AuthService.tsx b/src/app/Auth/AuthService.tsx index afa5c31..2586176 100755 --- a/src/app/Auth/AuthService.tsx +++ b/src/app/Auth/AuthService.tsx @@ -2,7 +2,7 @@ import React from "react"; import md5 from "md5"; import { useLocalStore } from "mobx-react"; import { useHistory, useLocation } from "react-router"; -import { createService } from "~/components/ServiceProvider/ServiceProvider"; +import { createService } from "react-service-provider"; import { LoadingService } from "../Loading/LoadingService"; import { useOnChange } from "~/hooks"; import { ipc } from "~/shared/ipc"; diff --git a/src/app/ConfigService.tsx b/src/app/ConfigService.tsx index 5ce6d23..0c5c185 100755 --- a/src/app/ConfigService.tsx +++ b/src/app/ConfigService.tsx @@ -1,6 +1,6 @@ import React from "react"; import { useLocalStore } from "mobx-react"; -import { createService } from "~/components/ServiceProvider/ServiceProvider"; +import { createService } from "react-service-provider"; import { LoadingService } from "./Loading/LoadingService"; import { useOnChange } from "~/hooks"; import { ipc } from "~/shared/ipc"; diff --git a/src/app/Dashboard/DashboardService.tsx b/src/app/Dashboard/DashboardService.tsx index 73ad0bd..cad10cf 100755 --- a/src/app/Dashboard/DashboardService.tsx +++ b/src/app/Dashboard/DashboardService.tsx @@ -1,6 +1,6 @@ import React from "react"; import { useLocalStore } from "mobx-react"; -import { createService } from "~/components/ServiceProvider/ServiceProvider"; +import { createService } from "react-service-provider"; import { useOnChange, useDelay } from "~/hooks"; import { Config } from "~/shared/Config"; import { ipc, IpcHandler } from "~/shared/ipc"; diff --git a/src/app/Dashboard/FavouriteService.tsx b/src/app/Dashboard/FavouriteService.tsx index 3443810..2bf3716 100755 --- a/src/app/Dashboard/FavouriteService.tsx +++ b/src/app/Dashboard/FavouriteService.tsx @@ -1,7 +1,7 @@ import React from "react"; import { useLocalStore } from "mobx-react"; import moment from "moment"; -import { createService } from "~/components/ServiceProvider/ServiceProvider"; +import { createService } from "react-service-provider"; import { useSyncLocalStorage, useOnLoadPathname, useOnChange } from "~/hooks"; import { Config } from "~/shared/Config"; import { ipc } from "~/shared/ipc"; diff --git a/src/app/Dashboard/MessageService.tsx b/src/app/Dashboard/MessageService.tsx index 8007e60..10f78b5 100755 --- a/src/app/Dashboard/MessageService.tsx +++ b/src/app/Dashboard/MessageService.tsx @@ -1,6 +1,6 @@ import React from "react"; import { useLocalStore } from "mobx-react"; -import { createService } from "~/components/ServiceProvider/ServiceProvider"; +import { createService } from "react-service-provider"; import { useOnChange, useDelay } from "~/hooks"; import { ipc } from "~/shared/ipc"; import { DashboardState, DashboardService } from "./DashboardService"; diff --git a/src/app/Dashboard/RepositoryUserService.tsx b/src/app/Dashboard/RepositoryUserService.tsx index f8f8bf4..d4cfd42 100755 --- a/src/app/Dashboard/RepositoryUserService.tsx +++ b/src/app/Dashboard/RepositoryUserService.tsx @@ -1,6 +1,6 @@ import React from "react"; import { useLocalStore } from "mobx-react"; -import { createService } from "~/components/ServiceProvider/ServiceProvider"; +import { createService } from "react-service-provider"; import { useDelay } from "~/hooks"; import { ipc } from "~/shared/ipc"; import { DashboardService, DashboardState } from "./DashboardService"; diff --git a/src/app/Layout/SearchService.tsx b/src/app/Layout/SearchService.tsx index 82c9280..e885a3f 100755 --- a/src/app/Layout/SearchService.tsx +++ b/src/app/Layout/SearchService.tsx @@ -1,6 +1,6 @@ import React from "react"; import { useLocalStore } from "mobx-react"; -import { createService } from "~/components/ServiceProvider/ServiceProvider"; +import { createService } from "react-service-provider"; import { useOnLoad, useOnChange } from "~/hooks"; import { Config } from "~/shared/Config"; import { ipc } from "~/shared/ipc"; diff --git a/src/app/Loading/LoadingService.tsx b/src/app/Loading/LoadingService.tsx index 1e04188..564f927 100644 --- a/src/app/Loading/LoadingService.tsx +++ b/src/app/Loading/LoadingService.tsx @@ -1,6 +1,6 @@ import React from "react"; import { useLocalStore } from "mobx-react"; -import { createService } from "~/components/ServiceProvider/ServiceProvider"; +import { createService } from "react-service-provider"; import { useOnLoad, useOnChange } from "~/hooks"; export interface LoadingStore { diff --git a/src/components/Layout/LayoutService.ts b/src/components/Layout/LayoutService.ts index 8967cc9..5974ef3 100644 --- a/src/components/Layout/LayoutService.ts +++ b/src/components/Layout/LayoutService.ts @@ -1,5 +1,5 @@ import React from "react"; -import { createService } from "~/components/ServiceProvider/ServiceProvider"; +import { createService } from "react-service-provider"; import { useLocalStore } from "mobx-react"; import { isEqual } from "lodash"; import { useSimpleSyncLocalStorage } from "~/hooks"; diff --git a/src/components/ServiceProvider/ServiceProvider.tsx b/src/components/ServiceProvider/ServiceProvider.tsx deleted file mode 100644 index 149034a..0000000 --- a/src/components/ServiceProvider/ServiceProvider.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from "react"; -import { ServiceContextHook, ServiceProviderContext } from "./context"; - -export function createService( - useState: () => T, - useLogic: (state: T) => void = () => {} -): ServiceContextHook { - const context: any = React.createContext(null); - context.useState = useState; - context.useLogic = useLogic; - return context; -} - -export const ServiceProviderHook: React.FC = ({ children }) => { - const services = React.useContext(ServiceProviderContext); - for (const service of services) { - // eslint-disable-next-line react-hooks/rules-of-hooks - const state = React.useContext(service); - service.useLogic(state); - } - return <>{children}; -}; - -const createServiceProvider: ( - Parent: React.FC, - service: ServiceContextHook -) => React.FC = (Parent, service) => { - Parent = Parent || React.Fragment; - return ({ children }) => { - service.value = service.useState(); - return ( - - {children} - - ); - }; -}; - -export const ServiceProviderFactory = ( - ...services: ServiceContextHook[] -): React.FC => ({ children }) => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const [Provider] = React.useState(() => - services.reduce((Component, service) => { - return createServiceProvider(Component, service); - }, null) - ); - - return ( - - {children} - - ); -}; diff --git a/src/components/ServiceProvider/context.tsx b/src/components/ServiceProvider/context.tsx deleted file mode 100644 index bf45eeb..0000000 --- a/src/components/ServiceProvider/context.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from "react"; - -export type ServiceContextHook = React.Context & { - useState: () => T; - value?: T; - useLogic: (state: T) => void; -}; - -export const ServiceProviderContext = React.createContext( - null -);