Merge pull request #423 from doganbros/Channel-and-zone-settings,-lea…

…ve-actions-triggers-save-button-to-active-state

Leave actions activating the save button on settings page is fixed

src/pages/Private/settings/ChannelSettings.tsx

@@ -42,6 +42,27 @@ const ChannelSettings: () => Menu = () => {
     id: '',
     public: userChannels?.data[0]?.channel?.public,
   });
+  const [isFormClicked, setIsFormClicked] = useState(false);
+
+  const handleLeaveChannelForm = () => {
+    if (selectedUserChannelIndex === 0) {
+      setSelectedUserChannelIndex(0);
+      return setChannelPayload({
+        name: userChannels?.data[1]?.channel?.name || '',
+        description: userChannels?.data[1]?.channel?.description || null,
+        id: userChannels?.data[1]?.channel?.id || '',
+        public: userChannels?.data[1]?.channel?.public,
+      });
+    }
+
+    setSelectedUserChannelIndex(0);
+    return setChannelPayload({
+      name: userChannels?.data[0]?.channel?.name || '',
+      description: userChannels?.data[0]?.channel?.description || null,
+      id: userChannels?.data[0]?.channel?.id || '',
+      public: userChannels?.data[0]?.channel?.public,
+    });
+  };
 
   const [isDropOpen, setIsDropOpen] = useState(false);
   const { t } = useTranslation();
@@ -55,10 +76,16 @@ const ChannelSettings: () => Menu = () => {
 
   const showLeaveButton = user?.id !== selectedChannel?.createdBy?.id;
 
-  const isFormInitialState =
-    channelPayload.name === selectedChannel?.name &&
-    channelPayload.description === selectedChannel?.description &&
-    channelPayload.public === selectedChannel?.public;
+  const isFormInitialState = () => {
+    if (isFormClicked) {
+      return (
+        channelPayload.name === selectedChannel?.name &&
+        channelPayload.description === selectedChannel?.description &&
+        channelPayload.public === selectedChannel?.public
+      );
+    }
+    return true;
+  };
 
   useEffect(() => {
     dispatch(getUserChannelsAllAction());
@@ -100,7 +127,7 @@ const ChannelSettings: () => Menu = () => {
     url: 'channel',
     saveButton: (
       <Button
-        disabled={isFormInitialState}
+        disabled={isFormInitialState()}
         onClick={() => {
           if (!(channelId === null || channelId === undefined)) {
             dispatch(updateChannelInfoAction(channelId, channelPayload));
@@ -315,6 +342,7 @@ const ChannelSettings: () => Menu = () => {
             dispatch(deleteChannelAction(channelId));
           }
           setShowDeletePopup(false);
+          handleLeaveChannelForm();
         }}
         onDismiss={() => setShowDeletePopup(false)}
         textProps={{ wordBreak: 'break-word' }}
@@ -330,7 +358,7 @@ const ChannelSettings: () => Menu = () => {
             dispatch(unfollowChannelAction(channelId));
           }
           setShowLeavePopup(false);
-          setSelectedUserChannelIndex(0);
+          handleLeaveChannelForm();
         }}
         onDismiss={() => setShowLeavePopup(false)}
         textProps={{ wordBreak: 'break-word' }}
@@ -356,12 +384,13 @@ const ChannelSettings: () => Menu = () => {
               value={channelPayload.name}
               plain
               focusIndicator={false}
-              onChange={(event) =>
+              onChange={(event) => {
+                setIsFormClicked(true);
                 setChannelPayload({
                   ...channelPayload,
                   name: event.target.value,
-                })
-              }
+                });
+              }}
             />
           </Box>
         ),
@@ -382,15 +411,16 @@ const ChannelSettings: () => Menu = () => {
           >
             <TextInput
               placeholder={t('settings.channelDescriptionPlaceholder')}
-              value={channelPayload.description}
+              value={channelPayload.description || ''}
               plain
               focusIndicator={false}
-              onChange={(event) =>
+              onChange={(event) => {
+                setIsFormClicked(true);
                 setChannelPayload({
                   ...channelPayload,
                   description: event.target.value,
-                })
-              }
+                });
+              }}
             />
           </Box>
         ),

src/pages/Private/settings/ZoneSettings.tsx

@@ -44,6 +44,26 @@ const ZoneSettings: () => Menu | null = () => {
     public: userZones?.[0]?.zone?.public || false,
   });
 
+  const handleZoneLeaveForm = () => {
+    if (selectedUserZoneIndex === 0) {
+      setSelectedUserZoneIndex(0);
+      return setZonePayload({
+        name: userZones?.[1]?.zone?.name || '',
+        description: userZones?.[1]?.zone?.description || null,
+        subdomain: userZones?.[1]?.zone?.subdomain || '',
+        id: userZones?.[1]?.zone?.id || '',
+        public: userZones?.[1]?.zone?.public || false,
+      });
+    }
+    setSelectedUserZoneIndex(0);
+    return setZonePayload({
+      name: userZones?.[0]?.zone?.name || '',
+      description: userZones?.[0]?.zone?.description || null,
+      subdomain: userZones?.[0]?.zone?.subdomain || '',
+      id: userZones?.[0]?.zone?.id || '',
+      public: userZones?.[0]?.zone?.public || false,
+    });
+  };
   const showLeaveButton =
     user?.id !== userZones?.[selectedUserZoneIndex]?.zone?.createdBy?.id;
 
