feat(greeting): Ability to create, edit and remove custom events

This commit is contained in:
alexsparkes
2024-03-22 15:18:50 +00:00
parent 7876bd69fd
commit 40e04af5d4
3 changed files with 41 additions and 6 deletions

View File

@@ -5,7 +5,6 @@ import { nth, convertTimezone } from 'utils/date';
import EventBus from 'utils/eventbus';
import './greeting.scss';
import events from './events.json';
const isEventsEnabled = localStorage.getItem('events') !== 'false';
export default class Greeting extends PureComponent {
@@ -34,7 +33,10 @@ export default class Greeting extends PureComponent {
const month = time.getMonth();
const date = time.getDate();
const event = events.find((e) => e.month - 1 === month && e.date === date);
// 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 = variables.getMessage(event.id);
}

View File

@@ -77,6 +77,20 @@ const GreetingOptions = () => {
setCustomEvents(defaultEvents);
}
function updateEvent(index, updatedEvent) {
// Update the event in your state
setCustomEvents((prevEvents) => {
const newEvents = [...prevEvents];
newEvents[index] = updatedEvent;
return newEvents;
});
// Update the event in localStorage
const customEvents = JSON.parse(localStorage.getItem('customEvents') || '[]');
customEvents[index] = updatedEvent;
localStorage.setItem('customEvents', JSON.stringify(customEvents));
}
const AdditionalOptions = () => {
return (
<Row final={true}>
@@ -158,7 +172,10 @@ const GreetingOptions = () => {
<TextareaAutosize
value={event.name}
placeholder="Event Name"
onChange={(e) => this.message(e, true, index)}
onChange={(e) => {
const updatedEvent = { ...event, name: e.target.value };
updateEvent(index, updatedEvent);
}}
varient="outlined"
style={{ padding: '0' }}
/>
@@ -168,11 +185,27 @@ const GreetingOptions = () => {
<div className="messageAction">
<div className="eventDateControl">
<label>Month</label>
<input id="number" type="number" value={event.month} />
<input
id="month"
type="number"
value={event.month}
onChange={(e) => {
const updatedEvent = { ...event, month: parseInt(e.target.value, 10) };
updateEvent(index, updatedEvent);
}}
/>
</div>
<div className="eventDateControl">
<label>Day</label>
<input id="number" type="number" value={event.date} />
<input
id="day"
type="number"
value={event.date}
onChange={(e) => {
const updatedEvent = { ...event, date: parseInt(e.target.value, 10) };
updateEvent(index, updatedEvent);
}}
/>
</div>
<Button
type="settings"