From b795ceb33d341f1417d3b3636748ca1d2660225c Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Wed, 28 Apr 2021 15:06:15 +0100
Subject: [PATCH] feat: hot reload for clock and greeting

---
 .../main/settings/sections/Greeting.jsx       | 13 +++++-------
 .../modals/main/settings/sections/Time.jsx    | 20 +++++++++----------
 src/components/widgets/greeting/Greeting.jsx  |  3 +++
 src/components/widgets/time/Clock.jsx         |  3 +++
 4 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx
index 2f46abca..bd7a588f 100644
--- a/src/components/modals/main/settings/sections/Greeting.jsx
+++ b/src/components/modals/main/settings/sections/Greeting.jsx
@@ -22,9 +22,6 @@ export default class GreetingSettings extends React.PureComponent {
     this.setState({
       birthday: data
     });
-
-    document.querySelector('.reminder-info').style.display = 'block';
-    localStorage.setItem('showReminder', true);
   }
 
   render() {
@@ -34,13 +31,13 @@ export default class GreetingSettings extends React.PureComponent {
       <>
         <h2>{greeting.title}</h2>
         <Switch name='greeting' text={this.language.enabled} category='greeting' element='.greeting'/>
-        <Checkbox name='events' text={greeting.events} category='greeting' element='.other'/>
-        <Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting' element='.other'/>
-        <Text title={greeting.name} name='greetingName' category='greeting' element='.other'/>
+        <Checkbox name='events' text={greeting.events} category='greeting' element='.greeting'/>
+        <Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting' element='.greeting'/>
+        <Text title={greeting.name} name='greetingName' category='greeting' element='.greeting'/>
 
         <h3>{greeting.birthday}</h3>
-        <Switch name='birthdayenabled' text={this.language.enabled} category='greeting' element='.other'/>
-        <Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting' element='.other'/>
+        <Switch name='birthdayenabled' text={this.language.enabled} category='greeting' element='.greeting'/>
+        <Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting' element='.greeting'/>
         <p>{greeting.birthday_date}</p>
         <DayPickerInput onDayChange={this.changeDate} value={this.state.birthday}/>
       </>
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index ac36b522..8b828a88 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@@ -34,21 +34,21 @@ export default class TimeSettings extends React.PureComponent {
     const digitalSettings = (
       <>
         <h3>{time.digital.title}</h3>
-        <Radio title={time.format} name='timeformat' options={digitalOptions} smallTitle={true} category='clock' element='.other' />
+        <Radio title={time.format} name='timeformat' options={digitalOptions} smallTitle={true} category='clock' element='.clock-container' />
         <br/>
-        <Checkbox name='seconds' text={time.digital.seconds} category='clock' element='.other' />
-        <Checkbox name='zero' text={time.digital.zero} category='clock' element='.other' />
+        <Checkbox name='seconds' text={time.digital.seconds} category='clock' element='.clock-container' />
+        <Checkbox name='zero' text={time.digital.zero} category='clock' element='.clock-container' />
       </>
     );
 
     const analogSettings = (
       <>
         <h3>{time.analogue.title}</h3>
-        <Checkbox name='secondHand' text={time.analogue.second_hand} category='clock' />
-        <Checkbox name='minuteHand' text={time.analogue.minute_hand} category='clock' />
-        <Checkbox name='hourHand' text={time.analogue.hour_hand} category='clock' />
-        <Checkbox name='hourMarks' text={time.analogue.hour_marks} category='clock' />
-        <Checkbox name='minuteMarks' text={time.analogue.minute_marks} category='clock' />
+        <Checkbox name='secondHand' text={time.analogue.second_hand} category='clock' element='.clock-container' />
+        <Checkbox name='minuteHand' text={time.analogue.minute_hand} category='clock' element='.clock-container' />
+        <Checkbox name='hourHand' text={time.analogue.hour_hand} category='clock' element='.clock-container' />
+        <Checkbox name='hourMarks' text={time.analogue.hour_marks} category='clock' element='.clock-container' />
+        <Checkbox name='minuteMarks' text={time.analogue.minute_marks} category='clock' element='.clock-container' />
       </>
     );
 
@@ -94,8 +94,8 @@ export default class TimeSettings extends React.PureComponent {
     return (
       <>
         <h2>{time.title}</h2>
-        <Switch name='time' text={this.language.enabled} category='clock' element='.clock' />
-        <Dropdown label={time.type} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock' element='.other'>
+        <Switch name='time' text={this.language.enabled} category='clock' element='.clock-container' />
+        <Dropdown label={time.type} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock' element='.clock-container'>
           <option value='digital'>{time.digital.title}</option>
           <option value='analogue'>{time.analogue.title}</option>
           <option value='percentageComplete'>{time.percentage_complete}</option>
diff --git a/src/components/widgets/greeting/Greeting.jsx b/src/components/widgets/greeting/Greeting.jsx
index 13b91b67..01a94d43 100644
--- a/src/components/widgets/greeting/Greeting.jsx
+++ b/src/components/widgets/greeting/Greeting.jsx
@@ -110,6 +110,9 @@ export default class Greeting extends React.PureComponent {
           return element.style.display = 'none';
         }
 
+        this.timer = null;
+        this.getGreeting(0);
+
         element.style.display = 'block';
       }
     });
diff --git a/src/components/widgets/time/Clock.jsx b/src/components/widgets/time/Clock.jsx
index 586719a9..2908f2fd 100644
--- a/src/components/widgets/time/Clock.jsx
+++ b/src/components/widgets/time/Clock.jsx
@@ -96,6 +96,9 @@ export default class Clock extends React.PureComponent {
           return element.style.display = 'none';
         }
 
+        this.timer = null;
+        this.startTime(0);
+
         element.style.display = 'block';
       }
     });