refactor: Switch to hooks (preactjs-templates#44)

Co-authored-by: Leah <[email protected]>

Author: rschristian

template/src/components/app.js

@@ -1,32 +1,21 @@
-import { h, Component } from 'preact';
+import { h } from 'preact';
 import { Router } from 'preact-router';
 
 import Header from './header';
 
-// Code-splitting is automated for routes
+// Code-splitting is automated for `routes` directory
 import Home from '../routes/home';
 import Profile from '../routes/profile';
 
-export default class App extends Component {
-	
-	/** Gets fired when the route changes.
-	 *	@param {Object} event		"change" event from [preact-router](http://git.io/preact-router)
-	 *	@param {string} event.url	The newly routed URL
-	 */
-	handleRoute = e => {
-		this.currentUrl = e.url;
-	};
+const App = () => (
+	<div id="app">
+		<Header />
+		<Router>
+			<Home path="/" />
+			<Profile path="/profile/" user="me" />
+			<Profile path="/profile/:user" />
+		</Router>
+	</div>
+)
 
-	render() {
-		return (
-			<div id="app">
-				<Header />
-				<Router onChange={this.handleRoute}>
-					<Home path="/" />
-					<Profile path="/profile/" user="me" />
-					<Profile path="/profile/:user" />
-				</Router>
-			</div>
-		);
-	}
-}
+export default App;

template/src/routes/home/index.js

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import style from './style';
+import style from './style.css';
 
 const Home = () => (
 	<div class={style.home}>

template/src/routes/profile/index.js

@@ -1,47 +1,31 @@
-import { h, Component } from 'preact';
-import style from './style';
-
-export default class Profile extends Component {
-	state = {
-		time: Date.now(),
-		count: 10
-	};
-
-	// update the current time
-	updateTime = () => {
-		this.setState({ time: Date.now() });
-	};
-
-	increment = () => {
-		this.setState({ count: this.state.count+1 });
-	};
-
-	// gets called when this route is navigated to
-	componentDidMount() {
-		// start a timer for the clock:
-		this.timer = setInterval(this.updateTime, 1000);
-	}
-
-	// gets called just before navigating away from the route
-	componentWillUnmount() {
-		clearInterval(this.timer);
-	}
-
-	// Note: `user` comes from the URL, courtesy of our router
-	render({ user }, { time, count }) {
-		return (
-			<div class={style.profile}>
-				<h1>Profile: {user}</h1>
-				<p>This is the user profile for a user named { user }.</p>
-
-				<div>Current time: {new Date(time).toLocaleString()}</div>
-
-				<p>
-					<button onClick={this.increment}>Click Me</button>
-					{' '}
-					Clicked {count} times.
-				</p>
-			</div>
-		);
-	}
+import { h } from 'preact';
+import {useEffect, useState} from "preact/hooks";
+import style from './style.css';
+
+// Note: `user` comes from the URL, courtesy of our router
+const Profile = ({ user }) => {
+	const [time, setTime] = useState(Date.now());
+	const [count, setCount] = useState(10);
+
+	useEffect(() => {
+		let timer = setInterval(() => setTime(Date.now()), 1000);
+		return () => clearInterval(timer);
+	}, []);
+
+	return (
+		<div class={style.profile}>
+			<h1>Profile: {user}</h1>
+			<p>This is the user profile for a user named { user }.</p>
+
+			<div>Current time: {new Date(time).toLocaleString()}</div>
+
+			<p>
+				<button onClick={() => setCount((count) => count + 1)}>Click Me</button>
+				{' '}
+				Clicked {count} times.
+			</p>
+		</div>
+	);
 }
+
+export default Profile;