grimhilt/artemio-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix warnings and notifications

Browse Source
This commit is contained in:
grimhilt
2023-08-07 16:08:23 +02:00
parent fc942db1a1
commit 14b4f766c0
21 changed files with 191 additions and 32561 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/app-router.jsx
View File

@@ -16,7 +16,7 @@ const AppRouter = () => {
<Route path="/playlists" element={<LoginRequired children={<Playlists />} />} />
<Route path="/files" element={<LoginRequired children={<Files />} />} />
<Route path="/playlist/:id" element={<LoginRequired children={<Playlist />} />} />
<Route path="/auth" element={<Authentication />} />
<Route path="/login" element={<Authentication />} />
<Route path="*" element={<NotFound />} />
</Routes>
);

2
src/components/header.jsx
View File

@@ -1,7 +1,7 @@
import Logo from '../assets/logo.png';
import { Avatar, createStyles, Header, Group, rem, UnstyledButton, Title, ActionIcon, Tooltip } from '@mantine/core';
import SwitchToggle from './toggle-colorscheme';
import { IconUserCheck, IconUserEdit, IconUserOff } from '@tabler/icons-react';
import { IconUserCheck, IconUserOff } from '@tabler/icons-react';
import { logout, useAuth } from '../tools/auth-provider';
import { useNavigate } from 'react-router-dom';

6
src/components/navbar.jsx
View File

@@ -1,4 +1,4 @@
import { Title, Button, Group, Input, Paper } from '@mantine/core';
import { Title, Group, Input, Paper } from '@mantine/core';
import { IconSearch } from '@tabler/icons-react';
const NavbarSignage = ({ data }) => {
@@ -13,9 +13,7 @@ const NavbarSignage = ({ data }) => {
onChange={(event) => data.handlerChange(event)}
icon={<IconSearch size="1rem" stroke={1.5} />}
/>
{data?.buttonCreate && (
<Button onClick={data.buttonCreate.handler}>{data.buttonCreate.text}</Button>
)}
{data?.buttonCreate}
</Group>
</Group>
</Paper>

7
src/pages/auth.jsx
View File

@@ -14,6 +14,7 @@ const Authentication = ({ redirect }) => {
useEffect(() => {
if (user) navigate('/');
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [user]);
const form = useForm({
@@ -36,19 +37,19 @@ const Authentication = ({ redirect }) => {
.then((res) => {
if (res.status === 200) {
setUser(res.data);
localStorage.setItem('user', res.data);
localStorage.setItem('user', JSON.stringify(res.data));
if (redirect) {
setLoggedIn(true);
} else {
navigate('/');
}
} else {
setNotification(true, res.message);
setNotification(true, res);
setIsLoading(false);
}
})
.catch((err) => {
setNotification(true, err.message);
setNotification(true, err);
setIsLoading(false);
});
};

3
src/pages/errors/error-notification.jsx
View File

@@ -2,6 +2,9 @@ import { notifications } from '@mantine/notifications';
import { IconCheck, IconX } from '@tabler/icons-react';
const setNotification = (fail, message) => {
if (typeof message === 'object') {
message = message?.data?.message ?? message?.response?.data?.message ?? message.message ?? 'Error';
}
notifications.show({
title: fail ? 'Error' : 'Success',
message: message ?? 'Something went wrong',

2
src/pages/files/add.jsx
View File

@@ -33,7 +33,7 @@ const ModalAddFile = ({ opened, handler, addFiles }) => {
}
})
.catch((err) => {
setNotification(true, err.message);
setNotification(true, err);
setIsLoading(false);
});
};

6
src/pages/files/file-selector.jsx
View File

@@ -47,7 +47,7 @@ const ModalFileSelector = ({ opened, handleClose, handleSubmit, ...props }) => {
}
})
.catch((err) => {
setNotification(true, err.message);
setNotification(true, err);
});
return () => {};
@@ -63,7 +63,7 @@ const ModalFileSelector = ({ opened, handleClose, handleSubmit, ...props }) => {
}
})
.catch((err) => {
setNotification(true, err.message);
setNotification(true, err);
});
} else if (search.length === 0) {
API.getFiles()
@@ -73,7 +73,7 @@ const ModalFileSelector = ({ opened, handleClose, handleSubmit, ...props }) => {
}
})
.catch((err) => {
setNotification(true, err.message);
setNotification(true, err);
});
}
}, [search]);

