From 9820c460e852262fe93eb53b4d5b73c9124b489b Mon Sep 17 00:00:00 2001 From: "Juan Picado @jotadeveloper" Date: Mon, 21 Jan 2019 19:38:11 +0100 Subject: [PATCH 1/3] chore: fix flow errors --- src/webui/components/Dependencies/index.js | 4 ++-- src/webui/components/Dependencies/styles.js | 6 +++--- src/webui/components/UpLinks/index.js | 15 +++++++++++---- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/webui/components/Dependencies/index.js b/src/webui/components/Dependencies/index.js index 8d7387239..aa248b8dd 100644 --- a/src/webui/components/Dependencies/index.js +++ b/src/webui/components/Dependencies/index.js @@ -7,7 +7,7 @@ import React, { Component, Fragment } from 'react'; import { withRouter } from 'react-router-dom'; -import CardContent from '@material-ui/core/CardContent'; +import CardContent from '@material-ui/core/CardContent/index'; import { DetailContextConsumer } from '../../pages/version'; import { Content, CardWrap, Heading, Tags, Tag } from './styles'; @@ -41,7 +41,7 @@ class DepDetail extends Component { const WrappDepDetail = withRouter(DepDetail); class DependencyBlock extends Component { - renderTags = (deps: object, enableLoading: boolean) => + renderTags = (deps: any, enableLoading: any) => deps.map(dep => { const [name, version] = dep; diff --git a/src/webui/components/Dependencies/styles.js b/src/webui/components/Dependencies/styles.js index d867c221b..69c346efb 100644 --- a/src/webui/components/Dependencies/styles.js +++ b/src/webui/components/Dependencies/styles.js @@ -4,9 +4,9 @@ */ import styled from 'react-emotion'; -import Card from '@material-ui/core/Card'; -import Typography from '@material-ui/core/Typography'; -import Chip from '@material-ui/core/Chip'; +import Card from '@material-ui/core/Card/index'; +import Typography from '@material-ui/core/Typography/index'; +import Chip from '@material-ui/core/Chip/index'; export const Content = styled.div` && { diff --git a/src/webui/components/UpLinks/index.js b/src/webui/components/UpLinks/index.js index 828c18742..6e76e4185 100644 --- a/src/webui/components/UpLinks/index.js +++ b/src/webui/components/UpLinks/index.js @@ -6,13 +6,20 @@ import { DetailContextConsumer } from '../../pages/version/index'; import { formatDateDistance } from '../../utils/package'; import { Heading, Spacer, ListItemText } from './styles'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; +import List from '@material-ui/core/List/index'; +import ListItem from '@material-ui/core/ListItem/index'; import React from 'react'; -class UpLinks extends React.PureComponent { +class UpLinks extends React.PureComponent { render() { - return {({ packageMeta }) => this.renderContent(packageMeta._uplinks)}; + return ( + // $FlowFixMe + + {({ packageMeta }) => { + return this.renderContent(packageMeta._uplinks); + }} + + ); } renderUpLinksList = (uplinks: object) => ( From 7808a325c504b30146f8d2471ebf1ac0977907d7 Mon Sep 17 00:00:00 2001 From: "Juan Picado @jotadeveloper" Date: Mon, 21 Jan 2019 20:54:28 +0100 Subject: [PATCH 2/3] chore: update snapshots --- test/unit/webui/app.spec.js | 9 +-------- .../__snapshots__/copyToClipBoard.spec.js.snap | 2 +- .../webui/components/__snapshots__/header.spec.js.snap | 4 ++-- .../webui/components/__snapshots__/help.spec.js.snap | 2 +- .../webui/components/__snapshots__/login.spec.js.snap | 4 ++-- .../components/__snapshots__/packagelist.spec.js.snap | 2 +- .../webui/components/__snapshots__/search.spec.js.snap | 2 +- 7 files changed, 9 insertions(+), 16 deletions(-) diff --git a/test/unit/webui/app.spec.js b/test/unit/webui/app.spec.js index dcccf718d..b8e5e02a2 100644 --- a/test/unit/webui/app.spec.js +++ b/test/unit/webui/app.spec.js @@ -37,14 +37,7 @@ describe('App', () => { beforeEach(() => { wrapper = mount(); }); - test('loadLogo: set logo url in state', async () => { - const { loadLogo } = wrapper.instance(); - await loadLogo(); - expect(wrapper.state().logoUrl).toEqual( - 'http://localhost/-/static/logo.png' - ); - }); - + test('toggleLoginModal: should toggle the value in state', () => { const { handleToggleLoginModal } = wrapper.instance(); expect(wrapper.state().showLoginModal).toBeFalsy(); diff --git a/test/unit/webui/components/__snapshots__/copyToClipBoard.spec.js.snap b/test/unit/webui/components/__snapshots__/copyToClipBoard.spec.js.snap index fdf0a4d9f..cf92dc592 100644 --- a/test/unit/webui/components/__snapshots__/copyToClipBoard.spec.js.snap +++ b/test/unit/webui/components/__snapshots__/copyToClipBoard.spec.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component render the component 1`] = `"
copy text
"`; +exports[` component render the component 1`] = `"
copy text
"`; diff --git a/test/unit/webui/components/__snapshots__/header.spec.js.snap b/test/unit/webui/components/__snapshots__/header.spec.js.snap index 8a9cfb85b..924bca4ba 100644 --- a/test/unit/webui/components/__snapshots__/header.spec.js.snap +++ b/test/unit/webui/components/__snapshots__/header.spec.js.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`
component with logged in state should load the component in logged in state 1`] = `"
"`; +exports[`
component with logged in state should load the component in logged in state 1`] = `"
"`; -exports[`
component with logged out state should load the component in logged out state 1`] = `"
"`; +exports[`
component with logged out state should load the component in logged out state 1`] = `"
"`; diff --git a/test/unit/webui/components/__snapshots__/help.spec.js.snap b/test/unit/webui/components/__snapshots__/help.spec.js.snap index 476fdc8ba..91e026258 100644 --- a/test/unit/webui/components/__snapshots__/help.spec.js.snap +++ b/test/unit/webui/components/__snapshots__/help.spec.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"

No Package Published Yet.

To publish your first package just:

$ npm adduser --registry http://localhost
$ npm publish --registry http://localhost
Learn More
"`; +exports[` component should render the component in default state 1`] = `"

No Package Published Yet.

To publish your first package just:

1. Login

$ npm adduser --registry http://localhost

2. Publish

$ npm publish --registry http://localhost

3. Refresh this page.

Learn More
"`; diff --git a/test/unit/webui/components/__snapshots__/login.spec.js.snap b/test/unit/webui/components/__snapshots__/login.spec.js.snap index 7cbdf197d..521aa69da 100644 --- a/test/unit/webui/components/__snapshots__/login.spec.js.snap +++ b/test/unit/webui/components/__snapshots__/login.spec.js.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should load the component in default state 1`] = `"

Login

"`; +exports[` should load the component in default state 1`] = `"

Login

"`; -exports[` should load the component with props 1`] = `"

Login

Error Title
Error Description
"`; +exports[` should load the component with props 1`] = `"

Login

Error Title
Error Description
"`; diff --git a/test/unit/webui/components/__snapshots__/packagelist.spec.js.snap b/test/unit/webui/components/__snapshots__/packagelist.spec.js.snap index 722652740..a751d01c8 100644 --- a/test/unit/webui/components/__snapshots__/packagelist.spec.js.snap +++ b/test/unit/webui/components/__snapshots__/packagelist.spec.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should load the component with packages 1`] = `"
verdacciov1.0.0TimePublished on 21.07.2018, 22:11:12 •6 months ago
S
Sam
Private NPM repository
abcv1.0.1TimePublished on 21.07.2018, 22:11:12 •6 months ago
R
Rose
abc description
xyzv1.1.0TimePublished on Invalid Date •almost NaN years ago
M
Martin
xyz description
"`; +exports[` component should load the component with packages 1`] = `"
verdacciov1.0.0TimePublished on 21.07.2018, 22:11:12 •6 months ago
S
Sam
Private NPM repository
abcv1.0.1TimePublished on 21.07.2018, 22:11:12 •6 months ago
R
Rose
abc description
xyzv1.1.0TimePublished on Invalid Date •almost NaN years ago
M
Martin
xyz description
"`; diff --git a/test/unit/webui/components/__snapshots__/search.spec.js.snap b/test/unit/webui/components/__snapshots__/search.spec.js.snap index 6e835ea81..57b06e4d1 100644 --- a/test/unit/webui/components/__snapshots__/search.spec.js.snap +++ b/test/unit/webui/components/__snapshots__/search.spec.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component test should load the component in default state 1`] = `"
"`; +exports[` component test should load the component in default state 1`] = `"
"`; From 72391bd1f88c2131f2aed450d487b679ece85c35 Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Mon, 21 Jan 2019 22:32:18 +0100 Subject: [PATCH 3/3] refactor: added Developers component --- src/webui/components/Dependencies/index.js | 4 +- src/webui/components/Dependencies/styles.js | 6 +- src/webui/components/DetailSidebar/index.js | 29 ++++++--- src/webui/components/Developers/index.js | 69 +++++++++++++++++++++ src/webui/components/Developers/styles.js | 46 ++++++++++++++ src/webui/components/UpLinks/index.js | 10 ++- 6 files changed, 145 insertions(+), 19 deletions(-) create mode 100644 src/webui/components/Developers/index.js create mode 100644 src/webui/components/Developers/styles.js diff --git a/src/webui/components/Dependencies/index.js b/src/webui/components/Dependencies/index.js index 8d7387239..67564e005 100644 --- a/src/webui/components/Dependencies/index.js +++ b/src/webui/components/Dependencies/index.js @@ -7,7 +7,7 @@ import React, { Component, Fragment } from 'react'; import { withRouter } from 'react-router-dom'; -import CardContent from '@material-ui/core/CardContent'; +import CardContent from '@material-ui/core/CardContent/index'; import { DetailContextConsumer } from '../../pages/version'; import { Content, CardWrap, Heading, Tags, Tag } from './styles'; @@ -41,7 +41,7 @@ class DepDetail extends Component { const WrappDepDetail = withRouter(DepDetail); class DependencyBlock extends Component { - renderTags = (deps: object, enableLoading: boolean) => + renderTags = (deps, enableLoading) => deps.map(dep => { const [name, version] = dep; diff --git a/src/webui/components/Dependencies/styles.js b/src/webui/components/Dependencies/styles.js index d867c221b..69c346efb 100644 --- a/src/webui/components/Dependencies/styles.js +++ b/src/webui/components/Dependencies/styles.js @@ -4,9 +4,9 @@ */ import styled from 'react-emotion'; -import Card from '@material-ui/core/Card'; -import Typography from '@material-ui/core/Typography'; -import Chip from '@material-ui/core/Chip'; +import Card from '@material-ui/core/Card/index'; +import Typography from '@material-ui/core/Typography/index'; +import Chip from '@material-ui/core/Chip/index'; export const Content = styled.div` && { diff --git a/src/webui/components/DetailSidebar/index.js b/src/webui/components/DetailSidebar/index.js index 86a78e357..a0c5e77a4 100644 --- a/src/webui/components/DetailSidebar/index.js +++ b/src/webui/components/DetailSidebar/index.js @@ -1,4 +1,4 @@ -import React, {Component, Fragment} from 'react'; +import React, {Component} from 'react'; import { DetailContextConsumer } from '../../pages/version/index'; import Typography from '@material-ui/core/Typography/index'; @@ -9,14 +9,13 @@ import { Content } from './styles'; import Authors from '../Author'; import License from '../License'; import Repository from '../Repository'; +import Developers from '../Developers'; class DetailSidebar extends Component { render() { return ( - {(context) => { - return this.renderSideBar(context); - }} + {(context) => this.renderSideBar(context)} ); }; @@ -34,6 +33,12 @@ class DetailSidebar extends Component { {this.renderSecondLevel(8)} + + {this.renderMaintainers()} + + + {this.renderContributors()} + {this.renderRepository()} @@ -44,20 +49,28 @@ class DetailSidebar extends Component { renderTitle = (packageName, packageMeta) => { return ( - + <> {packageName} {packageMeta.latest.description} - + ); } renderCopyCLI = () => { return ; } + + renderMaintainers = () => { + return ; + } + + renderContributors = () => { + return ; + } renderSecondLevel = (spacing = 24) => { return ( @@ -73,14 +86,14 @@ class DetailSidebar extends Component { renderAuthor = () => { return ( - + <> - + ); } } diff --git a/src/webui/components/Developers/index.js b/src/webui/components/Developers/index.js new file mode 100644 index 000000000..27c8d89c5 --- /dev/null +++ b/src/webui/components/Developers/index.js @@ -0,0 +1,69 @@ +import React, {Component} from 'react'; + +import { DetailContextConsumer } from '../../pages/version'; +import Card from '@material-ui/core/Card'; +import Avatar from '@material-ui/core/Avatar'; +import Tooltip from '@material-ui/core/Tooltip'; +import Add from '@material-ui/icons/Add'; +import { Details, Heading, Content, CardContent, Fab } from './styles'; + +interface Props { + type: 'contributors' | 'maintainers' +} + +class Developers extends Component { + state = { + visibleDevs: 6, + }; + + render() { + const { visibleDevs } = this.state; + console.log('aqui', visibleDevs); + return ( + + {({ packageMeta }) => { + const { type } = this.props; + const developerType = packageMeta.latest[type]; + if (!developerType || developerType.length === 0) return null; + return this.renderDevelopers(developerType); + }} + + ); + }; + + renderDevelopers = (developers) => { + const { type } = this.props; + const { visibleDevs } = this.state; + return ( + + + {type} + + {developers.slice(0, visibleDevs).map(developer => ( +
{this.renderDeveloperDetails(developer)}
+ ))} + {visibleDevs < developers.length && + + } + + + + ); + } + + renderDeveloperDetails= ({name, avatar }) => { + return ( + + + + ); + } + + handleLoadMore = () => { + this.setState((prev) => ({ visibleDevs: prev.visibleDevs + 6 })); + } + +} + + +export default Developers; diff --git a/src/webui/components/Developers/styles.js b/src/webui/components/Developers/styles.js new file mode 100644 index 000000000..3c89c0fb4 --- /dev/null +++ b/src/webui/components/Developers/styles.js @@ -0,0 +1,46 @@ +/** + * @prettier + */ + +import styled from 'react-emotion'; +import Typography from '@material-ui/core/Typography'; +import { default as MuiFab } from '@material-ui/core/Fab'; +import colors from '../../utils/styles/colors'; + +import { default as MuiCardContent } from '@material-ui/core/CardContent/index'; + +export const Details = styled('span')` + display: flex; + flex-direction: column; + align-items: center; +`; + +export const Content = styled('div')` + margin: -5px; + display: flex; + flex-wrap: wrap; + > * { + margin: 5px; + } +`; + +export const CardContent = styled(MuiCardContent)` + && { + padding-bottom: 20px; + } +`; + +export const Heading = styled(Typography)` + && { + font-weight: 700; + margin-bottom: 10px; + text-transform: capitalize; + } +`; + +export const Fab = styled(MuiFab)` + && { + background-color: ${colors.primary}; + color: ${colors.white}; + } +`; diff --git a/src/webui/components/UpLinks/index.js b/src/webui/components/UpLinks/index.js index 828c18742..7cf6dc00e 100644 --- a/src/webui/components/UpLinks/index.js +++ b/src/webui/components/UpLinks/index.js @@ -1,13 +1,12 @@ /** * @prettier - * @flow */ import { DetailContextConsumer } from '../../pages/version/index'; import { formatDateDistance } from '../../utils/package'; import { Heading, Spacer, ListItemText } from './styles'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; +import List from '@material-ui/core/List/index'; +import ListItem from '@material-ui/core/ListItem/index'; import React from 'react'; class UpLinks extends React.PureComponent { @@ -15,7 +14,7 @@ class UpLinks extends React.PureComponent { return {({ packageMeta }) => this.renderContent(packageMeta._uplinks)}; } - renderUpLinksList = (uplinks: object) => ( + renderUpLinksList = uplinks => ( {Object.keys(uplinks) .reverse() @@ -29,8 +28,7 @@ class UpLinks extends React.PureComponent { ); - // $FlowFixMe - renderContent(uplinks: object) { + renderContent(uplinks) { return ( uplinks && ( <>