change api organization

src/pages/playlists/create.jsx

@@ -25,7 +25,7 @@ const ModalCreatePlaylist = ({ opened, handler, addPlaylist }) => {
                 <Modal.Body>
                     <PlaylistViewEditor
                         buttonText="Create"
-                        APICall={API.createPlaylist}
+                        APICall={API.playlists.create}
                         handler={(item) => validated(item)}
                     />
                 </Modal.Body>

src/pages/playlists/index.jsx

@@ -8,7 +8,7 @@ import { Button } from '@mantine/core';
 import GrantAccess, { Perm } from '../../tools/grant-access';
 
 const Playlists = () => {
-    const [showCreate, setShowCreate] = useState(false);
+    const [showCreate, setShowCreate] = useState(true);
     const [showUpdate, setShowUpdate] = useState(false);
     const [, setItem] = useState({});
     const [page, setPage] = useState(0);
@@ -20,7 +20,7 @@ const Playlists = () => {
     const [playlists, setPlaylist] = useState([]);
 
     useEffect(() => {
-        API.listPlaylists(limit, page)
+        API.playlists.list(limit, page)
             .then((res) => {
                 if (res.status === 200) {
                     if (playlists.length === 0) setPlaylist(res.data);

src/pages/playlists/update.jsx

@@ -24,7 +24,7 @@ const ModalUpdatePlaylist = ({ item, opened, handler, updatePlaylist }) => {
                     <PlaylistViewEditor
                         item={item}
                         buttonText="Update"
-                        APICall={API.updatePlaylist}
+                        APICall={API.playlists.update}
                         handler={(playlist) => validated(playlist)}
                     />
                 </Modal.Body>

src/pages/users/index.jsx

@@ -22,7 +22,7 @@ const Users = () => {
     
 
     useEffect(() => {
-        API.listUsers()
+        API.users.list()
             .then((res) => {
                 if (res.status === 200) {
                     if (users.length === 0) setUsers(res.data);
@@ -32,7 +32,7 @@ const Users = () => {
             .catch((err) => {
                 setNotification(true, err);
             });
-        API.listRoles()
+        API.roles.list()
             .then((res) => {
                 if (res.status === 200) {
                     if (roles.length === 0) setRoles(res.data);
@@ -86,14 +86,14 @@ const Users = () => {
                 opened={showCreate}
                 handler={(item) => addUser(item)}
                 handlerClose={toggleModalCreate}
-                APICall={API.createUser}
+                APICall={API.users.create}
                 name="Create"
             />
             <ModalUserEditor
                 opened={showUpdate}
                 handler={(item) => updateUser(item)}
                 handlerClose={toggleModalUpdate}
-                APICall={API.updateUser}
+                APICall={API.users.update}
                 item={itemToUse}
                 name="Update"
             />

src/pages/users/user-view-modal.jsx

@@ -41,7 +41,7 @@ const ModalUserView = ({ opened, handler, ...props }) => {
                 opened={showEdit}
                 handler={(item) => setUser(item)}
                 handlerClose={toggleModalEdit}
-                APICall={API.updateUser}
+                APICall={API.users.update}
                 item={user}
                 name="Update"
             />

src/pages/users/users-table.jsx

@@ -17,7 +17,7 @@ const Line = ({ user, ...props }) => {
     const [isLoading, setIsLoading] = useState(false);
     const deleteUser = () => {
         setIsLoading(true);
-        API.deleteUser(user.id)
+        API.users.delete(user.id)
             .then((res) => {
                 setIsLoading(false);
                 if (res.status === 200) {

src/services/api.js

@@ -7,6 +7,62 @@ const caller = (url = '/api') => {
 };
 
 const API = {
+    playlists: {
+        create(data) {
+            return caller().post('/playlists', data);
+        },
+        get(id) {
+            return caller().get(`/playlists/${id}`);
+        },
+        list(data) {
+            return caller().get('/playlists', data);
+        },
+        update(playlistId, data) {
+            return caller().put(`/playlists/${playlistId}/update`, data);
+        },
+        activate(playlistId) {
+            return caller().post(`/playlists/${playlistId}/activate`);
+        },
+        disactivate(playlistId) {
+            return caller().post(`/playlists/${playlistId}/disactivate`);
+        },
+        addFile(playlistId, file) {
+            return caller().post(`/playlists/${playlistId}`, file);
+        },
+        removeFile(playlistId, data) {
+            return caller().post(`/playlists/${playlistId}/remove_file`, data);
+        },
+        changeOrder(playlistId, data) {
+            return caller().post(`/playlists/${playlistId}/order`, data);
+        },
+        changeSeconds(playlistId, data) {
+            return caller().post(`/playlists/${playlistId}/seconds`, data);
+        },
+    },
+    roles: {
+        list(data) {
+            return caller().get('/roles', data);
+        },
+    },
+    users: {
+        create(data) {
+            return caller().post('/users', data);
+        },
+        delete(userId) {
+            return caller().delete(`/users/${userId}`);
+        },
+        list(data) {
+            return caller().get('/users', data);
+        },
+    },
+    files: {
+        upload(data) {
+            return caller().post('/file', data);
+        },
+        list() {
+            return caller().get('/file');
+        },
+    },
     profile() {
         return caller().get('/auth/profile');
     },
@@ -16,54 +72,6 @@ const API = {
     login(data) {
         return caller().post('/auth/login', data);
     },
-    listUsers(data) {
-        return caller().get('/users', data);
-    },
-    listRoles(data) {
-        return caller().get('/roles', data);
-    },
-    listPlaylists(data) {
-        return caller().get('/playlists', data);
-    },
-    createPlaylist(data) {
-        return caller().post('/playlists', data);
-    },
-    updatePlaylist(playlistId, data) {
-        return caller().put(`/playlists/${playlistId}/update`, data);
-    },
-    activate(playlistId) {
-        return caller().post(`/playlists/${playlistId}/activate`);
-    },
-    disactivate(playlistId) {
-        return caller().post(`/playlists/${playlistId}/disactivate`);
-    },
-    getPlaylist(id) {
-        return caller().get(`/playlists/${id}`);
-    },
-    upload(data) {
-        return caller().post('/file', data);
-    },
-    getFiles() {
-        return caller().get('/file');
-    },
-    addFileToPlaylist(playlistId, file) {
-        return caller().post(`/playlists/${playlistId}`, file);
-    },
-    playlistChangeOrder(playlistId, data) {
-        return caller().post(`/playlists/${playlistId}/order`, data);
-    },
-    playlistChangeSeconds(playlistId, data) {
-        return caller().post(`/playlists/${playlistId}/seconds`, data);
-    },
-    playlistRemoveFile(playlistId, data) {
-        return caller().post(`/playlists/${playlistId}/remove_file`, data);
-    },
-    createUser(data) {
-        return caller().post('/users', data);
-    },
-    deleteUser(userId) {
-        return caller().delete(`/users/${userId}`);
-    },
 };
 
 export default API;