Merge pull request #4407 from naturalcrit/MakeHomePageFunctionalComponent

Refactor homePage.jsx into a functional component

client/homebrew/pages/homePage/homePage.jsx

@@ -1,98 +1,91 @@
-require('./homePage.less');
+import './homePage.less';
-const React = require('react');
-const createClass = require('create-react-class');
-const cx = require('classnames');
-import request from '../../utils/request-middleware.js';
-const { Meta } = require('vitreum/headtags');
 
-const Nav = require('naturalcrit/nav/nav.jsx');
+import React                           from 'react';
-const Navbar = require('../../navbar/navbar.jsx');
+import { useEffect, useState, useRef } from 'react';
-const NewBrewItem = require('../../navbar/newbrew.navitem.jsx');
+import request                         from '../../utils/request-middleware.js';
-const HelpNavItem = require('../../navbar/help.navitem.jsx');
+import { Meta }                        from 'vitreum/headtags';
-const VaultNavItem = require('../../navbar/vault.navitem.jsx');
-const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const AccountNavItem = require('../../navbar/account.navitem.jsx');
-const ErrorNavItem = require('../../navbar/error-navitem.jsx');
-const { fetchThemeBundle } = require('../../../../shared/helpers.js');
 
-const SplitPane = require('client/components/splitPane/splitPane.jsx');
+import Nav                             from 'naturalcrit/nav/nav.jsx';
-const Editor = require('../../editor/editor.jsx');
+import Navbar                          from '../../navbar/navbar.jsx';
-const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+import NewBrewItem                     from '../../navbar/newbrew.navitem.jsx';
+import HelpNavItem                     from '../../navbar/help.navitem.jsx';
+import VaultNavItem                    from '../../navbar/vault.navitem.jsx';
+import { both as RecentNavItem }       from '../../navbar/recent.navitem.jsx';
+import AccountNavItem                  from '../../navbar/account.navitem.jsx';
+import ErrorNavItem                    from '../../navbar/error-navitem.jsx';
+import { fetchThemeBundle }            from '../../../../shared/helpers.js';
 
-const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
+import SplitPane                       from 'client/components/splitPane/splitPane.jsx';
+import Editor                          from '../../editor/editor.jsx';
+import BrewRenderer                    from '../../brewRenderer/brewRenderer.jsx';
 
