refactor: move all applicable parts to mobx instead of passing from parent to children components

app/assets/javascripts/components/AccountMenu/Protections.tsx

@@ -1,19 +1,65 @@
 import { WebApplication } from '@/ui_models/application';
 import { FunctionalComponent } from 'preact';
+import { useCallback, useState } from '@node_modules/preact/hooks';
+import { useEffect } from 'preact/hooks';
+import { ApplicationEvent } from '@node_modules/@standardnotes/snjs';
+import { isSameDay } from '@/utils';
 
 type Props = {
   application: WebApplication;
-  protectionsDisabledUntil: string | null;
 };
 
-const Protections: FunctionalComponent<Props> = ({
-                                                   application,
-                                                   protectionsDisabledUntil
-                                                 }) => {
+const Protections: FunctionalComponent<Props> = ({ application }) => {
   const enableProtections = () => {
     application.clearProtectionSession();
   };
 
+  const hasProtections = application.hasProtectionSources();
+
+  const getProtectionsDisabledUntil = useCallback((): string | null => {
+    const protectionExpiry = application.getProtectionSessionExpiryDate();
+    const now = new Date();
+    if (protectionExpiry > now) {
+      let f: Intl.DateTimeFormat;
+      if (isSameDay(protectionExpiry, now)) {
+        f = new Intl.DateTimeFormat(undefined, {
+          hour: 'numeric',
+          minute: 'numeric'
+        });
+      } else {
+        f = new Intl.DateTimeFormat(undefined, {
+          weekday: 'long',
+          day: 'numeric',
+          month: 'short',
+          hour: 'numeric',
+          minute: 'numeric'
+        });
+      }
+
+      return f.format(protectionExpiry);
+    }
+    return null;
+  }, [application]);
+
+  const [protectionsDisabledUntil, setProtectionsDisabledUntil] = useState(getProtectionsDisabledUntil());
+
+  useEffect(() => {
+    const removeProtectionSessionExpiryDateChangedObserver = application.addEventObserver(
+      async () => {
+        setProtectionsDisabledUntil(getProtectionsDisabledUntil());
+      },
+      ApplicationEvent.ProtectionSessionExpiryDateChanged
+    );
+
+    return () => {
+      removeProtectionSessionExpiryDateChangedObserver();
+    };
+  }, [application, getProtectionsDisabledUntil]);
+
+  if (!hasProtections) {
+    return null;
+  }
+
   return (
     <div className="sk-panel-section">
       <div className="sk-panel-section-title">Protections</div>