SWR implementation with modal open/close state

apps/app/src/components/PageControls/SearchButton.tsx

@@ -1,10 +1,25 @@
-import React from 'react';
+import React, { useCallback } from 'react';
+
+import { useSearchModal } from '~/stores/modal';
 
 import styles from './SearchButton.module.scss';
 
+
 const SearchButton = (): JSX.Element => {
+
+  const { open: openSearchModal } = useSearchModal();
+
+  const searchButtonClickHandler = useCallback(() => {
+    openSearchModal();
+  }, [openSearchModal]);
+
+
   return (
-    <button type="button" className={`me-3 btn btn-search ${styles['btn-search']}`}>
+    <button
+      type="button"
+      className={`me-3 btn btn-search ${styles['btn-search']}`}
+      onClick={searchButtonClickHandler}
+    >
       <span className="material-symbols-outlined">search</span>
     </button>
   );

apps/app/src/stores/modal.tsx

@@ -821,3 +821,23 @@ export const useTagEditModal = (): SWRResponse<TagEditModalStatus, Error> & TagE
     close,
   };
 };
+
+
+type SearchModalStatus = {
+  isOpened: boolean,
+}
+
+type SearchModalUtils = {
+  open(): void
+  close(): void
+}
+export const useSearchModal = (status?: SearchModalStatus): SWRResponse<SearchModalStatus, Error> & SearchModalUtils => {
+  const initialStatus = { isOpened: false };
+  const swrResponse = useStaticSWR<SearchModalStatus, Error>('SearchModal', status, { fallbackData: initialStatus });
+
+  return {
+    ...swrResponse,
+    open: () => swrResponse.mutate({ isOpened: true }),
+    close: () => swrResponse.mutate({ isOpened: false }),
+  };
+};