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