From 35f2170bf5d71d1881051531fba8c58cb7fb9da1 Mon Sep 17 00:00:00 2001 From: alxshelepenok Date: Fri, 10 May 2019 02:15:43 +0300 Subject: [PATCH] improvement: flow coverage --- jest/__fixtures__/markdown-remark.js | 1 + src/cms/preview-templates/page-preview.js | 9 +++- src/cms/preview-templates/post-preview.js | 9 +++- src/components/Feed/Feed.js | 8 ++- src/components/Feed/Feed.test.js | 31 +++++++++-- src/components/Feed/index.js | 1 + src/components/Icon/Icon.js | 10 +++- src/components/Icon/Icon.test.js | 1 + src/components/Icon/index.js | 1 + src/components/Layout/Layout.js | 10 +++- src/components/Layout/Layout.test.js | 1 + src/components/Layout/index.js | 1 + src/components/Page/Page.js | 7 ++- src/components/Page/Page.test.js | 1 + src/components/Page/index.js | 1 + src/components/Pagination/Pagination.js | 10 +++- src/components/Pagination/Pagination.test.js | 1 + src/components/Pagination/index.js | 1 + src/components/Post/Author/Author.test.js | 4 +- src/components/Post/Comments/Comments.js | 8 ++- src/components/Post/Comments/Comments.test.js | 4 +- src/components/Post/Comments/index.js | 1 + src/components/Post/Content/Content.js | 8 ++- src/components/Post/Content/Content.test.js | 1 + src/components/Post/Content/index.js | 1 + src/components/Post/Meta/Meta.js | 7 ++- src/components/Post/Meta/Meta.test.js | 1 + src/components/Post/Meta/index.js | 1 + src/components/Post/Post.js | 10 +++- src/components/Post/Post.test.js | 7 ++- src/components/Post/Tags/Tags.js | 10 +++- src/components/Post/Tags/Tags.test.js | 1 + src/components/Post/Tags/index.js | 1 + src/components/Post/index.js | 1 + src/components/Sidebar/Author/Author.js | 12 ++++- src/components/Sidebar/Author/Author.test.js | 4 +- src/components/Sidebar/Author/index.js | 1 + src/components/Sidebar/Contacts/Contacts.js | 6 +-- .../Sidebar/Contacts/Contacts.test.js | 2 + src/components/Sidebar/Contacts/index.js | 1 + src/components/Sidebar/Copyright/Copyright.js | 7 ++- .../Sidebar/Copyright/Copyright.test.js | 1 + src/components/Sidebar/Copyright/index.js | 1 + src/components/Sidebar/Menu/Menu.js | 10 +++- src/components/Sidebar/Menu/Menu.test.js | 1 + src/components/Sidebar/Menu/index.js | 1 + src/components/Sidebar/Sidebar.js | 2 +- src/components/Sidebar/Sidebar.test.js | 4 +- src/components/Sidebar/index.js | 1 + src/templates/categories-list-template.js | 1 + .../categories-list-template.test.js | 4 +- src/templates/category-template.js | 9 +++- src/templates/category-template.test.js | 4 +- src/templates/index-template.js | 11 ++-- src/templates/index-template.test.js | 4 +- src/templates/not-found-template.js | 1 + src/templates/not-found-template.test.js | 4 +- src/templates/page-template.js | 16 +++--- src/templates/page-template.test.js | 4 +- src/templates/post-template.js | 7 ++- src/templates/post-template.test.js | 4 +- src/templates/tag-template.js | 9 +++- src/templates/tag-template.test.js | 4 +- src/templates/tags-list-template.js | 1 + src/templates/tags-list-template.test.js | 4 +- src/types/index.js | 53 +++++++++++++++++++ 66 files changed, 308 insertions(+), 56 deletions(-) create mode 100644 src/types/index.js diff --git a/jest/__fixtures__/markdown-remark.js b/jest/__fixtures__/markdown-remark.js index 96ddd5f..07b3752 100644 --- a/jest/__fixtures__/markdown-remark.js +++ b/jest/__fixtures__/markdown-remark.js @@ -2,6 +2,7 @@ module.exports = { markdownRemark: { + id: 'test-123', html: '

test

', fields: { tagSlugs: [ diff --git a/src/cms/preview-templates/page-preview.js b/src/cms/preview-templates/page-preview.js index ee537dd..416984e 100644 --- a/src/cms/preview-templates/page-preview.js +++ b/src/cms/preview-templates/page-preview.js @@ -1,6 +1,13 @@ +// @flow import React from 'react'; +import type { Entry, WidgetFor } from '../../types'; -const PagePreview = ({ entry, widgetFor }) => { +type Props = { + entry: Entry, + widgetFor: WidgetFor +}; + +const PagePreview = ({ entry, widgetFor }: Props) => { const body = widgetFor('body'); const title = entry.getIn(['data', 'title']); diff --git a/src/cms/preview-templates/post-preview.js b/src/cms/preview-templates/post-preview.js index 82a12fb..63aa5e9 100644 --- a/src/cms/preview-templates/post-preview.js +++ b/src/cms/preview-templates/post-preview.js @@ -1,6 +1,13 @@ +// @flow import React from 'react'; +import type { Entry, WidgetFor } from '../../types'; -const PostPreview = ({ entry, widgetFor }) => { +type Props = { + entry: Entry, + widgetFor: WidgetFor +}; + +const PostPreview = ({ entry, widgetFor }: Props) => { const body = widgetFor('body'); const title = entry.getIn(['data', 'title']); diff --git a/src/components/Feed/Feed.js b/src/components/Feed/Feed.js index 84e1f30..fda311d 100644 --- a/src/components/Feed/Feed.js +++ b/src/components/Feed/Feed.js @@ -1,9 +1,15 @@ +// @flow import React from 'react'; import moment from 'moment'; import { Link } from 'gatsby'; +import type { Edges } from '../../types'; import styles from './Feed.module.scss'; -const Feed = ({ edges }) => ( +type Props = { + edges: Edges +}; + +const Feed = ({ edges }: Props) => (
{edges.map((edge) => (
diff --git a/src/components/Feed/Feed.test.js b/src/components/Feed/Feed.test.js index 59b55f5..e08b188 100644 --- a/src/components/Feed/Feed.test.js +++ b/src/components/Feed/Feed.test.js @@ -1,3 +1,4 @@ +// @flow import React from 'react'; import renderer from 'react-test-renderer'; import Feed from './Feed'; @@ -9,28 +10,50 @@ describe('Feed', () => { node: { fields: { slug: '/test_0', - categorySlug: '/test_0' + categorySlug: '/test_0', + tagSlugs: [ + '/test-1', + '/test-2' + ] }, frontmatter: { date: '2016-09-01', description: 'test_0', category: 'test_0', + tags: [ + 'test-1', + 'test-2' + ], title: 'test_0' - } + }, + id: 'test-123', + html: '

test

' + } }, { node: { fields: { slug: '/test_1', - categorySlug: '/test_1' + categorySlug: '/test_1', + tagSlugs: [ + '/test-1', + '/test-2' + ] }, frontmatter: { date: '2016-09-01', description: 'test_1', category: 'test_1', + tags: [ + 'test-1', + 'test-2' + ], title: 'test_1' - } + }, + id: 'test-321', + html: '

test

' + } } ] diff --git a/src/components/Feed/index.js b/src/components/Feed/index.js index 5beb2fc..b00dadd 100644 --- a/src/components/Feed/index.js +++ b/src/components/Feed/index.js @@ -1 +1,2 @@ +// @flow export { default } from './Feed'; diff --git a/src/components/Icon/Icon.js b/src/components/Icon/Icon.js index aaf84ed..a6e759b 100644 --- a/src/components/Icon/Icon.js +++ b/src/components/Icon/Icon.js @@ -1,7 +1,15 @@ +// @flow import React from 'react'; import styles from './Icon.module.scss'; -const Icon = ({ icon }) => ( +type Props = { + icon: { + viewBox?: string, + path?: string + } +}; + +const Icon = ({ icon }: Props) => ( diff --git a/src/components/Icon/Icon.test.js b/src/components/Icon/Icon.test.js index cd1ff3c..69beefa 100644 --- a/src/components/Icon/Icon.test.js +++ b/src/components/Icon/Icon.test.js @@ -1,3 +1,4 @@ +// @flow import React from 'react'; import renderer from 'react-test-renderer'; import Icon from './Icon'; diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index dc6b45c..9457c7b 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -1 +1,2 @@ +// @flow export { default } from './Icon'; diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js index 793fff3..6cf2014 100644 --- a/src/components/Layout/Layout.js +++ b/src/components/Layout/Layout.js @@ -1,8 +1,16 @@ +// @flow import React from 'react'; import Helmet from 'react-helmet'; +import type { Node as ReactNode } from 'react'; import styles from './Layout.module.scss'; -const Layout = ({ children, title, description }) => ( +type Props = { + children: ReactNode, + title: string, + description?: string +}; + +const Layout = ({ children, title, description }: Props) => (
diff --git a/src/components/Layout/Layout.test.js b/src/components/Layout/Layout.test.js index 8873ba8..1e20a8b 100644 --- a/src/components/Layout/Layout.test.js +++ b/src/components/Layout/Layout.test.js @@ -1,3 +1,4 @@ +// @flow import React from 'react'; import renderer from 'react-test-renderer'; import Layout from './Layout'; diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js index 9592f29..9fd3d43 100644 --- a/src/components/Layout/index.js +++ b/src/components/Layout/index.js @@ -1 +1,2 @@ +// @flow export { default } from './Layout'; diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js index d7ce8c0..feab837 100644 --- a/src/components/Page/Page.js +++ b/src/components/Page/Page.js @@ -1,7 +1,12 @@ import React, { useRef, useEffect } from 'react'; import styles from './Page.module.scss'; -const Page = ({ title, children }) => { +type Props = { + title?: string, + children: React.Node +}; + +const Page = ({ title, children }: Props) => { const pageRef = useRef(); useEffect(() => { diff --git a/src/components/Page/Page.test.js b/src/components/Page/Page.test.js index c990568..c224288 100644 --- a/src/components/Page/Page.test.js +++ b/src/components/Page/Page.test.js @@ -1,3 +1,4 @@ +// @flow import React from 'react'; import renderer from 'react-test-renderer'; import Page from './Page'; diff --git a/src/components/Page/index.js b/src/components/Page/index.js index 9a968b3..73f2ad5 100644 --- a/src/components/Page/index.js +++ b/src/components/Page/index.js @@ -1 +1,2 @@ +// @flow export { default } from './Page'; diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js index 9b88ae3..0b6e564 100644 --- a/src/components/Pagination/Pagination.js +++ b/src/components/Pagination/Pagination.js @@ -1,9 +1,17 @@ +// @flow import React from 'react'; import classNames from 'classnames/bind'; import { Link } from 'gatsby'; import { PAGINATION } from '../../constants'; import styles from './Pagination.module.scss'; +type Props = { + prevPagePath: string, + nextPagePath: string, + hasNextPage: boolean, + hasPrevPage: boolean +}; + const cx = classNames.bind(styles); const Pagination = ({ @@ -11,7 +19,7 @@ const Pagination = ({ nextPagePath, hasNextPage, hasPrevPage -}) => { +}: Props) => { const prevClassName = cx({ 'pagination__prev-link': true, 'pagination__prev-link--disable': !hasPrevPage diff --git a/src/components/Pagination/Pagination.test.js b/src/components/Pagination/Pagination.test.js index 334d1f8..377f065 100644 --- a/src/components/Pagination/Pagination.test.js +++ b/src/components/Pagination/Pagination.test.js @@ -1,3 +1,4 @@ +// @flow import React from 'react'; import renderer from 'react-test-renderer'; import Pagination from './Pagination'; diff --git a/src/components/Pagination/index.js b/src/components/Pagination/index.js index eaef04e..cf8613c 100644 --- a/src/components/Pagination/index.js +++ b/src/components/Pagination/index.js @@ -1 +1,2 @@ +// @flow export { default } from './Pagination'; diff --git a/src/components/Post/Author/Author.test.js b/src/components/Post/Author/Author.test.js index 1c06dcc..95f0b02 100644 --- a/src/components/Post/Author/Author.test.js +++ b/src/components/Post/Author/Author.test.js @@ -1,13 +1,15 @@ +// @flow import React from 'react'; import renderer from 'react-test-renderer'; import { useStaticQuery, StaticQuery } from 'gatsby'; import Author from './Author'; import siteMetadata from '../../../../jest/__fixtures__/site-metadata'; +import type { RenderCallback } from '../../../types'; describe('Author', () => { beforeEach(() => { StaticQuery.mockImplementationOnce( - ({ render }) => ( + ({ render }: RenderCallback) => ( render(siteMetadata) ), useStaticQuery.mockReturnValue(siteMetadata) diff --git a/src/components/Post/Comments/Comments.js b/src/components/Post/Comments/Comments.js index 44f51de..7a48b10 100644 --- a/src/components/Post/Comments/Comments.js +++ b/src/components/Post/Comments/Comments.js @@ -1,8 +1,14 @@ +// @flow import React from 'react'; import ReactDisqusComments from 'react-disqus-comments'; import { useSiteMetadata } from '../../../hooks'; -const Comments = ({ postTitle, postSlug }) => { +type Props = { + postTitle: string, + postSlug: string +}; + +const Comments = ({ postTitle, postSlug }: Props) => { const { url, disqusShortname } = useSiteMetadata(); if (!disqusShortname) { diff --git a/src/components/Post/Comments/Comments.test.js b/src/components/Post/Comments/Comments.test.js index 70ba4aa..d1abcb0 100644 --- a/src/components/Post/Comments/Comments.test.js +++ b/src/components/Post/Comments/Comments.test.js @@ -1,13 +1,15 @@ +// @flow import React from 'react'; import renderer from 'react-test-renderer'; import { useStaticQuery, StaticQuery } from 'gatsby'; import Comments from './Comments'; import siteMetadata from '../../../../jest/__fixtures__/site-metadata'; +import type { RenderCallback } from '../../../types'; describe('Comments', () => { beforeEach(() => { StaticQuery.mockImplementationOnce( - ({ render }) => ( + ({ render }: RenderCallback) => ( render(siteMetadata) ), useStaticQuery.mockReturnValue(siteMetadata) diff --git a/src/components/Post/Comments/index.js b/src/components/Post/Comments/index.js index fff6329..4dc4f74 100644 --- a/src/components/Post/Comments/index.js +++ b/src/components/Post/Comments/index.js @@ -1 +1,2 @@ +// @flow export { default } from './Comments'; diff --git a/src/components/Post/Content/Content.js b/src/components/Post/Content/Content.js index 2f580bf..bd8e55e 100644 --- a/src/components/Post/Content/Content.js +++ b/src/components/Post/Content/Content.js @@ -1,7 +1,13 @@ +// @flow import React from 'react'; import styles from './Content.module.scss'; -const Content = ({ body, title }) => ( +type Props = { + body: string, + title: string +}; + +const Content = ({ body, title }: Props) => (

{title}

diff --git a/src/components/Post/Content/Content.test.js b/src/components/Post/Content/Content.test.js index 05eab60..158f752 100644 --- a/src/components/Post/Content/Content.test.js +++ b/src/components/Post/Content/Content.test.js @@ -1,3 +1,4 @@ +// @flow import React from 'react'; import renderer from 'react-test-renderer'; import Content from './Content'; diff --git a/src/components/Post/Content/index.js b/src/components/Post/Content/index.js index b840314..c12a20b 100644 --- a/src/components/Post/Content/index.js +++ b/src/components/Post/Content/index.js @@ -1 +1,2 @@ +// @flow export { default } from './Content'; diff --git a/src/components/Post/Meta/Meta.js b/src/components/Post/Meta/Meta.js index 478d405..6595cb9 100644 --- a/src/components/Post/Meta/Meta.js +++ b/src/components/Post/Meta/Meta.js @@ -1,8 +1,13 @@ +// @flow import React from 'react'; import moment from 'moment'; import styles from './Meta.module.scss'; -const Meta = ({ date }) => ( +type Props = { + date: string +}; + +const Meta = ({ date }: Props) => (

Published {moment(date).format('D MMM YYYY')}

diff --git a/src/components/Post/Meta/Meta.test.js b/src/components/Post/Meta/Meta.test.js index a26251f..d108cd8 100644 --- a/src/components/Post/Meta/Meta.test.js +++ b/src/components/Post/Meta/Meta.test.js @@ -1,3 +1,4 @@ +// @flow import React from 'react'; import renderer from 'react-test-renderer'; import Meta from './Meta'; diff --git a/src/components/Post/Meta/index.js b/src/components/Post/Meta/index.js index 257ed50..411ed6c 100644 --- a/src/components/Post/Meta/index.js +++ b/src/components/Post/Meta/index.js @@ -1 +1,2 @@ +// @flow export { default } from './Meta'; diff --git a/src/components/Post/Post.js b/src/components/Post/Post.js index 6dbf491..f4dea4e 100644 --- a/src/components/Post/Post.js +++ b/src/components/Post/Post.js @@ -1,3 +1,4 @@ +// @flow import React from 'react'; import { Link } from 'gatsby'; import Author from './Author'; @@ -6,8 +7,13 @@ import Content from './Content'; import Meta from './Meta'; import Tags from './Tags'; import styles from './Post.module.scss'; +import type { Node } from '../../types'; -const Post = ({ post }) => { +type Props = { + post: Node +}; + +const Post = ({ post }: Props) => { const { html } = post; const { tagSlugs, slug } = post.fields; const { tags, title, date } = post.frontmatter; @@ -22,7 +28,7 @@ const Post = ({ post }) => {
- {tags && } + {tags && tagSlugs && }
diff --git a/src/components/Post/Post.test.js b/src/components/Post/Post.test.js index b70faff..919b744 100644 --- a/src/components/Post/Post.test.js +++ b/src/components/Post/Post.test.js @@ -1,13 +1,15 @@ +// @flow import React from 'react'; import renderer from 'react-test-renderer'; import { useStaticQuery, StaticQuery } from 'gatsby'; import Post from './Post'; import siteMetadata from '../../../jest/__fixtures__/site-metadata'; +import type { RenderCallback } from '../../types'; describe('Post', () => { beforeEach(() => { StaticQuery.mockImplementationOnce( - ({ render }) => ( + ({ render }: RenderCallback) => ( render(siteMetadata) ), useStaticQuery.mockReturnValue(siteMetadata) @@ -16,8 +18,11 @@ describe('Post', () => { const props = { post: { + id: 'test-123', html: '

test

', fields: { + slug: '/test', + categorySlug: '/test-category', tagSlugs: [ '/test_0', '/test_1' diff --git a/src/components/Post/Tags/Tags.js b/src/components/Post/Tags/Tags.js index 4d450c2..e43a374 100644 --- a/src/components/Post/Tags/Tags.js +++ b/src/components/Post/Tags/Tags.js @@ -1,11 +1,17 @@ +// @flow import React from 'react'; import { Link } from 'gatsby'; import styles from './Tags.module.scss'; -const Tags = ({ tags, tagSlugs }) => ( +type Props = { + tags: string[], + tagSlugs: string[] +}; + +const Tags = ({ tags, tagSlugs }: Props) => (
    - {tagSlugs.map((slug, i) => ( + {tagSlugs && tagSlugs.map((slug, i) => (
  • {tags[i]} diff --git a/src/components/Post/Tags/Tags.test.js b/src/components/Post/Tags/Tags.test.js index 0e00d82..9d87415 100644 --- a/src/components/Post/Tags/Tags.test.js +++ b/src/components/Post/Tags/Tags.test.js @@ -1,3 +1,4 @@ +// @flow import React from 'react'; import renderer from 'react-test-renderer'; import Tags from './Tags'; diff --git a/src/components/Post/Tags/index.js b/src/components/Post/Tags/index.js index 1051072..35f5dca 100644 --- a/src/components/Post/Tags/index.js +++ b/src/components/Post/Tags/index.js @@ -1 +1,2 @@ +// @flow export { default } from './Tags'; diff --git a/src/components/Post/index.js b/src/components/Post/index.js index 3e17ebe..a0bb2aa 100644 --- a/src/components/Post/index.js +++ b/src/components/Post/index.js @@ -1 +1,2 @@ +// @flow export { default } from './Post'; diff --git a/src/components/Sidebar/Author/Author.js b/src/components/Sidebar/Author/Author.js index 9a65078..506d20d 100644 --- a/src/components/Sidebar/Author/Author.js +++ b/src/components/Sidebar/Author/Author.js @@ -1,8 +1,18 @@ +// @flow import React from 'react'; import { withPrefix, Link } from 'gatsby'; import styles from './Author.module.scss'; -const Author = ({ author, isIndex }) => ( +type Props = { + author: { + name: string, + bio: string, + photo: string + }, + isIndex: ?boolean +}; + +const Author = ({ author, isIndex }: Props) => (
    { name: 'test', photo: '/photo.jpg', bio: 'test' - } + }, + isIndex: false }; it('renders correctly', () => { diff --git a/src/components/Sidebar/Author/index.js b/src/components/Sidebar/Author/index.js index 975986f..7fe4910 100644 --- a/src/components/Sidebar/Author/index.js +++ b/src/components/Sidebar/Author/index.js @@ -1 +1,2 @@ +// @flow export { default } from './Author'; diff --git a/src/components/Sidebar/Contacts/Contacts.js b/src/components/Sidebar/Contacts/Contacts.js index 32b76f4..a90e0e7 100644 --- a/src/components/Sidebar/Contacts/Contacts.js +++ b/src/components/Sidebar/Contacts/Contacts.js @@ -4,11 +4,11 @@ import { getContactHref, getIcon } from '../../../utils'; import Icon from '../../Icon'; import styles from './Contacts.module.scss'; -type Props = {| - +contacts: { +type Props = { + contacts: { [string]: string, }, -|}; +}; const Contacts = ({ contacts }: Props) => (
    diff --git a/src/components/Sidebar/Contacts/Contacts.test.js b/src/components/Sidebar/Contacts/Contacts.test.js index 37d46e7..ce7df32 100644 --- a/src/components/Sidebar/Contacts/Contacts.test.js +++ b/src/components/Sidebar/Contacts/Contacts.test.js @@ -1,3 +1,5 @@ + +// @flow import React from 'react'; import renderer from 'react-test-renderer'; import Contacts from './Contacts'; diff --git a/src/components/Sidebar/Contacts/index.js b/src/components/Sidebar/Contacts/index.js index 784477c..e964206 100644 --- a/src/components/Sidebar/Contacts/index.js +++ b/src/components/Sidebar/Contacts/index.js @@ -1 +1,2 @@ +// @flow export { default } from './Contacts'; diff --git a/src/components/Sidebar/Copyright/Copyright.js b/src/components/Sidebar/Copyright/Copyright.js index 5ee3a42..60996ef 100644 --- a/src/components/Sidebar/Copyright/Copyright.js +++ b/src/components/Sidebar/Copyright/Copyright.js @@ -1,7 +1,12 @@ +// @flow import React from 'react'; import styles from './Copyright.module.scss'; -const Copyright = ({ copyright }) => ( +type Props = { + copyright: string +}; + +const Copyright = ({ copyright }: Props) => (
    {copyright}
    diff --git a/src/components/Sidebar/Copyright/Copyright.test.js b/src/components/Sidebar/Copyright/Copyright.test.js index fc2efd7..dbc8fea 100644 --- a/src/components/Sidebar/Copyright/Copyright.test.js +++ b/src/components/Sidebar/Copyright/Copyright.test.js @@ -1,3 +1,4 @@ +// @flow import React from 'react'; import renderer from 'react-test-renderer'; import Copyright from './Copyright'; diff --git a/src/components/Sidebar/Copyright/index.js b/src/components/Sidebar/Copyright/index.js index d58c9e8..08dbf90 100644 --- a/src/components/Sidebar/Copyright/index.js +++ b/src/components/Sidebar/Copyright/index.js @@ -1 +1,2 @@ +// @flow export { default } from './Copyright'; diff --git a/src/components/Sidebar/Menu/Menu.js b/src/components/Sidebar/Menu/Menu.js index 4c7d9dd..474f6ba 100644 --- a/src/components/Sidebar/Menu/Menu.js +++ b/src/components/Sidebar/Menu/Menu.js @@ -1,8 +1,16 @@ +// @flow import React from 'react'; import { Link } from 'gatsby'; import styles from './Menu.module.scss'; -const Menu = ({ menu }) => ( +type Props = { + menu: { + label: string, + path: string + }[] +}; + +const Menu = ({ menu }: Props) => (