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

Convert class component to functional component

Browse Source 
Used OpenAI ChatGPT to do the bulk of this, and then fixed some formatting and looked for obvious mistakes.
This commit is contained in:
Gazook89
2024-04-06 15:26:40 -05:00
parent 9f2aaf01c7
commit e7eda1f5ec
1 changed files with 65 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
client/homebrew/pages/accountPage/accountPage.jsx
View File

@@ -1,5 +1,4 @@
const React = require('react'); const React = require('react');
const createClass = require('create-react-class');
const moment = require('moment'); const moment = require('moment');
const UIPage = require('../basePages/uiPage/uiPage.jsx'); const UIPage = require('../basePages/uiPage/uiPage.jsx');
@@ -8,74 +7,76 @@ const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
let SAVEKEY = ''; let SAVEKEY = '';
const AccountPage = createClass({ const AccountPage = (props)=>{
displayName : 'AccountPage', const [saveLocation, setSaveLocation] = React.useState('');
getDefaultProps : function() {
return { React.useEffect(()=>{
brew : {}, if(!saveLocation && props.uiItems.username) {
uiItems : {} SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${props.uiItems.username}`;
}; let saveLocation = window.localStorage.getItem(SAVEKEY);
}, saveLocation = saveLocation ?? (props.uiItems.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');
getInitialState : function() { makeActive(saveLocation);
return {
uiItems : this.props.uiItems
};
},
componentDidMount : function(){
if(!this.state.saveLocation && this.props.uiItems.username) {
SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${this.props.uiItems.username}`;
let saveLocation = window.localStorage.getItem(SAVEKEY);
saveLocation = saveLocation ?? (this.state.uiItems.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');
this.makeActive(saveLocation);
} }
}, }, []);
makeActive : function(newSelection){ const makeActive = (newSelection)=>{
if(this.state.saveLocation == newSelection) return; if(saveLocation === newSelection) return;
window.localStorage.setItem(SAVEKEY, newSelection); window.localStorage.setItem(SAVEKEY, newSelection);
this.setState({ setSaveLocation(newSelection);
saveLocation : newSelection };
});
},
renderButton : function(name, key, shouldRender=true){ const renderButton = (name, key, shouldRender = true)=>{
if(!shouldRender) return; if(!shouldRender) return null;
return <button className={this.state.saveLocation==key ? 'active' : ''} onClick={()=>{this.makeActive(key);}}>{name}</button>; return (
}, <button
className={saveLocation === key ? 'active' : ''}
onClick={()=>{
makeActive(key);
}}
>
{name}
</button>
);
};
renderUiItems : function() { const renderUiItems = ()=>{
return <> return (
<div className='dataGroup'> <>
<h1>Account Information <i className='fas fa-user'></i></h1> <div className='dataGroup'>
<p><strong>Username: </strong> {this.props.uiItems.username || 'No user currently logged in'}</p> <h1>Account Information <i className='fas fa-user'></i></h1>
<p><strong>Last Login: </strong> {moment(this.props.uiItems.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}</p> <p><strong>Username: </strong>{props.uiItems.username || 'No user currently logged in'}</p>
</div> <p><strong>Last Login: </strong>{moment(props.uiItems.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}</p>
<div className='dataGroup'> </div>
<h3>Homebrewery Information <NaturalCritIcon /></h3> <div className='dataGroup'>
<p><strong>Brews on Homebrewery: </strong> {this.props.uiItems.mongoCount}</p> <h3>Homebrewery Information <NaturalCritIcon /></h3>
</div> <p><strong>Brews on Homebrewery: </strong>{props.uiItems.mongoCount}</p>
<div className='dataGroup'> </div>
<h3>Google Information <i className='fab fa-google-drive'></i></h3> <div className='dataGroup'>
<p><strong>Linked to Google: </strong> {this.props.uiItems.googleId ? 'YES' : 'NO'}</p> <h3>Google Information <i className='fab fa-google-drive'></i></h3>
{this.props.uiItems.googleId && <p><strong>Linked to Google: </strong>{props.uiItems.googleId ? 'YES' : 'NO'}</p>
<p> {props.uiItems.googleId && (
<strong>Brews on Google Drive: </strong> {this.props.uiItems.googleCount ?? <>Unable to retrieve files - <a href='https://github.com/naturalcrit/homebrewery/discussions/1580'>follow these steps to renew your Google credentials.</a></>} <p>
</p> <strong>Brews on Google Drive: </strong>{props.uiItems.googleCount ?? (
} <>
</div> Unable to retrieve files - <a href='https://github.com/naturalcrit/homebrewery/discussions/1580'>follow these steps to renew your Google credentials.</a>
<div className='dataGroup'> </>
<h4>Default Save Location</h4> )}
{this.renderButton('Homebrewery', 'HOMEBREWERY')} </p>
{this.renderButton('Google Drive', 'GOOGLE-DRIVE', this.state.uiItems.googleId)} )}
</div> </div>
</>; <div className='dataGroup'>
}, <h4>Default Save Location</h4>
{renderButton('Homebrewery', 'HOMEBREWERY')}
{renderButton('Google Drive', 'GOOGLE-DRIVE', props.uiItems.googleId)}
</div>
</>
);
};
render : function(){ return (
return <UIPage brew={this.props.brew}> <UIPage brew={props.brew}>
{this.renderUiItems()} {renderUiItems()}
</UIPage>; </UIPage>);
} };
});
module.exports = AccountPage; module.exports = AccountPage;