mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-12 10:46:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: clean greeting

Browse Source
This commit is contained in:
David Ralph
2025-10-28 21:28:06 +00:00
parent 9d7660d962
commit 7ac848c9a0
1 changed files with 82 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/features/greeting/Greeting.jsx
View File

@@ -1,62 +1,57 @@
import { useState, useEffect, useRef } from 'react';
import variables from 'config/variables';
import { PureComponent, createRef } from 'react';
import { nth, convertTimezone } from 'utils/date';
import EventBus from 'utils/eventbus';
import './greeting.scss';
const isEventsEnabled = localStorage.getItem('events') !== 'false';
export default class Greeting extends PureComponent {
constructor() {
super();
this.state = {
greeting: '',
};
this.timer = undefined;
this.greeting = createRef();
}
/**
* Change the greeting message for the events of Christmas, New Year and Halloween.
* If the events setting is disabled, then the greeting message will not be changed.
* @param {Date} time The current time.
* @param {String} message The current greeting message.
* @returns The message variable is being returned.
*/
doEvents(time, message) {
if (!isEventsEnabled) {
return message;
}
// Get current month & day
const month = time.getMonth();
const date = time.getDate();
// Parse the customEvents from localStorage
const customEvents = JSON.parse(localStorage.getItem('customEvents') || '[]');
const event = customEvents.find((e) => e.month - 1 === month && e.date === date);
if (event) {
message = event.name;
}
/**
* Change the greeting message for the events of Christmas, New Year and Halloween.
* If the events setting is disabled, then the greeting message will not be changed.
* @param {Date} time The current time.
* @param {String} message The current greeting message.
* @returns The message variable is being returned.
*/
const doEvents = (time, message) => {
const isEventsEnabled = localStorage.getItem('events') !== 'false';
if (!isEventsEnabled) {
return message;
}
/**
* It takes a date object and returns the age of the person in years.
* @param {Date} date The date of birth.
* @returns The age of the person.
*/
calculateAge(date) {
const diff = Date.now() - date.getTime();
const birthday = new Date(diff);
return Math.abs(birthday.getUTCFullYear() - 1970);
// Get current month & day
const month = time.getMonth();
const date = time.getDate();
// Parse the customEvents from localStorage
const customEvents = JSON.parse(localStorage.getItem('customEvents') || '[]');
const event = customEvents.find((e) => e.month - 1 === month && e.date === date);
if (event) {
message = event.name;
}
getGreeting(time = 60000 - (Date.now() % 60000)) {
this.timer = setTimeout(() => {
return message;
};
/**
* It takes a date object and returns the age of the person in years.
* @param {Date} date The date of birth.
* @returns The age of the person.
*/
const calculateAge = (date) => {
const diff = Date.now() - date.getTime();
const birthday = new Date(diff);
return Math.abs(birthday.getUTCFullYear() - 1970);
};
const Greeting = () => {
const [greeting, setGreeting] = useState('');
const [display, setDisplay] = useState('block');
const [fontSize, setFontSize] = useState('1.6em');
const greetingRef = useRef();
const timerRef = useRef(null);
const getGreeting = (time = 60000 - (Date.now() % 60000)) => {
timerRef.current = setTimeout(() => {
let now = new Date();
const timezone = localStorage.getItem('timezone');
if (timezone && timezone !== 'auto') {
@@ -83,7 +78,7 @@ export default class Greeting extends PureComponent {
if (custom === 'false') {
message = '';
} else {
message = this.doEvents(now, message);
message = doEvents(now, message);
}
// Name
@@ -107,9 +102,9 @@ export default class Greeting extends PureComponent {
const birth = new Date(localStorage.getItem('birthday'));
if (birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth()) {
if (localStorage.getItem('birthdayage') === 'true' && this.calculateAge(birth) !== 0) {
if (localStorage.getItem('birthdayage') === 'true' && calculateAge(birth) !== 0) {
const text = variables.getMessage('widgets.greeting.birthday').split(' ');
message = `${text[0]} ${nth(this.calculateAge(birth))} ${text[1]}`;
message = `${text[0]} ${nth(calculateAge(birth))} ${text[1]}`;
} else {
message = variables.getMessage('widgets.greeting.birthday');
}
@@ -117,49 +112,50 @@ export default class Greeting extends PureComponent {
}
// Set the state to the greeting string
this.setState({
greeting: `${message}${name}`,
});
setGreeting(`${message}${name}`);
this.getGreeting();
getGreeting();
}, time);
}
};
componentDidMount() {
EventBus.on('refresh', (data) => {
useEffect(() => {
const handleRefresh = (data) => {
if (data === 'greeting' || data === 'timezone') {
if (localStorage.getItem('greeting') === 'false') {
return (this.greeting.current.style.display = 'none');
const greetingSetting = localStorage.getItem('greeting');
const zoomGreeting = localStorage.getItem('zoomGreeting');
setDisplay(greetingSetting === 'false' ? 'none' : 'block');
setFontSize(`${1.6 * Number((zoomGreeting || 100) / 100)}em`);
if (greetingSetting !== 'false') {
if (timerRef.current) {
clearTimeout(timerRef.current);
}
getGreeting(0);
}
this.timer = null;
this.getGreeting(0);
this.greeting.current.style.display = 'block';
this.greeting.current.style.fontSize = `${
1.6 * Number((localStorage.getItem('zoomGreeting') || 100) / 100)
}em`;
}
});
};
// this comment can apply to all widget zoom features apart from the general one in the Accessibility section
// in a nutshell: 1.6 is the current font size, and we do "localstorage || 100" so we don't have to try that 4.0 -> 5.0 thing again
this.greeting.current.style.fontSize = `${
1.6 * Number((localStorage.getItem('zoomGreeting') || 100) / 100)
}em`;
const zoomGreeting = localStorage.getItem('zoomGreeting');
setFontSize(`${1.6 * Number((zoomGreeting || 100) / 100)}em`);
this.getGreeting(0);
}
getGreeting(0);
componentWillUnmount() {
EventBus.off('refresh');
}
EventBus.on('refresh', handleRefresh);
return () => {
EventBus.off('refresh');
if (timerRef.current) {
clearTimeout(timerRef.current);
}
};
}, []);
render() {
return (
<span className="greeting" ref={this.greeting}>
{this.state.greeting}
</span>
);
}
}
return (
<span className="greeting" ref={greetingRef} style={{ display, fontSize }}>
{greeting}
</span>
);
};
export { Greeting as default, Greeting };