Browse Source

Add functionality to playlist edit button

master
jeffvli 3 years ago
parent
commit
f0ff4d59da
  1. 18
      src/api/api.ts
  2. 86
      src/components/playlist/PlaylistView.tsx

18
src/api/api.ts

@ -529,6 +529,24 @@ export const createPlaylist = async (name: string) => {
return data; return data;
}; };
export const updatePlaylist = async (
playlistId: string,
name: string,
comment: string,
isPublic: boolean
) => {
const { data } = await api.get(`/updatePlaylist`, {
params: {
playlistId,
name,
comment,
public: isPublic,
},
});
return data;
};
export const clearPlaylist = async (playlistId: string) => { export const clearPlaylist = async (playlistId: string) => {
// Specifying the playlistId without any songs will empty the existing playlist // Specifying the playlistId without any songs will empty the existing playlist
const { data } = await api.get(`/createPlaylist`, { const { data } = await api.get(`/createPlaylist`, {

86
src/components/playlist/PlaylistView.tsx

@ -1,8 +1,8 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState, useRef } from 'react';
import fs from 'fs'; import fs from 'fs';
import path from 'path'; import path from 'path';
import settings from 'electron-settings'; import settings from 'electron-settings';
import { ButtonToolbar } from 'rsuite'; import { ButtonToolbar, Form, Input, Popover, Whisper } from 'rsuite';
import { useQuery, useQueryClient } from 'react-query'; import { useQuery, useQueryClient } from 'react-query';
import { useParams, useHistory } from 'react-router-dom'; import { useParams, useHistory } from 'react-router-dom';
import { import {
@ -19,6 +19,7 @@ import {
getPlaylist, getPlaylist,
updatePlaylistSongsLg, updatePlaylistSongsLg,
updatePlaylistSongs, updatePlaylistSongs,
updatePlaylist,
} from '../../api/api'; } from '../../api/api';
import { useAppDispatch, useAppSelector } from '../../redux/hooks'; import { useAppDispatch, useAppSelector } from '../../redux/hooks';
import { import {
@ -53,6 +54,11 @@ import {
addProcessingPlaylist, addProcessingPlaylist,
removeProcessingPlaylist, removeProcessingPlaylist,
} from '../../redux/miscSlice'; } from '../../redux/miscSlice';
import {
StyledButton,
StyledCheckbox,
StyledInputGroup,
} from '../shared/styled';
interface PlaylistParams { interface PlaylistParams {
id: string; id: string;
@ -62,6 +68,7 @@ const PlaylistView = ({ ...rest }) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const history = useHistory(); const history = useHistory();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const editTriggerRef = useRef<any>();
const { id } = useParams<PlaylistParams>(); const { id } = useParams<PlaylistParams>();
const playlistId = rest.id ? rest.id : id; const playlistId = rest.id ? rest.id : id;
const { isLoading, isError, data, error }: any = useQuery( const { isLoading, isError, data, error }: any = useQuery(
@ -69,6 +76,10 @@ const PlaylistView = ({ ...rest }) => {
() => getPlaylist(playlistId), () => getPlaylist(playlistId),
{ refetchOnWindowFocus: false } { refetchOnWindowFocus: false }
); );
const [editName, setEditName] = useState('');
const [editDescription, setEditDescription] = useState('');
const [editPublic, setEditPublic] = useState(false);
const [isSubmittingEdit, setIsSubmittingEdit] = useState(false);
const [localPlaylistData, setLocalPlaylistData] = useState(data); const [localPlaylistData, setLocalPlaylistData] = useState(data);
const [isModified, setIsModified] = useState(false); const [isModified, setIsModified] = useState(false);
const playQueue = useAppSelector((state) => state.playQueue); const playQueue = useAppSelector((state) => state.playQueue);
@ -96,6 +107,9 @@ const PlaylistView = ({ ...rest }) => {
useEffect(() => { useEffect(() => {
// Set the local playlist data on any changes // Set the local playlist data on any changes
setLocalPlaylistData(data?.song); setLocalPlaylistData(data?.song);
setEditName(data?.name);
setEditDescription(data?.comment);
setEditPublic(data?.public);
}, [data]); }, [data]);
useEffect(() => { useEffect(() => {
@ -217,6 +231,27 @@ const PlaylistView = ({ ...rest }) => {
dispatch(removeProcessingPlaylist(data.id)); dispatch(removeProcessingPlaylist(data.id));
}; };
const handleEdit = async () => {
setIsSubmittingEdit(true);
const res = await updatePlaylist(
data.id,
editName,
editDescription,
editPublic
);
if (isFailedResponse(res)) {
notifyToast('error', errorMessages(res)[0]);
} else {
queryClient.refetchQueries(['playlist'], {
active: true,
});
}
setIsSubmittingEdit(false);
editTriggerRef.current.close();
};
const handleDelete = async () => { const handleDelete = async () => {
try { try {
const res = await deletePlaylist(data.id); const res = await deletePlaylist(data.id);
@ -306,10 +341,57 @@ const PlaylistView = ({ ...rest }) => {
} }
onClick={() => setLocalPlaylistData(data?.song)} onClick={() => setLocalPlaylistData(data?.song)}
/> />
<Whisper
ref={editTriggerRef}
enterable
placement="auto"
trigger="click"
speaker={
<Popover>
<Form>
<StyledInputGroup>
<Input
placeholder="Name"
value={editName}
onChange={(e) => setEditName(e)}
/>
</StyledInputGroup>
<StyledInputGroup>
<Input
placeholder="Description"
value={editDescription}
onChange={(e) => setEditDescription(e)}
/>
</StyledInputGroup>
<StyledCheckbox
defaultChecked={editPublic}
value={editPublic}
onChange={() => setEditPublic(!editPublic)}
>
Public
</StyledCheckbox>
<br />
<StyledButton
size="sm"
type="submit"
block
loading={isSubmittingEdit}
disabled={isSubmittingEdit}
onClick={handleEdit}
appearance="primary"
>
Edit
</StyledButton>
</Form>
</Popover>
}
>
<EditButton <EditButton
size="lg" size="lg"
disabled={misc.isProcessingPlaylist.includes(data?.id)} disabled={misc.isProcessingPlaylist.includes(data?.id)}
/> />
</Whisper>
<DeleteButton <DeleteButton
size="lg" size="lg"
onClick={handleDelete} onClick={handleDelete}

Loading…
Cancel
Save