From 83c3eacf831c866a70329468a50559f4a24fcd21 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Sat, 30 Aug 2025 16:45:47 -0400 Subject: [PATCH 1/5] Change props and state to functional style --- client/homebrew/pages/homePage/homePage.jsx | 34 +++++++++------------ 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index eac0216fd..55d19d72b 100644 --- a/client/homebrew/pages/homePage/homePage.jsx +++ b/client/homebrew/pages/homePage/homePage.jsx @@ -21,25 +21,19 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx'); const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js'); -const HomePage = createClass({ - 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 : {} - }; - }, +const HomePage =(props)=>{ + const { + brew = DEFAULT_BREW, + ver = '0.0.0' + } = props; + + const [brew , setBrew] = useState(brew); + const [welcomeText , setWelcomeText] = useState(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({}); editor : React.createRef(null), @@ -136,6 +130,6 @@ const HomePage = createClass({ ; } -}); +}; module.exports = HomePage; From 759dcb583360061c18a867004bf099eda85bacad Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Sat, 30 Aug 2025 16:49:54 -0400 Subject: [PATCH 2/5] Change functions to const vars --- client/homebrew/pages/homePage/homePage.jsx | 40 +++++++++++---------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index 55d19d72b..1b3ad0608 100644 --- a/client/homebrew/pages/homePage/homePage.jsx +++ b/client/homebrew/pages/homePage/homePage.jsx @@ -41,7 +41,7 @@ const HomePage =(props)=>{ fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme); }, - handleSave : function(){ + const handleSave ()=>{ request.post('/api') .send(this.state.brew) .end((err, res)=>{ @@ -52,29 +52,31 @@ const HomePage =(props)=>{ const brew = res.body; window.location = `/edit/${brew.editId}`; }); - }, - handleSplitMove : function(){ + }; + + const handleSplitMove ()=>{ this.editor.current.update(); - }, + }; - handleEditorViewPageChange : function(pageNumber){ + const handleEditorViewPageChange (pageNumber)=>{ this.setState({ currentEditorViewPageNum: pageNumber }); - }, + }; - handleEditorCursorPageChange : function(pageNumber){ + const handleEditorCursorPageChange (pageNumber)=>{ this.setState({ currentEditorCursorPageNum: pageNumber }); - }, + }; - handleBrewRendererPageChange : function(pageNumber){ + const handleBrewRendererPageChange (pageNumber)=>{ this.setState({ currentBrewRendererPageNum: pageNumber }); - }, + }; - handleTextChange : function(text){ + const handleTextChange (text)=>{ this.setState((prevState)=>({ brew : { ...prevState.brew, text: text }, })); - }, - renderNavbar : function(){ + }; + + const renderNavbar = ()=>{ return {this.state.error ? @@ -88,12 +90,12 @@ const HomePage =(props)=>{ ; - }, + }; - render : function(){ - return
+ return ( +
- {this.renderNavbar()} + {renderNavbar()}
{ Create your own -
; - } +
+ ) }; module.exports = HomePage; From 8cf55932a9392799e5127e33e253d94ea6826c50 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Sat, 30 Aug 2025 17:10:20 -0400 Subject: [PATCH 3/5] Fix useEffect and Refs; Update fetchThemeBundle to work with functional --- client/homebrew/pages/homePage/homePage.jsx | 75 +++++++++++---------- shared/helpers.js | 16 ++--- 2 files changed, 43 insertions(+), 48 deletions(-) diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index 1b3ad0608..e09296388 100644 --- a/client/homebrew/pages/homePage/homePage.jsx +++ b/client/homebrew/pages/homePage/homePage.jsx @@ -22,26 +22,27 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx'); const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js'); const HomePage =(props)=>{ - const { - brew = DEFAULT_BREW, - ver = '0.0.0' - } = props; + props = { + brew : DEFAULT_BREW, + ver : '0.0.0', + ...props + }; - const [brew , setBrew] = useState(brew); - const [welcomeText , setWelcomeText] = useState(brew.text); + const [brew , setBrew] = useState(props.brew); + 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({}); - editor : React.createRef(null), + const editorRef = useRef(null); - componentDidMount : function() { - fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme); - }, + useEffect(()=>{ + fetchThemeBundle(setError, setThemeBundle, brew.renderer, brew.theme); + }, []); - const handleSave ()=>{ + const handleSave = ()=>{ request.post('/api') .send(this.state.brew) .end((err, res)=>{ @@ -53,24 +54,24 @@ const HomePage =(props)=>{ window.location = `/edit/${brew.editId}`; }); }; - - const handleSplitMove ()=>{ + + const handleSplitMove = ()=>{ this.editor.current.update(); }; - const handleEditorViewPageChange (pageNumber)=>{ + const handleEditorViewPageChange = (pageNumber)=>{ this.setState({ currentEditorViewPageNum: pageNumber }); }; - const handleEditorCursorPageChange (pageNumber)=>{ + const handleEditorCursorPageChange = (pageNumber)=>{ this.setState({ currentEditorCursorPageNum: pageNumber }); }; - const handleBrewRendererPageChange (pageNumber)=>{ + const handleBrewRendererPageChange = (pageNumber)=>{ this.setState({ currentBrewRendererPageNum: pageNumber }); }; - const handleTextChange (text)=>{ + const handleTextChange = (text)=>{ this.setState((prevState)=>({ brew : { ...prevState.brew, text: text }, })); @@ -97,33 +98,33 @@ const HomePage =(props)=>{ {renderNavbar()}
- +
-
+
Save current
diff --git a/shared/helpers.js b/shared/helpers.js index e09b0bdc4..3f91583d6 100644 --- a/shared/helpers.js +++ b/shared/helpers.js @@ -116,27 +116,21 @@ const printCurrentBrew = ()=>{ } }; -const fetchThemeBundle = async (obj, renderer, theme)=>{ +const fetchThemeBundle = async (setError, setThemeBundle, renderer, theme)=>{ if(!renderer || !theme) return; const res = await request .get(`/api/theme/${renderer}/${theme}`) .catch((err)=>{ - obj.setState({ error: err }); + setError(err) }); if(!res) { - obj.setState((prevState)=>({ - ...prevState, - themeBundle : {} - })); + setThemeBundle({}); return; } const themeBundle = res.body; themeBundle.joinedStyles = themeBundle.styles.map((style)=>``).join('\n\n'); - obj.setState((prevState)=>({ - ...prevState, - themeBundle : themeBundle, - error : null - })); + setThemeBundle(themeBundle); + setError(null); }; const debugTextMismatch = (clientTextRaw, serverTextRaw, label) => { From 15c04ef37ed69b19136a19d4049f7710ec7e506d Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Sat, 30 Aug 2025 17:14:37 -0400 Subject: [PATCH 4/5] Update homePage.jsx --- client/homebrew/pages/homePage/homePage.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index e09296388..c8a66e732 100644 --- a/client/homebrew/pages/homePage/homePage.jsx +++ b/client/homebrew/pages/homePage/homePage.jsx @@ -44,7 +44,7 @@ const HomePage =(props)=>{ const handleSave = ()=>{ request.post('/api') - .send(this.state.brew) + .send(brew) .end((err, res)=>{ if(err) { this.setState({ error: err }); @@ -81,7 +81,7 @@ const HomePage =(props)=>{ return {this.state.error ? - : + : null } From 93b86632fce8ecfc870a4a48c2b0633f2f6c6768 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Sat, 30 Aug 2025 20:14:29 -0400 Subject: [PATCH 5/5] Change from require to import --- client/homebrew/pages/homePage/homePage.jsx | 79 ++++++++++----------- 1 file changed, 38 insertions(+), 41 deletions(-) diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index ab1eee122..84967b1ff 100644 --- a/client/homebrew/pages/homePage/homePage.jsx +++ b/client/homebrew/pages/homePage/homePage.jsx @@ -1,25 +1,25 @@ -require('./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'); +import './homePage.less'; -const Nav = require('naturalcrit/nav/nav.jsx'); -const Navbar = require('../../navbar/navbar.jsx'); -const NewBrewItem = require('../../navbar/newbrew.navitem.jsx'); -const HelpNavItem = require('../../navbar/help.navitem.jsx'); -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'); +import React from 'react'; +import { useEffect, useState, useRef } from 'react'; +import request from '../../utils/request-middleware.js'; +import { Meta } from 'vitreum/headtags'; -const SplitPane = require('client/components/splitPane/splitPane.jsx'); -const Editor = require('../../editor/editor.jsx'); -const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx'); +import Nav from 'naturalcrit/nav/nav.jsx'; +import Navbar from '../../navbar/navbar.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'; + +import { DEFAULT_BREW } from '../../../../server/brewDefaults.js'; const HomePage =(props)=>{ props = { @@ -35,6 +35,7 @@ const HomePage =(props)=>{ const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1); const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1); const [themeBundle , setThemeBundle] = useState({}); + const [isSaving , setIsSaving] = useState(false); const editorRef = useRef(null); @@ -42,53 +43,49 @@ const HomePage =(props)=>{ fetchThemeBundle(setError, setThemeBundle, brew.renderer, brew.theme); }, []); - const handleSave = ()=>{ + const save = ()=>{ request.post('/api') .send(brew) .end((err, res)=>{ if(err) { - this.setState({ error: err }); + setError(err); return; } - const brew = res.body; - window.location = `/edit/${brew.editId}`; + const saved = res.body; + window.location = `/edit/${saved.editId}`; }); }; const handleSplitMove = ()=>{ - this.editor.current.update(); + editorRef.current.update(); }; const handleEditorViewPageChange = (pageNumber)=>{ - this.setState({ currentEditorViewPageNum: pageNumber }); + setCurrentEditorViewPageNum(pageNumber); }; - + const handleEditorCursorPageChange = (pageNumber)=>{ - this.setState({ currentEditorCursorPageNum: pageNumber }); + setCurrentEditorCursorPageNum(pageNumber); }; - + const handleBrewRendererPageChange = (pageNumber)=>{ - this.setState({ currentBrewRendererPageNum: pageNumber }); + setCurrentBrewRendererPageNum(pageNumber); }; const handleTextChange = (text)=>{ - this.setState((prevState)=>({ - brew : { ...prevState.brew, text: text }, - })); + setBrew((prevBrew) => ({ ...prevBrew, text })); }; const clearError = ()=>{ - setState({ - error : null, - isSaving : false - }) + setError(null); + setIsSaving(false); }; - renderNavbar : function(){ - return + const renderNavbar = ()=>{ + return - {this.state.error ? - : + {error ? + : null } @@ -131,7 +128,7 @@ const HomePage =(props)=>{ />
-
+
Save current