From 9f2aaf01c77d6d113fa61517131a03c22aa904fe Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 6 Apr 2024 14:50:20 -0500 Subject: [PATCH 1/8] Remove unnecessary Nav components and methods. --- .../pages/accountPage/accountPage.jsx | 21 ------------------- 1 file changed, 21 deletions(-) diff --git a/client/homebrew/pages/accountPage/accountPage.jsx b/client/homebrew/pages/accountPage/accountPage.jsx index d08832427..c796b9d22 100644 --- a/client/homebrew/pages/accountPage/accountPage.jsx +++ b/client/homebrew/pages/accountPage/accountPage.jsx @@ -1,19 +1,9 @@ const React = require('react'); const createClass = require('create-react-class'); -const _ = require('lodash'); -const cx = require('classnames'); 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 = ''; @@ -53,17 +43,6 @@ const AccountPage = createClass({ return ; }, - renderNavItems : function() { - return - - - - - - - ; - }, - renderUiItems : function() { return <>
From e7eda1f5ec789ce729ca27cbf639d19152fbe4f3 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 6 Apr 2024 15:26:40 -0500 Subject: [PATCH 2/8] Convert class component to functional component Used OpenAI ChatGPT to do the bulk of this, and then fixed some formatting and looked for obvious mistakes. --- .../pages/accountPage/accountPage.jsx | 129 +++++++++--------- 1 file changed, 65 insertions(+), 64 deletions(-) diff --git a/client/homebrew/pages/accountPage/accountPage.jsx b/client/homebrew/pages/accountPage/accountPage.jsx index c796b9d22..88a347121 100644 --- a/client/homebrew/pages/accountPage/accountPage.jsx +++ b/client/homebrew/pages/accountPage/accountPage.jsx @@ -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 ; - }, + const renderButton = (name, key, shouldRender = true)=>{ + if(!shouldRender) return null; + return ( + + ); + }; - 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)} -
- ; - }, + const renderUiItems = ()=>{ + return ( + <> +
+

Account Information

+

Username: {props.uiItems.username || 'No user currently logged in'}

+

Last Login: {moment(props.uiItems.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}

+
+
+

Homebrewery Information

+

Brews on Homebrewery: {props.uiItems.mongoCount}

+
+
+

Google Information

+

Linked to Google: {props.uiItems.googleId ? 'YES' : 'NO'}

+ {props.uiItems.googleId && ( +

+ Brews on Google Drive: {props.uiItems.googleCount ?? ( + <> + Unable to retrieve files - follow these steps to renew your Google credentials. + + )} +

+ )} +
+
+

Default Save Location

+ {renderButton('Homebrewery', 'HOMEBREWERY')} + {renderButton('Google Drive', 'GOOGLE-DRIVE', props.uiItems.googleId)} +
+ + ); + }; - render : function(){ - return - {this.renderUiItems()} - ; - } -}); + return ( + + {renderUiItems()} + ); +}; module.exports = AccountPage; From e1599909bcf6448ab359acbd7f81fa89497671a6 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 6 Apr 2024 15:30:18 -0500 Subject: [PATCH 3/8] change name of render method to be more discriptive "UiItems" is not descriptive enough for a render method because most anything that is rendered is part of the UI. This could be left as just `render()`, but `renderAccountPage()` provides best context of what is happening. --- client/homebrew/pages/accountPage/accountPage.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/homebrew/pages/accountPage/accountPage.jsx b/client/homebrew/pages/accountPage/accountPage.jsx index 88a347121..591845cbb 100644 --- a/client/homebrew/pages/accountPage/accountPage.jsx +++ b/client/homebrew/pages/accountPage/accountPage.jsx @@ -39,7 +39,7 @@ const AccountPage = (props)=>{ ); }; - const renderUiItems = ()=>{ + const renderAccountPage = ()=>{ return ( <>
@@ -75,7 +75,7 @@ const AccountPage = (props)=>{ return ( - {renderUiItems()} + {renderAccountPage()} ); }; From 08406de5cc094efd592f172400a4ca9b4eff502f Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 6 Apr 2024 15:44:19 -0500 Subject: [PATCH 4/8] add code comments for each step. --- client/homebrew/pages/accountPage/accountPage.jsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/client/homebrew/pages/accountPage/accountPage.jsx b/client/homebrew/pages/accountPage/accountPage.jsx index 591845cbb..72d60a741 100644 --- a/client/homebrew/pages/accountPage/accountPage.jsx +++ b/client/homebrew/pages/accountPage/accountPage.jsx @@ -8,23 +8,29 @@ const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx'); let SAVEKEY = ''; const AccountPage = (props)=>{ + // State for the save location const [saveLocation, setSaveLocation] = React.useState(''); + // initialize save location from local storage based on user id React.useEffect(()=>{ if(!saveLocation && props.uiItems.username) { SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${props.uiItems.username}`; + // if no SAVEKEY in local storage, default save location to Google Drive. let saveLocation = window.localStorage.getItem(SAVEKEY); saveLocation = saveLocation ?? (props.uiItems.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY'); makeActive(saveLocation); } }, []); + // function to set the active save location const makeActive = (newSelection)=>{ if(saveLocation === newSelection) return; window.localStorage.setItem(SAVEKEY, newSelection); setSaveLocation(newSelection); }; + // render a button for setting save locations. + // todo: should this be a set of radio buttons (well styled) since it's either/or choice? const renderButton = (name, key, shouldRender = true)=>{ if(!shouldRender) return null; return ( @@ -39,6 +45,7 @@ const AccountPage = (props)=>{ ); }; + // render the entirety of the account page content const renderAccountPage = ()=>{ return ( <> @@ -73,6 +80,7 @@ const AccountPage = (props)=>{ ); }; + // return the account page inside the base layout wrapper (with navbar etc). return ( {renderAccountPage()} From 777438fd940e74fe87f20887fddabd8d41e3f98a Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 6 Apr 2024 21:23:26 -0500 Subject: [PATCH 5/8] rename props.brew.uiItems to ...accountDetails and destructure props at start of account page component. `accountDetails` is more descriptive of what set of info is being passed through props to the account page, info which is only *then* displayed as UI items. --- client/homebrew/homebrew.jsx | 2 +- .../pages/accountPage/accountPage.jsx | 26 +++++++++++-------- server/app.js | 2 +- 3 files changed, 17 insertions(+), 13 deletions(-) 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 72d60a741..e65736a24 100644 --- a/client/homebrew/pages/accountPage/accountPage.jsx +++ b/client/homebrew/pages/accountPage/accountPage.jsx @@ -8,16 +8,20 @@ const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx'); let SAVEKEY = ''; const AccountPage = (props)=>{ + // destructure props + const { accountDetails, brew } = props; + + // State for the save location const [saveLocation, setSaveLocation] = React.useState(''); // initialize save location from local storage based on user id React.useEffect(()=>{ - if(!saveLocation && props.uiItems.username) { - SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${props.uiItems.username}`; + if(!saveLocation && accountDetails.username) { + SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${accountDetails.username}`; // if no SAVEKEY in local storage, default save location to Google Drive. let saveLocation = window.localStorage.getItem(SAVEKEY); - saveLocation = saveLocation ?? (props.uiItems.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY'); + saveLocation = saveLocation ?? (accountDetails.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY'); makeActive(saveLocation); } }, []); @@ -51,19 +55,19 @@ const AccountPage = (props)=>{ <>

