f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-13 17:22:49 +00:00
Code Wiki Activity

"Refactor notification utils components to use React Hooks instead of createClass"

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-08-29 00:01:02 +02:00
parent 46882c4fb4
commit 51d3d11bff
3 changed files with 184 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
client/admin/notificationUtils/notificationAdd/notificationAdd.jsx
View File

@@ -1,101 +1,113 @@
require('./notificationAdd.less'); require('./notificationAdd.less');
const React = require('react'); const React = require('react');
const createClass = require('create-react-class'); const { useState } = require('react');
const cx = require('classnames'); const cx = require('classnames');
const request = require('superagent'); const request = require('superagent');
const fields = ['dismissKey', 'title', 'text', 'startAt', 'stopAt']; const fields = ['dismissKey', 'title', 'text', 'startAt', 'stopAt'];
const NotificationAdd = () => {
const [state, setState] = useState({
query: '',
notificationResult: null,
searching: false,
error: null,
dismissKey: '',
title: '',
text: '',
startAt: '',
stopAt: ''
});
const NotificationAdd = createClass({ const handleChange = (e, field) => {
displayName : 'NotificationAdd', const value = e.target.value;
getDefaultProps() { setState(prevState => ({
return {}; ...prevState,
}, [field]: value
getInitialState() { }));
return { };
query : '',
notificationResult : null,
searching : false,
error : null,
dismissKey : '', const saveNotification = async () => {
title : '', if (!state.dismissKey) {
text : '', setState(prevState => ({
startAt : '', ...prevState,
stopAt : '' error: 'No notification key!'
}; }));
}, return;
handleChange(e, field){ }
const data = {};
data[field] = e.target.value;
this.setState(data);
},
saveNotification : async function(){
if(!this.state.dismissKey) return 'No notification key!';
const data = {
dismissKey : this.state.dismissKey,
title : this.state.title,
text : this.state.text,
startAt : Date.parse(this.state.startAt),
stopAt : Date.parse(this.state.stopAt)
};
const notification = await request.post('/admin/notification/add') const data = {
.send(data) dismissKey: state.dismissKey,
.then((response)=>{ title: state.title,
return response.body; text: state.text,
}); startAt: Date.parse(state.startAt),
stopAt: Date.parse(state.stopAt)
};
const update = { try {
notificationResult : `Created notification: ${JSON.stringify(notification, null, 2)}` const response = await request.post('/admin/notification/add').send(data);
}; const notification = response.body;
if(notification.err) { let update = {
update.notificationResult = JSON.stringify(notification.err); notificationResult: `Created notification: ${JSON.stringify(notification, null, 2)}`
if(notification.err.code == 11000) { };
update.notificationResult = `Duplicate dismissKey error! ${this.state.dismissKey} already exists.`;
}
};
if(!notification.err) {
update.dismissKey = '';
update.title = '';
update.text = '';
update.startAt = '';
update.stopAt = '';
}
console.log(update); if (notification.err) {
update.notificationResult = JSON.stringify(notification.err);
if (notification.err.code == 11000) {
update.notificationResult = `Duplicate dismissKey error! ${state.dismissKey} already exists.`;
}
} else {
update = {
...update,
dismissKey: '',
title: '',
text: '',
startAt: '',
stopAt: ''
};
}
this.setState(update); setState(prevState => ({
}, ...prevState,
...update,
searching: false
}));
} catch (err) {
setState(prevState => ({
...prevState,
error: err.message,
searching: false
}));
}
};
render(){ return (
return <div className='notificationAdd'> <div className='notificationAdd'>
<h2>Add</h2> <h2>Add</h2>
{fields.map((field, idx)=>{ {fields.map((field, idx) => (
return <div key={idx}> <div key={idx}>
<label className='fieldLabel'>{field.toUpperCase()}</label> <label className='fieldLabel'>{field.toUpperCase()}</label>
<input className='fieldInput' type='text' value={this.state[field]} onChange={(e)=>this.handleChange(e, field)} placeholder={field} /> <input
</div>; className='fieldInput'
})} type='text'
<div className='notificationResult'>{this.state.notificationResult}</div> value={state[field]}
{/* <label>Dismiss Key:</label> onChange={(e) => handleChange(e, field)}
<input type='text' value={this.state.dismissKey} onChange={this.handleChange} placeholder='notification key' /> placeholder={field}
<label>Title:</label> />
<input type='text' value={this.state.title} onChange={this.handleChange} placeholder='title' /> */} </div>
<button onClick={this.saveNotification}> ))}
<i className={cx('fas', { <div className='notificationResult'>{state.notificationResult}</div>
'fa-save' : !this.state.searching, <button onClick={saveNotification}>
'fa-spin fa-spinner' : this.state.searching, <i
})} /> className={cx('fas', {
</button> 'fa-save': !state.searching,
'fa-spin fa-spinner': state.searching
{this.state.error })}
&& <div className='error'>{this.state.error.toString()}</div> />
} </button>
</div>; {state.error && <div className='error'>{state.error.toString()}</div>}
} </div>
}); );
};
module.exports = NotificationAdd; module.exports = NotificationAdd;

151
client/admin/notificationUtils/notificationLookup/notificationLookup.jsx
View File

