> {
@@ -8,9 +8,8 @@ const withAuth = (Component: ComponentType
) => {
return {this.renderComponent}
}
- public renderComponent = (authProps: Value) => {
- const props = { auth: authProps, ...this.props }
- return
+ public renderComponent = (authProps: AuthContextValue) => {
+ return
}
}
}
@@ -18,5 +17,5 @@ const withAuth =
(Component: ComponentType
) => {
export default withAuth
export interface WithAuth {
- auth: Value
+ auth: AuthContextValue
}
diff --git a/packages/client/src/pages/Register/Register.tsx b/packages/client/src/pages/Register/Register.tsx
index d05db40..b3e7f0e 100644
--- a/packages/client/src/pages/Register/Register.tsx
+++ b/packages/client/src/pages/Register/Register.tsx
@@ -6,10 +6,10 @@ import {
} from '@notowork/lib/validators'
import { Status } from '@notowork/models/interfaces'
import React, {
- ChangeEvent,
ChangeEventHandler,
- Component,
+ FC,
MouseEventHandler,
+ useState,
} from 'react'
import { withAuth, WithAuth } from '~auth'
import {
@@ -23,129 +23,96 @@ import {
} from '~generic/Sign'
import Switch from './Switch'
-class Register extends Component {
- public readonly state: RegisterState = {
- email: '',
- emailError: '',
- password: '',
- passwordError: '',
- showSignInError: false,
- acceptDataProcessingTerms: false,
- acceptError: '',
- acceptTermsOfService: false,
- }
+const Register: FC = ({ auth: { status }, classes }) => {
+ const [email, setEmail] = useState('')
+ const [emailError, setEmailError] = useState('')
+ const [password, setPassword] = useState('')
+ const [passwordError, setPasswordError] = useState('')
+ // const [showSignInError, setShowSignInError] = useState(false)
+ const [acceptDataProcessingTerms, setAcceptDataProcessingTerms] = useState(
+ false,
+ )
+ const [, setAcceptError] = useState('')
+ const [acceptTermsOfService, setAcceptTermsOfService] = useState(false)
- public render() {
- const {
- auth: { status },
- classes,
- } = this.props
- const {
- acceptDataProcessingTerms,
- acceptTermsOfService,
- email,
- emailError,
- password,
- passwordError,
- } = this.state
- const isPending = status === Status.Pending
+ const isPending = status === Status.Pending
- return (
-
-
-
-
-
-
-
- Hasło powinno zawierać minimum 6 znaków, w tym jedną wielką literę i
- cyfrę
-
-
-
-
- Akceptuję regulamin.
-
- }
- checked={acceptTermsOfService}
- disabled={isPending}
- onChange={this.handleChangeCheckbox('acceptTermsOfService')}
- name="acceptTermsOfService"
- />
-
-
-
-
-
+ const handleSubmit: MouseEventHandler = () => {
+ setEmailError(emailValidator(email))
+ setPasswordError(passwordValidator(password))
+ setAcceptError(
+ requiredValidator(acceptTermsOfService) ||
+ requiredValidator(acceptDataProcessingTerms) ||
+ '',
)
}
- private handleSubmit: MouseEventHandler = () => {
- this.setState(state => {
- const errors = {
- emailError: emailValidator(state.email),
- passwordError: passwordValidator(state.password),
- acceptError:
- requiredValidator(state.acceptTermsOfService) ||
- requiredValidator(state.acceptDataProcessingTerms) ||
- '',
- }
-
- const hasErrors = Object.values(errors).some(error =>
- Boolean(error.length),
- )
-
- if (hasErrors) return { ...errors }
-
- return null
- })
+ const handleChangePassword: ChangeEventHandler = e => {
+ setPassword(e.target.value)
+ setPasswordError('')
}
-
- private handleChangeText: ChangeEventHandler = e => {
- const state = {
- [e.target.name]: e.target.value,
- emailError: '',
- passwordError: '',
- } as any
-
- // https://github.com/Microsoft/TypeScript/issues/13948
- this.setState(state)
+ const handleChangeEmail: ChangeEventHandler = e => {
+ setEmail(e.target.value)
+ setEmailError('')
}
- private handleChangeCheckbox = (
- name: 'acceptDataProcessingTerms' | 'acceptTermsOfService',
- ) => (_: ChangeEvent, checked: boolean) => {
- switch (name) {
- case 'acceptDataProcessingTerms':
- return this.setState({ [name]: checked })
- case 'acceptTermsOfService':
- return this.setState({ [name]: checked })
- }
- }
+ const handleAcceptDataTerms = (_: any, checked: boolean) =>
+ setAcceptDataProcessingTerms(checked)
+ const handleAcceptServiceTerms = (_: any, checked: boolean) =>
+ setAcceptTermsOfService(checked)
+
+ return (
+
+
+
+
+
+
+
+ Hasło powinno zawierać minimum 6 znaków, w tym jedną wielką literę i
+ cyfrę
+
+
+
+
+ Akceptuję regulamin.
+
+ }
+ checked={acceptTermsOfService}
+ disabled={isPending}
+ onChange={handleAcceptServiceTerms}
+ name="acceptTermsOfService"
+ />
+
+
+
+
+
+ )
}
const styles = {
@@ -163,18 +130,4 @@ const styles = {
interface RegisterProps extends WithAuth, WithStyles {}
-interface Errors {
- emailError: string
- passwordError: string
-}
-
-interface RegisterState extends Errors {
- email: string
- password: string
- showSignInError: boolean
- acceptDataProcessingTerms: boolean
- acceptError: string
- acceptTermsOfService: boolean
-}
-
export default withAuth(withStyles(styles)(Register))
diff --git a/packages/client/src/pages/SignIn/SignIn.tsx b/packages/client/src/pages/SignIn/SignIn.tsx
index e87df76..4ea45ca 100644
--- a/packages/client/src/pages/SignIn/SignIn.tsx
+++ b/packages/client/src/pages/SignIn/SignIn.tsx
@@ -11,10 +11,10 @@ import {
} from '@notowork/lib/validators'
import { Status } from '@notowork/models/interfaces'
import React, {
- ChangeEvent,
ChangeEventHandler,
- Component,
+ FC,
MouseEventHandler,
+ useState,
} from 'react'
import { Redirect } from 'react-router-dom'
import { withAuth, WithAuth } from '~auth'
@@ -30,137 +30,88 @@ import {
import Checkbox from './components/Checkbox'
import SnackbarError from './components/SnackbarError'
-class SignIn extends Component {
- public readonly state: SignInState = {
- email: '',
- emailError: '',
- password: '',
- passwordError: '',
- showSignInError: false,
- rememberMe: false,
+const SignIn: FC = ({
+ auth: { status, signIn, signedIn, error },
+ classes,
+}) => {
+ const [email, setEmail] = useState('')
+ const [emailError, setEmailError] = useState('')
+ const [password, setPassword] = useState('')
+ const [passwordError, setPasswordError] = useState('')
+ const [showSignInError, setShowSignInError] = useState(false)
+ const [rememberMe, setRememberMe] = useState(false)
+
+ const handleChangePassword: ChangeEventHandler = e => {
+ setPassword(e.target.value)
+ setPasswordError('')
}
-
- public componentDidUpdate(prevProps: SignInProps) {
- if (
- prevProps.auth.status === Status.Pending &&
- this.props.auth.status === Status.Failure
- ) {
- this.setState({ showSignInError: true })
- }
- }
-
- public render() {
- if (this.props.auth.signedIn) return
-
- const {
- auth: { status },
- classes,
- } = this.props
- const {
- rememberMe,
- email,
- emailError,
- password,
- passwordError,
- showSignInError,
- } = this.state
- const isPending = status === Status.Pending
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- Nie pamiętam hasła
-
-
-
-
- )
+ const handleChangeEmail: ChangeEventHandler = e => {
+ setEmail(e.target.value)
+ setEmailError('')
}
- private handleChangeText: ChangeEventHandler = e => {
- const state = {
- [e.target.name]: e.target.value,
- emailError: '',
- passwordError: '',
- }
-
- // https://github.com/Microsoft/TypeScript/issues/13948
- this.setState(state as Pick<
- SignInState,
- Exclude
- >)
- }
-
- private handleSubmit: MouseEventHandler = () => {
- this.setState((state, props) => {
- const errors = {
- emailError: emailValidator(state.email),
- passwordError: passwordLengthValidator(
- state.password,
- 'Nieprawidłowe hasło!',
- ),
- }
-
- const hasErrors = Object.values(errors).some(error =>
- Boolean(error.length),
- )
-
- if (hasErrors) return { ...errors }
-
- props.auth.signIn(state.email, state.password).catch(logError)
+ const handleSubmit: MouseEventHandler = () => {
+ setEmailError(emailValidator(email))
+ setPasswordError(passwordLengthValidator(password, 'Nieprawidłowe hasło!'))
- return null
- })
+ signIn(email, password).catch(logError)
}
- private handleChangeCheckbox = (
- e: ChangeEvent,
- checked: boolean,
- ) => {
- const state = { [e.target.name]: checked }
-
- this.setState(state as Pick)
- }
-
- private hideSignInError: () => void = () => {
- this.setState({ showSignInError: false })
- }
+ const handleChangeRememberMe = (_: any, checked: boolean) =>
+ setRememberMe(checked)
+
+ const hideSignInError = () => setShowSignInError(false)
+
+ if (signedIn) return
+
+ const isPending = status === Status.Pending
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ Nie pamiętam hasła
+
+
+ {error ? {error}
: null}
+
+
+ )
}
const styles: StyleRulesCallback = () => ({
@@ -174,16 +125,4 @@ const styles: StyleRulesCallback = () => ({
interface SignInProps extends WithAuth, WithStyles {}
-interface Errors {
- emailError: string
- passwordError: string
-}
-
-interface SignInState extends Errors {
- email: string
- password: string
- rememberMe: boolean
- showSignInError: boolean
-}
-
export default withAuth(withStyles(styles)(SignIn))