Account Information

-

Username: {props.uiItems.username || 'No user currently logged in'}

-

Last Login: {moment(props.uiItems.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}

+

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: {props.uiItems.mongoCount}

+

Brews on Homebrewery: {accountDetails.mongoCount}

Google Information

-

Linked to Google: {props.uiItems.googleId ? 'YES' : 'NO'}

- {props.uiItems.googleId && ( +

Linked to Google: {accountDetails.googleId ? 'YES' : 'NO'}

+ {accountDetails.googleId && (

- Brews on Google Drive: {props.uiItems.googleCount ?? ( + Brews on Google Drive: {accountDetails.googleCount ?? ( <> Unable to retrieve files - follow these steps to renew your Google credentials. @@ -74,7 +78,7 @@ const AccountPage = (props)=>{

Default Save Location

{renderButton('Homebrewery', 'HOMEBREWERY')} - {renderButton('Google Drive', 'GOOGLE-DRIVE', props.uiItems.googleId)} + {renderButton('Google Drive', 'GOOGLE-DRIVE', accountDetails.googleId)}
); @@ -82,7 +86,7 @@ const AccountPage = (props)=>{ // return the account page inside the base layout wrapper (with navbar etc). return ( - + {renderAccountPage()} ); }; 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), From ed85f77c48fe1ad4dea889bbfa4fc15593369ccf Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 6 Apr 2024 21:34:04 -0500 Subject: [PATCH 6/8] ESLint linting (one small whitespace change). --- client/homebrew/pages/accountPage/accountPage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/pages/accountPage/accountPage.jsx b/client/homebrew/pages/accountPage/accountPage.jsx index e65736a24..47264dca1 100644 --- a/client/homebrew/pages/accountPage/accountPage.jsx +++ b/client/homebrew/pages/accountPage/accountPage.jsx @@ -33,7 +33,7 @@ const AccountPage = (props)=>{ setSaveLocation(newSelection); }; - // render a button for setting save locations. + // render a button for setting save locations. // todo: should this be a set of radio buttons (well styled) since it's either/or choice? const renderButton = (name, key, shouldRender = true)=>{ if(!shouldRender) return null; From 4f0cbd82d40890b0ed7258a33b5e934d8ce9fbf3 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Tue, 9 Apr 2024 11:35:30 -0400 Subject: [PATCH 7/8] Linting, small cleanup, and renaming some functions Renamed "makeActive" and "renderButton" to make more clear without needing comments. --- .../pages/accountPage/accountPage.jsx | 24 +++++++------------ 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/client/homebrew/pages/accountPage/accountPage.jsx b/client/homebrew/pages/accountPage/accountPage.jsx index 47264dca1..3f1295fdb 100644 --- a/client/homebrew/pages/accountPage/accountPage.jsx +++ b/client/homebrew/pages/accountPage/accountPage.jsx @@ -1,8 +1,6 @@ -const React = require('react'); +const React = require('react'); const moment = require('moment'); - const UIPage = require('../basePages/uiPage/uiPage.jsx'); - const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx'); let SAVEKEY = ''; @@ -11,7 +9,6 @@ const AccountPage = (props)=>{ // destructure props const { accountDetails, brew } = props; - // State for the save location const [saveLocation, setSaveLocation] = React.useState(''); @@ -19,15 +16,15 @@ const AccountPage = (props)=>{ 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 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'); - makeActive(saveLocation); + setActiveSaveLocation(saveLocation); } }, []); // function to set the active save location - const makeActive = (newSelection)=>{ + const setActiveSaveLocation = (newSelection)=>{ if(saveLocation === newSelection) return; window.localStorage.setItem(SAVEKEY, newSelection); setSaveLocation(newSelection); @@ -35,15 +32,10 @@ const AccountPage = (props)=>{ // render a button for setting save locations. // todo: should this be a set of radio buttons (well styled) since it's either/or choice? - const renderButton = (name, key, shouldRender = true)=>{ + const renderSaveLocationButton = (name, key, shouldRender = true)=>{ if(!shouldRender) return null; return ( - ); @@ -77,8 +69,8 @@ const AccountPage = (props)=>{

Default Save Location

- {renderButton('Homebrewery', 'HOMEBREWERY')} - {renderButton('Google Drive', 'GOOGLE-DRIVE', accountDetails.googleId)} + {renderSaveLocationButton('Homebrewery', 'HOMEBREWERY')} + {renderSaveLocationButton('Google Drive', 'GOOGLE-DRIVE', accountDetails.googleId)}
); From 431dfd77802fd7ed562e2b15fd1dad68ce594a13 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Tue, 9 Apr 2024 11:36:13 -0400 Subject: [PATCH 8/8] tweak comments --- client/homebrew/pages/accountPage/accountPage.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/client/homebrew/pages/accountPage/accountPage.jsx b/client/homebrew/pages/accountPage/accountPage.jsx index 3f1295fdb..598683504 100644 --- a/client/homebrew/pages/accountPage/accountPage.jsx +++ b/client/homebrew/pages/accountPage/accountPage.jsx @@ -6,10 +6,8 @@ const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx'); let SAVEKEY = ''; const AccountPage = (props)=>{ - // destructure props + // destructure props and set state for save location const { accountDetails, brew } = props; - - // State for the save location const [saveLocation, setSaveLocation] = React.useState(''); // initialize save location from local storage based on user id @@ -23,14 +21,12 @@ const AccountPage = (props)=>{ } }, []); - // function to set the active save location const setActiveSaveLocation = (newSelection)=>{ if(saveLocation === newSelection) return; window.localStorage.setItem(SAVEKEY, newSelection); setSaveLocation(newSelection); }; - // render a button for setting save locations. // 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;