Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Use Menu component in the general account menu #698

Merged
merged 3 commits into from
Oct 22, 2021
Merged

feat: Use Menu component in the general account menu #698

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6a5d2e4
chore: Update yarn.lock
amanharwara Oct 22, 2021
c3f5ab6
feat: Use Menu component in the general account menu
amanharwara Oct 22, 2021
5b28432
refactor: Remove unused imports from general account menu
amanharwara Oct 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 65 additions & 109 deletions app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx
View file
Open in desktop
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
Open in desktop
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