diff --git a/client/homebrew/homebrew.jsx b/client/homebrew/homebrew.jsx
index a08a39ea0..8c82f33e7 100644
--- a/client/homebrew/homebrew.jsx
+++ b/client/homebrew/homebrew.jsx
@@ -76,7 +76,7 @@ const Homebrew = createClass({
} />
} />
} />
- } />
+ } />
} />
} />
} />
diff --git a/client/homebrew/pages/accountPage/accountPage.jsx b/client/homebrew/pages/accountPage/accountPage.jsx
index d08832427..598683504 100644
--- a/client/homebrew/pages/accountPage/accountPage.jsx
+++ b/client/homebrew/pages/accountPage/accountPage.jsx
@@ -1,102 +1,82 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const _ = require('lodash');
-const cx = require('classnames');
+const React = require('react');
const moment = require('moment');
-
const UIPage = require('../basePages/uiPage/uiPage.jsx');
-
-const Nav = require('naturalcrit/nav/nav.jsx');
-const Navbar = require('../../navbar/navbar.jsx');
-
-const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const Account = require('../../navbar/account.navitem.jsx');
-const NewBrew = require('../../navbar/newbrew.navitem.jsx');
-const HelpNavItem = require('../../navbar/help.navitem.jsx');
-
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)=>{
+ // destructure props and set state for save location
+ const { accountDetails, brew } = props;
+ const [saveLocation, setSaveLocation] = React.useState('');
+
+ // initialize save location from local storage based on user id
+ React.useEffect(()=>{
+ if(!saveLocation && accountDetails.username) {
+ SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${accountDetails.username}`;
+ // if no SAVEKEY in local storage, default save location to Google Drive if user has Google account.
+ let saveLocation = window.localStorage.getItem(SAVEKEY);
+ saveLocation = saveLocation ?? (accountDetails.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');
+ setActiveSaveLocation(saveLocation);
}
- },
+ }, []);
- makeActive : function(newSelection){
- if(this.state.saveLocation == newSelection) return;
+ const setActiveSaveLocation = (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 ;
- },
+ // todo: should this be a set of radio buttons (well styled) since it's either/or choice?
+ const renderSaveLocationButton = (name, key, shouldRender = true)=>{
+ if(!shouldRender) return null;
+ return (
+
+ );
+ };
- renderNavItems : function() {
- return
-
-
-
-
-
-
- ;
- },
+ // render the entirety of the account page content
+ const renderAccountPage = ()=>{
+ return (
+ <>
+
+
Account Information
+
Username: {accountDetails.username || 'No user currently logged in'}
+
Last Login: {moment(accountDetails.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}
+
+
Homebrewery Information
+
Brews on Homebrewery: {accountDetails.mongoCount}
+
+
Google Information
+
Linked to Google: {accountDetails.googleId ? 'YES' : 'NO'}
+ {accountDetails.googleId && (
+
+ Brews on Google Drive: {accountDetails.googleCount ?? (
+ <>
+ Unable to retrieve files - follow these steps to renew your Google credentials.
+
+ )}
+
+ )}
+
+
Default Save Location
+ {renderSaveLocationButton('Homebrewery', 'HOMEBREWERY')}
+ {renderSaveLocationButton('Google Drive', 'GOOGLE-DRIVE', accountDetails.googleId)}
+
+
+ );
+ };
- renderUiItems : function() {
- return <>
-
-
Account Information
-
Username: {this.props.uiItems.username || 'No user currently logged in'}
-
Last Login: {moment(this.props.uiItems.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}
-
-
Homebrewery Information
-
Brews on Homebrewery: {this.props.uiItems.mongoCount}
-
-
Google Information
-
Linked to Google: {this.props.uiItems.googleId ? 'YES' : 'NO'}
- {this.props.uiItems.googleId &&
-
- Brews on Google Drive: {this.props.uiItems.googleCount ?? <>Unable to retrieve files - follow these steps to renew your Google credentials.}
-
- }
-
-
Default Save Location
- {this.renderButton('Homebrewery', 'HOMEBREWERY')}
- {this.renderButton('Google Drive', 'GOOGLE-DRIVE', this.state.uiItems.googleId)}
-
- ;
- },
-
- render : function(){
- return
- {this.renderUiItems()}
- ;
- }
-});
+ // return the account page inside the base layout wrapper (with navbar etc).
+ return (
+
+ {renderAccountPage()}
+ );
+};
module.exports = AccountPage;
diff --git a/server/app.js b/server/app.js
index 4c72b4924..c8fec4bc4 100644
--- a/server/app.js
+++ b/server/app.js
@@ -372,7 +372,7 @@ app.get('/account', asyncHandler(async (req, res, next)=>{
console.log(err);
});
- data.uiItems = {
+ data.accountDetails = {
username : req.account.username,
issued : req.account.issued,
googleId : Boolean(req.account.googleId),