refactor switch statements

apps/app/src/components/InAppNotification/InAppNotificationElm.tsx

@@ -8,7 +8,7 @@ import { DropdownItem } from 'reactstrap';
 
 import { IInAppNotificationOpenable } from '~/client/interfaces/in-app-notification-openable';
 import { apiv3Post } from '~/client/util/apiv3-client';
-import { SupportedTargetModel, SupportedAction } from '~/interfaces/activity';
+import { SupportedTargetModel } from '~/interfaces/activity';
 import { IInAppNotification, InAppNotificationStatuses } from '~/interfaces/in-app-notification';
 
 // Change the display for each targetmodel
@@ -86,72 +86,6 @@ const InAppNotificationElm: FC<Props> = (props: Props) => {
 
   const actionUsers = getActionUsers();
 
-  const actionType: string = notification.action;
-  let actionMsg: string;
-  let actionIcon: string;
-
-  switch (actionType) {
-    case SupportedAction.ACTION_PAGE_LIKE:
-      actionMsg = 'liked';
-      actionIcon = 'icon-like';
-      break;
-    case SupportedAction.ACTION_PAGE_BOOKMARK:
-      actionMsg = 'bookmarked on';
-      actionIcon = 'icon-star';
-      break;
-    case SupportedAction.ACTION_PAGE_UPDATE:
-      actionMsg = 'updated on';
-      actionIcon = 'ti ti-agenda';
-      break;
-    case SupportedAction.ACTION_PAGE_RENAME:
-      actionMsg = 'renamed';
-      actionIcon = 'icon-action-redo';
-      break;
-    case SupportedAction.ACTION_PAGE_DUPLICATE:
-      actionMsg = 'duplicated';
-      actionIcon = 'icon-docs';
-      break;
-    case SupportedAction.ACTION_PAGE_DELETE:
-      actionMsg = 'deleted';
-      actionIcon = 'icon-trash';
-      break;
-    case SupportedAction.ACTION_PAGE_DELETE_COMPLETELY:
-      actionMsg = 'completely deleted';
-      actionIcon = 'icon-fire';
-      break;
-    case SupportedAction.ACTION_PAGE_REVERT:
-      actionMsg = 'reverted';
-      actionIcon = 'icon-action-undo';
-      break;
-    case SupportedAction.ACTION_PAGE_RECURSIVELY_RENAME:
-      actionMsg = 'renamed under';
-      actionIcon = 'icon-action-redo';
-      break;
-    case SupportedAction.ACTION_PAGE_RECURSIVELY_DELETE:
-      actionMsg = 'deleted under';
-      actionIcon = 'icon-trash';
-      break;
-    case SupportedAction.ACTION_PAGE_RECURSIVELY_DELETE_COMPLETELY:
-      actionMsg = 'deleted completely under';
-      actionIcon = 'icon-fire';
-      break;
-    case SupportedAction.ACTION_PAGE_RECURSIVELY_REVERT:
-      actionMsg = 'reverted under';
-      actionIcon = 'icon-action-undo';
-      break;
-    case 'COMMENT_CREATE':
-      actionMsg = 'commented on';
-      actionIcon = 'icon-bubble';
-      break;
-    case 'USER_REGISTRATION_APPROVAL_REQUEST':
-      actionMsg = 'requested registration approval';
-      actionIcon = 'icon-bubble';
-      break;
-    default:
-      actionMsg = '';
-      actionIcon = '';
-  }
-
   const isDropdownItem = props.type === 'dropdown-item';
 
   // determine tag
@@ -182,8 +116,6 @@ const InAppNotificationElm: FC<Props> = (props: Props) => {
           <UserModelNotification
             ref={notificationRef}
             notification={notification}
-            actionMsg={actionMsg}
-            actionIcon={actionIcon}
             actionUsers={actionUsers}
           />
         )}

apps/app/src/components/InAppNotification/PageNotification/PageModelNotification.tsx

@@ -5,8 +5,8 @@ import React, {
 import type { HasObjectId } from '@growi/core';
 import { useRouter } from 'next/router';
 
-import { SupportedAction } from '~/interfaces/activity';
 import type { IInAppNotificationOpenable } from '~/client/interfaces/in-app-notification-openable';
+import { SupportedAction } from '~/interfaces/activity';
 import type { IInAppNotification } from '~/interfaces/in-app-notification';
 
 import { ModelNotification } from './ModelNotification';
@@ -16,12 +16,12 @@ interface Props {
   actionUsers: string
 }
 
-type useActionMsgAndIconType = {
+export type ActionMsgAndIconType = {
   actionMsg: string
   actionIcon: string
 }
 
-const useActionMsgAndIcon = (notification: IInAppNotification & HasObjectId): useActionMsgAndIconType => {
+const useActionMsgAndIcon = (notification: IInAppNotification & HasObjectId): ActionMsgAndIconType => {
   const actionType: string = notification.action;
   let actionMsg: string;
   let actionIcon: string;
@@ -75,13 +75,18 @@ const useActionMsgAndIcon = (notification: IInAppNotification & HasObjectId): us
       actionMsg = 'reverted under';
       actionIcon = 'icon-action-undo';
       break;
+    case 'COMMENT_CREATE':
+      actionMsg = 'commented on';
+      actionIcon = 'icon-bubble';
+      break;
     default:
       actionMsg = '';
       actionIcon = '';
+  }
 
   return {
     actionMsg,
-    actionIcon
+    actionIcon,
   };
 };
 
@@ -91,9 +96,7 @@ const PageModelNotification: ForwardRefRenderFunction<IInAppNotificationOpenable
     notification, actionUsers,
   } = props;
 
-  const actionData = useActionMsgAndIcon(notification);
-  const actionMsg = actionData.actionMsg;
-  const actionIcon = actionData.actionIcon;
+  const { actionMsg, actionIcon } = useActionMsgAndIcon(notification);
 
   const router = useRouter();
 

apps/app/src/components/InAppNotification/PageNotification/UserModelNotification.tsx

@@ -9,17 +9,39 @@ import type { IInAppNotificationOpenable } from '~/client/interfaces/in-app-noti
 import type { IInAppNotification } from '~/interfaces/in-app-notification';
 
 import { ModelNotification } from './ModelNotification';
+import type { ActionMsgAndIconType } from './PageModelNotification';
+
+const useActionMsgAndIcon = (notification: IInAppNotification & HasObjectId): ActionMsgAndIconType => {
+  const actionType: string = notification.action;
+  let actionMsg: string;
+  let actionIcon: string;
+
+  switch (actionType) {
+    case 'USER_REGISTRATION_APPROVAL_REQUEST':
+      actionMsg = 'requested registration approval';
+      actionIcon = 'icon-bubble';
+      break;
+    default:
+      actionMsg = '';
+      actionIcon = '';
+  }
+
+  return {
+    actionMsg,
+    actionIcon,
+  };
+};
 
 const UserModelNotification: ForwardRefRenderFunction<IInAppNotificationOpenable, {
   notification: IInAppNotification & HasObjectId
-  actionMsg: string
-  actionIcon: string
   actionUsers: string
 }> = ({
-  notification, actionMsg, actionIcon, actionUsers,
+  notification, actionUsers,
 }, ref) => {
   const router = useRouter();
 
+  const { actionMsg, actionIcon } = useActionMsgAndIcon(notification);
+
   // publish open()
   const publishOpen = () => {
     router.push('/admin/users');