impl onOpened

packages/app/src/components/PageAccessoriesModal.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import {
   Modal, ModalBody, ModalHeader,
@@ -42,13 +42,20 @@ const PageAccessoriesModal = (props: Props): JSX.Element => {
   const { data: isSharedUser } = useIsSharedUser();
   const { data: isGuestUser } = useIsGuestUser();
 
-  // const { data: status, close } = usePageAccessoriesModal({
-  //   isOpened: false,
-  //   onOpened: (activatedContents) => {
-  //     setActiveTab(activatedContents);
-  //   },
-  // });
-  const { data: status, close } = usePageAccessoriesModal();
+  const { data: status, mutate, close } = usePageAccessoriesModal();
+
+  // add event handler when opened
+  useEffect(() => {
+    if (status == null || status.onOpened != null) {
+      return;
+    }
+    mutate({
+      ...status,
+      onOpened: (activatedContents) => {
+        setActiveTab(activatedContents);
+      },
+    }, false);
+  }, [mutate, status]);
 
   const navTabMapping = useMemo(() => {
     return {

packages/app/src/stores/ui.tsx

@@ -457,7 +457,7 @@ export type PageAccessoriesModalContents = typeof PageAccessoriesModalContents[k
 
 type PageAccessoriesModalStatus = {
   isOpened: boolean,
-  // onOpened?: (initialActivatedContents: PageAccessoriesModalContents) => void,
+  onOpened?: (initialActivatedContents: PageAccessoriesModalContents) => void,
 }
 
 type PageAccessoriesModalUtils = {
@@ -465,12 +465,10 @@ type PageAccessoriesModalUtils = {
   close(): void
 }
 
-export const usePageAccessoriesModal = (
-    status?: PageAccessoriesModalStatus,
-): SWRResponse<PageAccessoriesModalStatus, Error> & PageAccessoriesModalUtils => {
+export const usePageAccessoriesModal = (): SWRResponse<PageAccessoriesModalStatus, Error> & PageAccessoriesModalUtils => {
 
   const initialStatus = { isOpened: false };
-  const swrResponse = useStaticSWR<PageAccessoriesModalStatus, Error>('pageAccessoriesModalStatus', status, { fallbackData: initialStatus });
+  const swrResponse = useStaticSWR<PageAccessoriesModalStatus, Error>('pageAccessoriesModalStatus', undefined, { fallbackData: initialStatus });
 
   return {
     ...swrResponse,
@@ -480,9 +478,9 @@ export const usePageAccessoriesModal = (
       }
       swrResponse.mutate({ isOpened: true });
 
-      // if (swrResponse.data.onOpened != null) {
-      //   swrResponse.data.onOpened(activatedContents);
-      // }
+      if (swrResponse.data.onOpened != null) {
+        swrResponse.data.onOpened(activatedContents);
+      }
     },
     close: () => {
       if (swrResponse.data == null) {