From 0c9f2e7cee619866963b738b5c18348f5d021a90 Mon Sep 17 00:00:00 2001 From: Simone Date: Tue, 21 May 2024 10:37:59 +0200 Subject: [PATCH] fix(chore): replace use-context-selector context with React Context (#20287) * fix(chore): replace use-context-selector context with React Context * fix(chore): remove the selector * fix(chore): remove use-context-selector * fix(chore): fix prettier issue --- .../admin/05-features/authentication.md | 2 +- packages/core/admin/admin/src/App.tsx | 2 +- .../admin/src/components/AuthenticatedApp.tsx | 5 +++-- .../admin/admin/src/components/Context.tsx | 18 +++++++----------- .../admin/admin/src/components/LeftMenu.tsx | 2 +- .../admin/admin/src/components/NpsSurvey.tsx | 2 +- .../admin/src/components/PrivateRoute.tsx | 2 +- .../admin/admin/src/features/Configuration.tsx | 2 +- .../admin/admin/src/pages/Auth/AuthPage.tsx | 2 +- .../admin/src/pages/Auth/components/Login.tsx | 2 +- .../src/pages/Auth/components/Register.tsx | 2 +- .../pages/Auth/components/ResetPassword.tsx | 2 +- .../core/admin/admin/src/pages/ProfilePage.tsx | 2 +- .../core/admin/admin/src/pages/UseCasePage.tsx | 5 ++++- .../admin/ee/admin/src/pages/AuthResponse.tsx | 2 +- packages/core/admin/package.json | 1 - yarn.lock | 18 ------------------ 17 files changed, 26 insertions(+), 45 deletions(-) diff --git a/docs/docs/docs/01-core/admin/05-features/authentication.md b/docs/docs/docs/01-core/admin/05-features/authentication.md index 7fc7cb2a136..6a8a2f22f64 100644 --- a/docs/docs/docs/01-core/admin/05-features/authentication.md +++ b/docs/docs/docs/01-core/admin/05-features/authentication.md @@ -12,7 +12,7 @@ However, we now store the token in state along with the user & this can be passe ## Usage The `useAuth` hook is built on top of a custom `createContext` version which asserts the context is there and throws an error if this is not the case. -Therefore the hook expects a "consumer name" to be passed so a helpful error message can be provided. It is also built using the `use-context-selector` library meaning we can also pass a selector function to the hook to select a specific part of the context. +Therefore the hook expects a "consumer name" to be passed so a helpful error message can be provided. It is also built using the React.Context API meaning we can have back the context from the hook. ```ts const token = useAuth('App', (state) => state.token); // token will be a string or null diff --git a/packages/core/admin/admin/src/App.tsx b/packages/core/admin/admin/src/App.tsx index abc5318638a..989d97e5179 100644 --- a/packages/core/admin/admin/src/App.tsx +++ b/packages/core/admin/admin/src/App.tsx @@ -70,7 +70,7 @@ export const App = ({ authLogo, menuLogo, showReleaseNotification, showTutorials const { formatMessage } = useIntl(); const dispatch = useDispatch(); const appInfo = useAppInfo(); - const token = useAuth('App', (state) => state.token); + const { token } = useAuth('App'); const authRoutes = React.useMemo(() => { if (!routes) { diff --git a/packages/core/admin/admin/src/components/AuthenticatedApp.tsx b/packages/core/admin/admin/src/components/AuthenticatedApp.tsx index eab33fbd1c9..178d51a6bed 100644 --- a/packages/core/admin/admin/src/components/AuthenticatedApp.tsx +++ b/packages/core/admin/admin/src/components/AuthenticatedApp.tsx @@ -21,7 +21,8 @@ const strapiVersion = packageJSON.version; const AuthenticatedApp = () => { const { setGuidedTourVisibility } = useGuidedTour(); - const userInfo = useAuth('AuthenticatedApp', (state) => state.user); + const { user } = useAuth('AuthenticatedApp'); + const userInfo = user; const [userDisplayName, setUserDisplayName] = React.useState(() => userInfo ? userInfo.username || getFullName(userInfo.firstname ?? '', userInfo.lastname) : '' ); @@ -76,7 +77,7 @@ const AuthenticatedApp = () => { } }, [showReleaseNotification]); - const userRoles = useAuth('AuthenticatedApp', (state) => state.user?.roles); + const userRoles = user?.roles; React.useEffect(() => { if (userRoles) { diff --git a/packages/core/admin/admin/src/components/Context.tsx b/packages/core/admin/admin/src/components/Context.tsx index 28b7040b24c..91ec71b2c67 100644 --- a/packages/core/admin/admin/src/components/Context.tsx +++ b/packages/core/admin/admin/src/components/Context.tsx @@ -1,12 +1,10 @@ import * as React from 'react'; -import * as ContextSelector from 'use-context-selector'; - function createContext( rootComponentName: string, defaultContext?: ContextValueType ) { - const Context = ContextSelector.createContext(defaultContext); + const Context = React.createContext(defaultContext); const Provider = (props: ContextValueType & { children: React.ReactNode }) => { const { children, ...context } = props; @@ -16,15 +14,13 @@ function createContext( return {children}; }; - const useContext = ( - consumerName: string, - selector: (value: ContextValueType) => Selected - ): Selected => - ContextSelector.useContextSelector(Context, (ctx) => { - if (ctx) return selector(ctx); - // it's a required context. + const useContext = (consumerName: string) => { + const ctx = React.useContext(Context); + if (!ctx) { throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``); - }); + } + return ctx; + }; Provider.displayName = rootComponentName + 'Provider'; diff --git a/packages/core/admin/admin/src/components/LeftMenu.tsx b/packages/core/admin/admin/src/components/LeftMenu.tsx index 6a72e8335d7..b5546c92263 100644 --- a/packages/core/admin/admin/src/components/LeftMenu.tsx +++ b/packages/core/admin/admin/src/components/LeftMenu.tsx @@ -69,7 +69,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) = const { formatMessage } = useIntl(); const { trackUsage } = useTracking(); const { pathname } = useLocation(); - const logout = useAuth('Logout', (state) => state.logout); + const { logout } = useAuth('Logout'); const initials = userDisplayName .split(' ') diff --git a/packages/core/admin/admin/src/components/NpsSurvey.tsx b/packages/core/admin/admin/src/components/NpsSurvey.tsx index a6d1f589a5b..a221e48c062 100644 --- a/packages/core/admin/admin/src/components/NpsSurvey.tsx +++ b/packages/core/admin/admin/src/components/NpsSurvey.tsx @@ -164,7 +164,7 @@ const NpsSurvey = () => { }; }, []); - const user = useAuth('NpsSurvey', (state) => state.user); + const { user } = useAuth('NpsSurvey'); if (!displaySurvey) { return null; diff --git a/packages/core/admin/admin/src/components/PrivateRoute.tsx b/packages/core/admin/admin/src/components/PrivateRoute.tsx index 3328d2ed705..8df014dc8da 100644 --- a/packages/core/admin/admin/src/components/PrivateRoute.tsx +++ b/packages/core/admin/admin/src/components/PrivateRoute.tsx @@ -9,7 +9,7 @@ interface PrivateRouteProps extends Omit { } const PrivateRoute = ({ children, ...rest }: PrivateRouteProps) => { - const token = useAuth('PrivateRoute', (state) => state.token); + const { token } = useAuth('PrivateRoute'); return ( state.token); + const { token } = useAuth('ConfigurationProvider'); const { data, isSuccess } = useProjectSettingsQuery(undefined, { skip: !token, diff --git a/packages/core/admin/admin/src/pages/Auth/AuthPage.tsx b/packages/core/admin/admin/src/pages/Auth/AuthPage.tsx index e6cdcf86855..9633db8a7e3 100644 --- a/packages/core/admin/admin/src/pages/Auth/AuthPage.tsx +++ b/packages/core/admin/admin/src/pages/Auth/AuthPage.tsx @@ -38,7 +38,7 @@ const AuthPage = ({ hasAdmin }: AuthPageProps) => { } ); - const token = useAuth('AuthPage', (state) => state.token); + const { token } = useAuth('AuthPage'); if (!authType || !forms) { return ; diff --git a/packages/core/admin/admin/src/pages/Auth/components/Login.tsx b/packages/core/admin/admin/src/pages/Auth/components/Login.tsx index 02b14d3daa8..982287ca4be 100644 --- a/packages/core/admin/admin/src/pages/Auth/components/Login.tsx +++ b/packages/core/admin/admin/src/pages/Auth/components/Login.tsx @@ -40,7 +40,7 @@ const Login = ({ children }: LoginProps) => { const query = useQuery(); const { push } = useHistory(); - const login = useAuth('Login', (state) => state.login); + const { login } = useAuth('Login'); const handleLogin = async (body: Parameters[0]) => { setApiError(undefined); diff --git a/packages/core/admin/admin/src/pages/Auth/components/Register.tsx b/packages/core/admin/admin/src/pages/Auth/components/Register.tsx index 3122eed85e1..c16d6b3e6cb 100644 --- a/packages/core/admin/admin/src/pages/Auth/components/Register.tsx +++ b/packages/core/admin/admin/src/pages/Auth/components/Register.tsx @@ -144,7 +144,7 @@ const Register = ({ hasAdmin }: RegisterProps) => { const [registerAdmin] = useRegisterAdminMutation(); const [registerUser] = useRegisterUserMutation(); - const setToken = useAuth('Register', (state) => state.setToken); + const { setToken } = useAuth('Register'); const handleRegisterAdmin = async ( { news, ...body }: RegisterAdmin.Request['body'] & { news: boolean }, diff --git a/packages/core/admin/admin/src/pages/Auth/components/ResetPassword.tsx b/packages/core/admin/admin/src/pages/Auth/components/ResetPassword.tsx index 5fc270af888..7473ab79ef5 100644 --- a/packages/core/admin/admin/src/pages/Auth/components/ResetPassword.tsx +++ b/packages/core/admin/admin/src/pages/Auth/components/ResetPassword.tsx @@ -45,7 +45,7 @@ const ResetPassword = () => { const query = useQuery(); const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler(); - const setToken = useAuth('ResetPassword', (state) => state.setToken); + const { setToken } = useAuth('ResetPassword'); const [resetPassword, { error }] = useResetPasswordMutation(); diff --git a/packages/core/admin/admin/src/pages/ProfilePage.tsx b/packages/core/admin/admin/src/pages/ProfilePage.tsx index 934c54b8873..acc04c2ac28 100644 --- a/packages/core/admin/admin/src/pages/ProfilePage.tsx +++ b/packages/core/admin/admin/src/pages/ProfilePage.tsx @@ -81,7 +81,7 @@ const ProfilePage = () => { useFocusWhenNavigate(); - const user = useAuth('ProfilePage', (state) => state.user); + const { user } = useAuth('ProfilePage'); React.useEffect(() => { if (user) { diff --git a/packages/core/admin/admin/src/pages/UseCasePage.tsx b/packages/core/admin/admin/src/pages/UseCasePage.tsx index 6c8f276f789..bc5607369d2 100644 --- a/packages/core/admin/admin/src/pages/UseCasePage.tsx +++ b/packages/core/admin/admin/src/pages/UseCasePage.tsx @@ -77,7 +77,10 @@ export const UseCasePage = () => { const [role, setRole] = React.useState(null); const [otherRole, setOtherRole] = React.useState(''); - const { firstname, email } = useAuth('UseCasePage', (state) => state.user) ?? {}; + const { user } = useAuth('UseCasePage'); + const firstname = user?.firstname; + const email = user?.email; + const { hasAdmin } = parse(location?.search, { ignoreQueryPrefix: true }); const isOther = role === 'other'; diff --git a/packages/core/admin/ee/admin/src/pages/AuthResponse.tsx b/packages/core/admin/ee/admin/src/pages/AuthResponse.tsx index 8c222a2ccb2..f01b8bea28b 100644 --- a/packages/core/admin/ee/admin/src/pages/AuthResponse.tsx +++ b/packages/core/admin/ee/admin/src/pages/AuthResponse.tsx @@ -23,7 +23,7 @@ const AuthResponse = () => { ); }, [push, formatMessage]); - const setToken = useAuth('AuthResponse', (state) => state.setToken); + const { setToken } = useAuth('AuthResponse'); React.useEffect(() => { if (match?.params.authResponse === 'error') { diff --git a/packages/core/admin/package.json b/packages/core/admin/package.json index 5364a31ba32..f5589e83b50 100644 --- a/packages/core/admin/package.json +++ b/packages/core/admin/package.json @@ -160,7 +160,6 @@ "slate-react": "0.98.3", "style-loader": "3.3.4", "typescript": "5.2.2", - "use-context-selector": "1.4.1", "vite": "5.0.13", "webpack": "^5.89.0", "webpack-bundle-analyzer": "^4.10.1", diff --git a/yarn.lock b/yarn.lock index 2f18b2fb020..b17b3b99841 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7924,7 +7924,6 @@ __metadata: style-loader: "npm:3.3.4" styled-components: "npm:5.3.3" typescript: "npm:5.2.2" - use-context-selector: "npm:1.4.1" vite: "npm:5.0.13" webpack: "npm:^5.89.0" webpack-bundle-analyzer: "npm:^4.10.1" @@ -30579,23 +30578,6 @@ __metadata: languageName: node linkType: hard -"use-context-selector@npm:1.4.1": - version: 1.4.1 - resolution: "use-context-selector@npm:1.4.1" - peerDependencies: - react: ">=16.8.0" - react-dom: "*" - react-native: "*" - scheduler: ">=0.19.0" - peerDependenciesMeta: - react-dom: - optional: true - react-native: - optional: true - checksum: 50e501bc3220ad236f62c251edb8106bc03efa22c3cc6a42b27a4a095e3cbf9fcd5a2ca3ff05aace2015d84cce99cbd32c0ac59d2f1396239dd5fae14a738c3f - languageName: node - linkType: hard - "use-isomorphic-layout-effect@npm:^1.1.2": version: 1.1.2 resolution: "use-isomorphic-layout-effect@npm:1.1.2"