Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Share option #8

Closed
wants to merge 6 commits into from
Closed

Share option #8

wants to merge 6 commits into from

Conversation

aberllin
Copy link
Owner

@aberllin aberllin commented Jan 27, 2021

  • when user presses Share, the modal Share your todoList appears and the background window get blurred
  • added email validation for the input, if email is not valid the error text under the email appears
  • by pressing Cancel or X the modal disappear

Netlify - https://deploy-preview-8--optimistic-fermat-7ff6ec.netlify.app/

setShowMenu(prev => !prev)
}
const openMenu = () => {
setShowMenu((prev) => !prev)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just setShowMenu(true)


if (!inputValue) {
setErrors('Email required')
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(inputValue)) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const isValid = !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$/i.test(inputValue)

Copy link

@arevej arevej left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You need to think about separating TodoList app ShareModal from MenuButton since MenuButton is a reusable/common component and ShareModal is TodoList app only.

Let's make a meeting to discuss it more.

@@ -23,7 +23,7 @@ function App() {

useEffect(() => {
const inStorage = localStorage.getItem('theme')
const initialValue: any = inStorage ? inStorage : 'light'
const initialValue: any = inStorage ? inStorage : Theme.light
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Type any?




import { ShareModal } from './MenuOptions/ShareModal'
export const MenuButton = () => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How is this a reusable component? According to the task it should be Add a Menu button to each App with an ability to provide different menu options"

}

export const MenuModal = ({ open, onClose, openShareModal }: Props) => {
const modalRef = React.createRef<HTMLInputElement>()
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not useRef?

[modalRef, onClose, open],
)

useEffect(() => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice to have it as a separate hook something like useOutsideClick

@aberllin aberllin closed this Feb 4, 2021
@aberllin aberllin deleted the share-option branch February 4, 2021 20:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants