Add currentSettings to hook and implement the hook into the component

apps/app/src/client/components/Admin/MarkdownSetting/MimeTypeSettings.tsx → apps/app/src/client/components/Admin/MarkdownSetting/ContentDispositionSettings.tsx

@@ -1,18 +1,19 @@
 import React, { useState, useCallback } from 'react';
 
-import { useContentDisposition } from './useContentDisposition';
+import { useContentDisposition } from '../../../services/admin-content-disposition';
 
-interface ContentDispositionSettings {
-  inlineMimeTypes: string[];
-  attachmentMimeTypes: string[];
-}
 
 /**
  * Helper function to ensure the mime type is normalized / clean before use.
  */
 const normalizeMimeType = (mimeType: string): string => mimeType.trim().toLowerCase();
 
-const ContentDispositionSettingsManager: React.FC = () => {
+// REMINDER: Change so it sets the settings using an "Update" button, like the other settings do.
+// Add remove button and reset button.
+// Fix error handling, currently just logging.
+// Make sure that the component is in the correct place (markdown settings?).
+
+const ContentDispositionSettings: React.FC = () => {
 
   const {
     currentSettings,
@@ -51,9 +52,8 @@ const ContentDispositionSettingsManager: React.FC = () => {
     }
   }, [currentInput, setAttachment]);
 
-
-  // REMINDER: define types
-  const { inlineMimeTypes, attachmentMimeTypes } = currentSettings;
+  const inlineMimeTypes = currentSettings?.inlineMimeTypes ?? [];
+  const attachmentMimeTypes = currentSettings?.attachmentMimeTypes ?? [];
   const renderInlineMimeTypes = inlineMimeTypes || [];
   const renderAttachmentMimeTypes = attachmentMimeTypes || [];
 
@@ -140,4 +140,4 @@ const ContentDispositionSettingsManager: React.FC = () => {
   );
 };
 
-export default ContentDispositionSettingsManager;
+export default ContentDispositionSettings;

apps/app/src/client/components/Admin/MarkdownSetting/MarkDownSettingContents.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, type JSX } from 'react';
 import { useTranslation } from 'next-i18next';
 import { Card, CardBody } from 'reactstrap';
 
+
 import AdminMarkDownContainer from '~/client/services/AdminMarkDownContainer';
 import { toastError } from '~/client/util/toastr';
 import { toArrayIfNot } from '~/utils/array-utils';
@@ -10,6 +11,7 @@ import loggerFactory from '~/utils/logger';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
 
+import ContentDispositionSettings from './ContentDispositionSettings';
 import IndentForm from './IndentForm';
 import LineBreakForm from './LineBreakForm';
 import XssForm from './XssForm';
@@ -61,6 +63,8 @@ const MarkDownSettingContents = React.memo((props: Props): JSX.Element => {
         <CardBody className="px-0 py-2">{ t('markdown_settings.xss_desc') }</CardBody>
       </Card>
       <XssForm />
+
+      <ContentDispositionSettings />
     </div>
   );
 });

apps/app/src/client/services/admin-content-disposition.ts

@@ -49,6 +49,7 @@ export const useSWRMUTxContentDispositionSettings = (): SWRMutationResponse<
 };
 
 export const useContentDisposition = (): {
+  currentSettings: ContentDispositionSettings | undefined;
   setInline: (mimeType: string) => Promise<void>;
   setAttachment: (mimeType: string) => Promise<void>;
 } => {
@@ -59,6 +60,7 @@ export const useContentDisposition = (): {
   const attachmentMimeTypesStr = data?.attachmentMimeTypes?.join(',');
   // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally using array contents instead of data object reference
   const memoizedData = useMemo(() => data, [inlineMimeTypesStr, attachmentMimeTypesStr]);
+  const currentSettings = memoizedData;
 
   const setInline = useCallback(async(mimeType: string): Promise<void> => {
     if (!memoizedData) return;
@@ -97,6 +99,7 @@ export const useContentDisposition = (): {
   }, [memoizedData, trigger, mutate]);
 
   return {
+    currentSettings,
     setInline,
     setAttachment,
   };