imporve grant access

src/pages/playlist/content.jsx

@@ -25,6 +25,7 @@ const Content = ({ form, playlistId }) => {
 
             file.position = max_position;
             file.seconds = 10;
+            const index = form.values.files.length;
             form.insertListItem('files', file);
             API.addFileToPlaylist(playlistId, { position: file.position, file_id: file.id, seconds: file.seconds })
                 .then((res) => {
@@ -33,6 +34,8 @@ const Content = ({ form, playlistId }) => {
                     }
                 })
                 .catch((err) => {
+                    console.log("here")
+                    form.removeListItem('files', index)
                     setNotification(true, err);
                 });
         });

src/pages/playlist/index.jsx

@@ -7,6 +7,7 @@ import ModalUpdate from '../playlists/update';
 import { useForm } from '@mantine/form';
 import Content from './content';
 import { useNavigate } from 'react-router-dom';
+import GrantAccess, { Perm } from '../../tools/grant-access';
 
 const Playlist = (item) => {
     const id = window.location.href.split('/').slice(-1)[0];
@@ -68,6 +69,8 @@ const Playlist = (item) => {
                     setNotification(true, err);
                     if (err.response.status === 404) {
                         navigate('/playlists');
+                    } else if (err.response.status === 401) {
+                        navigate('/login');
                     }
                 });
         }
@@ -87,18 +90,30 @@ const Playlist = (item) => {
                     </Text>
                 </Text>
                 <Group>
-                    <Button
+                    <GrantAccess
-                        variant="light"
+                        roles={[Perm.OWN_PLAYLIST, Perm.ACTIVATE_PLAYLIST]}
-                        mt="sm"
+                        item={playlist}
-                        color={isActive ? 'red' : 'green'}
+                        children={
-                        onClick={toggleActivate}
+                            <Button
-                        loading={isLoading}
+                                variant="light"
-                    >
+                                mt="sm"
-                        {isActive ? 'Stop' : 'Activate'}
+                                color={isActive ? 'red' : 'green'}
-                    </Button>
+                                onClick={toggleActivate}
-                    <Button variant="light" mt="sm" onClick={toggleUpdate}>
+                                loading={isLoading}
-                        Edit
+                            >
-                    </Button>
+                                {isActive ? 'Stop' : 'Activate'}
+                            </Button>
+                        }
+                    />
+                    <GrantAccess
+                        role={Perm.OWN_PLAYLIST}
+                        item={playlist}
+                        children={
+                            <Button variant="light" mt="sm" onClick={toggleUpdate}>
+                                Edit
+                            </Button>
+                        }
+                    />
                 </Group>
             </Group>
             <Paper p="xs" radius="sm" shadow="sm" withBorder my="md">

src/tools/grant-access.jsx

@@ -1,5 +1,6 @@
 import { useAuth } from './auth-provider';
 import Authentication from '../pages/auth';
+import { useEffect } from 'react';
 
 export const Perm = {
     CREATE_ROLE: 0,
@@ -7,26 +8,38 @@ export const Perm = {
     VIEW_PLAYLIST: 2,
     OWN_PLAYLIST: 3,
     EDIT_PLAYLIST: 4,
+    ACTIVATE_PLAYLIST: 5,
 };
 
-const checkPerm = (perm, user) => {
+const checkPerm = (perm, user, item = {}) => {
     console.log(user);
+    console.log(item);
     switch (perm) {
         case Perm.CREATE_ROLE:
             return false;
         case Perm.CREATE_PLAYLIST:
             return user.roles.findIndex((role) => role.can_create_playlist) !== -1;
+        case Perm.OWN_PLAYLIST:
+            return item?.owner_id === user.id;
         default:
             return false;
     }
 };
 
-const GrantAccess = ({ role, roles, children }) => {
+const GrantAccess = ({ role, roles, children, item }) => {
     const { user } = useAuth();
-    if (role && checkPerm(role, user)) {
+    if (role && checkPerm(role, user, item)) {
-        return children;
-    } else if (roles && roles.includes(user)) {
         return children;
+    } else if (roles) {
+        let flag = false;
+        let i = 0;
+        while (!flag && i < roles.length) {
+            if (checkPerm(roles[i], user, item)) {
+                flag = true;
+            }
+            i++;
+        }
+        if (flag) return children;
     }
     return null;
 };