feat: refresh passkeys on change

apps/accounts/src/pages/passkeys/ManagePasskeyDrawer.tsx

@@ -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();
                 }}
             />
         </>

apps/accounts/src/pages/passkeys/PasskeysList.tsx

@@ -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>

apps/accounts/src/pages/passkeys/index.tsx

@@ -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>