diff --git a/src/components/BirthdayPage/index.tsx b/src/components/BirthdayPage/index.tsx index b399387..ea77606 100644 --- a/src/components/BirthdayPage/index.tsx +++ b/src/components/BirthdayPage/index.tsx @@ -2,20 +2,20 @@ import { useState } from 'react' import { useNavigate } from 'react-router-dom' import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' -import { actions, RootState } from '../../store' -import routes from '../../routes' +import { actions, selectors } from '../../store' +import { DatePicker } from '../DateTimePicker' +import MainButton from '../MainButton' import Policy from '../Policy' import Purposes from '../Purposes' import Title from '../Title' -import { DatePicker } from '../DateTimePicker' -import MainButton from '../MainButton' +import routes from '../../routes' import './styles.css' function BirthdayPage(): JSX.Element { const { t } = useTranslation() const dispatch = useDispatch() const navigate = useNavigate() - const birthdate = useSelector((state: RootState) => state.form.birthdate) + const birthdate = useSelector(selectors.selectBirthdate) const [isDisabled, setIsDisabled] = useState(true) const links = [ { text: 'EULA', href: 'https://aura.wit.life/terms' }, diff --git a/src/components/BirthtimePage/index.tsx b/src/components/BirthtimePage/index.tsx index ad7be0d..02e138d 100644 --- a/src/components/BirthtimePage/index.tsx +++ b/src/components/BirthtimePage/index.tsx @@ -1,10 +1,10 @@ import { useNavigate } from "react-router-dom" import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' -import { actions, RootState } from '../../store' +import { actions, selectors } from '../../store' +import { TimePicker } from "../DateTimePicker" import Title from "../Title" import MainButton from "../MainButton" -import { TimePicker } from "../DateTimePicker" import routes from "../../routes" import './styles.css' @@ -12,7 +12,7 @@ function BirthtimePage(): JSX.Element { const { t } = useTranslation() const dispatch = useDispatch() const navigate = useNavigate(); - const birthtime = useSelector((state: RootState) => state.form.birthtime) + const birthtime = useSelector(selectors.selectBirthtime) const handleNext = () => navigate(routes.client.createProfile()) const handleChange = (value: string) => dispatch(actions.form.addTime(value)) return ( diff --git a/src/components/EmailEnterPage/index.tsx b/src/components/EmailEnterPage/index.tsx index 3a2820a..2ca9e6e 100644 --- a/src/components/EmailEnterPage/index.tsx +++ b/src/components/EmailEnterPage/index.tsx @@ -16,11 +16,12 @@ import routes from '../../routes' function EmailEnterPage(): JSX.Element { const api = useApi() + const { user, signUp } = useAuth() const { t, i18n } = useTranslation() const dispatch = useDispatch() const navigate = useNavigate() - const { user, signUp } = useAuth() - const { email, birthdate, birthtime } = useSelector(selectors.selectForm) + const email = useSelector(selectors.selectEmail) + const birthday = useSelector(selectors.selectBirthday) const [isDisabled, setIsDisabled] = useState(true) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) @@ -44,17 +45,10 @@ function EmailEnterPage(): JSX.Element { api.auth({ email, timezone, locale }) .then(({ auth: { token, user } }) => signUp(token, user)) .then((token) => { - const birthday = `${birthdate} ${birthtime}` const payload = { user: { profile_attributes: { birthday } }, token } return api.updateUser(payload) }) - .then(({ user }) => { - // TODO: remove this when understand btoa issue - if (user?.profile?.sign?.char) { - user.profile.sign.char = '' - } - dispatch(actions.user.update(user)) - }) + .then(({ user }) => dispatch(actions.user.update(user))) .then(() => navigate(routes.client.subscription())) .catch((error: Error) => setError(error)) .finally(() => setIsLoading(false)) diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 27f5308..12152cf 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -1,3 +1,4 @@ +import { useAuth } from '../../auth' import './styles.css' type NavbarProps = { @@ -6,6 +7,7 @@ type NavbarProps = { } function Navbar({ isOpen, closeMenu }: NavbarProps): JSX.Element { + const { logout } = useAuth() const combinedClassNames = ['navbar', isOpen && 'navbar--open'].filter(Boolean).join(' ') return ( diff --git a/src/store/storageHelper.ts b/src/store/storageHelper.ts index ff8b866..d3a4fee 100644 --- a/src/store/storageHelper.ts +++ b/src/store/storageHelper.ts @@ -6,10 +6,9 @@ export const backupStore = (store: ToolkitStore) => { const saveState = () => { const state = store.getState() try { - const serializedState = window.btoa(JSON.stringify(state)) + const serializedState = serialize(state) localStorage.setItem(storageKey, serializedState) } catch (err) { - // nothing to do console.error('Error while saving state', err) } } @@ -29,11 +28,16 @@ export const backupStore = (store: ToolkitStore) => { export const loadStore = () => { try { const serializedState = localStorage.getItem(storageKey) - if (serializedState === null) { - return undefined - } - return JSON.parse(window.atob(serializedState)) + return serializedState === null ? undefined : deserialize(serializedState) } catch (err) { return undefined } } + +function serialize(data: string) { + return JSON.stringify(btoa(encodeURIComponent(data))) +} + +function deserialize(b64: string) { + return JSON.parse(decodeURIComponent(atob(b64))) +}