refactor

apps/app/src/client/components/NotAvailableForReadOnlyUser.tsx

@@ -1,52 +1,38 @@
 import React, { type JSX } from 'react';
 
+import { useAtomValue } from 'jotai';
 import { useTranslation } from 'next-i18next';
 
 import { useIsReadOnlyUser } from '~/states/context';
-import { useIsRomUserAllowedToComment } from '~/states/server-configurations';
+import { isRomUserAllowedToCommentAtom } from '~/states/server-configurations';
 
 import { NotAvailable } from './NotAvailable';
 
-export const NotAvailableForReadOnlyUser: React.FC<{
-  children: JSX.Element
-}> = React.memo(({ children }) => {
+// eslint-disable-next-line react/prop-types
+export const NotAvailableForReadOnlyUser: React.FC<{ children: JSX.Element }> = ({ children }) => {
   const { t } = useTranslation();
-  const [isReadOnlyUser] = useIsReadOnlyUser();
-
+  const isReadOnlyUser = useIsReadOnlyUser();
   const isDisabled = !!isReadOnlyUser;
   const title = t('Not available for read only user');
-
   return (
-    <NotAvailable
-      isDisabled={isDisabled}
-      title={title}
-      classNamePrefix="grw-not-available-for-read-only-user"
-    >
+    <NotAvailable isDisabled={isDisabled} title={title} classNamePrefix="grw-not-available-for-read-only-user">
       {children}
     </NotAvailable>
   );
-});
+};
 NotAvailableForReadOnlyUser.displayName = 'NotAvailableForReadOnlyUser';
 
-export const NotAvailableIfReadOnlyUserNotAllowedToComment: React.FC<{
-  children: JSX.Element
-}> = React.memo(({ children }) => {
+// eslint-disable-next-line react/prop-types
+export const NotAvailableIfReadOnlyUserNotAllowedToComment: React.FC<{ children: JSX.Element }> = ({ children }) => {
   const { t } = useTranslation();
-  const [isReadOnlyUser] = useIsReadOnlyUser();
-
-  const [isRomUserAllowedToComment] = useIsRomUserAllowedToComment();
-
+  const isReadOnlyUser = useIsReadOnlyUser();
+  const isRomUserAllowedToComment = useAtomValue(isRomUserAllowedToCommentAtom);
   const isDisabled = !!isReadOnlyUser && !isRomUserAllowedToComment;
   const title = t('page_comment.comment_management_is_not_allowed');
-
   return (
-    <NotAvailable
-      isDisabled={isDisabled}
-      title={title}
-      classNamePrefix="grw-not-available-for-read-only-user"
-    >
+    <NotAvailable isDisabled={isDisabled} title={title} classNamePrefix="grw-not-available-for-read-only-user">
       {children}
     </NotAvailable>
   );
-});
+};
 NotAvailableIfReadOnlyUserNotAllowedToComment.displayName = 'NotAvailableIfReadOnlyUserNotAllowedToComment';

apps/app/src/client/components/PageAccessoriesModal/PageAccessoriesModal.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useState, type JSX } from 'react';
 
+import { useAtomValue } from 'jotai';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import {
@@ -7,7 +8,7 @@ import {
 } from 'reactstrap';
 
 import { useIsGuestUser, useIsReadOnlyUser, useIsSharedUser } from '~/states/context';
-import { useDisableLinkSharing } from '~/states/server-configurations';
+import { disableLinkSharingAtom } from '~/states/server-configurations';
 import { usePageAccessoriesModal, PageAccessoriesModalContents } from '~/stores/modal';
 import { useIsDeviceLargerThanLg } from '~/stores/ui';
 
@@ -31,10 +32,10 @@ export const PageAccessoriesModal = (): JSX.Element => {
 
   const [isWindowExpanded, setIsWindowExpanded] = useState(false);
 
-  const [isSharedUser] = useIsSharedUser();
-  const [isGuestUser] = useIsGuestUser();
-  const [isReadOnlyUser] = useIsReadOnlyUser();
-  const [isLinkSharingDisabled] = useDisableLinkSharing();
+  const isSharedUser = useIsSharedUser();
+  const isGuestUser = useIsGuestUser();
+  const isReadOnlyUser = useIsReadOnlyUser();
+  const isLinkSharingDisabled = useAtomValue(disableLinkSharingAtom);
   const { data: isDeviceLargerThanLg } = useIsDeviceLargerThanLg();
 
   const { data: status, close, selectContents } = usePageAccessoriesModal();