Code improvement

https://youtrack.weseek.co.jp/issue/GW-7759
- Add method to retrieve data
- Remove customizedLogoSrc from CustomizeLogoSrc
- Add currentBrandLogoSrc variable to handle upload logo form
- Adjust implementation of currentBrandLogoSrc
- Remove isDefaultLogo from config
- Adjust customizedLogoSrc in GrowiNavbar component,
- Adjust method for upload, delete logo and update customize logo settings

packages/app/src/components/Admin/Customize/CustomizeLogoSetting.tsx

@@ -17,26 +17,28 @@ const CustomizeLogoSetting = (): JSX.Element => {
   const { t } = useTranslation();
 
   const [uploadLogoSrc, setUploadLogoSrc] = useState<ArrayBuffer | string | null>(null);
-  const [customizedLogoSrc, setCustomizedLogoSrc] = useState<string | null>(null);
   const [isImageCropModalShow, setIsImageCropModalShow] = useState<boolean>(false);
   const [isDefaultLogo, setIsDefaultLogo] = useState<boolean>(true);
   const [retrieveError, setRetrieveError] = useState<string | null>(null);
+  const [currentBrandLogoSrc, setCurrentBrandLogoSrc] = useState< string | null >(null);
 
-  useEffect(() => {
-    (async() => {
-      try {
-        const response = await apiv3Get('/customize-setting/customize-logo');
-        const { isDefaultLogo, customizedLogoSrc } = response.data;
-        setIsDefaultLogo(isDefaultLogo);
-        setCustomizedLogoSrc(customizedLogoSrc);
-      }
-      catch (err) {
-        setRetrieveError(err);
-        throw new Error('Failed to fetch data');
-      }
-    })();
+  const retrieveData = useCallback(async() => {
+    try {
+      const response = await apiv3Get('/customize-setting/customize-logo');
+      const { isDefaultLogo, currentBrandLogoSrc } = response.data;
+      setIsDefaultLogo(isDefaultLogo);
+      setCurrentBrandLogoSrc(currentBrandLogoSrc);
+    }
+    catch (err) {
+      setRetrieveError(err);
+      throw new Error('Failed to fetch data');
+    }
   }, []);
 
+  useEffect(() => {
+    retrieveData();
+  }, [retrieveData]);
+
   const onSelectFile = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files != null && e.target.files.length > 0) {
       const reader = new FileReader();
@@ -50,23 +52,22 @@ const CustomizeLogoSetting = (): JSX.Element => {
     try {
       const response = await apiv3Put('/customize-setting/customize-logo', {
         isDefaultLogo,
-        customizedLogoSrc,
+        currentBrandLogoSrc,
       });
       const { customizedParams } = response.data;
-      setIsDefaultLogo(customizedParams.isDefaultLogo);
-      setCustomizedLogoSrc(customizedParams.customizedLogoSrc);
+      setCurrentBrandLogoSrc(customizedParams.currentBrandLogoSrc);
       toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.custom_logo') }));
     }
     catch (err) {
       toastError(err);
     }
-  }, [t, isDefaultLogo, customizedLogoSrc]);
+  }, [t, isDefaultLogo, currentBrandLogoSrc]);
 
 
   const onClickDeleteBtn = useCallback(async() => {
     try {
       await apiv3Delete('/customize-setting/delete-brand-logo');
-      setCustomizedLogoSrc(null);
+      setCurrentBrandLogoSrc(null);
       toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.current_logo') }));
     }
     catch (err) {
@@ -81,7 +82,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
       const formData = new FormData();
       formData.append('file', croppedImage);
       const { data } = await apiv3PostForm('/customize-setting/upload-brand-logo', formData);
-      setCustomizedLogoSrc(data.attachment.filePathProxied);
+      setCurrentBrandLogoSrc(data.attachment.filePathProxied);
       toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.current_logo') }));
     }
     catch (err) {
@@ -141,8 +142,8 @@ const CustomizeLogoSetting = (): JSX.Element => {
                     { t('admin:customize_setting.current_logo') }
                   </label>
                   <div className="col-sm-8 col-12">
-                    <p><img src={customizedLogoSrc || DEFAULT_LOGO} className="picture picture-lg " id="settingBrandLogo" width="64" /></p>
-                    {(customizedLogoSrc != null) && (
+                    <p><img src={currentBrandLogoSrc || DEFAULT_LOGO} className="picture picture-lg " id="settingBrandLogo" width="64" /></p>
+                    {(currentBrandLogoSrc != null) && (
                       <button type="button" className="btn btn-danger" onClick={onClickDeleteBtn}>
                         { t('admin:customize_setting.delete_logo') }
                       </button>

packages/app/src/components/Navbar/GrowiNavbar.tsx

@@ -122,17 +122,17 @@ const GrowiNavbar = (props) => {
 
   const { appContainer } = props;
   const {
-    crowi, isSearchServiceConfigured, isDefaultLogo, customizedLogoSrc,
+    crowi, isSearchServiceConfigured, customizedLogoSrc,
   } = appContainer.config;
   const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
   const { data: isSearchPage } = useIsSearchPage();
-  const logoSrc = (!isDefaultLogo && customizedLogoSrc !== null) ? customizedLogoSrc : null;
+
   return (
     <>
       {/* Brand Logo  */}
       <div className="navbar-brand mr-0">
         <a className="grw-logo d-block" href="/">
-          <GrowiNavbarLogo logoSrc={...logoSrc} />
+          <GrowiNavbarLogo logoSrc={...customizedLogoSrc} />
         </a>
       </div>
 

packages/app/src/server/models/config.ts

@@ -245,7 +245,6 @@ schema.statics.getLocalconfig = function(crowi) {
     globalLang: crowi.configManager.getConfig('crowi', 'app:globalLang'),
     pageLimitationL: crowi.configManager.getConfig('crowi', 'customize:showPageLimitationL'),
     pageLimitationXL: crowi.configManager.getConfig('crowi', 'customize:showPageLimitationXL'),
-    isDefaultLogo: crowi.configManager.getConfig('crowi', 'customize:isDefaultLogo'),
     customizedLogoSrc: crowi.configManager.getConfig('crowi', 'customize:customizedLogoSrc'),
     auditLogEnabled: crowi.configManager.getConfig('crowi', 'app:auditLogEnabled'),
     activityExpirationSeconds: crowi.configManager.getConfig('crowi', 'app:activityExpirationSeconds'),

packages/app/src/server/routes/apiv3/customize-setting.js

@@ -161,7 +161,7 @@ module.exports = (crowi) => {
     ],
     logo: [
       body('isDefaultLogo').isBoolean().optional({ nullable: true }),
-      body('customizedLogoSrc').isString().optional({ nullable: true }),
+      body('currentBrandLogoSrc').isString().optional({ nullable: true }),
     ],
   };
 
@@ -692,25 +692,26 @@ module.exports = (crowi) => {
   router.get('/customize-logo', loginRequiredStrictly, adminRequired, async(req, res) => {
     const defaultLogoConfig = await crowi.configManager.getConfig('crowi', 'customize:isDefaultLogo');
     const isDefaultLogo = defaultLogoConfig === undefined || defaultLogoConfig;
-    const customizedLogoSrc = await crowi.configManager.getConfig('crowi', 'customize:customizedLogoSrc');
-    return res.apiv3({ isDefaultLogo, customizedLogoSrc });
+    const currentBrandLogoSrc = await crowi.configManager.getConfig('crowi', 'customize:currentBrandLogoSrc');
+    return res.apiv3({ isDefaultLogo, currentBrandLogoSrc });
   });
 
   router.put('/customize-logo', apiLimiter, loginRequiredStrictly, adminRequired, csrf, validator.logo, apiV3FormValidator, async(req, res) => {
 
     const {
-      isDefaultLogo, customizedLogoSrc,
+      isDefaultLogo, currentBrandLogoSrc,
     } = req.body;
 
     const requestParams = {
       'customize:isDefaultLogo': isDefaultLogo,
-      'customize:customizedLogoSrc': customizedLogoSrc,
+      'customize:currentBrandLogoSrc': currentBrandLogoSrc,
+      'customize:customizedLogoSrc': isDefaultLogo ? null : currentBrandLogoSrc,
     };
     try {
       await crowi.configManager.updateConfigsInTheSameNamespace('crowi', requestParams);
       const customizedParams = {
         isDefaultLogo: await crowi.configManager.getConfig('crowi', 'customize:isDefaultLogo'),
-        customizedLogoSrc: await crowi.configManager.getConfig('crowi', 'customize:customizedLogoSrc'),
+        currentBrandLogoSrc: await crowi.configManager.getConfig('crowi', 'customize:currentBrandLogoSrc'),
       };
       return res.apiv3({ customizedParams });
     }
@@ -749,8 +750,10 @@ module.exports = (crowi) => {
       let attachment;
       try {
         attachment = await attachmentService.createAttachment(file, req.user, null, AttachmentType.BRAND_LOGO);
+        const isDefaultLogo = await crowi.configManager.getConfig('crowi', 'customize:isDefaultLogo');
         const attachmentConfigParams = {
-          'customize:customizedLogoSrc': attachment.filePathProxied,
+          'customize:currentBrandLogoSrc': attachment.filePathProxied,
+          'customize:customizedLogoSrc': isDefaultLogo ? null : attachment.filePathProxied,
         };
 
         await crowi.configManager.updateConfigsInTheSameNamespace('crowi', attachmentConfigParams);
@@ -774,10 +777,14 @@ module.exports = (crowi) => {
 
       try {
         await attachmentService.removeAllAttachments(attachments);
+        const isDefaultLogo = await crowi.configManager.getConfig('crowi', 'customize:isDefaultLogo');
         // update attachmentId immediately
         const attachmentConfigParams = {
-          'customize:customizedLogoSrc': null,
+          'customize:currentBrandLogoSrc': null,
         };
+        if (!isDefaultLogo) {
+          attachmentConfigParams['customize:customizedLogoSrc'] = null;
+        }
         await crowi.configManager.updateConfigsInTheSameNamespace('crowi', attachmentConfigParams);
       }
       catch (err) {