Skip to content

Commit

Permalink
feat: Use Menu component in the general account menu (#698)
Browse files Browse the repository at this point in the history
  • Loading branch information
@amanharwara
amanharwara authored Oct 22, 2021
1 parent ebe0d26 commit f494924
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 113 deletions.
174 changes: 65 additions & 109 deletions app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@ import { Icon } from '../Icon';
import { formatLastSyncDate } from '@/preferences/panes/account/Sync';
import { SyncQueueStrategy } from '@standardnotes/snjs';
import { STRING_GENERIC_SYNC_ERROR } from '@/strings';
import { useEffect, useRef, useState } from 'preact/hooks';
import { useState } from 'preact/hooks';
import { AccountMenuPane } from '.';
import { FunctionComponent } from 'preact';
import { JSXInternal } from 'preact/src/jsx';
import { AppVersion } from '@/version';
import { Menu } from '../menu/Menu';
import { MenuItem, MenuItemSeparator, MenuItemType } from '../menu/MenuItem';

type Props = {
appState: AppState;
Expand All @@ -26,9 +27,6 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
const [lastSyncDate, setLastSyncDate] = useState(
formatLastSyncDate(application.getLastSyncDate() as Date)
);
const [currentFocusedIndex, setCurrentFocusedIndex] = useState(0);

const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);

const doSynchronization = async () => {
setIsSyncingInProgress(true);
Expand Down Expand Up @@ -57,48 +55,8 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(

const user = application.getUser();

const accountMenuRef = useRef<HTMLDivElement>();

const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = (
event
) => {
switch (event.key) {
case 'ArrowDown':
setCurrentFocusedIndex((index) => {
console.log(index, buttonRefs.current.length);
if (index + 1 < buttonRefs.current.length) {
return index + 1;
} else {
return 0;
}
});
break;
case 'ArrowUp':
setCurrentFocusedIndex((index) => {
if (index - 1 > -1) {
return index - 1;
} else {
return buttonRefs.current.length - 1;
}
});
break;
}
};

useEffect(() => {
if (buttonRefs.current[currentFocusedIndex]) {
buttonRefs.current[currentFocusedIndex]?.focus();
}
}, [currentFocusedIndex]);

const pushRefToArray = (ref: HTMLButtonElement | null) => {
if (ref && !buttonRefs.current.includes(ref)) {
buttonRefs.current.push(ref);
}
};

return (
<div ref={accountMenuRef} onKeyDown={handleKeyDown}>
<>
<div className="flex items-center justify-between px-3 mt-1 mb-3">
<div className="sn-account-menu-headline">Account</div>
<div className="flex cursor-pointer" onClick={closeMenu}>
Expand Down Expand Up @@ -147,74 +105,72 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
</>
)}
<div className="h-1px my-2 bg-border"></div>
{user ? (
<button
className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
ref={pushRefToArray}
<Menu a11yLabel="General account menu" closeMenu={closeMenu}>
{user ? (
<MenuItem
type={MenuItemType.IconButton}
onClick={() => {
appState.accountMenu.closeAccountMenu();
appState.preferences.setCurrentPane('account');
appState.preferences.openPreferences();
}}
>
<Icon type="user" className={iconClassName} />
Account settings
</MenuItem>
) : (
<>
<MenuItem
type={MenuItemType.IconButton}
onClick={() => {
setMenuPane(AccountMenuPane.Register);
}}
>
<Icon type="user" className={iconClassName} />
Create free account
</MenuItem>
<MenuItem
type={MenuItemType.IconButton}
onClick={() => {
setMenuPane(AccountMenuPane.SignIn);
}}
>
<Icon type="signIn" className={iconClassName} />
Sign in
</MenuItem>
</>
)}
<MenuItem
className="justify-between"
type={MenuItemType.IconButton}
onClick={() => {
appState.accountMenu.closeAccountMenu();
appState.preferences.setCurrentPane('account');
appState.preferences.setCurrentPane('help-feedback');
appState.preferences.openPreferences();
}}
>
<Icon type="user" className={iconClassName} />
Account settings
</button>
) : (
<>
<button
className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
ref={pushRefToArray}
onClick={() => {
setMenuPane(AccountMenuPane.Register);
}}
>
<Icon type="user" className={iconClassName} />
Create free account
</button>
<button
className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
ref={pushRefToArray}
onClick={() => {
setMenuPane(AccountMenuPane.SignIn);
}}
>
<Icon type="signIn" className={iconClassName} />
Sign in
</button>
</>
)}
<button
className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
ref={pushRefToArray}
onClick={() => {
appState.accountMenu.closeAccountMenu();
appState.preferences.setCurrentPane('help-feedback');
appState.preferences.openPreferences();
}}
>
<div className="flex items-center">
<Icon type="help" className={iconClassName} />
Help &amp; feedback
</div>
<span className="color-neutral">v{AppVersion}</span>
</button>
{user ? (
<>
<div className="h-1px my-2 bg-border"></div>
<button
className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
ref={pushRefToArray}
onClick={() => {
appState.accountMenu.setSigningOut(true);
}}
>
<Icon type="signOut" className={iconClassName} />
Sign out and clear local data
</button>
</>
) : null}
</div>
<div className="flex items-center">
<Icon type="help" className={iconClassName} />
Help &amp; feedback
</div>
<span className="color-neutral">v{AppVersion}</span>
</MenuItem>
{user ? (
<>
<MenuItemSeparator />
<MenuItem
type={MenuItemType.IconButton}
onClick={() => {
appState.accountMenu.setSigningOut(true);
}}
>
<Icon type="signOut" className={iconClassName} />
Sign out and clear local data
</MenuItem>
</>
) : null}
</Menu>
</>
);
}
);
8 changes: 4 additions & 4 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2142,10 +2142,10 @@
"@standardnotes/sncrypto-common" "^1.5.2"
libsodium-wrappers "^0.7.8"

"@standardnotes/snjs@2.15.2":
version "2.15.2"
resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.15.2.tgz#4502a02333529434d2c8c00830652cce31c57d25"
integrity sha512-n0R6wSJfwYoBVtChPbBssvvPQEyYufP7AD+IEibjjbmZImFQky/7x45hsoEsFti0EL5FheAHHKFCC//4jD4fiA==
"@standardnotes/snjs@2.16.0":
version "2.16.0"
resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.16.0.tgz#af1e427d8ed7f71b5019f7c8cca349422a885b02"
integrity sha512-dAvFFRu9PuIbW4fF1hZEfh/DwADO2bZP1s24biYY1bfMOr9Z0131n2xIN/yUsA7zw0Sch6m1Nof8OCEZntX5xQ==
dependencies:
"@standardnotes/auth" "3.7.2"
"@standardnotes/common" "1.2.0"
Expand Down

0 comments on commit f494924

Please sign in to comment.