From 1a3a683d6e3812fb921778e0ec327bf2f2587545 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Sun, 25 Oct 2020 23:43:15 -0300 Subject: [PATCH] Adding info for Login In --- components/auth/LoginView.tsx | 8 +++--- components/auth/SignUpView.tsx | 43 ++++++++++++++++++++----------- components/core/Layout/Layout.tsx | 36 +++++++++++++------------- components/icon/Info.tsx | 22 ++++++++++++++++ components/icon/index.ts | 1 + components/ui/Input/Input.tsx | 12 ++++++++- yarn.lock | 5 ++++ 7 files changed, 89 insertions(+), 38 deletions(-) create mode 100644 components/icon/Info.tsx diff --git a/components/auth/LoginView.tsx b/components/auth/LoginView.tsx index e597c9d26..6ef767ce1 100644 --- a/components/auth/LoginView.tsx +++ b/components/auth/LoginView.tsx @@ -1,4 +1,4 @@ -import { FC, useEffect, useState } from 'react' +import { FC, useEffect, useState, useCallback } from 'react' import { Logo, Modal, Button, Input } from '@components/ui' import useLogin from '@lib/bigcommerce/use-login' import { useUI } from '@components/ui/context' @@ -39,7 +39,7 @@ const LoginView: FC = () => { } } - const handleValidation = () => { + const handleValidation = useCallback(() => { // Test for Alphanumeric password const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password) @@ -47,11 +47,11 @@ const LoginView: FC = () => { if (dirty) { setDisabled(!validate(email) || password.length < 7 || !validPassword) } - } + }, [email, password, dirty]) useEffect(() => { handleValidation() - }, [email, password, dirty]) + }, [handleValidation]) return (
diff --git a/components/auth/SignUpView.tsx b/components/auth/SignUpView.tsx index f46184bd0..a574cc963 100644 --- a/components/auth/SignUpView.tsx +++ b/components/auth/SignUpView.tsx @@ -1,8 +1,9 @@ -import { FC, useEffect, useState } from 'react' +import { FC, useEffect, useState, useCallback } from 'react' +import { validate } from 'email-validator' +import { Info } from '@components/icon' +import { useUI } from '@components/ui/context' import { Logo, Button, Input } from '@components/ui' import useSignup from '@lib/bigcommerce/use-signup' -import { useUI } from '@components/ui/context' -import { validate } from 'email-validator' interface Props {} @@ -43,7 +44,7 @@ const SignUpView: FC = () => { } } - const handleValidation = () => { + const handleValidation = useCallback(() => { // Test for Alphanumeric password const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password) @@ -51,18 +52,18 @@ const SignUpView: FC = () => { if (dirty) { setDisabled(!validate(email) || password.length < 7 || !validPassword) } - } + }, [email, password, dirty]) useEffect(() => { handleValidation() - }, [email, password, dirty]) + }, [handleValidation]) return (
-
+
{message && (
{message}
)} @@ -70,14 +71,26 @@ const SignUpView: FC = () => { - + + + Info: Password must be longer than 7 chars and + include numbers. + +
+ +
+ Do you have an account? {` `} diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index c96d434bd..a97cdb831 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -1,4 +1,4 @@ -import { FC, useEffect, useState } from 'react' +import { FC, useCallback, useEffect, useState } from 'react' import cn from 'classnames' import { useRouter } from 'next/router' import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages' @@ -10,7 +10,7 @@ import { LoginView, SignUpView } from '@components/auth' import { useUI } from '@components/ui/context' import { usePreventScroll } from '@react-aria/overlays' import s from './Layout.module.css' - +import debounce from 'lodash.debounce' interface Props { pageProps: { pages?: Page[] @@ -29,26 +29,26 @@ const Layout: FC = ({ children, pageProps }) => { const [hasScrolled, setHasScrolled] = useState(false) const { locale = 'en-US' } = useRouter() - // TODO: Update code, add throttle and more. - // TODO: Make sure to not do any unnecessary updates as it's doing right now - useEffect(() => { - const offset = 0 - function handleScroll() { - const { scrollTop } = document.documentElement - if (scrollTop > offset) setHasScrolled(true) - else setHasScrolled(false) - } - document.addEventListener('scroll', handleScroll) - - return () => { - document.removeEventListener('scroll', handleScroll) - } - }, []) - usePreventScroll({ isDisabled: !(displaySidebar || displayModal), }) + const handleScroll = useCallback(() => { + debounce(() => { + const offset = 0 + const { scrollTop } = document.documentElement + if (scrollTop > offset) setHasScrolled(true) + else setHasScrolled(false) + }, 1) + }, []) + + useEffect(() => { + document.addEventListener('scroll', handleScroll) + return () => { + document.removeEventListener('scroll', handleScroll) + } + }, [handleScroll]) + return (
diff --git a/components/icon/Info.tsx b/components/icon/Info.tsx new file mode 100644 index 000000000..705a6c6a6 --- /dev/null +++ b/components/icon/Info.tsx @@ -0,0 +1,22 @@ +const Info = ({ ...props }) => { + return ( + + + + + + ) +} + +export default Info diff --git a/components/icon/index.ts b/components/icon/index.ts index 0a8a191c3..1ce388914 100644 --- a/components/icon/index.ts +++ b/components/icon/index.ts @@ -11,3 +11,4 @@ export { default as Moon } from './Moon' export { default as Github } from './Github' export { default as DoubleChevron } from './DoubleChevron' export { default as RightArrow } from './RightArrow' +export { default as Info } from './Info' diff --git a/components/ui/Input/Input.tsx b/components/ui/Input/Input.tsx index 86ae34fc9..404729479 100644 --- a/components/ui/Input/Input.tsx +++ b/components/ui/Input/Input.tsx @@ -19,7 +19,17 @@ const Input: React.FC = (props) => { return null } - return + return ( + + ) } export default Input diff --git a/yarn.lock b/yarn.lock index fb90e1970..77e61f7c5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5435,6 +5435,11 @@ lodash.templatesettings@^4.0.0: dependencies: lodash._reinterpolate "^3.0.0" +lodash.throttle@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" + integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ= + lodash.toarray@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"