f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-04 08:12:39 +00:00
Code Wiki Activity

Merge branch 'master' into UnifyNewHomeEdit-Structure&Naming

Browse Source
This commit is contained in:
Trevor Buckner
2025-09-26 22:56:15 -04:00
parent 788324fe31 fb75bd46d0
commit c6ed67db08
2 changed files with 120 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
client/homebrew/navbar/share.navitem.jsx Normal file
View File

@@ -0,0 +1,35 @@
import React from 'react';
import dedent from 'dedent-tabs';
import Nav from 'naturalcrit/nav/nav.jsx';
const getShareId = (brew)=>(
brew.googleId && !brew.stubbed
? brew.googleId + brew.shareId
: brew.shareId
);
const getRedditLink = (brew)=>{
const text = dedent`
Hey guys! I've been working on this homebrew. I'd love your feedback. Check it out.
**[Homebrewery Link](${global.config.baseUrl}/share/${getShareId(brew)})**`;
return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(brew.title.toWellFormed())}&text=${encodeURIComponent(text)}`;
};
export default ({brew}) => (
<Nav.dropdown>
<Nav.item color='teal' icon='fas fa-share-alt'>
share
</Nav.item>
<Nav.item color='blue' href={`/share/${getShareId(brew)}`}>
view
</Nav.item>
<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${getShareId(brew)}`);}}>
copy url
</Nav.item>
<Nav.item color='blue' href={getRedditLink(brew)} newTab rel='noopener noreferrer'>
post to reddit
</Nav.item>
</Nav.dropdown>
);

198
client/homebrew/pages/editPage/editPage.jsx
View File