@@ -133,6 +153,7 @@ const ZoneSettings: () => Menu | null = () => {
             dispatch(deleteZoneAction(zoneId, isInThisZone));
           }
           setShowDeletePopup(false);
+          handleZoneLeaveForm();
         }}
         onDismiss={() => setShowDeletePopup(false)}
         textProps={{ wordBreak: 'break-word' }}
@@ -161,6 +182,7 @@ const ZoneSettings: () => Menu | null = () => {
             dispatch(leaveZoneAction(userZoneId));
           }
           setShowLeavePopup(false);
+          handleZoneLeaveForm();
         }}
         onDismiss={() => setShowLeavePopup(false)}
         textProps={{ wordBreak: 'break-word' }}
@@ -347,7 +369,7 @@ const ZoneSettings: () => Menu | null = () => {
           >
             <TextInput
               placeholder={t('settings.zoneDescriptionPlaceholder')}
-              value={zonePayload.description}
+              value={zonePayload.description || ''}
               plain
               focusIndicator={false}
               onChange={(event) =>

src/store/actions/channel.action.ts

@@ -237,6 +237,8 @@ export const updateChannelInfoAction = (
       setToastAction('ok', i18n.t('settings.changesSaved'))(dispatch);
       dispatch({
         type: UPDATE_CHANNEL_INFO_SUCCESS,
+        channelId,
+        payload: params,
       });
     } catch (err: any) {
       dispatch({
@@ -332,7 +334,6 @@ export const unfollowChannelAction = (channelId: string): ChannelAction => {
       });
       setToastAction('ok', i18n.t('ToastMessages.channelUnfollowed'))(dispatch);
       unsetSelectedChannelAction()(dispatch);
-      getUserChannelsAction()(dispatch);
     } catch (err: any) {
       dispatch({
         type: UNFOLLOW_CHANNEL_FAILED,

src/store/reducers/channel.reducer.ts

@@ -19,6 +19,7 @@ import {
   UPDATE_CHANNEL_PHOTO_SUCCESS,
   DELETE_CHANNEL_SUCCESS,
   UNFOLLOW_CHANNEL_SUCCESS,
+  UPDATE_CHANNEL_INFO_SUCCESS,
 } from '../constants/channel.constants';
 import { ChannelActionParams, ChannelState } from '../types/channel.types';
 
@@ -227,7 +228,26 @@ const channelReducer = (
           error: null,
         },
       };
+    case UPDATE_CHANNEL_INFO_SUCCESS:
+      return {
+        ...state,
 
+        userChannels: {
+          ...state.userChannels,
+          data: state.userChannels.data.map((item) =>
+            item.channel.id === action.payload.id
+              ? {
+                  ...item,
+                  channel: {
+                    ...item.channel,
+                    name: action.payload.name,
+                    description: action.payload.description,
+                  },
+                }
+              : item
+          ),
+        },
+      };
     default:
       return state;
   }

src/store/types/channel.types.ts

@@ -43,7 +43,7 @@ import { ZoneActionParams } from './zone.types';
 export interface ChannelBasic {
   id: string;
   name: string;
-  description: string;
+  description: string | null;
   public: boolean;
   zone?: {
     id: string;
@@ -126,7 +126,7 @@ export interface CreateChannelPayload {
 
 export interface UpdateChannelPayload {
   name: string;
-  description: string;
+  description: string | null;
   id: string;
   public: boolean;
 }
@@ -171,17 +171,22 @@ export type ChannelActionParams =
         | typeof UPDATE_CHANNEL_PHOTO_REQUESTED
         | typeof UPDATE_CHANNEL_INFO_REQUESTED
         | typeof UPDATE_CHANNEL_PERMISSIONS_REQUESTED
-        | typeof UPDATE_CHANNEL_INFO_SUCCESS
         | typeof UPDATE_CHANNEL_PERMISSIONS_SUCCESS
         | typeof GET_CHANNEL_USERS_REQUESTED
         | typeof DELETE_CHANNEL_REQUESTED
         | typeof UNFOLLOW_CHANNEL_REQUESTED;
     }
   | {
       type: typeof UPDATE_CHANNEL_PHOTO_SUCCESS;
+
       payload: string;
       channelId: string;
     }
+  | {
+      type: typeof UPDATE_CHANNEL_INFO_SUCCESS;
+      channelId: string;
+      payload: ChannelBasic;
+    }
   | {
       type: typeof GET_CHANNEL_USERS_SUCCESS;
       payload: PaginatedResponse<ChannelUser>;

src/store/types/zone.types.ts

@@ -93,7 +93,7 @@ export interface CreateZonePayload {
 
 export interface UpdateZonePayload {
   name: string;
-  description: string;
+  description?: string | null;
   subdomain: string;
   id: string;
   public: boolean;