feat: refresh passkeys on change
This commit is contained in:
parent
66234bd18a
commit
3c0eb1c8f1
|
@ -16,7 +16,8 @@ interface IProps {
|
|||
}
|
||||
|
||||
const ManagePasskeyDrawer = (props: IProps) => {
|
||||
const { setShowPasskeyDrawer } = useContext(PasskeysContext);
|
||||
const { setShowPasskeyDrawer, refreshPasskeys } =
|
||||
useContext(PasskeysContext);
|
||||
|
||||
const [showDeletePasskeyModal, setShowDeletePasskeyModal] = useState(false);
|
||||
const [showRenamePasskeyModal, setShowRenamePasskeyModal] = useState(false);
|
||||
|
@ -62,12 +63,14 @@ const ManagePasskeyDrawer = (props: IProps) => {
|
|||
open={showDeletePasskeyModal}
|
||||
onClose={() => {
|
||||
setShowDeletePasskeyModal(false);
|
||||
refreshPasskeys();
|
||||
}}
|
||||
/>
|
||||
<RenamePasskeyModal
|
||||
open={showRenamePasskeyModal}
|
||||
onClose={() => {
|
||||
setShowRenamePasskeyModal(false);
|
||||
refreshPasskeys();
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
|
|
|
@ -1,25 +1,16 @@
|
|||
import { MenuItemGroup } from '@ente/shared/components/Menu/MenuItemGroup';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { getPasskeys } from 'services/passkeysService';
|
||||
import { Passkey } from 'types/passkey';
|
||||
import PasskeyListItem from './PasskeyListItem';
|
||||
|
||||
const PasskeyComponent = () => {
|
||||
const [passkeys, setPasskeys] = useState<Passkey[]>([]);
|
||||
|
||||
const init = async () => {
|
||||
const data = await getPasskeys();
|
||||
setPasskeys(data.passkeys || []);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
init();
|
||||
}, []);
|
||||
interface IProps {
|
||||
passkeys: Passkey[];
|
||||
}
|
||||
|
||||
const PasskeyComponent = (props: IProps) => {
|
||||
return (
|
||||
<>
|
||||
<MenuItemGroup>
|
||||
{passkeys.map((passkey) => (
|
||||
{props.passkeys.map((passkey) => (
|
||||
<PasskeyListItem key={passkey.id} passkey={passkey} />
|
||||
))}
|
||||
</MenuItemGroup>
|
||||
|
|
|
@ -4,10 +4,17 @@ import { Box } from '@mui/material';
|
|||
import {
|
||||
finishPasskeyRegistration,
|
||||
getPasskeyRegistrationOptions,
|
||||
getPasskeys,
|
||||
} from '../../services/passkeysService';
|
||||
import { logError } from '@ente/shared/sentry';
|
||||
import _sodium from 'libsodium-wrappers';
|
||||
import { Dispatch, SetStateAction, createContext, useState } from 'react';
|
||||
import {
|
||||
Dispatch,
|
||||
SetStateAction,
|
||||
createContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { Passkey } from 'types/passkey';
|
||||
import PasskeysList from './PasskeysList';
|
||||
import ManagePasskeyDrawer from './ManagePasskeyDrawer';
|
||||
|
@ -18,6 +25,7 @@ export const PasskeysContext = createContext(
|
|||
selectedPasskey: Passkey | null;
|
||||
setSelectedPasskey: Dispatch<SetStateAction<Passkey | null>>;
|
||||
setShowPasskeyDrawer: Dispatch<SetStateAction<boolean>>;
|
||||
refreshPasskeys: () => void;
|
||||
}
|
||||
);
|
||||
|
||||
|
@ -28,6 +36,17 @@ const Passkeys = () => {
|
|||
|
||||
const [showPasskeyDrawer, setShowPasskeyDrawer] = useState(false);
|
||||
|
||||
const [passkeys, setPasskeys] = useState<Passkey[]>([]);
|
||||
|
||||
const init = async () => {
|
||||
const data = await getPasskeys();
|
||||
setPasskeys(data.passkeys || []);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
init();
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (inputValue: string) => {
|
||||
const response: {
|
||||
options: {
|
||||
|
@ -72,6 +91,7 @@ const Passkeys = () => {
|
|||
selectedPasskey,
|
||||
setSelectedPasskey,
|
||||
setShowPasskeyDrawer,
|
||||
refreshPasskeys: init,
|
||||
}}>
|
||||
<CenteredFlex>
|
||||
<Box>
|
||||
|
@ -84,7 +104,7 @@ const Passkeys = () => {
|
|||
callback={handleSubmit}
|
||||
/>
|
||||
<Box>
|
||||
<PasskeysList />
|
||||
<PasskeysList passkeys={passkeys} />
|
||||
</Box>
|
||||
</Box>
|
||||
</CenteredFlex>
|
||||
|
|
Loading…
Reference in a new issue