@@ -15,6 +15,7 @@ import Nav from 'naturalcrit/nav/nav.jsx';
import Navbar from '../../navbar/navbar.jsx'; import Navbar from '../../navbar/navbar.jsx';
import NewBrewItem from '../../navbar/newbrew.navitem.jsx'; import NewBrewItem from '../../navbar/newbrew.navitem.jsx';
import AccountNavItem from '../../navbar/account.navitem.jsx'; import AccountNavItem from '../../navbar/account.navitem.jsx';
import ShareNavItem from '../../navbar/share.navitem.jsx';
import ErrorNavItem from '../../navbar/error-navitem.jsx'; import ErrorNavItem from '../../navbar/error-navitem.jsx';
import HelpNavItem from '../../navbar/help.navitem.jsx'; import HelpNavItem from '../../navbar/help.navitem.jsx';
import VaultNavItem from '../../navbar/vault.navitem.jsx'; import VaultNavItem from '../../navbar/vault.navitem.jsx';
@@ -48,6 +49,7 @@ const EditPage = (props)=>{
const [currentBrew , setCurrentBrew ] = useState(props.brew); const [currentBrew , setCurrentBrew ] = useState(props.brew);
const [isSaving , setIsSaving ] = useState(false); const [isSaving , setIsSaving ] = useState(false);
const [lastSavedTime , setLastSavedTime ] = useState(new Date());
const [saveGoogle , setSaveGoogle ] = useState(!!props.brew.googleId); const [saveGoogle , setSaveGoogle ] = useState(!!props.brew.googleId);
const [error , setError ] = useState(null); const [error , setError ] = useState(null);
const [HTMLErrors , setHTMLErrors ] = useState(Markdown.validate(props.brew.text)); const [HTMLErrors , setHTMLErrors ] = useState(Markdown.validate(props.brew.text));
@@ -59,56 +61,56 @@ const EditPage = (props)=>{
const [alertTrashedGoogleBrew , setAlertTrashedGoogleBrew ] = useState(props.brew.trashed); const [alertTrashedGoogleBrew , setAlertTrashedGoogleBrew ] = useState(props.brew.trashed);
const [alertLoginToTransfer , setAlertLoginToTransfer ] = useState(false); const [alertLoginToTransfer , setAlertLoginToTransfer ] = useState(false);
const [confirmGoogleTransfer , setConfirmGoogleTransfer ] = useState(false); const [confirmGoogleTransfer , setConfirmGoogleTransfer ] = useState(false);
const [url , setUrl ] = useState('');
const [autoSaveEnabled , setAutoSaveEnabled ] = useState(true); const [autoSaveEnabled , setAutoSaveEnabled ] = useState(true);
const [autoSaveWarning , setAutoSaveWarning ] = useState(true); const [warnUnsavedChanges , setWarnUnsavedChanges ] = useState(true);
const [unsavedTime , setUnsavedTime ] = useState(new Date());
const editorRef = useRef(null); const editorRef = useRef(null);
const savedBrew = useRef(_.cloneDeep(props.brew)); const lastSavedBrew = useRef(_.cloneDeep(props.brew));
const warningTimer = useRef(null); const saveTimeout = useRef(null);
const debounceSave = useCallback(_.debounce((brew, saveToGoogle)=>save(brew, saveToGoogle), SAVE_TIMEOUT), []); const warnUnsavedTimeout = useRef(null);
const trySaveRef = useRef(trySave); // CTRL+S listener lives outside React and needs ref to use trySave with latest copy of brew
const unsavedChangesRef = useRef(unsavedChanges); // Similarly, onBeforeUnload lives outside React and needs ref to unsavedChanges
useEffect(()=>{ useEffect(()=>{
setUrl(window.location.href);
const autoSavePref = JSON.parse(localStorage.getItem('AUTOSAVE_ON') ?? true); const autoSavePref = JSON.parse(localStorage.getItem('AUTOSAVE_ON') ?? true);
setAutoSaveEnabled(autoSavePref); setAutoSaveEnabled(autoSavePref);
setAutoSaveWarning(!autoSavePref); setWarnUnsavedChanges(!autoSavePref);
setHTMLErrors(Markdown.validate(currentBrew.text)); setHTMLErrors(Markdown.validate(currentBrew.text));
fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme); fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
document.addEventListener('keydown', handleControlKeys); const handleControlKeys = (e)=>{
window.onbeforeunload = ()=>{ if(!(e.ctrlKey || e.metaKey)) return;
if(isSaving || unsavedChanges) if(e.keyCode === 83) trySaveRef.current(true);
return 'You have unsaved changes!'; if(e.keyCode === 80) printCurrentBrew();
if([83, 80].includes(e.keyCode)) {
e.stopPropagation();
e.preventDefault();
}
}; };
document.addEventListener('keydown', handleControlKeys);
window.onbeforeunload = ()=>{
if(unsavedChangesRef.current)
return 'You have unsaved changes!';
};
return ()=>{ return ()=>{
document.removeEventListener('keydown', handleControlKeys); document.removeEventListener('keydown', handleControlKeys);
window.onbeforeunload = null; window.onBeforeUnload = null;
}; };
}, []); }, []);
useEffect(()=>{ useEffect(()=>{
const hasChange = !_.isEqual(currentBrew, savedBrew.current); trySaveRef.current = trySave;
unsavedChangesRef.current = unsavedChanges;
});
useEffect(()=>{
const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current);
setUnsavedChanges(hasChange); setUnsavedChanges(hasChange);
if(hasChange && autoSaveEnabled) trySave(); if(autoSaveEnabled) trySave(false, hasChange);
}, [currentBrew]); }, [currentBrew]);
const handleControlKeys = (e)=>{
if(!(e.ctrlKey || e.metaKey)) return;
const S_KEY = 83;
const P_KEY = 80;
if(e.keyCode === S_KEY) trySave(true);
if(e.keyCode === P_KEY) printCurrentBrew();
if(e.keyCode === S_KEY || e.keyCode === P_KEY) {
e.stopPropagation();
e.preventDefault();
}
};
const handleSplitMove = ()=>{ const handleSplitMove = ()=>{
editorRef.current?.update(); editorRef.current?.update();
}; };
@@ -143,22 +145,10 @@ const EditPage = (props)=>{
snippets : newData.snippets snippets : newData.snippets
})); }));
const trySave = (immediate = false)=>{ const resetWarnUnsavedTimer = ()=>{
//debounceSave = _.debounce(save, SAVE_TIMEOUT); setTimeout(()=>setWarnUnsavedChanges(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds
if(isSaving) return; clearTimeout(warnUnsavedTimeout.current);
warnUnsavedTimeout.current = setTimeout(()=>setWarnUnsavedChanges(true), UNSAVED_WARNING_TIMEOUT); // 15 minutes between unsaved work warnings
const hasChange = !_.isEqual(currentBrew, savedBrew.current);
if(immediate) {
debounceSave(currentBrew, saveGoogle);
debounceSave.flush?.();
return;
}
if(hasChange)
debounceSave(currentBrew, saveGoogle);
else
debounceSave.cancel?.();
}; };
const handleGoogleClick = ()=>{ const handleGoogleClick = ()=>{
@@ -184,11 +174,26 @@ const EditPage = (props)=>{
trySave(true); trySave(true);
}; };
const save = async (brew, saveToGoogle)=>{ const trySave = (immediate = false, hasChanges = true)=>{
debounceSave?.cancel?.(); clearTimeout(saveTimeout.current);
if(isSaving) return;
if(!hasChanges && !immediate) return;
const newTimeout = immediate ? 0 : SAVE_TIMEOUT;
setIsSaving(true); saveTimeout.current = setTimeout(async ()=>{
setError(null); setIsSaving(true);
setError(null);
await save(currentBrew, saveGoogle)
.catch((err)=>{
setError(err);
});
setIsSaving(false);
setLastSavedTime(new Date());
if(!autoSaveEnabled) resetWarnUnsavedTimer();
}, newTimeout);
};
const save = async (brew, saveToGoogle)=>{
setHTMLErrors(Markdown.validate(brew.text)); setHTMLErrors(Markdown.validate(brew.text));
await updateHistory(brew).catch(console.error); await updateHistory(brew).catch(console.error);
@@ -199,9 +204,10 @@ const EditPage = (props)=>{
...brew, ...brew,
text : brew.text.normalize('NFC'), text : brew.text.normalize('NFC'),
pageCount : ((brew.renderer === 'legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1, pageCount : ((brew.renderer === 'legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1,
patches : stringifyPatches(makePatches(encodeURI(savedBrew.current.text.normalize('NFC')), encodeURI(brew.text.normalize('NFC')))), patches : stringifyPatches(makePatches(encodeURI(lastSavedBrew.current.text.normalize('NFC')), encodeURI(brew.text.normalize('NFC')))),
hash : await md5(savedBrew.current.text), hash : await md5(lastSavedBrew.current.text),
textBin : undefined textBin : undefined,
version : lastSavedBrew.current.version
}; };
const compressedBrew = gzipSync(strToU8(JSON.stringify(brewToSave))); const compressedBrew = gzipSync(strToU8(JSON.stringify(brewToSave)));
@@ -219,22 +225,24 @@ const EditPage = (props)=>{
}); });
if(!res) return; if(!res) return;
const { googleId, editId, shareId, version } = res.body; const updatedFields = {
googleId : res.body.googleId ?? null,
savedBrew.current = { editId : res.body.editId,
...brew, shareId : res.body.shareId,
googleId : googleId ?? null, version : res.body.version
editId,
shareId,
version
}; };
setCurrentBrew(savedBrew.current); lastSavedBrew.current = {
...brew,
...updatedFields
};
setIsSaving(false); setCurrentBrew((prevBrew)=>({
setUnsavedTime(new Date()); ...prevBrew,
...updatedFields
}));
history.replaceState(null, null, `/edit/${editId}`); history.replaceState(null, null, `/edit/${res.body.editId}`);
}; };
const renderGoogleDriveIcon = ()=>( const renderGoogleDriveIcon = ()=>(
@@ -255,7 +263,7 @@ const EditPage = (props)=>{
{alertLoginToTransfer && ( {alertLoginToTransfer && (
<div className='errorContainer' onClick={closeAlerts}> <div className='errorContainer' onClick={closeAlerts}>
You must be signed in to a Google account to transfer between the homebrewery and Google Drive! You must be signed in to a Google account to transfer between the homebrewery and Google Drive!
<a target='_blank' rel='noopener noreferrer' href={`https://www.naturalcrit.com/login?redirect=${url}`}> <a target='_blank' rel='noopener noreferrer' href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
<div className='confirm'> Sign In </div> <div className='confirm'> Sign In </div>
</a> </a>
<div className='deny'> Not Now </div> <div className='deny'> Not Now </div>
@@ -278,17 +286,17 @@ const EditPage = (props)=>{
return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>; return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING // #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
if(unsavedChanges && autoSaveWarning) { if(unsavedChanges && warnUnsavedChanges) {
resetAutoSaveWarning(); resetWarnUnsavedTimer();
const elapsedTime = Math.round((new Date() - unsavedTime) / 1000 / 60); const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60);
const text = elapsedTime === 0 const text = elapsedTime === 0
? 'Autosave is OFF.' ? 'Autosave is OFF.'
: `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`; : `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
return <Nav.item className='save error' icon='fas fa-exclamation-circle'> return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
Reminder... Reminder...
<div className='errorContainer'>{text}</div> <div className='errorContainer'>{text}</div>
</Nav.item> </Nav.item>;
} }
// #3 - Unsaved changes exist, click to save, show SAVE NOW // #3 - Unsaved changes exist, click to save, show SAVE NOW
@@ -304,15 +312,11 @@ const EditPage = (props)=>{
}; };
const toggleAutoSave = ()=>{ const toggleAutoSave = ()=>{
if(warningTimer.current) clearTimeout(warningTimer.current); clearTimeout(warnUnsavedTimeout.current);
clearTimeout(saveTimeout.current);
localStorage.setItem('AUTOSAVE_ON', JSON.stringify(!autoSaveEnabled)); localStorage.setItem('AUTOSAVE_ON', JSON.stringify(!autoSaveEnabled));
setAutoSaveWarning(autoSaveWarning);
setAutoSaveEnabled(!autoSaveEnabled); setAutoSaveEnabled(!autoSaveEnabled);
}; setWarnUnsavedChanges(autoSaveEnabled);
const resetAutoSaveWarning = ()=>{
setTimeout(()=>setAutoSaveWarning(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds
warningTimer.current = setTimeout(()=>setAutoSaveWarning(true), UNSAVED_WARNING_TIMEOUT); // 15 minutes between unsaved changes warnings
}; };
const renderAutoSaveButton = ()=>( const renderAutoSaveButton = ()=>(
@@ -321,31 +325,12 @@ const EditPage = (props)=>{
</Nav.item> </Nav.item>
); );
const processShareId = ()=>(
currentBrew.googleId && !currentBrew.stubbed
? currentBrew.googleId + currentBrew.shareId
: currentBrew.shareId
);
const getRedditLink = ()=>{
const shareLink = processShareId();
const systems = currentBrew.systems.length > 0 ? ` [${currentBrew.systems.join(' - ')}]` : '';
const title = `${currentBrew.title} ${systems}`;
const text = `Hey guys! I've been working on this homebrew. I'd love your feedback. Check it out.
**[Homebrewery Link](${global.config.baseUrl}/share/${shareLink})**`;
return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title.toWellFormed())}&text=${encodeURIComponent(text)}`;
};
const clearError = ()=>{ const clearError = ()=>{
setError(null); setError(null);
setIsSaving(false); setIsSaving(false);
}; };
const renderNavbar = ()=>{ const renderNavbar = ()=>{
const shareLink = processShareId();
return <Navbar> return <Navbar>
<Nav.section> <Nav.section>
<Nav.item className='brewTitle'>{currentBrew.title}</Nav.item> <Nav.item className='brewTitle'>{currentBrew.title}</Nav.item>
@@ -356,25 +341,12 @@ const EditPage = (props)=>{
{error {error
? <ErrorNavItem error={error} clearError={clearError} /> ? <ErrorNavItem error={error} clearError={clearError} />
: <Nav.dropdown className='save-menu'> : <Nav.dropdown className='save-menu'>
{renderSaveButton()} {renderSaveButton()}
{renderAutoSaveButton()} {renderAutoSaveButton()}
</Nav.dropdown>} </Nav.dropdown>}
<NewBrewItem/> <NewBrewItem/>
<HelpNavItem/> <HelpNavItem/>
<Nav.dropdown> <ShareNavItem brew={currentBrew} />
<Nav.item color='teal' icon='fas fa-share-alt'>
share
</Nav.item>
<Nav.item color='blue' href={`/share/${shareLink}`}>
view
</Nav.item>
<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${shareLink}`);}}>
copy url
</Nav.item>
<Nav.item color='blue' href={getRedditLink()} newTab={true} rel='noopener noreferrer'>
post to reddit
</Nav.item>
</Nav.dropdown>
<PrintNavItem /> <PrintNavItem />
<VaultNavItem /> <VaultNavItem />
<RecentNavItem brew={currentBrew} storageKey='edit' /> <RecentNavItem brew={currentBrew} storageKey='edit' />