20
src/pages/files/file-view.jsx
View File

@@ -1,16 +1,14 @@
import { Card, Divider, Text, Title, Image, Badge, Button, Group } from '@mantine/core';
import API from '../../services/api';
import { Card, Text, Image, Button, Group } from '@mantine/core';
const FileView = ({ file, onSelect, onDelete, ...props }) => {
const deleteHandler = async () => {
try {
await API.deleteFile(file.id);
onDelete(file.id);
} catch (error) {
console.log(error);
}
};
// const deleteHandler = async () => {
// try {
// await API.deleteFile(file.id);
// onDelete(file.id);
// } catch (error) {
// console.log(error);
// }
// };
return (
<Card shadow="sm" padding="md" withBorder>

4
src/pages/files/index.jsx
View File

@@ -1,4 +1,4 @@
import { Button, Paper, Grid, Text, Title, Group, List, Image, ScrollArea, Center } from '@mantine/core';
import { Button, Paper, Grid, Title, Group, ScrollArea, Center } from '@mantine/core';
import { useEffect, useState } from 'react';
import API from '../../services/api';
import setNotification from '../errors/error-notification';
@@ -22,7 +22,7 @@ const Files = () => {
}
})
.catch((err) => {
setNotification(true, err.message);
setNotification(true, err);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

2
src/pages/planning/index.jsx
View File

@@ -1,5 +1,3 @@
import Logo from '../../assets/logo.png';
import { Avatar, Center, Text } from '@mantine/core';
const Planning = () => (
<>

20
src/pages/playlist/content.jsx
View File

@@ -2,9 +2,9 @@ import { Box, Image, Flex } from '@mantine/core';
import { DragDropContext, Draggable } from 'react-beautiful-dnd';
import { IconGripVertical } from '@tabler/icons-react';
import { StrictModeDroppable } from './StrictModeDroppable';
import { ActionIcon, Button, Center, Grid, Group, NumberInput, Paper, Text } from '@mantine/core';
import { ActionIcon, Button, Center, Group, NumberInput, Paper, Text } from '@mantine/core';
import { IconTrash } from '@tabler/icons-react';
import { useEffect, useState } from 'react';
import { useState } from 'react';
import ModalFileSelector from '../files/file-selector';
import API from '../../services/api';
import setNotification from '../errors/error-notification';
@@ -33,7 +33,7 @@ const Content = ({ form, playlistId }) => {
}
})
.catch((err) => {
setNotification(true, err.message);
setNotification(true, err);
});
});
};
@@ -57,7 +57,7 @@ const Content = ({ form, playlistId }) => {
// sending modification to server
API.playlistChangeOrder(playlistId, { file_id: formFiles[from].id, position: newPosition })
.then((res) => {
if (res.status == 200) {
if (res.status === 200) {
resolve(true);
} else {
setNotification(true, `Error when changing order (${res.status})`);
@@ -65,7 +65,7 @@ const Content = ({ form, playlistId }) => {
}
})
.catch((err) => {
setNotification(true, err.message);
setNotification(true, err);
resolve(false);
});
});
@@ -97,15 +97,15 @@ const Content = ({ form, playlistId }) => {
const fileId = form.values.files[index].id;
API.playlistChangeSeconds(playlistId, { file_id: fileId, seconds: seconds })
.then((res) => {
if (res.status == 200) {
setOriginSecs()
if (res.status === 200) {
setOriginSecs();
} else {
setNotification(true, `Error when changing seconds (${res.status})`);
changeSecsForm(originSecs, index);
}
})
.catch((err) => {
setNotification(true, err.message);
setNotification(true, err);
changeSecsForm(originSecs, index);
});
};
@@ -113,14 +113,14 @@ const Content = ({ form, playlistId }) => {
const handleDelete = (index) => {
API.playlistRemoveFile(playlistId, { file_id: form.values.files[index].id })
.then((res) => {
if (res.status == 200) {
if (res.status === 200) {
form.removeListItem('files', index);
} else {
setNotification(true, `Error when changing order (${res.status})`);
}
})
.catch((err) => {
setNotification(true, err.message);
setNotification(true, err);
});
};

10
src/pages/playlist/index.jsx
View File

@@ -3,10 +3,10 @@ import { useEffect, useState } from 'react';
import API from '../../services/api';
import { parseTime } from '../../tools/timeUtil';
import setNotification from '../errors/error-notification';
import GrantAccess from '../../tools/grant-access';
import ModalUpdate from '../playlists/update';
import { useForm } from '@mantine/form';
import Content from './content';
import { useNavigate } from 'react-router-dom';
const Playlist = (item) => {
const id = window.location.href.split('/').slice(-1)[0];
@@ -15,6 +15,7 @@ const Playlist = (item) => {
const [duration, setDuration] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const [isActive, setIsActive] = useState(false);
const navigate = useNavigate();
const toggleUpdate = () => setShowUpdate(!showUpdate);
@@ -29,7 +30,7 @@ const Playlist = (item) => {
setIsLoading(false);
})
.catch((err) => {
setNotification(true, err.message);
setNotification(true, err);
setIsLoading(false);
});
};
@@ -64,7 +65,10 @@ const Playlist = (item) => {
}
})
.catch((err) => {
setNotification(true, err.message);
setNotification(true, err);
if (err.response.status === 404) {
navigate('/playlists');
}
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps

22
src/pages/playlists/index.jsx
View File

@@ -4,11 +4,13 @@ import PlaylistTable from './playlist-table';
import API from '../../services/api';
import setNotification from '../errors/error-notification';
import ModalCreatePlaylist from './create';
import { Button } from '@mantine/core';
import GrantAccess, { Perm } from '../../tools/grant-access';
const Playlists = () => {
const [showCreate, setShowCreate] = useState(false);
const [showUpdate, setShowUpdate] = useState(false);
const [item, setItem] = useState({});
const [, setItem] = useState({});
const [page, setPage] = useState(0);
const limit = 6;
@@ -18,6 +20,10 @@ const Playlists = () => {
const [playlists, setPlaylist] = useState([]);
useEffect(() => {
console.log('profile');
API.profile()
.then((res) => console.log(res))
.catch((err) => console.log(err));
API.listPlaylists(limit, page)
.then((res) => {
if (res.status === 200) {
@@ -26,7 +32,7 @@ const Playlists = () => {
}
})
.catch((err) => {
setNotification(true, err.message);
setNotification(true, err);
});
return () => {};
@@ -47,10 +53,12 @@ const Playlists = () => {
title: 'Playlists',
search: search,
handlerChange: (e) => setSearch(e.target.value),
buttonCreate: {
text: 'New Playlist',
handler: toggleModalCreate,
},
buttonCreate: (
<GrantAccess
role={Perm.CREATE_PLAYLIST}
children={<Button onClick={toggleModalCreate}>New Playlist</Button>}
/>
),
};
return (
@@ -58,7 +66,7 @@ const Playlists = () => {
<NavbarSignage data={navbar} />
<PlaylistTable
data={playlists}
updateItem={setItem}
updateItem={setItem} // todo
// eslint-disable-next-line eqeqeq
onDelete={(id) => setPlaylist(playlists.filter((item) => item._id != id))}
updateHandler={toggleModalUpdate}

6
src/pages/playlists/playlist-view-editor.jsx
View File

@@ -1,6 +1,7 @@
import { Button, TextInput, Group } from '@mantine/core';
import { useForm, isNotEmpty } from '@mantine/form';
import { useState } from 'react';
import setNotification from '../errors/error-notification';
const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
const handleClose = (playlist) => {
@@ -34,9 +35,10 @@ const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
handleClose(res.data);
}
setIsLoading(false);
} catch (error) {
} catch (err) {
console.log(err)
setIsLoading(false);
// todo
setNotification(true, err);
}
};

23
src/services/api.js
View File

@@ -7,6 +7,9 @@ const caller = (url = '/api') => {
};
const API = {
profile() {
return caller().get('/auth/profile');
},
logout() {
return caller().post('/auth/logout');
},
@@ -14,22 +17,22 @@ const API = {
return caller().post('/auth/login', data);
},
listPlaylists(data) {
return caller().get('/playlist', data);
return caller().get('/playlists', data);
},
createPlaylist(data) {
return caller().post('/playlist', data);
return caller().post('/playlists', data);
},
updatePlaylist(playlistId, data) {
return caller().post(`/playlist/${playlistId}/update`, data);
return caller().post(`/playlists/${playlistId}/update`, data);
},
activate(playlistId) {
return caller().post(`/playlist/${playlistId}/activate`);
return caller().post(`/playlists/${playlistId}/activate`);
},
disactivate(playlistId) {
return caller().post(`/playlist/${playlistId}/disactivate`);
return caller().post(`/playlists/${playlistId}/disactivate`);
},
getPlaylist(id) {
return caller().get(`/playlist/${id}`);
return caller().get(`/playlists/${id}`);
},
upload(data) {
return caller().post('/file', data);
@@ -38,16 +41,16 @@ const API = {
return caller().get('/file');
},
addFileToPlaylist(playlistId, file) {
return caller().post(`/playlist/${playlistId}`, file);
return caller().post(`/playlists/${playlistId}`, file);
},
playlistChangeOrder(playlistId, data) {
return caller().post(`/playlist/${playlistId}/order`, data);
return caller().post(`/playlists/${playlistId}/order`, data);
},
playlistChangeSeconds(playlistId, data) {
return caller().post(`/playlist/${playlistId}/seconds`, data);
return caller().post(`/playlists/${playlistId}/seconds`, data);
},
playlistRemoveFile(playlistId, data) {
return caller().post(`/playlist/${playlistId}/remove_file`, data);
return caller().post(`/playlists/${playlistId}/remove_file`, data);
},
};

13
src/tools/auth-provider.js
View File

@@ -3,15 +3,24 @@ import API from '../services/api';
const AuthContext = createContext();
const getUserFromStorage = () => {
const user = localStorage.getItem('user');
if (user) {
return JSON.parse(user);
} else {
return;
}
};
const AuthProvider = ({ children }) => {
const [user, setUser] = useState(localStorage.getItem('user'));
const [user, setUser] = useState(getUserFromStorage());
return <AuthContext.Provider value={{ user, setUser }}>{children}</AuthContext.Provider>;
};
const logout = () => {
localStorage.removeItem('user');
window.location.href = '/auth';
window.location.href = '/login';
API.logout();
};

21
src/tools/grant-access.jsx
View File

@@ -9,9 +9,26 @@ export const Perm = {
EDIT_PLAYLIST: 4,
};
const GrantAccess = ({ roles, children }) => {
const checkPerm = (perm, user) => {
console.log(user);
switch (perm) {
case Perm.CREATE_ROLE:
return false;
case Perm.CREATE_PLAYLIST:
return user.roles.findIndex((role) => role.can_create_playlist) !== -1;
default:
return false;
}
};
const GrantAccess = ({ role, roles, children }) => {
const { user } = useAuth();
return roles.includes(user) ? children : null;
if (role && checkPerm(role, user)) {
return children;
} else if (roles && roles.includes(user)) {
return children;
}
return null;
};
export const LoginRequired = ({ children }) => {

6
src/tools/timeUtil.js
View File

@@ -4,13 +4,13 @@ export const parseTime = (preparationTime) => {
res += hours > 0 ? `${hours}h` : '';
let min = Math.floor((preparationTime % 3600) / 60);
if (min > 0 && res != '') res += ' ';
if (min > 0 && res !== '') res += ' ';
res += min > 0 ? `${min}m` : '';
let sec = Math.floor((preparationTime % 3600) % 60);
if (sec > 0 && res != '') res += ' ';
if (sec > 0 && res !== '') res += ' ';
res += sec > 0 ? `${sec}s` : '';
if (res == '') res = '0s';
if (res === '') res = '0s';
return res;
};