connecting searchable setting

net/web/src/session/identity/Identity.jsx

@@ -1,13 +1,24 @@
-import { Dropdown, Menu, Tooltip } from 'antd';
+import { Modal, Dropdown, Menu, Tooltip } from 'antd';
 import { Logo } from 'logo/Logo';
 import { IdentityWrapper, ErrorNotice, InfoNotice } from './Identity.styled';
 import { useIdentity } from './useIdentity.hook';
-import { InfoCircleOutlined, ExclamationCircleOutlined, DownOutlined } from '@ant-design/icons';
+import { LogoutOutlined, InfoCircleOutlined, ExclamationCircleOutlined, DownOutlined } from '@ant-design/icons';
 
 export function Identity({ openAccount, openCards, cardUpdated }) {
 
   const { state, actions } = useIdentity();
 
+  const logout = () => {
+    Modal.confirm({
+      title: 'Are you sure you want to logout?',
+      icon: <LogoutOutlined />,
+      onOk() {
+        actions.logout();
+      },
+      onCancel() {},
+    });
+  }
+
   const menu = (
     <Menu>
       <Menu.Item key="0">
@@ -17,7 +28,7 @@ export function Identity({ openAccount, openCards, cardUpdated }) {
         <div onClick={openCards}>Contacts</div>
       </Menu.Item>
       <Menu.Item key="2">
-        <div onClick={actions.logout}>Logout</div>
+        <div onClick={logout}>Logout</div>
       </Menu.Item>
     </Menu>
   );

net/web/src/session/profile/Profile.jsx

@@ -33,6 +33,30 @@ export function Profile({ closeProfile }) {
     }
   }
 
+  const saveSearchable = async (e) => {
+    try {
+      await actions.setSearchable(e.target.checked);
+    }
+    catch (err) {
+      console.log(err);
+      Modal.error({
+        title: 'Update Registry Failed',
+        content: 'Please try again.',
+      });
+    }
+  };
+
+  const logout = () => {
+    Modal.confirm({
+      title: 'Are you sure you want to logout?',
+      icon: <LogoutOutlined />,
+      onOk() {
+        actions.logout();
+      },
+      onCancel() {},
+    });
+  }
+
   const Image = (
     <div class="logo" onClick={actions.setEditProfileImage}>
       <Logo url={state.url} width={'100%'} radius={8} />
@@ -103,13 +127,13 @@ export function Profile({ closeProfile }) {
           </div>
           <div class="section">Account Settings</div>
           <div class="controls">
-            <Checkbox>Visible in Registry</Checkbox>
+            <Checkbox checked={state.searchable} onChange={(e) => saveSearchable(e)}>Visible in Registry</Checkbox>
             <div class="link">
               <LockOutlined />
               <div class="label">Change Login</div>
             </div>
             { state.display === 'small' && (
-              <div class="logout">
+              <div class="logout" onClick={logout}>
                 <LogoutOutlined />
                 <div class="label">Logout</div>
               </div>

net/web/src/session/profile/useProfile.hook.js

@@ -1,5 +1,6 @@
 import { useState, useEffect, useContext } from 'react';
 import { ProfileContext } from 'context/ProfileContext';
+import { AccountContext } from 'context/AccountContext';
 import { AppContext } from 'context/AppContext';
 import { ViewportContext } from 'context/ViewportContext';
 import avatar from 'images/avatar.png';
@@ -12,13 +13,15 @@ export function useProfile() {
     editImage: null,
     crop: { w: 0, h: 0, x: 0, y: 0 },
     busy: false,
+    searchable: null,
   });
 
   const IMAGE_DIM = 256;
   const app = useContext(AppContext);
   const viewport = useContext(ViewportContext);
   const profile = useContext(ProfileContext);
-  
+  const account = useContext(AccountContext);  
+
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
   }
@@ -36,6 +39,12 @@ export function useProfile() {
     updateState({ display: viewport.state.display });
   }, [viewport]);
 
+  useEffect(() => {
+    if (account?.state?.status) {
+      updateState({ searchable: account.state.status.searchable });
+    }
+  }, [account]);
+
   const actions = {
     logout: app.actions.logout,
     setEditImage: (value) => {
@@ -51,7 +60,6 @@ export function useProfile() {
       updateState({ crop: { w, h, x, y }});
     },
     setProfileImage: async () => {
-console.log("CHECK1");
       if(!state.busy) {
         updateState({ busy: true });
         try {
@@ -74,9 +82,7 @@ console.log("CHECK1");
           };
           let dataUrl = await processImg();
           let data = dataUrl.split(",")[1];
-console.log("CHECK2");
           await profile.actions.setProfileImage(data);
-console.log("CHECK3");
           updateState({ busy: false });
         }
         catch (err) {
@@ -89,6 +95,20 @@ console.log("CHECK3");
         throw new Error('save in progress');
       }
     },
+    setSearchable: async (flag) => {
+      if (!state.busy) {
+        try {
+          updateState({ busy: true });
+          await account.actions.setSearchable(flag);
+          updateState({ busy: false });
+        }
+        catch (err) {
+          console.log(err);
+          throw new Error('failed to set searchable');
+          updateState({ busy: false });
+        }
+      }
+    },
   };
 
   return { state, actions };