0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2025-01-27 22:59:51 -05:00

refactor: hide search and title when there is no packages to display

This commit is contained in:
Juan Picado @jotadeveloper 2017-07-22 10:50:53 +02:00
parent acd4349b75
commit b5fccd1ac9
No known key found for this signature in database
GPG key ID: 18AC54485952D158
10 changed files with 220 additions and 117 deletions

View file

@ -92,6 +92,7 @@
"react-dom": "15.6.1",
"react-hot-loader": "3.0.0-beta.7",
"react-router-dom": "4.1.1",
"react-syntax-highlighter": "5.6.2",
"rimraf": "2.6.1",
"sass-loader": "6.0.6",
"source-map-loader": "0.2.1",

View file

@ -0,0 +1,27 @@
.help {
.noPkg {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 0;
font-size: 20px;
color: #9f9f9f;
.noPkgTitle {
margin: 1em 0;
padding: 0;
font-size: 24px;
}
p {
line-height: 1.5;
margin: 0 auto;
font-size: 14px;
}
code {
font-style: italic;
}
}
}

View file

@ -0,0 +1,37 @@
import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
import {sunburst} from 'react-syntax-highlighter/dist/styles';
import classes from './help.scss';
const Help = () => {
return (
<div className={classes.help}>
<li className={classes.noPkg}>
<h1 className={classes.noPkgTitle}>
No Package Published Yet
</h1>
<p>
<div>
To publish your first package just:
</div>
<br/>
<strong>
1. Login
</strong>
<SyntaxHighlighter language='javascript' style={sunburst}>
{`npm adduser --registry ${location.origin}`}
</SyntaxHighlighter>
<strong>2. Publish</strong>
<SyntaxHighlighter language='javascript' style={sunburst}>
{`npm publish --registry ${location.origin}`}
</SyntaxHighlighter>
<strong>3. Refresh this page!</strong>
</p>
</li>
</div>
);
};
export default Help;

View file

@ -1,9 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import classes from './packageList.scss';
import Package from '../Package';
import Help from '../Help';
import classes from './packageList.scss';
export default class PackageList extends React.Component {
@ -19,24 +20,24 @@ export default class PackageList extends React.Component {
render() {
return (
<div>
<div className={classes.pkgContainer}>
{
this.props.packages.length ?
this.renderList():
<li className={classes.noPkg}>
<h1 className={classes.noPkgTitle}>No Package Published Yet</h1>
<p>
To publish your first package just:
<br/><br/>
<strong>1. Login</strong><br/>
<code>npm adduser --registry {location.origin}</code><br/>
<strong>2. Publish</strong><br/>
<code>npm publish --registry {location.origin}</code><br/>
<strong>3. Done!</strong>
</p>
</li>
}
{this.renderTitle()}
{this.props.packages.length ? this.renderList(): <Help/>}
</div>
</div>
);
}
renderTitle() {
if (this.isTherePackages() === false) {
return;
}
return <h1 className={ classes.listTitle }>Available Packages</h1>;
}
isTherePackages() {
return this.props.packages.length > 0;
}
}

View file

@ -7,28 +7,10 @@
list-style: none;
}
li.noPkg {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 0;
font-size: 20px;
color: #9f9f9f;
.noPkgTitle {
margin: 0;
padding: 0;
font-size: 24px;
}
p {
line-height: 1.5;
margin: 0 auto;
font-size: 14px;
}
code {
font-style: italic;
}
.listTitle {
font-weight: normal;
font-size: 24px;
margin-top: 30px;
margin-bottom: 0;
}
}

View file

@ -0,0 +1,22 @@
import React from 'react';
import PropTypes from 'prop-types';
import classes from './search.scss';
const Search = (props) => {
return (
<input
type="text"
placeholder="Type to search..."
className={ classes.searchBox }
onChange={ props.handleSearchInput }
/>
);
};
Search.propTypes = {
handleSearchInput: PropTypes.func.isRequired
};
export default Search;

View file

@ -0,0 +1,14 @@
@import '../../styles/variable';
.searchBox {
width: 100%;
font-size: 18px;
line-height: 30px;
border: none;
border-bottom: 1px solid lightgrey;
outline: none;
&:focus {
border-bottom: 1px solid grey;
}
}

View file

@ -1,21 +1 @@
@import '../../styles/variable';
.searchBox {
width: 100%;
font-size: 18px;
line-height: 30px;
border: none;
border-bottom: 1px solid lightgrey;
outline: none;
&:focus {
border-bottom: 1px solid grey;
}
}
.listTitle {
font-weight: normal;
font-size: 24px;
margin-top: 30px;
margin-bottom: 0;
}

View file