@@ -1,94 +1,97 @@
require('./notificationLookup.less'); require('./notificationLookup.less');
const React = require('react'); const React = require('react');
const createClass = require('create-react-class'); const { useState } = require('react');
const cx = require('classnames'); const cx = require('classnames');
const request = require('superagent'); const request = require('superagent');
const Moment = require('moment'); const Moment = require('moment');
const NotificationLookup = () => {
const [query, setQuery] = useState('');
const [foundNotification, setFoundNotification] = useState(null);
const [searching, setSearching] = useState(false);
const [error, setError] = useState(null);
const NotificationLookup = createClass({ const handleChange = (e) => {
displayName : 'NotificationLookup', setQuery(e.target.value);
getDefaultProps() { };
return {};
},
getInitialState() {
return {
query : '',
foundNotification : null,
searching : false,
error : null
};
},
handleChange(e){
this.setState({ query: e.target.value });
},
lookup(){
this.setState({ searching: true, error: null });
request.get(`/admin/notification/lookup/${this.state.query}`) const lookup = () => {
.then((res)=>this.setState({ foundNotification: res.body })) setSearching(true);
.catch((err)=>this.setState({ error: err })) setError(null);
.finally(()=>this.setState({ searching: false }));
},
deleteNotification : function(){ request.get(`/admin/notification/lookup/${query}`)
console.log('DELETE'); .then((res) => setFoundNotification(res.body))
if(!confirm(`Really delete notification ${this.state.foundNotification.dismissKey} : ${this.state.foundNotification.title}?`)) { .catch((err) => setError(err))
console.log('CANCELLED'); .finally(() => setSearching(false));
return; };
}
console.log('CONFIRMED');
return;
},
renderFoundNotification(){ const deleteNotification = () => {
const notification = this.state.foundNotification; if (!foundNotification) return;
return <div className='foundNotification'>
<dl>
<dt>Key</dt>
<dd>{notification.dismissKey}</dd>
<dt>Title</dt> const confirmed = window.confirm(`Really delete notification ${foundNotification.dismissKey} : ${foundNotification.title}?`);
<dd>{notification.title || 'No Title'}</dd> if (!confirmed) {
console.log('CANCELLED');
return;
}
console.log('CONFIRMED');
// Perform delete operation here
};
<dt>Text</dt> const renderFoundNotification = () => {
<dd>{notification.text || 'No Text'}</dd> if (!foundNotification) return null;
<dt>Created</dt> return (
<dd>{Moment(notification.createdAt).toLocaleString()}</dd> <div className='foundNotification'>
<dl>
<dt>Key</dt>
<dd>{foundNotification.dismissKey}</dd>
<dt>Start</dt> <dt>Title</dt>
<dd>{Moment(notification.startAt).toLocaleString() || 'No Start Time'}</dd> <dd>{foundNotification.title || 'No Title'}</dd>
<dt>Stop</dt> <dt>Text</dt>
<dd>{Moment(notification.stopAt).toLocaleString() || 'No End Time'}</dd> <dd>{foundNotification.text || 'No Text'}</dd>
</dl>
<button onClick={this.deleteNotification}>DELETE</button>
</div>;
},
render(){ <dt>Created</dt>
return <div className='notificationLookup'> <dd>{Moment(foundNotification.createdAt).toLocaleString()}</dd>
<h2>Lookup</h2>
<input type='text' value={this.state.query} onChange={this.handleChange} placeholder='notification key' />
<button onClick={this.lookup}>
<i className={cx('fas', {
'fa-search' : !this.state.searching,
'fa-spin fa-spinner' : this.state.searching,
})} />
</button>
{this.state.error <dt>Start</dt>
&& <div className='error'>{this.state.error.toString()}</div> <dd>{Moment(foundNotification.startAt).toLocaleString() || 'No Start Time'}</dd>
}
{this.state.foundNotification <dt>Stop</dt>
? this.renderFoundNotification() <dd>{Moment(foundNotification.stopAt).toLocaleString() || 'No End Time'}</dd>
: <div className='noNotification'>No notification found.</div> </dl>
} <button onClick={deleteNotification}>DELETE</button>
</div>; </div>
} );
}); };
return (
<div className='notificationLookup'>
<h2>Lookup</h2>
<input
type='text'
value={query}
onChange={handleChange}
placeholder='notification key'
/>
<button onClick={lookup}>
<i className={cx('fas', {
'fa-search': !searching,
'fa-spin fa-spinner': searching,
})} />
</button>
{error && <div className='error'>{error.toString()}</div>}
{foundNotification
? renderFoundNotification()
: <div className='noNotification'>No notification found.</div>
}
</div>
);
};
module.exports = NotificationLookup; module.exports = NotificationLookup;

21
client/admin/notificationUtils/notificationUtils.jsx
View File

@@ -1,19 +1,16 @@
const React = require('react'); const React = require('react');
const createClass = require('create-react-class');
const NotificationLookup = require('./notificationLookup/notificationLookup.jsx'); const NotificationLookup = require('./notificationLookup/notificationLookup.jsx');
const NotificationAdd = require('./notificationAdd/notificationAdd.jsx'); const NotificationAdd = require('./notificationAdd/notificationAdd.jsx');
const NotificationUtils = createClass({ const NotificationUtils = () => {
displayName : 'NotificationUtils', return (
<>
render : function(){ <NotificationAdd />
return <> <hr />
<NotificationAdd /> <NotificationLookup />
<hr /> </>
<NotificationLookup /> );
</>; };
}
});
module.exports = NotificationUtils; module.exports = NotificationUtils;