refactor: replace componentDidUpdate with @reaction from mobx-react-helper

Agent-Logs-Url: https://github.com/Open-Source-Bazaar/Open-Source-Bazaar.github.io/sessions/4c1cea16-bd51-429b-9ddf-9fea961418e1

Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>

Author: Copilot

components/Activity/Hackathon/Countdown.tsx

@@ -1,6 +1,6 @@
 import { computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { Component } from 'react';
+import { ObservedComponent, reaction } from 'mobx-react-helper';
 
 import styles from './Hero.module.less';
 
@@ -10,14 +10,14 @@ export interface CountdownProps {
 }
 
 @observer
-export class Countdown extends Component<CountdownProps> {
+export class Countdown extends ObservedComponent<CountdownProps> {
   @observable
   accessor rest: number | null = null;
 
   private timer?: number;
 
   private get target() {
-    const { countdownTo } = this.props;
+    const { countdownTo } = this.observedProps;
     const value = countdownTo ? new Date(countdownTo).getTime() : NaN;
 
     return Number.isFinite(value) ? value : NaN;
@@ -42,35 +42,27 @@ export class Countdown extends Component<CountdownProps> {
     this.rest = Math.max(0, this.target - Date.now());
   };
 
+  @reaction((_this: Countdown) => _this.observedProps.countdownTo)
   componentDidMount() {
-    if (Number.isFinite(this.target)) {
-      this.tick();
-      this.timer = window.setInterval(this.tick, 1000);
-    }
-  }
-
-  componentDidUpdate(prevProps: CountdownProps) {
-    if (prevProps.countdownTo !== this.props.countdownTo) {
-      if (this.timer) {
-        window.clearInterval(this.timer);
-        this.timer = undefined;
-      }
+    super.componentDidMount();
 
-      this.rest = null;
-
-      if (Number.isFinite(this.target)) {
-        this.tick();
-        this.timer = window.setInterval(this.tick, 1000);
-      }
+    if (this.timer) {
+      window.clearInterval(this.timer);
+      this.timer = undefined;
     }
+
+    this.tick();
+    this.timer = window.setInterval(this.tick, 1000);
   }
 
   componentWillUnmount() {
+    super.componentWillUnmount();
+
     if (this.timer) window.clearInterval(this.timer);
   }
 
   render() {
-    const { unitLabels } = this.props;
+    const { unitLabels } = this.observedProps;
     const { sections } = this;
 
     return (