f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-13 23:52:42 +00:00
Code Wiki Activity

Fix useEffect and Refs; Update fetchThemeBundle to work with functional

Browse Source
This commit is contained in:
Trevor Buckner
2025-08-30 17:10:20 -04:00
parent 759dcb5833
commit 8cf55932a9
2 changed files with 43 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
client/homebrew/pages/homePage/homePage.jsx
View File

@@ -22,26 +22,27 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js'); const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
const HomePage =(props)=>{ const HomePage =(props)=>{
const { props = {
brew = DEFAULT_BREW, brew : DEFAULT_BREW,
ver = '0.0.0' ver : '0.0.0',
} = props; ...props
};
const [brew , setBrew] = useState(brew); const [brew , setBrew] = useState(props.brew);
const [welcomeText , setWelcomeText] = useState(brew.text); const [welcomeText , setWelcomeText] = useState(props.brew.text);
const [error , setError] = useState(undefined); const [error , setError] = useState(undefined);
const [currentEditorViewPageNum , setCurrentEditorViewPageNum] = useState(1); const [currentEditorViewPageNum , setCurrentEditorViewPageNum] = useState(1);
const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1); const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1); const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
const [themeBundle , setThemeBundle] = useState({}); const [themeBundle , setThemeBundle] = useState({});
editor : React.createRef(null), const editorRef = useRef(null);
componentDidMount : function() { useEffect(()=>{
fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme); fetchThemeBundle(setError, setThemeBundle, brew.renderer, brew.theme);
}, }, []);
const handleSave ()=>{ const handleSave = ()=>{
request.post('/api') request.post('/api')
.send(this.state.brew) .send(this.state.brew)
.end((err, res)=>{ .end((err, res)=>{
@@ -53,24 +54,24 @@ const HomePage =(props)=>{
window.location = `/edit/${brew.editId}`; window.location = `/edit/${brew.editId}`;
}); });
}; };
const handleSplitMove ()=>{ const handleSplitMove = ()=>{
this.editor.current.update(); this.editor.current.update();
}; };
const handleEditorViewPageChange (pageNumber)=>{ const handleEditorViewPageChange = (pageNumber)=>{
this.setState({ currentEditorViewPageNum: pageNumber }); this.setState({ currentEditorViewPageNum: pageNumber });
}; };
const handleEditorCursorPageChange (pageNumber)=>{ const handleEditorCursorPageChange = (pageNumber)=>{
this.setState({ currentEditorCursorPageNum: pageNumber }); this.setState({ currentEditorCursorPageNum: pageNumber });
}; };
const handleBrewRendererPageChange (pageNumber)=>{ const handleBrewRendererPageChange = (pageNumber)=>{
this.setState({ currentBrewRendererPageNum: pageNumber }); this.setState({ currentBrewRendererPageNum: pageNumber });
}; };
const handleTextChange (text)=>{ const handleTextChange = (text)=>{
this.setState((prevState)=>({ this.setState((prevState)=>({
brew : { ...prevState.brew, text: text }, brew : { ...prevState.brew, text: text },
})); }));
@@ -97,33 +98,33 @@ const HomePage =(props)=>{
<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' /> <Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
{renderNavbar()} {renderNavbar()}
<div className='content'> <div className='content'>
<SplitPane onDragFinish={this.handleSplitMove}> <SplitPane onDragFinish={handleSplitMove}>
<Editor <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} 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 <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> </SplitPane>
</div> </div>
<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.handleSave}> <div className={cx('floatingSaveButton', { show: welcomeText != brew.text })} onClick={handleSave}>
Save current <i className='fas fa-save' /> Save current <i className='fas fa-save' />
</div> </div>

16
shared/helpers.js
View File

@@ -116,27 +116,21 @@ const printCurrentBrew = ()=>{
} }
}; };
const fetchThemeBundle = async (obj, renderer, theme)=>{ const fetchThemeBundle = async (setError, setThemeBundle, renderer, theme)=>{
if(!renderer || !theme) return; if(!renderer || !theme) return;
const res = await request const res = await request
.get(`/api/theme/${renderer}/${theme}`) .get(`/api/theme/${renderer}/${theme}`)
.catch((err)=>{ .catch((err)=>{
obj.setState({ error: err }); setError(err)
}); });
if(!res) { if(!res) {
obj.setState((prevState)=>({ setThemeBundle({});
...prevState,
themeBundle : {}
}));
return; return;
} }
const themeBundle = res.body; const themeBundle = res.body;
themeBundle.joinedStyles = themeBundle.styles.map((style)=>`<style>${style}</style>`).join('\n\n'); themeBundle.joinedStyles = themeBundle.styles.map((style)=>`<style>${style}</style>`).join('\n\n');
obj.setState((prevState)=>({ setThemeBundle(themeBundle);
...prevState, setError(null);
themeBundle : themeBundle,
error : null
}));
}; };
const debugTextMismatch = (clientTextRaw, serverTextRaw, label) => { const debugTextMismatch = (clientTextRaw, serverTextRaw, label) => {