allow to modifify playlist permissions

src/pages/playlists/playlist-view-editor.jsx

@@ -1,6 +1,6 @@
 import { Button, TextInput, Group, Stack } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import setNotification from '../errors/error-notification';
 import RoleSelector from './role-selector';
 
@@ -11,8 +11,17 @@ const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
     };
 
     const [isLoading, setIsLoading] = useState(false);
-    const [rolesView, setRolesView] = useState([]);
+    console.log(item);
-    const [rolesEdit, setRolesEdit] = useState([]);
+    const [rolesView, setRolesView] = useState(item?.view.map((role) => role.id.toString()) ?? []);
+    const [rolesEdit, setRolesEdit] = useState(item?.edit.map((role) => role.id.toString()) ?? []);
+
+    useEffect(() => {
+        if (item) {
+            setRolesView(item?.view.map((role) => role.id.toString()) ?? []);
+            setRolesEdit(item?.edit.map((role) => role.id.toString()) ?? []);
+        }
+        return () => {};
+    }, [item]);
 
     const form = useForm({
         initialValues: {
@@ -50,8 +59,18 @@ const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
         <form onSubmit={handleSubmit}>
             <TextInput label="Name" placeholder="Name" withAsterisk {...form.getInputProps('name')} mb="sm" />
             <Stack>
-                <RoleSelector label="View Permission" value={rolesView} setValue={setRolesView} />
+                <RoleSelector
-                <RoleSelector label="Edit Permission" value={rolesEdit} setValue={setRolesEdit} />
+                    defaultRoles={item?.view}
+                    label="View Permission"
+                    value={rolesView}
+                    setValue={setRolesView}
+                />
+                <RoleSelector
+                    defaultRoles={item?.edit}
+                    label="Edit Permission"
+                    value={rolesEdit}
+                    setValue={setRolesEdit}
+                />
             </Stack>
             <Group position="right" mt="md">
                 <Button variant="light" color="red" onClick={handleClose}>

src/pages/playlists/role-selector.jsx

@@ -3,22 +3,28 @@ import { useEffect, useState } from 'react';
 import setNotification from '../errors/error-notification';
 import API from '../../services/api';
 
-const RoleSelector = ({ label, value, setValue }) => {
+const RoleSelector = ({ defaultRoles, label, value, setValue }) => {
     const [data, setData] = useState([]);
     const [search, setSearch] = useState();
-    useEffect(() => {
+
-        API.roles
+    const addRoles = (roles) => {
-            .search(search)
+        if (!roles) return;
-            .then((res) => {
+        for (let i = 0; i < roles.length; i++) {
-                if (res.status === 200) {
+            const role = roles[i];
-                    for (let i = 0; i < res.data.length; i++) {
-                        const role = res.data[i];
             if (!data.find((r) => r.id === role.id)) {
                 role.label = role.name;
                 role.value = role.id.toString();
                 setData((prev) => [...prev, role]);
             }
         }
+    };
+
+    useEffect(() => {
+        API.roles
+            .search(search)
+            .then((res) => {
+                if (res.status === 200) {
+                    addRoles(res.data);
                 } else {
                     setNotification(true, res);
                 }
@@ -26,15 +32,13 @@ const RoleSelector = ({ label, value, setValue }) => {
             .catch((err) => {
                 setNotification(true, err);
             });
+        // eslint-disable-next-line
     }, [search]);
 
-    // useEffect(() => {
+    useEffect(() => {
-    //     setData([
+        addRoles(defaultRoles);
-    //         { value: 'React', label: 'React' },
+        // eslint-disable-next-line
-    //         { value: 'Angular', label: 'Angular' },
+    }, [defaultRoles]);
-    //         { value: 'Svelte', label: 'Svelte' },
-    //     ]);
-    // }, []);
 
     // creatable
     // getCreateLabel={(query) => `+ Create ${query}`}