Added changes as per maintaners review

Signed-off-by: AmbrishRamachandiran <ambrish.r@infosys.com>

plugins/playlist/src/components/PlaylistEditDialog/PlaylistEditDialog.tsx

@@ -36,7 +36,7 @@ import {
   Select,
   TextField,
 } from '@material-ui/core';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import useAsync from 'react-use/lib/useAsync';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
@@ -76,14 +76,17 @@ export const PlaylistEditDialog = ({
   const classes = useStyles();
   const identityApi = useApi(identityApiRef);
   const playlistApi = useApi(playlistApiRef);
-  const playListApiData = playlistApi.getAllPlaylists({ editable: true });
-
+  const [playlistArray, setPlaylistArray] = useState([]);
   const [editingOtherFields, setEditingOtherFields] = useState(false);
 
-  const fetchAndProcessData = async () => {
-    const playlistArray = await playListApiData;
-    return playlistArray;
-  };
+  useEffect(() => {
+    const fetchPlaylists = async () => {
+      const playlists = await playlistApi.getAllPlaylists({ editable: true });
+      setPlaylistArray(playlists);
+    };
+
+    fetchPlaylists();
+  }, [playlistApi]);
 
   const { loading: loadingOwnership, value: ownershipRefs } =
     useAsync(async () => {
@@ -96,24 +99,10 @@ export const PlaylistEditDialog = ({
     isEditing: boolean,
     originalName: string,
   ) => {
-    if (!isEditing) {
-      const playlistArray = await fetchAndProcessData();
-      if (
-        playlistArray.some(
-          (playlistData: { name: string }) => playlistData.name === name,
-        )
-      ) {
-        return 'A playlist with this name already exists';
-      }
-    } else if (name !== originalName) {
-      const playlistArray = await fetchAndProcessData();
-      if (
-        playlistArray.some(
-          (playlistData: { name: string }) => playlistData.name === name,
-        )
-      ) {
-        return 'A playlist with this name already exists';
-      }
+    if (!isEditing || name !== originalName) {
+      return playlistArray.some(p => p.name === name)
+        ? 'A playlist with this name already exists'
+        : true;
     }
 
     return true;

plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx

@@ -43,7 +43,7 @@ import {
 } from '@material-ui/core';
 import EditIcon from '@material-ui/icons/Edit';
 import DeleteIcon from '@material-ui/icons/Delete';
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 
@@ -81,9 +81,9 @@ export const PlaylistHeader = ({ playlist, onUpdate }: PlaylistHeaderProps) => {
   const playlistApi = useApi(playlistApiRef);
   const navigate = useNavigate();
   const rootRoute = useRouteRef(rootRouteRef);
+
   const [openEditDialog, setOpenEditDialog] = useState(false);
   const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
-  const [popupMessage, setPopupMessage] = useState('');
 
   const { allowed: editAllowed } = usePermission({
     permission: permissions.playlistListUpdate,
@@ -95,50 +95,48 @@ export const PlaylistHeader = ({ playlist, onUpdate }: PlaylistHeaderProps) => {
     resourceRef: playlist.id,
   });
 
-  useEffect(() => {
-    if (popupMessage) {
-      alertApi.post({
-        message: popupMessage,
-        severity: 'success',
-        display: 'transient',
-      });
-      setPopupMessage('');
-    }
-  }, [popupMessage, alertApi]);
-
   const updatePlaylist = useCallback(
     async (update: Omit<PlaylistMetadata, 'id'>) => {
       try {
         await playlistApi.updatePlaylist({ ...update, id: playlist.id });
         setOpenEditDialog(false);
         if (update.name !== playlist.name) {
-          setPopupMessage(
-            `Updated playlist name '${playlist.name}' to '${update.name}'`,
-          );
+          const message = `Updated playlist name '${playlist.name}' to '${update.name}'`;
+          alertApi.post({
+            message,
+            severity: 'success',
+            display: 'transient',
+          });
         } else {
-          setPopupMessage(`Updated playlist '${playlist.name}'`);
+          const message = `Updated playlist '${playlist.name}'`;
+          alertApi.post({
+            message,
+            severity: 'success',
+            display: 'transient',
+          });
         }
         onUpdate();
       } catch (e) {
         errorApi.post(e);
       }
     },
-    [errorApi, onUpdate, playlist, playlistApi, setPopupMessage],
+    [errorApi, onUpdate, playlist, playlistApi, alertApi],
   );
 
   const [deleting, deletePlaylist] = useAsyncFn(async () => {
     try {
       await playlistApi.deletePlaylist(playlist.id);
       navigate(rootRoute());
+      const message = `Deleted playlist '${playlist.name}'`;
       alertApi.post({
-        message: `Deleted playlist '${playlist.name}'`,
+        message,
         severity: 'success',
         display: 'transient',
       });
     } catch (e) {
       errorApi.post(e);
     }
-  }, [playlistApi]);
+  }, [playlistApi, alertApi]);
 
   const singularTitle = useTitle({
     pluralize: false,