From adbc7d455d8dac22ad135d4ea19912bec4c8679b Mon Sep 17 00:00:00 2001 From: Bekbolsun Date: Mon, 19 Feb 2024 19:35:12 +0600 Subject: [PATCH 1/2] format code --- .../Modal/ModalAppDetails/ModalAppDetails.tsx | 1 - .../ModalConfirmConnect.tsx | 5 +-- src/components/Modal/ModalEditName/styled.tsx | 4 +- .../Modal/ModalSignUp/ModalSignUp.tsx | 6 +-- src/components/Warning/Warning.tsx | 10 +---- .../Header/components/ListItemProfile.tsx | 37 ++++++++----------- src/modules/backend.ts | 10 ++--- src/modules/keys.ts | 2 +- src/modules/swic.ts | 12 +++--- .../components/BackgroundSigningWarning.tsx | 7 +--- src/utils/consts.ts | 2 +- src/utils/helpers/date.ts | 2 +- 12 files changed, 37 insertions(+), 61 deletions(-) diff --git a/src/components/Modal/ModalAppDetails/ModalAppDetails.tsx b/src/components/Modal/ModalAppDetails/ModalAppDetails.tsx index 1e562b1..5465b7f 100644 --- a/src/components/Modal/ModalAppDetails/ModalAppDetails.tsx +++ b/src/components/Modal/ModalAppDetails/ModalAppDetails.tsx @@ -68,7 +68,6 @@ export const ModalAppDetails = () => { if (isEmptyString(url)) return try { - const u = new URL(url) if (isEmptyString(name)) setDetails((prev) => ({ ...prev, name: u.hostname })) diff --git a/src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx b/src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx index afaf459..d4ad0a8 100644 --- a/src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx +++ b/src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx @@ -73,11 +73,11 @@ export const ModalConfirmConnect = () => { useEffect(() => { if (isModalOpened) { if (isPopup) { - console.log("waiting for sw") + console.log('waiting for sw') // wait for SW to start swicWaitStarted().then(() => { // give it some time to load the pending reqs etc - console.log("waiting for sw done") + console.log('waiting for sw done') setTimeout(() => setIsLoaded(true), 500) }) } else { @@ -123,7 +123,6 @@ export const ModalConfirmConnect = () => { const options = { perms, appUrl } await confirmPending(pendingReqId, true, true, options) } else { - try { await askNotificationPermission() const result = await swicCall('enablePush') diff --git a/src/components/Modal/ModalEditName/styled.tsx b/src/components/Modal/ModalEditName/styled.tsx index 0f0e021..92cacf4 100644 --- a/src/components/Modal/ModalEditName/styled.tsx +++ b/src/components/Modal/ModalEditName/styled.tsx @@ -1,4 +1,4 @@ -import { Stack, StackProps, styled } from "@mui/material"; +import { Stack, StackProps, styled } from '@mui/material' export const StyledSettingContainer = styled((props: StackProps) => ( @@ -7,4 +7,4 @@ export const StyledSettingContainer = styled((props: StackProps) => ( borderRadius: '1rem', background: theme.palette.background.default, color: theme.palette.text.primary, -})) \ No newline at end of file +})) diff --git a/src/components/Modal/ModalSignUp/ModalSignUp.tsx b/src/components/Modal/ModalSignUp/ModalSignUp.tsx index d9cff4c..51452b3 100644 --- a/src/components/Modal/ModalSignUp/ModalSignUp.tsx +++ b/src/components/Modal/ModalSignUp/ModalSignUp.tsx @@ -60,10 +60,8 @@ export const ModalSignUp = () => { try { setIsLoading(true) const k: any = await swicCall('generateKey', name) - if (k.name) - notify(`Account created for "${k.name}"`, 'success') - else - notify(`Failed to assign name "${name}", try again`, 'error') + if (k.name) notify(`Account created for "${k.name}"`, 'success') + else notify(`Failed to assign name "${name}", try again`, 'error') setIsLoading(false) setTimeout(() => { // give frontend time to read the new key first diff --git a/src/components/Warning/Warning.tsx b/src/components/Warning/Warning.tsx index a9eb535..3fd7f89 100644 --- a/src/components/Warning/Warning.tsx +++ b/src/components/Warning/Warning.tsx @@ -13,14 +13,8 @@ export const Warning: FC = ({ hint, message, icon, ...restProps }) {icon && {icon}} - - {message} - - {hint && ( - - {hint} - - )} + {message} + {hint && {hint}} ) diff --git a/src/layout/Header/components/ListItemProfile.tsx b/src/layout/Header/components/ListItemProfile.tsx index f0de331..487bd3a 100644 --- a/src/layout/Header/components/ListItemProfile.tsx +++ b/src/layout/Header/components/ListItemProfile.tsx @@ -4,28 +4,21 @@ import { Avatar, ListItemIcon, MenuItem, Typography } from '@mui/material' import React, { FC } from 'react' type ListItemProfileProps = { - onClickItem: () => void + onClickItem: () => void } & DbKey -export const ListItemProfile: FC = ({ - onClickItem, - npub, -}) => { - const { userName, userAvatar, avatarTitle } = useProfile(npub) - return ( - - - - {avatarTitle} - - - - {userName} - - - ) +export const ListItemProfile: FC = ({ onClickItem, npub }) => { + const { userName, userAvatar, avatarTitle } = useProfile(npub) + return ( + + + + {avatarTitle} + + + + {userName} + + + ) } diff --git a/src/modules/backend.ts b/src/modules/backend.ts index b1b52ee..02371c2 100644 --- a/src/modules/backend.ts +++ b/src/modules/backend.ts @@ -693,7 +693,7 @@ export class NoauthBackend { } private getDecision(backend: Nip46Backend, req: DbPending): DECISION { - if (!(req.method in backend.handlers)) return DECISION.IGNORE; + if (!(req.method in backend.handlers)) return DECISION.IGNORE const reqPerm = getReqPerm(req) const appPerms = this.perms.filter((p) => p.npub === req.npub && p.appNpub === req.appNpub) @@ -1175,10 +1175,10 @@ export class NoauthBackend { } private async transferName(npub: string, name: string, newNpub: string) { - const key = this.enckeys.find(k => k.npub === npub) - if (!key) throw new Error("Npub not found") - if (!name) throw new Error("Empty name") - if (key.name !== name) throw new Error("Name changed, please reload") + const key = this.enckeys.find((k) => k.npub === npub) + if (!key) throw new Error('Npub not found') + if (!name) throw new Error('Empty name') + if (key.name !== name) throw new Error('Name changed, please reload') await this.sendTransferNameToServer(npub, key.name, newNpub) await dbi.editName(npub, '') key.name = '' diff --git a/src/modules/keys.ts b/src/modules/keys.ts index 70af6b8..61357e1 100644 --- a/src/modules/keys.ts +++ b/src/modules/keys.ts @@ -43,7 +43,7 @@ export function isWeakPassphase(passphrase: string): boolean { const compl = Math.pow(base, passphrase.length) const thresh = Math.pow(11, 14) // console.log({ big, small, number, punct, base, compl, thresh }); - return compl < thresh; + return compl < thresh } export class Keys { diff --git a/src/modules/swic.ts b/src/modules/swic.ts index 8ee794b..fa0b261 100644 --- a/src/modules/swic.ts +++ b/src/modules/swic.ts @@ -20,8 +20,8 @@ export async function swicRegister() { }, onUpdate() { // tell new SW that it should activate immediately - swr?.waiting?.postMessage({type: 'SKIP_WAITING'}) - } + swr?.waiting?.postMessage({ type: 'SKIP_WAITING' }) + }, }) navigator.serviceWorker.ready.then(async (r) => { @@ -33,8 +33,7 @@ export async function swicRegister() { console.log('This page is not currently controlled by a service worker.') } - while (queue.length) - await (queue.shift()!)() + while (queue.length) await queue.shift()!() }) navigator.serviceWorker.addEventListener('message', (event) => { @@ -43,11 +42,11 @@ export async function swicRegister() { } export function swicWaitStarted() { - return new Promise(ok => { + return new Promise((ok) => { if (swr && swr.active) ok() else queue.push(ok) }) -} +} function onMessage(data: any) { const { id, result, error } = data @@ -78,7 +77,6 @@ export async function swicCall(method: string, ...args: any[]) { nextReqId++ return new Promise((ok, rej) => { - const call = async () => { if (!swr || !swr.active) { rej(new Error('No active service worker')) diff --git a/src/pages/KeyPage/components/BackgroundSigningWarning.tsx b/src/pages/KeyPage/components/BackgroundSigningWarning.tsx index 3734c72..dcc4166 100644 --- a/src/pages/KeyPage/components/BackgroundSigningWarning.tsx +++ b/src/pages/KeyPage/components/BackgroundSigningWarning.tsx @@ -16,12 +16,7 @@ export const BackgroundSigningWarning: FC = ({ is Enable background service {isEnabling ? : null} } - hint={ - - Please allow notifications - for background operation. - - } + hint={Please allow notifications for background operation.} icon={} onClick={isEnabling ? undefined : onEnableBackSigning} /> diff --git a/src/utils/consts.ts b/src/utils/consts.ts index 7f68c77..0af612f 100644 --- a/src/utils/consts.ts +++ b/src/utils/consts.ts @@ -16,7 +16,7 @@ export enum ACTION_TYPE { } export const ACTIONS: { [type: string]: string } = { - basic: 'Basic permissions', + basic: 'Basic permissions', get_public_key: 'Get public key', sign_event: 'Sign event', connect: 'Connect', diff --git a/src/utils/helpers/date.ts b/src/utils/helpers/date.ts index efe1d78..77bdea6 100644 --- a/src/utils/helpers/date.ts +++ b/src/utils/helpers/date.ts @@ -3,7 +3,7 @@ import { format } from 'date-fns' export const formatTimestampDate = (timestamp: number) => { try { const date = new Date(timestamp) - const formattedDate = format(date, "dd-MM-yyyy HH:mm") + const formattedDate = format(date, 'dd-MM-yyyy HH:mm') return formattedDate } catch (error) { return '' From 59c03d16ebbb73bef0eea2d8e339b57714e72b4a Mon Sep 17 00:00:00 2001 From: Bekbolsun Date: Mon, 19 Feb 2024 21:41:10 +0600 Subject: [PATCH 2/2] add reload badge on sw update --- src/App.tsx | 8 +-- .../Modal/ModalEditName/ModalEditName.tsx | 4 +- src/components/ReloadBadge/ReloadBadge.tsx | 33 ++++++++++++ src/components/ReloadBadge/styled.tsx | 50 +++++++++++++++++++ src/layout/Header/Header.tsx | 17 +++++-- src/layout/Layout.tsx | 24 ++++----- src/routes/AppRoutes.tsx | 1 - src/store/index.ts | 11 +--- 8 files changed, 116 insertions(+), 32 deletions(-) create mode 100644 src/components/ReloadBadge/ReloadBadge.tsx create mode 100644 src/components/ReloadBadge/styled.tsx diff --git a/src/App.tsx b/src/App.tsx index 48d7610..ad3a79a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,16 +9,17 @@ import { ModalInitial } from './components/Modal/ModalInitial/ModalInitial' import { ModalImportKeys } from './components/Modal/ModalImportKeys/ModalImportKeys' import { ModalSignUp } from './components/Modal/ModalSignUp/ModalSignUp' import { ModalLogin } from './components/Modal/ModalLogin/ModalLogin' +import { useSearchParams } from 'react-router-dom' function App() { const [render, setRender] = useState(0) const dispatch = useAppDispatch() + const [searchParams, setSearchParams] = useSearchParams() const [isConnected, setIsConnected] = useState(false) const load = useCallback(async () => { const keys: DbKey[] = await dbi.listKeys() - // console.log(keys, 'keys') dispatch(setKeys({ keys })) const loadProfiles = async () => { @@ -55,7 +56,6 @@ function App() { // rerender // setRender((r) => r + 1) - // if (!keys.length) handleOpen(MODAL_PARAMS_KEYS.INITIAL) // eslint-disable-next-line }, [dispatch]) @@ -80,12 +80,14 @@ function App() { // subscribe to service worker updates swicOnReload(() => { console.log('reload') - // FIXME show 'Please reload' badge at page top + searchParams.set('reload', 'true') + setSearchParams(searchParams) }) return ( <> + diff --git a/src/components/Modal/ModalEditName/ModalEditName.tsx b/src/components/Modal/ModalEditName/ModalEditName.tsx index 09d43d0..bf3f438 100644 --- a/src/components/Modal/ModalEditName/ModalEditName.tsx +++ b/src/components/Modal/ModalEditName/ModalEditName.tsx @@ -13,7 +13,7 @@ import { DOMAIN } from '@/utils/consts' import { fetchNip05 } from '@/utils/helpers/helpers' import { Stack, Typography, useTheme } from '@mui/material' import { ChangeEvent, Fragment, useCallback, useEffect, useState } from 'react' -import { useParams, useSearchParams } from 'react-router-dom' +import { useParams } from 'react-router-dom' import { useDebounce } from 'use-debounce' import { StyledSettingContainer } from './styled' import { SectionTitle } from '@/shared/SectionTitle/SectionTitle' @@ -55,7 +55,7 @@ export const ModalEditName = () => { setIsAvailable(true) setIsChecking(false) } - }, [debouncedName]) + }, [debouncedName, npub]) useEffect(() => { checkIsUsernameAvailable() diff --git a/src/components/ReloadBadge/ReloadBadge.tsx b/src/components/ReloadBadge/ReloadBadge.tsx new file mode 100644 index 0000000..cbe858f --- /dev/null +++ b/src/components/ReloadBadge/ReloadBadge.tsx @@ -0,0 +1,33 @@ +import { FC } from 'react' +import { Collapse, Stack, Typography } from '@mui/material' +import { useSearchParams } from 'react-router-dom' +import { StyledAlert, StyledReloadButton } from './styled' + +const ReloadBadgeContent: FC = () => { + const [searchParams, setSearchParams] = useSearchParams() + + const handleReload = () => { + searchParams.delete('reload') + setSearchParams(searchParams) + window.location.reload() + } + return ( + + + + + New version available, please reload the page! + + Reload + + + + ) +} + +export const ReloadBadge = () => { + const [searchParams] = useSearchParams() + const open = searchParams.get('reload') === 'true' + + return <>{open && } +} diff --git a/src/components/ReloadBadge/styled.tsx b/src/components/ReloadBadge/styled.tsx new file mode 100644 index 0000000..1029efb --- /dev/null +++ b/src/components/ReloadBadge/styled.tsx @@ -0,0 +1,50 @@ +import { AppButtonProps, Button } from '@/shared/Button/Button' +import { Alert, AlertProps, styled } from '@mui/material' +import RefreshIcon from '@mui/icons-material/Refresh' + +export const StyledAlert = styled((props: AlertProps) => ( + +))(() => { + return { + height: 'auto', + marginTop: '0.5rem', + alignItems: 'center', + '& .message': { + flex: 1, + overflow: 'initial', + }, + '& .content': { + width: '100%', + alignItems: 'center', + gap: '1rem', + }, + '& .title': { + display: '-webkit-box', + WebkitLineClamp: 3, + WebkitBoxOrient: 'vertical', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + '@media screen and (max-width: 320px)': { + '& .title': { + fontSize: '14px', + WebkitLineClamp: 2, + }, + }, + } +}) + +export const StyledReloadButton = styled((props: AppButtonProps) =>