From 79db97efdf34ef730d6afa049c0febfeda1d619c Mon Sep 17 00:00:00 2001 From: Charlie Humphreys Date: Sat, 21 Jan 2023 00:25:35 -0600 Subject: [PATCH] create error navitem and use it in all necessary use cases --- client/homebrew/navbar/error-navitem.jsx | 84 +++++++++++++++++++ .../error-navitem.less} | 7 +- .../basePages/listPage/brewItem/brewItem.jsx | 13 ++- .../pages/basePages/listPage/listPage.jsx | 5 +- client/homebrew/pages/editPage/editPage.jsx | 16 ++-- client/homebrew/pages/editPage/editPage.less | 4 - client/homebrew/pages/homePage/homePage.jsx | 12 ++- client/homebrew/pages/homePage/homePage.less | 4 - client/homebrew/pages/newPage/newPage.jsx | 10 +-- client/homebrew/pages/newPage/newPage.less | 4 - client/homebrew/pages/userPage/userPage.jsx | 15 +++- .../homebrew/utils/render-error-nav-item.jsx | 72 ---------------- 12 files changed, 133 insertions(+), 113 deletions(-) create mode 100644 client/homebrew/navbar/error-navitem.jsx rename client/homebrew/{utils/render-error-nav-item.less => navbar/error-navitem.less} (94%) delete mode 100644 client/homebrew/utils/render-error-nav-item.jsx diff --git a/client/homebrew/navbar/error-navitem.jsx b/client/homebrew/navbar/error-navitem.jsx new file mode 100644 index 000000000..19ebd0213 --- /dev/null +++ b/client/homebrew/navbar/error-navitem.jsx @@ -0,0 +1,84 @@ +require('./error-navitem.less'); +const React = require('react'); +const Nav = require('naturalcrit/nav/nav.jsx'); +const createClass = require('create-react-class'); + +const ErrorNavItem = createClass({ + getDefaultProps : function() { + return { + error : '', + parent : null + }; + }, + render : function() { + const clearError = ()=>{ + const state = { + error : null + }; + if(this.props.parent.state.isSaving) { + state.isSaving = false; + } + this.props.parent.setState(state); + }; + + const error = this.props.error; + const status = error.status; + const message = error.body?.message; + let errMsg = ''; + try { + errMsg += `${error.toString()}\n\n`; + errMsg += `\`\`\`\n${error.stack}\n`; + errMsg += `${JSON.stringify(error.error, null, ' ')}\n\`\`\``; + console.log(errMsg); + } catch (e){} + + if(status === 409) { + return + Oops! +
+ {message ?? 'Conflict: please refresh to get latest changes'} +
+ ; + } else if(status === 412) { + return + Oops! +
+ {message ?? 'Your client is out of date. Please save your changes elsewhere and refresh.'} +
+ ; + } + + if(error.req.url.match(/^\/api.*Google.*$/m)){ + return + Oops! +
+ Looks like your Google credentials have + expired! Visit our log in page to sign out + and sign back in with Google, + then try saving again! + +
+ Sign In +
+ +
+ Not Now +
+
+ ; + } + + return + Oops! +
+ Looks like there was a problem saving.
+ Report the issue + here + . +
+ ; + } +}); + +module.exports = ErrorNavItem; \ No newline at end of file diff --git a/client/homebrew/utils/render-error-nav-item.less b/client/homebrew/navbar/error-navitem.less similarity index 94% rename from client/homebrew/utils/render-error-nav-item.less rename to client/homebrew/navbar/error-navitem.less index 2161208c2..8a7cabb19 100644 --- a/client/homebrew/utils/render-error-nav-item.less +++ b/client/homebrew/navbar/error-navitem.less @@ -1,11 +1,16 @@ .navItem { + &.error { + position : relative; + background-color : @red; + } + .errorContainer{ animation-name: glideDown; animation-duration: 0.4s; position : absolute; top : 100%; left : 50%; - z-index : 500; + z-index : 1000; width : 140px; padding : 3px; color : white; diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx index d17c020af..327fe21be 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx @@ -4,7 +4,7 @@ const createClass = require('create-react-class'); const _ = require('lodash'); const cx = require('classnames'); const moment = require('moment'); -const request = require('superagent'); +const request = require('../../../../utils/request-middleware.js'); const googleDriveIcon = require('../../../../googleDrive.png'); const dedent = require('dedent-tabs').default; @@ -18,7 +18,8 @@ const BrewItem = createClass({ description : '', authors : [], stubbed : true - } + }, + reportError : null }; }, @@ -33,8 +34,12 @@ const BrewItem = createClass({ request.delete(`/api/${this.props.brew.googleId ?? ''}${this.props.brew.editId}`) .send() - .end(function(err, res){ - location.reload(); + .end((err, res)=>{ + if(err && this.props.reportError) { + this.props.reportError(err.response); + } else { + location.reload(); + } }); }, diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index 162aba5e4..b80b04899 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -23,7 +23,8 @@ const ListPage = createClass({ brews : [] } ], - navItems : <> + navItems : <>, + reportError : null }; }, getInitialState : function() { @@ -81,7 +82,7 @@ const ListPage = createClass({ if(!brews || !brews.length) return
No Brews.
; return _.map(brews, (brew, idx)=>{ - return ; + return ; }); }, diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 6d8939d56..481ac280f 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -12,6 +12,7 @@ const Navbar = require('../../navbar/navbar.jsx'); const NewBrew = require('../../navbar/newbrew.navitem.jsx'); const HelpNavItem = require('../../navbar/help.navitem.jsx'); const PrintLink = require('../../navbar/print.navitem.jsx'); +const ErrorNavItem = require('../../navbar/error-navitem.jsx'); const Account = require('../../navbar/account.navitem.jsx'); const RecentNavItem = require('../../navbar/recent.navitem.jsx').both; @@ -261,10 +262,6 @@ const EditPage = createClass({ }, renderSaveButton : function(){ - if(this.state.error){ - return require('../../utils/render-error-nav-item.jsx')(this, this.state.error); - } - if(this.state.autoSaveWarning && this.hasChanges()){ this.setAutosaveWarning(); const elapsedTime = Math.round((new Date() - this.state.unsavedTime) / 1000 / 60); @@ -352,10 +349,13 @@ const EditPage = createClass({ {this.renderGoogleDriveIcon()} - - {this.renderSaveButton()} - {this.renderAutoSaveButton()} - + {this.state.error ? + : + + {this.renderSaveButton()} + {this.renderAutoSaveButton()} + + } diff --git a/client/homebrew/pages/editPage/editPage.less b/client/homebrew/pages/editPage/editPage.less index 2eb212f3f..581e6dfa2 100644 --- a/client/homebrew/pages/editPage/editPage.less +++ b/client/homebrew/pages/editPage/editPage.less @@ -13,10 +13,6 @@ cursor : initial; color : #666; } - &.error{ - position : relative; - background-color : @red; - } } .googleDriveStorage { position : relative; diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index b594a256e..f4a30b34b 100644 --- a/client/homebrew/pages/homePage/homePage.jsx +++ b/client/homebrew/pages/homePage/homePage.jsx @@ -12,6 +12,7 @@ const NewBrewItem = require('../../navbar/newbrew.navitem.jsx'); const HelpNavItem = require('../../navbar/help.navitem.jsx'); const RecentNavItem = require('../../navbar/recent.navitem.jsx').both; const AccountNavItem = require('../../navbar/account.navitem.jsx'); +const ErrorNavItem = require('../../navbar/error-navitem.jsx'); const SplitPane = require('naturalcrit/splitPane/splitPane.jsx'); @@ -55,16 +56,13 @@ const HomePage = createClass({ brew : { ...prevState.brew, text: text } })); }, - renderSaveError : function(){ - if(this.state.error) { - return require('../../utils/render-error-nav-item.jsx')(this, this.state.error); - } - return null; - }, renderNavbar : function(){ return - {this.renderSaveError()} + {this.state.error ? + : + null + } diff --git a/client/homebrew/pages/homePage/homePage.less b/client/homebrew/pages/homePage/homePage.less index b0320d8d2..a7523bd3c 100644 --- a/client/homebrew/pages/homePage/homePage.less +++ b/client/homebrew/pages/homePage/homePage.less @@ -46,9 +46,5 @@ &:hover{ background-color: @green; } - &.error{ - position : relative; - background-color : @red; - } } } diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx index 1563d0fd8..a4044a0e9 100644 --- a/client/homebrew/pages/newPage/newPage.jsx +++ b/client/homebrew/pages/newPage/newPage.jsx @@ -10,6 +10,7 @@ const Markdown = require('naturalcrit/markdown.js'); const Nav = require('naturalcrit/nav/nav.jsx'); const Navbar = require('../../navbar/navbar.jsx'); const AccountNavItem = require('../../navbar/account.navitem.jsx'); +const ErrorNavItem = require('../../navbar/error-navitem.jsx'); const RecentNavItem = require('../../navbar/recent.navitem.jsx').both; const HelpNavItem = require('../../navbar/help.navitem.jsx'); @@ -156,10 +157,6 @@ const NewPage = createClass({ }, renderSaveButton : function(){ - if(this.state.error){ - return require('../../utils/render-error-nav-item.jsx')(this, this.state.error); - } - if(this.state.isSaving){ return save... @@ -189,7 +186,10 @@ const NewPage = createClass({ - {this.renderSaveButton()} + {this.state.error ? + : + this.renderSaveButton() + } {this.renderLocalPrintButton()} diff --git a/client/homebrew/pages/newPage/newPage.less b/client/homebrew/pages/newPage/newPage.less index eb80cad38..f83827ffb 100644 --- a/client/homebrew/pages/newPage/newPage.less +++ b/client/homebrew/pages/newPage/newPage.less @@ -4,9 +4,5 @@ &:hover{ background-color: @green; } - &.error{ - position : relative; - background-color : @red; - } } } diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx index 7341c61ad..1e051987b 100644 --- a/client/homebrew/pages/userPage/userPage.jsx +++ b/client/homebrew/pages/userPage/userPage.jsx @@ -12,6 +12,7 @@ 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 ErrorNavItem = require('../../navbar/error-navitem.jsx'); const UserPage = createClass({ displayName : 'UserPage', @@ -19,7 +20,8 @@ const UserPage = createClass({ return { username : '', brews : [], - query : '' + query : '', + error : null }; }, getInitialState : function() { @@ -50,10 +52,19 @@ const UserPage = createClass({ brewCollection : brewCollection }; }, + errorReported : function(error) { + this.setState({ + error + }); + }, navItems : function() { return + {this.state.error ? + : + null + } @@ -63,7 +74,7 @@ const UserPage = createClass({ }, render : function(){ - return ; + return ; } }); diff --git a/client/homebrew/utils/render-error-nav-item.jsx b/client/homebrew/utils/render-error-nav-item.jsx deleted file mode 100644 index 0359c1e43..000000000 --- a/client/homebrew/utils/render-error-nav-item.jsx +++ /dev/null @@ -1,72 +0,0 @@ -require('./render-error-nav-item.less'); -const React = require('react'); -const Nav = require('naturalcrit/nav/nav.jsx'); - -module.exports = function(component, error){ - const clearError = ()=>{ - const state = { - error : null - }; - if(component.state.isSaving) { - state.isSaving = false; - } - component.setState(state); - }; - - const status = error.status; - const message = error.body?.message; - let errMsg = ''; - try { - errMsg += `${error.toString()}\n\n`; - errMsg += `\`\`\`\n${error.stack}\n`; - errMsg += `${JSON.stringify(error.error, null, ' ')}\n\`\`\``; - console.log(errMsg); - } catch (e){} - - if(status === 409) { - return - Oops! -
- {message ?? 'Conflict: please refresh to get latest changes'} -
- ; - } else if(status === 412) { - return - Oops! -
- {message ?? 'Your client is out of date. Please save your changes elsewhere and refresh.'} -
- ; - } - - if(error.req.url.match(/^\/api.*Google.*$/m)){ - return - Oops! -
- Looks like your Google credentials have - expired! Visit our log in page to sign out - and sign back in with Google, - then try saving again! - -
- Sign In -
- -
- Not Now -
-
- ; - } - - return - Oops! -
- Looks like there was a problem saving.
- Report the issue - here - . -
- ; -}; \ No newline at end of file