@ -1,10 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
import {Loading, MessageBox} from 'element-react';
import {isEmpty} from 'lodash';
import API from '../../../utils/api';
import PackageList from '../../components/PackageList';
import Search from '../../components/Search';
import classes from './home.scss';
@ -89,32 +91,32 @@ export default class Home extends React.Component {
});
}
renderLoading() {
return (
<Loading text="Loading..." />
);
}
renderPackageList() {
return (
<div>
<h1 className={ classes.listTitle }>Available Packages</h1>
<PackageList packages={this.state.packages} />
</div>
);
isTherePackages() {
return isEmpty(this.state.packages);
}
render() {
return (
<div className={ classes.container }>
<input
type="text"
placeholder="Type to search..."
className={ classes.searchBox }
onChange={ this.handleSearchInput }
/>
{ this.renderSearchBar() }
{ this.state.loading ? this.renderLoading() : this.renderPackageList() }
</div>
);
}
renderSearchBar() {
if (this.isTherePackages()) {
return;
}
return <Search handleSearchInput={ this.handleSearchInput } />;
}
renderLoading() {
return <Loading text="Loading..." />;
}
renderPackageList() {
return <PackageList packages={this.state.packages} />;
}
}

111
yarn.lock
View file

@ -1156,11 +1156,11 @@ browserslist@^1.1.1, browserslist@^1.1.3, browserslist@^1.3.6, browserslist@^1.5
electron-to-chromium "^1.2.7"
browserslist@^2.1.2:
version "2.2.0"
resolved "https://registry.npmjs.org/browserslist/-/browserslist-2.2.0.tgz#5e35ec993e467c6464b8cb708447386891de9f50"
version "2.2.1"
resolved "https://registry.npmjs.org/browserslist/-/browserslist-2.2.1.tgz#709048c57bf3bf9b382105c396a737ad525d948e"
dependencies:
caniuse-lite "^1.0.30000701"
electron-to-chromium "^1.3.15"
caniuse-lite "^1.0.30000704"
electron-to-chromium "^1.3.16"
buffer-equal-constant-time@1.0.1:
version "1.0.1"
@ -1265,12 +1265,12 @@ caniuse-api@^1.5.2:
lodash.uniq "^4.5.0"
caniuse-db@^1.0.30000187, caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
version "1.0.30000702"
resolved "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000702.tgz#a60cd30f3ef44ae7b5ed12e9d9b70d4bff6352cb"
version "1.0.30000704"
resolved "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000704.tgz#8c5aa6fed8058e65c70f2c1f5d63f7088650705c"
caniuse-lite@^1.0.30000701:
version "1.0.30000702"
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000702.tgz#bd66e40345528fe0c001917d1d3f55454df634f1"
caniuse-lite@^1.0.30000704:
version "1.0.30000704"
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000704.tgz#adb6ea01134515663682db93abab291d4c02946b"
caseless@~0.11.0:
version "0.11.0"
@ -1608,8 +1608,8 @@ cors@^2.8.3:
vary "^1"
cosmiconfig@^2.1.1:
version "2.1.3"
resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.1.3.tgz#952771eb0dddc1cb3fa2f6fbe51a522e93b3ee0a"
version "2.2.1"
resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.2.1.tgz#7fbdc6fb47597d5f88175de1df696b66d36e5944"
dependencies:
is-directory "^0.3.1"
js-yaml "^3.4.3"
@ -1671,13 +1671,21 @@ cross-spawn@^3.0.0:
lru-cache "^4.0.1"
which "^1.2.9"
cross-spawn@^4, cross-spawn@^4.0.0:
cross-spawn@^4:
version "4.0.2"
resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
dependencies:
lru-cache "^4.0.1"
which "^1.2.9"
cross-spawn@^5.0.1:
version "5.1.0"
resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
dependencies:
lru-cache "^4.0.1"
shebang-command "^1.2.0"
which "^1.2.9"
cryptiles@2.x.x:
version "2.0.5"
resolved "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
@ -2088,7 +2096,7 @@ ee-first@1.1.1:
version "1.1.1"
resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.15:
electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.16:
version "1.3.16"
resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.16.tgz#d0e026735754770901ae301a21664cba45d92f7d"
@ -2414,12 +2422,12 @@ evp_bytestokey@^1.0.0:
dependencies:
create-hash "^1.1.1"
execa@^0.5.0:
version "0.5.1"
resolved "https://registry.npmjs.org/execa/-/execa-0.5.1.tgz#de3fb85cb8d6e91c85bcbceb164581785cb57b36"
execa@^0.7.0:
version "0.7.0"
resolved "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
dependencies:
cross-spawn "^4.0.0"
get-stream "^2.2.0"
cross-spawn "^5.0.1"
get-stream "^3.0.0"
is-stream "^1.1.0"
npm-run-path "^2.0.0"
p-finally "^1.0.0"
@ -2781,12 +2789,9 @@ get-stdin@^5.0.0:
version "5.0.1"
resolved "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz#122e161591e21ff4c52530305693f20e6393a398"
get-stream@^2.2.0:
version "2.3.1"
resolved "https://registry.npmjs.org/get-stream/-/get-stream-2.3.1.tgz#5f38f93f346009666ee0150a054167f91bdd95de"
dependencies:
object-assign "^4.0.1"
pinkie-promise "^2.0.0"
get-stream@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
getpass@^0.1.1:
version "0.1.7"
@ -2983,6 +2988,14 @@ he@1.1.x:
version "1.1.1"
resolved "https://registry.npmjs.org/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
highlight.js@~9.12.0:
version "9.12.0"
resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
highlight.js@~9.8.0:
version "9.8.0"
resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-9.8.0.tgz#38eeef40cd45eaddbec8c9e5238fb7a783a3b685"
history@^4.5.1, history@^4.6.0:
version "4.6.3"
resolved "https://registry.npmjs.org/history/-/history-4.6.3.tgz#6d723a8712c581d6bef37e8c26f4aedc6eb86967"
@ -3549,8 +3562,8 @@ jsesc@~0.5.0:
resolved "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
json-loader@^0.5.4:
version "0.5.4"
resolved "https://registry.npmjs.org/json-loader/-/json-loader-0.5.4.tgz#8baa1365a632f58a3c46d20175fc6002c96e37de"
version "0.5.5"
resolved "https://registry.npmjs.org/json-loader/-/json-loader-0.5.5.tgz#1147a469b24f4641520614312fea0c07af176974"
json-schema-traverse@^0.3.0:
version "0.3.1"
@ -3885,6 +3898,12 @@ lower-case@^1.1.1:
version "1.1.4"
resolved "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
lowlight@^1.5.0:
version "1.9.0"
resolved "https://registry.npmjs.org/lowlight/-/lowlight-1.9.0.tgz#6eccfb20f9125a56a82032083967998b5ba19905"
dependencies:
highlight.js "~9.12.0"
lru-cache@^4.0.1:
version "4.1.1"
resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
@ -4474,10 +4493,10 @@ os-locale@^1.4.0:
lcid "^1.0.0"
os-locale@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/os-locale/-/os-locale-2.0.0.tgz#15918ded510522b81ee7ae5a309d54f639fc39a4"
version "2.1.0"
resolved "https://registry.npmjs.org/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
dependencies:
execa "^0.5.0"
execa "^0.7.0"
lcid "^1.0.0"
mem "^1.1.0"
@ -4961,8 +4980,8 @@ postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.
supports-color "^3.2.3"
postcss@^6.0.1:
version "6.0.7"
resolved "https://registry.npmjs.org/postcss/-/postcss-6.0.7.tgz#6a097477c46d13d0560a817d69abc0bae549d0a0"
version "6.0.8"
resolved "https://registry.npmjs.org/postcss/-/postcss-6.0.8.tgz#89067a9ce8b11f8a84cbc5117efc30419a0857b3"
dependencies:
chalk "^2.0.1"
source-map "^0.5.6"
@ -5179,6 +5198,14 @@ react-router@^4.1.1:
prop-types "^15.5.4"
warning "^3.0.0"
react-syntax-highlighter@5.6.2:
version "5.6.2"
resolved "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-5.6.2.tgz#01f5ad3cc44c40c26b6fb4e00a4bed90f66304c5"
dependencies:
babel-runtime "^6.18.0"
highlight.js "~9.8.0"
lowlight "^1.5.0"
react-transition-group@^1.2.0:
version "1.2.0"
resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.0.tgz#b51fc921b0c3835a7ef7c571c79fc82c73e9204f"
@ -5667,6 +5694,16 @@ shallow-clone@^0.1.2:
lazy-cache "^0.2.3"
mixin-object "^2.0.1"
shebang-command@^1.2.0:
version "1.2.0"
resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
dependencies:
shebang-regex "^1.0.0"
shebang-regex@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
signal-exit@^3.0.0, signal-exit@^3.0.1, signal-exit@^3.0.2:
version "3.0.2"
resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@ -5752,8 +5789,8 @@ source-map@~0.1.33:
amdefine ">=0.0.4"
sourcemapped-stacktrace@^1.1.6:
version "1.1.6"
resolved "https://registry.npmjs.org/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.6.tgz#112d8749c942c3cd3b630dfac9514577b86a3a51"
version "1.1.7"
resolved "https://registry.npmjs.org/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.7.tgz#17e05374ff78b71a9d89ad3975a49f22725ba935"
dependencies:
source-map "0.5.6"
@ -6087,8 +6124,8 @@ table@^4.0.1:
string-width "^2.0.0"
tapable@^0.2.5, tapable@~0.2.5:
version "0.2.6"
resolved "https://registry.npmjs.org/tapable/-/tapable-0.2.6.tgz#206be8e188860b514425375e6f1ae89bfb01fd8d"
version "0.2.7"
resolved "https://registry.npmjs.org/tapable/-/tapable-0.2.7.tgz#e46c0daacbb2b8a98b9b0cea0f4052105817ed5c"
tar-pack@^3.4.0:
version "3.4.0"
@ -6228,8 +6265,8 @@ typedarray@^0.0.6:
resolved "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
ua-parser-js@^0.7.9:
version "0.7.13"
resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.13.tgz#cd9dd2f86493b3f44dbeeef3780fda74c5ee14be"
version "0.7.14"
resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca"
uglify-js@3.0.x:
version "3.0.25"