186526/unpkg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Prettify everything

Browse Source
This commit is contained in:
MICHAEL JACKSON
2018-02-17 18:00:56 -08:00
parent d6f2bc089a
commit 2e1f09e913
58 changed files with 1061 additions and 932 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
client/Layout.js
View File

@ -1,78 +1,81 @@
import React from "react"
import PropTypes from "prop-types"
import { Motion, spring } from "react-motion"
import { Switch, Route, Link, withRouter } from "react-router-dom"
import WindowSize from "./WindowSize"
import About from "./About"
import Stats from "./Stats"
import Home from "./Home"
import React from "react";
import PropTypes from "prop-types";
import { Motion, spring } from "react-motion";
import { Switch, Route, Link, withRouter } from "react-router-dom";
import WindowSize from "./WindowSize";
import About from "./About";
import Stats from "./Stats";
import Home from "./Home";
class Layout extends React.Component {
static propTypes = {
location: PropTypes.object,
children: PropTypes.node
}
};
state = {
underlineLeft: 0,
underlineWidth: 0,
useSpring: false,
stats: null
}
};
adjustUnderline = (useSpring = false) => {
let itemIndex
let itemIndex;
switch (this.props.location.pathname) {
case "/stats":
itemIndex = 1
break
itemIndex = 1;
break;
case "/about":
itemIndex = 2
break
itemIndex = 2;
break;
case "/":
default:
itemIndex = 0
itemIndex = 0;
}
const itemNodes = this.listNode.querySelectorAll("li")
const currentNode = itemNodes[itemIndex]
const itemNodes = this.listNode.querySelectorAll("li");
const currentNode = itemNodes[itemIndex];
this.setState({
underlineLeft: currentNode.offsetLeft,
underlineWidth: currentNode.offsetWidth,
useSpring
})
}
});
};
componentDidMount() {
this.adjustUnderline()
this.adjustUnderline();
fetch("/_stats?period=last-month")
.then(res => res.json())
.then(stats => this.setState({ stats }))
.then(stats => this.setState({ stats }));
if (window.localStorage) {
const savedStats = window.localStorage.savedStats
const savedStats = window.localStorage.savedStats;
if (savedStats) this.setState({ stats: JSON.parse(savedStats) })
if (savedStats) this.setState({ stats: JSON.parse(savedStats) });
window.onbeforeunload = () => {
localStorage.savedStats = JSON.stringify(this.state.stats)
}
localStorage.savedStats = JSON.stringify(this.state.stats);
};
}
}
componentDidUpdate(prevProps) {
if (prevProps.location.pathname !== this.props.location.pathname) this.adjustUnderline(true)
if (prevProps.location.pathname !== this.props.location.pathname)
this.adjustUnderline(true);
}
render() {
const { underlineLeft, underlineWidth, useSpring } = this.state
const { underlineLeft, underlineWidth, useSpring } = this.state;
const style = {
left: useSpring ? spring(underlineLeft, { stiffness: 220 }) : underlineLeft,
left: useSpring
? spring(underlineLeft, { stiffness: 220 })
: underlineLeft,
width: useSpring ? spring(underlineWidth) : underlineWidth
}
};
return (
<div>
@ -81,7 +84,10 @@ class Layout extends React.Component {
<header>
<h1 className="layout-title">unpkg</h1>
<nav className="layout-nav">
<ol className="layout-nav-list" ref={node => (this.listNode = node)}>
<ol
className="layout-nav-list"
ref={node => (this.listNode = node)}
>
<li>
<Link to="/">Home</Link>
</li>
@ -111,13 +117,16 @@ class Layout extends React.Component {
</div>
<Switch>
<Route path="/stats" render={() => <Stats data={this.state.stats} />} />
<Route
path="/stats"
render={() => <Stats data={this.state.stats} />}
/>
<Route path="/about" component={About} />
<Route path="/" component={Home} />
</Switch>
</div>
)
);
}
}
export default withRouter(Layout)
export default withRouter(Layout);