create swr hooks to fetch data

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

@@ -3,6 +3,7 @@ import React from 'react';
 import { useTranslation } from 'next-i18next';
 
 import { useIsReadOnlyUser } from '~/stores-universal/context';
+import { useSecuritySettings } from '~/stores/security-setting';
 
 import { NotAvailable } from './NotAvailable';
 
@@ -27,15 +28,24 @@ export const NotAvailableForReadOnlyUser: React.FC<{
 });
 NotAvailableForReadOnlyUser.displayName = 'NotAvailableForReadOnlyUser';
 
-
-export const NotAvailableWhenReadOnlyUserNotAllowedToComment: React.FC<{
+export const NotAvailableIfReadOnlyUserNotAllowedToComment: React.FC<{
   children: JSX.Element
 }> = React.memo(({ children }) => {
   const { t } = useTranslation();
   const { data: isReadOnlyUser } = useIsReadOnlyUser();
 
-  const isDisabled = !!isReadOnlyUser;
-  const title = t('Not available for read only user');
+  const { data: securitySettings } = useSecuritySettings();
+
+  if (securitySettings == null) {
+    return;
+  }
+
+  const isRomUserAllowedToComment = securitySettings.generalSetting.isRomUserAllowedToComment;
+
+  console.log(isRomUserAllowedToComment);
+
+  const isDisabled = !!isReadOnlyUser && !isRomUserAllowedToComment;
+  const title = t('Not available for read only user if not allowed to comment');
 
   return (
     <NotAvailable
@@ -47,3 +57,4 @@ export const NotAvailableWhenReadOnlyUserNotAllowedToComment: React.FC<{
     </NotAvailable>
   );
 });
+NotAvailableIfReadOnlyUserNotAllowedToComment.displayName = 'NotAvailableIfReadOnlyUserNotAllowedToComment';

apps/app/src/stores/security-setting.ts

@@ -0,0 +1,21 @@
+import type { SWRResponse } from 'swr';
+import useSWRImmutable from 'swr/immutable';
+
+import { apiv3Get } from '~/client/util/apiv3-client';
+
+
+// const response = await apiv3Get('/security-setting/');
+// const { generalSetting, shareLinkSetting, generalAuth } = response.data.securityParams;
+
+export const useSecuritySettings = (): SWRResponse => {
+  const swrResponse = useSWRImmutable(
+    '/security-setting/',
+    (endpoint) => {
+      return apiv3Get(endpoint).then(response => response.data.securityParams);
+    },
+  );
+
+  return {
+    ...swrResponse,
+  };
+};