Put adult consent logic all in one place

lemmy-translations

@@ -1 +1 @@
-Subproject commit a94ef775f3f923067b48c1719cda206dbcf1a9e5
+Subproject commit 4a2a30f4a3778df85e28ceaf541b6c978b321e2a

src/shared/components/app/app.tsx

@@ -1,5 +1,5 @@
 import { isAnonymousPath, isAuthPath, setIsoData } from "@utils/app";
-import { Component, RefObject, createRef, linkEvent } from "inferno";
+import { Component, createRef, linkEvent } from "inferno";
 import { Provider } from "inferno-i18next-dess";
 import { Route, Switch } from "inferno-router";
 import { IsoDataOptionalSite } from "../../interfaces";
@@ -14,46 +14,14 @@ import "./styles.scss";
 import { Theme } from "./theme";
 import AnonymousGuard from "../common/anonymous-guard";
 import { destroyTippy, setupTippy } from "../../tippy";
-import { adultConsentLocalStorageKey } from "../../config";
 import AdultConsentModal from "../common/adult-consent-modal";
 
-interface AppState {
+export class App extends Component<any, any> {
-  showAdultConsentModal: boolean;
-}
-
-function handleAdultConsent(i: App) {
-  localStorage.setItem(adultConsentLocalStorageKey, "true");
-  i.setState({ showAdultConsentModal: false });
-}
-
-function handleAdultConsentGoBack(i: App) {
-  i.context.router.history.back();
-}
-
-export class App extends Component<any, AppState> {
   private isoData: IsoDataOptionalSite = setIsoData(this.context);
-  private readonly mainContentRef: RefObject<HTMLElement>;
+  private readonly mainContentRef = createRef<HTMLElement>();
   private readonly rootRef = createRef<HTMLDivElement>();
 
-  state: AppState = {
-    showAdultConsentModal: false,
-  };
-
-  constructor(props: any, context: any) {
-    super(props, context);
-    this.mainContentRef = createRef();
-  }
-
   componentDidMount(): void {
-    const siteRes = this.isoData.site_res;
-
-    if (
-      siteRes?.site_view.site.content_warning &&
-      !(siteRes?.my_user || localStorage.getItem(adultConsentLocalStorageKey))
-    ) {
-      this.setState({ showAdultConsentModal: true });
-    }
-
     setupTippy(this.rootRef);
   }
 
@@ -88,9 +56,6 @@ export class App extends Component<any, AppState> {
             {siteRes?.site_view.site.content_warning && (
               <AdultConsentModal
                 contentWarning={siteRes.site_view.site.content_warning}
-                show={this.state.showAdultConsentModal}
-                onBack={linkEvent(this, handleAdultConsentGoBack)}
-                onContinue={linkEvent(this, handleAdultConsent)}
               />
             )}
             <div className="mt-4 p-0 fl-1">

src/shared/components/common/adult-consent-modal.tsx

@@ -1,5 +1,8 @@
-import { Component, LinkedEvent, RefObject, createRef } from "inferno";
+import { Component, LinkedEvent, createRef, linkEvent } from "inferno";
 import { modalMixin } from "../mixins/modal-mixin";
+import { adultConsentLocalStorageKey } from "../../config";
+import { setIsoData } from "@utils/app";
+import { IsoDataOptionalSite } from "../../interfaces";
 
 interface AdultConsentModalProps {
   contentWarning: string;
@@ -9,12 +12,9 @@ interface AdultConsentModalProps {
 }
 
 @modalMixin
-export default class AdultConsentModal extends Component<
+class AdultConsentModalInner extends Component<AdultConsentModalProps, any> {
-  AdultConsentModalProps,
+  readonly modalDivRef = createRef<HTMLDivElement>();
-  any
+  readonly continueButtonRef = createRef<HTMLButtonElement>();
-> {
-  readonly modalDivRef: RefObject<HTMLDivElement> = createRef();
-  readonly continueButtonRef: RefObject<HTMLButtonElement> = createRef();
 
   render() {
     const { contentWarning, onContinue, onBack } = this.props;
@@ -57,3 +57,48 @@ export default class AdultConsentModal extends Component<
     this.continueButtonRef.current?.focus();
   }
 }
+
+interface AdultConsentModalState {
+  show: boolean;
+}
+
+function handleAdultConsent(i: AdultConsentModal) {
+  localStorage.setItem(adultConsentLocalStorageKey, "true");
+  i.setState({ show: false });
+}
+
+function handleAdultConsentGoBack(i: AdultConsentModal) {
+  i.context.router.history.back();
+}
+
+export default class AdultConsentModal extends Component<
+  { contentWarning: string },
+  AdultConsentModalState
+> {
+  private isoData: IsoDataOptionalSite = setIsoData(this.context);
+  state: AdultConsentModalState = {
+    show: false,
+  };
+
+  componentDidMount(): void {
+    const siteRes = this.isoData.site_res;
+
+    if (
+      siteRes?.site_view.site.content_warning &&
+      !(siteRes?.my_user || localStorage.getItem(adultConsentLocalStorageKey))
+    ) {
+      this.setState({ show: true });
+    }
+  }
+
+  render() {
+    return (
+      <AdultConsentModalInner
+        contentWarning={this.props.contentWarning}
+        show={this.state.show}
+        onBack={linkEvent(this, handleAdultConsentGoBack)}
+        onContinue={linkEvent(this, handleAdultConsent)}
+      />
+    );
+  }
+}