refactor: split AccountMenu to smaller components

Notes: - remove `url` and keep only `server`, as they are duplicating each other
2021-06-10 18:38:44 +04:00
parent 340a4c52f2
commit 8a2fa13d4e
8 changed files with 1284 additions and 1 deletions
--- a/app/assets/javascripts/components/AccountMenu/Footer.tsx
+++ b/app/assets/javascripts/components/AccountMenu/Footer.tsx
@@ -0,0 +1,76 @@
+import { FunctionalComponent } from 'preact';
+import { AppState } from '@/ui_models/app_state';
+import { StateUpdater, useState } from '@node_modules/preact/hooks';
+import { WebApplication } from '@/ui_models/application';
+import { User } from '@node_modules/@standardnotes/snjs/dist/@types/services/api/responses';
+import { observer } from '@node_modules/mobx-react-lite';
+
+type Props = {
+  appState: AppState;
+  application: WebApplication;
+  showLogin: boolean;
+  setShowLogin: StateUpdater<boolean>;
+  showRegister: boolean;
+  setShowRegister: StateUpdater<boolean>;
+  user: User | undefined;
+}
+
+const Footer = observer(({
+                           appState,
+                           application,
+                           showLogin,
+                           setShowLogin,
+                           showRegister,
+                           setShowRegister,
+                           user
+                         }: Props) => {
+
+  const showBetaWarning = appState.showBetaWarning;
+
+
+  const [appVersion] = useState(() => `v${((window as any).electronAppVersion || application.bridge.appVersion)}`);
+
+  const disableBetaWarning = () => {
+    appState.disableBetaWarning();
+  };
+
+  const signOut = () => {
+    appState.accountMenu.setSigningOut(true);
+  };
+
+  const hidePasswordForm = () => {
+    setShowLogin(false);
+    setShowRegister(false);
+    // TODO: Vardan: this comes from main `index.tsx` and the below commented parts should reset password and confirmation.
+    //  Check whether it works when I don't call them explicitly.
+    // setPassword('');
+    // setPasswordConfirmation(undefined);
+  };
+
+  return (
+    <div className="sk-panel-footer">
+      <div className="sk-panel-row">
+        <div className="sk-p left neutral">
+          <span>{appVersion}</span>
+          {showBetaWarning && (
+            <span>
+                  <span> (</span>
+                  <a className="sk-a" onClick={disableBetaWarning}>Hide beta warning</a>
+                  <span>)</span>
+                </span>
+          )}
+        </div>
+        {(showLogin || showRegister) && (
+          <a className="sk-a right" onClick={hidePasswordForm}>Cancel</a>
+        )}
+        {!showLogin && !showRegister && (
+          <a className="sk-a right danger capitalize" onClick={signOut}>
+            {user ? 'Sign out' : 'Clear session data'}
+          </a>
+        )}
+      </div>
+    </div>
+  );
+});
+
+export default Footer;