-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Fix 404 packages view, refactor readme and some components. Spli…
…t them up for easy testing.
- Loading branch information
1 parent
0f31b36
commit d72ee76
Showing
15 changed files
with
182 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,32 +1,19 @@ | ||
import React from 'react'; | ||
import {HashRouter as Router, Route, Switch} from 'react-router-dom'; | ||
import 'element-theme-default'; | ||
import {i18n} from 'element-react'; | ||
import locale from 'element-react/src/locale/lang/en'; | ||
|
||
i18n.use(locale); | ||
|
||
import Header from './components/Header'; | ||
import Home from './modules/home'; | ||
import Detail from './modules/detail'; | ||
import Route from './router'; | ||
|
||
import './styles/global.scss'; | ||
import 'normalize.css'; | ||
|
||
export default class App extends React.Component { | ||
render() { | ||
return ( | ||
<Router> | ||
<div> | ||
<Header/> | ||
<div className="container"> | ||
<Switch> | ||
<Route exact path="/(search/:keyword)?" component={ Home } /> | ||
<Route path="/detail/:package" component={ Detail } /> | ||
</Switch> | ||
</div> | ||
</div> | ||
</Router> | ||
<Route/> | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
@import '../../styles/variable'; | ||
|
||
.notFound { | ||
width: 100%; | ||
font-size: 18px; | ||
line-height: 30px; | ||
border: none; | ||
border-bottom: 1px solid lightgrey; | ||
outline: none; | ||
|
||
&:focus { | ||
border-bottom: 1px solid grey; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
|
||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
|
||
import classes from './404.scss'; | ||
|
||
const NotFound = (props) => { | ||
return ( | ||
<div className={classes.notFound}> | ||
<h1>Error 404 - {props.pkg}</h1> | ||
<hr/> | ||
<p> | ||
Oops, The package you are trying to access does not exist. | ||
</p> | ||
</div> | ||
); | ||
}; | ||
|
||
NotFound.propTypes = { | ||
pkg: PropTypes.string.isRequired | ||
}; | ||
|
||
export default NotFound; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
|
||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import isNil from 'lodash/isNil'; | ||
|
||
import Readme from '../Readme'; | ||
|
||
import classes from './packageDetail.scss'; | ||
|
||
const PackageDetail = (props) => { | ||
|
||
const displayState = (readMe) => { | ||
if (isNil(readMe)) { | ||
return; | ||
} | ||
return <Readme readMe={readMe}/>; | ||
}; | ||
|
||
return ( | ||
<div className={classes.pkgDetail}> | ||
<h1 className={ classes.title }>{ props.package }</h1> | ||
<hr/> | ||
<div className={classes.readme}> | ||
{displayState(props.readMe)} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
PackageDetail.propTypes = { | ||
readMe: PropTypes.string, | ||
package: PropTypes.string.isRequired | ||
}; | ||
|
||
export default PackageDetail; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
@import '../../styles/variable'; | ||
|
||
.pkgDetail { | ||
|
||
.title { | ||
font-size: 28px; | ||
color: $text-black; | ||
} | ||
|
||
.readme { | ||
margin-bottom: 5em; | ||
} | ||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
|
||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
|
||
import 'github-markdown-css'; | ||
|
||
const Readme = (props) => { | ||
return <div className="markdown-body" dangerouslySetInnerHTML={{__html: props.readMe}}/>; | ||
}; | ||
|
||
Readme.propTypes = { | ||
readMe: PropTypes.string.isRequired | ||
}; | ||
|
||
export default Readme; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,2 @@ | ||
@import '../../styles/variable'; | ||
|
||
.title { | ||
font-size: 28px; | ||
color: $text-black; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,52 +1,44 @@ | ||
import React from 'react'; | ||
import API from '../../../utils/api'; | ||
import {Loading} from 'element-react'; | ||
import PropTypes from 'prop-types'; | ||
import {Loading} from 'element-react'; | ||
import isEmpty from 'lodash/isEmpty'; | ||
|
||
import PackageDetail from '../../components/PackageDetail'; | ||
import NotFound from '../../components/NotFound'; | ||
import API from '../../../utils/api'; | ||
|
||
import classes from './detail.scss'; | ||
import 'github-markdown-css'; | ||
const loadingMessage = 'Loading...'; | ||
|
||
export default class Detail extends React.Component { | ||
static propTypes = { | ||
match: PropTypes.object | ||
} | ||
|
||
state = { | ||
readMe: '' | ||
readMe: '', | ||
notFound: false, | ||
} | ||
|
||
async componentDidMount() { | ||
try { | ||
let resp = await API.get(`package/readme/${this.props.match.params.package}`); | ||
const resp = await API.get(`package/readme/${this.props.match.params.package}`); | ||
this.setState({ | ||
readMe: resp.data | ||
}); | ||
} catch (err) { | ||
this.setState({ | ||
readMe: 'Failed to load readme...' | ||
notFound: true | ||
}); | ||
} | ||
} | ||
|
||
renderReadMe() { | ||
if (this.state.readMe) { | ||
return ( | ||
<div className="markdown-body" dangerouslySetInnerHTML={{__html: this.state.readMe}}/> | ||
); | ||
} else { | ||
return ( | ||
<Loading text="Loading..." /> | ||
); | ||
} | ||
} | ||
|
||
render() { | ||
return ( | ||
<div> | ||
<h1 className={ classes.title }>{ this.props.match.params.package }</h1> | ||
<hr/> | ||
{this.renderReadMe()} | ||
</div> | ||
); | ||
if (this.state.notFound) { | ||
return <NotFound | ||
pkg={this.props.match.params.package}/>; | ||
} else if (isEmpty(this.state.readMe)) { | ||
return <Loading text={loadingMessage} />; | ||
} | ||
return <PackageDetail readMe={this.state.readMe} package={this.props.match.params.package}/>; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import React from 'react'; | ||
import {HashRouter as Router, Route, Switch} from 'react-router-dom'; | ||
|
||
import Header from './components/Header'; | ||
import Home from './modules/home'; | ||
import Detail from './modules/detail'; | ||
|
||
const RouterApp = () => { | ||
return ( | ||
<Router> | ||
<div> | ||
<Header/> | ||
<div className="container"> | ||
<Switch> | ||
<Route exact path="/(search/:keyword)?" component={ Home } /> | ||
<Route path="/detail/:package" component={Detail} /> | ||
</Switch> | ||
</div> | ||
</div> | ||
</Router> | ||
); | ||
}; | ||
|
||
export default RouterApp; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,6 +2,7 @@ | |
|
||
body { | ||
font-family: $font; | ||
font-size: 12px; | ||
} | ||
|
||
:global { | ||
|