-const HomePage = createClass({
+import { DEFAULT_BREW }                from '../../../../server/brewDefaults.js';
-	displayName     : 'HomePage',
-	getDefaultProps : function() {
-		return {
-			brew : DEFAULT_BREW,
-			ver  : '0.0.0'
-		};
-	},
-	getInitialState : function() {
-		return {
-			brew                       : this.props.brew,
-			welcomeText                : this.props.brew.text,
-			error                      : undefined,
-			currentEditorViewPageNum   : 1,
-			currentEditorCursorPageNum : 1,
-			currentBrewRendererPageNum : 1,
-			themeBundle                : {}
-		};
-	},
 
-	editor : React.createRef(null),
+const HomePage =(props)=>{
+	props = {
+		brew : DEFAULT_BREW,
+		ver  : '0.0.0',
+    ...props
+  };
 
-	componentDidMount : function() {
+	const [brew                      , setBrew]                       = useState(props.brew);
-		fetchThemeBundle((err)=>{this.setState({ error: err })}, (theme)=>{this.setState({ themeBundle: theme })}, this.props.brew.renderer, this.props.brew.theme);
+	const [welcomeText               , setWelcomeText]                = useState(props.brew.text);
-	},
+	const [error                     , setError]                      = useState(undefined);
+	const [currentEditorViewPageNum  , setCurrentEditorViewPageNum]   = useState(1);
+	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
+	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
+	const [themeBundle               , setThemeBundle]                = useState({});
+	const [isSaving                  , setIsSaving]                   = useState(false);
 
-	handleSave : function(){
+	const editorRef = useRef(null);
+
+	useEffect(()=>{
+		fetchThemeBundle(setError, setThemeBundle, brew.renderer, brew.theme);
+	}, []);
+
+	const save = ()=>{
 		request.post('/api')
-			.send(this.state.brew)
+			.send(brew)
 			.end((err, res)=>{
 				if(err) {
-					this.setState({ error: err });
+					setError(err);
 					return;
 				}
-				const brew = res.body;
+				const saved = res.body;
-				window.location = `/edit/${brew.editId}`;
+				window.location = `/edit/${saved.editId}`;
 			});
-	},
+	};
-	handleSplitMove : function(){
-		this.editor.current.update();
-	},
 
-	handleEditorViewPageChange : function(pageNumber){
+	const handleSplitMove = ()=>{
-		this.setState({ currentEditorViewPageNum: pageNumber });
+		editorRef.current.update();
-	},
+	};
 
-	handleEditorCursorPageChange : function(pageNumber){
+	const handleEditorViewPageChange = (pageNumber)=>{
-		this.setState({ currentEditorCursorPageNum: pageNumber });
+		setCurrentEditorViewPageNum(pageNumber);
-	},
+	};
+	
+	const handleEditorCursorPageChange = (pageNumber)=>{
+		setCurrentEditorCursorPageNum(pageNumber);
+	};
+	
+	const handleBrewRendererPageChange = (pageNumber)=>{
+		setCurrentBrewRendererPageNum(pageNumber);
+	};
 
-	handleBrewRendererPageChange : function(pageNumber){
+	const handleTextChange = (text)=>{
-		this.setState({ currentBrewRendererPageNum: pageNumber });
+		setBrew((prevBrew) => ({ ...prevBrew, text }));
-	},
+	};
 
-	handleTextChange : function(text){
+	const clearError = ()=>{
-		this.setState((prevState)=>({
+		setError(null);
-			brew : { ...prevState.brew, text: text },
+		setIsSaving(false);
-		}));
+	};
-	},
 
-	clearError : function(){
+	const renderNavbar = ()=>{
-		setState({
+		return <Navbar ver={props.ver}>
-			error    : null,
-			isSaving : false
-		})
-	},
-
-	renderNavbar : function(){
-		return <Navbar ver={this.props.ver}>
 			<Nav.section>
-				{this.state.error ?
+				{error ?
-					<ErrorNavItem error={this.state.error} clearError={this.clearError}></ErrorNavItem> :
+					<ErrorNavItem error={error} clearError={clearError}></ErrorNavItem> :
 					null
 				}
 				<NewBrewItem />
@@ -102,48 +95,48 @@ const HomePage = createClass({
 				<AccountNavItem />
 			</Nav.section>
 		</Navbar>;
-	},
+	};
 
-	render : function(){
+	return (
-		return <div className='homePage sitePage'>
+		<div className='homePage sitePage'>
 			<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
-			{this.renderNavbar()}
+			{renderNavbar()}
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove}>
+				<SplitPane onDragFinish={handleSplitMove}>
 					<Editor
-						ref={this.editor}
+						ref={editorRef}
-						brew={this.state.brew}
+						brew={brew}
-						onTextChange={this.handleTextChange}
+						onTextChange={handleTextChange}
-						renderer={this.state.brew.renderer}
+						renderer={brew.renderer}
 						showEditButtons={false}
-						themeBundle={this.state.themeBundle}
+						themeBundle={themeBundle}
-						onCursorPageChange={this.handleEditorCursorPageChange}
+						onCursorPageChange={handleEditorCursorPageChange}
-						onViewPageChange={this.handleEditorViewPageChange}
+						onViewPageChange={handleEditorViewPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorViewPageNum={currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
 					/>
 					<BrewRenderer
-						text={this.state.brew.text}
+						text={brew.text}
-						style={this.state.brew.style}
+						style={brew.style}
-						renderer={this.state.brew.renderer}
+						renderer={brew.renderer}
-						onPageChange={this.handleBrewRendererPageChange}
+						onPageChange={handleBrewRendererPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorViewPageNum={currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
-						themeBundle={this.state.themeBundle}
+						themeBundle={themeBundle}
 					/>
 				</SplitPane>
 			</div>
-			<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
+			<div className={`floatingSaveButton${welcomeText !== brew.text ? ' show' : ''}`} onClick={save}>
 				Save current <i className='fas fa-save' />
 			</div>
 
 			<a href='/new' className='floatingNewButton'>
 				Create your own <i className='fas fa-magic' />
 			</a>
-		</div>;
+		</div>
-	}
+	)
-});
+};
 
 module.exports = HomePage;