automat

src/components/LoginPage.jsx

@@ -1,11 +1,10 @@
-import { Component } from 'react';
-import { connect } from 'react-redux';
+import { PureComponent } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import GoogleIcon from '@mui/icons-material/Google';
 import { enqueueSnackbar } from 'notistack';
 import { notifyErrorMessage } from '../utils/notify';
-import { loginWithGoogle, selectAuthStatus, selectGoogleClientId } from '../store/authSlice';
+import authAutomat from '../automats/authAutomat';
 import { StorageManagerContext } from '../api/storageManagerContext';
 import {
   abortGoogleSignIn,
@@ -16,17 +15,25 @@ import {
   requestGoogleIdToken,
 } from '../auth/googleSignIn';
 
-class LoginPage extends Component {
+class LoginPage extends PureComponent {
   static contextType = StorageManagerContext;
 
   constructor(props) {
     super(props);
-    this.state = { busy: false };
+    this.state = { ...authAutomat.state, busy: false };
     this.handleLogin = this.handleLogin.bind(this);
   }
 
+  componentDidMount() {
+    this.unsubscribe = authAutomat.subscribe(this, ['status', 'googleClientId']);
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe?.();
+  }
+
   async handleLogin() {
-    const { googleClientId } = this.props;
+    const { googleClientId } = this.state;
     abortGoogleSignIn();
     try {
       const idToken = await requestGoogleIdToken(googleClientId, {
@@ -38,7 +45,7 @@ class LoginPage extends Component {
         },
       });
       this.setState({ busy: true });
-      await this.props.loginWithGoogle(idToken).unwrap();
+      await authAutomat.actions.loginWithGoogle(idToken);
       await this.context.updateAuthMe();
     } catch (err) {
       if (err instanceof GoogleSignInCancelledError) return;
@@ -74,8 +81,7 @@ class LoginPage extends Component {
   }
 
   render() {
-    const { busy } = this.state;
-    const { status, googleClientId } = this.props;
+    const { busy, status, googleClientId } = this.state;
     const loading = status === 'loading';
     const ready = Boolean(googleClientId);
 
@@ -103,13 +109,4 @@ class LoginPage extends Component {
   }
 }
 
-const mapStateToProps = (state) => ({
-  status: selectAuthStatus(state),
-  googleClientId: selectGoogleClientId(state),
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  loginWithGoogle: (credential) => dispatch(loginWithGoogle(credential)),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(LoginPage);
+export default LoginPage;