f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-15 21:22:43 +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

99
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}`;
};
},
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); let saveLocation = window.localStorage.getItem(SAVEKEY);
saveLocation = saveLocation ?? (this.state.uiItems.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY'); saveLocation = saveLocation ?? (props.uiItems.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');
this.makeActive(saveLocation); 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'> <div className='dataGroup'>
<h1>Account Information <i className='fas fa-user'></i></h1> <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>Username: </strong>{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> <p><strong>Last Login: </strong>{moment(props.uiItems.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}</p>
</div> </div>
<div className='dataGroup'> <div className='dataGroup'>
<h3>Homebrewery Information <NaturalCritIcon /></h3> <h3>Homebrewery Information <NaturalCritIcon /></h3>
<p><strong>Brews on Homebrewery: </strong> {this.props.uiItems.mongoCount}</p> <p><strong>Brews on Homebrewery: </strong>{props.uiItems.mongoCount}</p>
</div> </div>
<div className='dataGroup'> <div className='dataGroup'>
<h3>Google Information <i className='fab fa-google-drive'></i></h3> <h3>Google Information <i className='fab fa-google-drive'></i></h3>
<p><strong>Linked to Google: </strong> {this.props.uiItems.googleId ? 'YES' : 'NO'}</p> <p><strong>Linked to Google: </strong>{props.uiItems.googleId ? 'YES' : 'NO'}</p>
{this.props.uiItems.googleId && {props.uiItems.googleId && (
<p> <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></>} <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> </p>
} )}
</div> </div>
<div className='dataGroup'> <div className='dataGroup'>
<h4>Default Save Location</h4> <h4>Default Save Location</h4>
{this.renderButton('Homebrewery', 'HOMEBREWERY')} {renderButton('Homebrewery', 'HOMEBREWERY')}
{this.renderButton('Google Drive', 'GOOGLE-DRIVE', this.state.uiItems.googleId)} {renderButton('Google Drive', 'GOOGLE-DRIVE', props.uiItems.googleId)}
</div> </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;