[Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641)

* Add ordering Icons

* Refactor doCollectionEdit

- It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead.
- There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter

* Add List Reordering changes

* Add toggle button for list editing

* Add toggle on content page collection sidebar

* Enable drag-n-drop to re-order list items

https://www.youtube.com/watch?v=aYZRRyukuIw

* Allow removing all unavailable claims from a List

* Fix <g> on icons

* Fix section buttons positioning

* Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim

* Change dragging cursor

* Fix sizing

* Fix dragging component

* Restrict dragging to vertical axis

* Ignore shuffle state for ordering

* Fix console errors

* Mobile fixes

* Fix sidebar spacing

* Fix grey on mobile after click
This commit is contained in:
saltrafael 2022-01-12 16:14:12 -03:00 committed by GitHub
parent c90c5bcc2a
commit 2575c5d448
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 617 additions and 336 deletions

View file

@ -2,7 +2,8 @@
.*\.typeface\.json
.*/node_modules/findup/.*
.*/node_modules/react-plastic/.*
.*/node_modules/raf-schd/.*
.*/node_modules/react-beautiful-dnd/.*
[include]

View file

@ -24,9 +24,8 @@ declare type CollectionGroup = {
}
declare type CollectionEditParams = {
claims?: Array<Claim>,
uris?: Array<string>,
remove?: boolean,
claimIds?: Array<string>,
replace?: boolean,
order?: { from: number, to: number },
type?: string,

View file

@ -67,6 +67,7 @@
"player.js": "^0.1.0",
"proxy-polyfill": "0.1.6",
"re-reselect": "^4.0.0",
"react-beautiful-dnd": "^13.1.0",
"react-datetime-picker": "^3.4.3",
"react-plastic": "^1.1.1",
"react-top-loading-bar": "^2.0.1",

View file

@ -79,15 +79,7 @@ const ClaimCollectionAdd = (props: Props) => {
.filter((list) => (isChannel ? list.type === 'collection' : list.type === 'playlist'))
.map((l) => {
const { id } = l;
return (
<CollectionSelectItem
claim={claim}
collectionId={id}
uri={permanentUrl}
key={id}
category={'builtin'}
/>
);
return <CollectionSelectItem collectionId={id} uri={permanentUrl} key={id} category={'builtin'} />;
})}
{unpublished &&
(Object.values(unpublished): any)
@ -96,13 +88,7 @@ const ClaimCollectionAdd = (props: Props) => {
.map((l) => {
const { id } = l;
return (
<CollectionSelectItem
claim={claim}
collectionId={id}
uri={permanentUrl}
key={id}
category={'unpublished'}
/>
<CollectionSelectItem collectionId={id} uri={permanentUrl} key={id} category={'unpublished'} />
);
})}
{published &&
@ -110,13 +96,7 @@ const ClaimCollectionAdd = (props: Props) => {
// $FlowFixMe
const { id } = l;
return (
<CollectionSelectItem
claim={claim}
collectionId={id}
uri={permanentUrl}
key={id}
category={'published'}
/>
<CollectionSelectItem collectionId={id} uri={permanentUrl} key={id} category={'published'} />
);
})}
</div>

View file

@ -1,4 +1,8 @@
// @flow
// $FlowFixMe
import { Draggable } from 'react-beautiful-dnd';
import { MAIN_CLASS } from 'constants/classnames';
import type { Node } from 'react';
import React, { useEffect } from 'react';
@ -48,6 +52,9 @@ type Props = {
excludeUris?: Array<string>,
loadedCallback?: (number) => void,
swipeLayout: boolean,
showEdit?: boolean,
droppableProvided?: any,
unavailableUris?: Array<string>,
};
export default function ClaimList(props: Props) {
@ -82,6 +89,9 @@ export default function ClaimList(props: Props) {
excludeUris = [],
loadedCallback,
swipeLayout = false,
showEdit,
droppableProvided,
unavailableUris,
} = props;
const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
@ -149,6 +159,30 @@ export default function ClaimList(props: Props) {
}
}, [loading, onScrollBottom, urisLength, pageSize, page]);
const getClaimPreview = (uri: string, index: number, draggableProvided?: any) => (
<ClaimPreview
uri={uri}
indexInContainer={index}
type={type}
active={activeUri && uri === activeUri}
hideMenu={hideMenu}
includeSupportAction={includeSupportAction}
showUnresolvedClaim={showUnresolvedClaims}
properties={renderProperties || (type !== 'small' ? undefined : false)}
renderActions={renderActions}
showUserBlocked={showHiddenByUser}
showHiddenByUser={showHiddenByUser}
collectionId={collectionId}
showNoSourceClaims={showNoSourceClaims}
customShouldHide={customShouldHide}
onClick={handleClaimClicked}
swipeLayout={swipeLayout}
showEdit={showEdit}
dragHandleProps={draggableProvided && draggableProvided.dragHandleProps}
unavailableUris={unavailableUris}
/>
);
return tileLayout && !header ? (
<section className={classnames('claim-grid', { 'swipe-list': swipeLayout })}>
{urisLength > 0 &&
@ -207,30 +241,44 @@ export default function ClaimList(props: Props) {
'claim-list--card-body': tileLayout,
'swipe-list': swipeLayout,
})}
{...(droppableProvided && droppableProvided.droppableProps)}
ref={droppableProvided && droppableProvided.innerRef}
>
{sortedUris.map((uri, index) => (
<React.Fragment key={uri}>
{injectedItem && index === 4 && <li>{injectedItem}</li>}
<ClaimPreview
uri={uri}
indexInContainer={index}
type={type}
active={activeUri && uri === activeUri}
hideMenu={hideMenu}
includeSupportAction={includeSupportAction}
showUnresolvedClaim={showUnresolvedClaims}
properties={renderProperties || (type !== 'small' ? undefined : false)}
renderActions={renderActions}
showUserBlocked={showHiddenByUser}
showHiddenByUser={showHiddenByUser}
collectionId={collectionId}
showNoSourceClaims={showNoSourceClaims}
customShouldHide={customShouldHide}
onClick={handleClaimClicked}
swipeLayout={swipeLayout}
/>
</React.Fragment>
))}
{injectedItem && sortedUris.some((uri, index) => index === 4) && <li>{injectedItem}</li>}
{sortedUris.map((uri, index) =>
droppableProvided ? (
<Draggable key={uri} draggableId={uri} index={index}>
{(draggableProvided, draggableSnapshot) => {
// Restrict dragging to vertical axis
// https://github.com/atlassian/react-beautiful-dnd/issues/958#issuecomment-980548919
let transform = draggableProvided.draggableProps.style.transform;
if (draggableSnapshot.isDragging && transform) {
transform = transform.replace(/\(.+,/, '(0,');
}
const style = {
...draggableProvided.draggableProps.style,
transform,
};
return (
<li ref={draggableProvided.innerRef} {...draggableProvided.draggableProps} style={style}>
{/* https://github.com/atlassian/react-beautiful-dnd/issues/1756 */}
<div style={{ display: 'none' }} {...draggableProvided.dragHandleProps} />
{getClaimPreview(uri, index, draggableProvided)}
</li>
);
}}
</Draggable>
) : (
getClaimPreview(uri, index)
)
)}
{droppableProvided && droppableProvided.placeholder}
</ul>
)}

View file

@ -166,11 +166,9 @@ function ClaimMenuList(props: Props) {
doToast({
message: source ? __('Item removed from %name%', { name }) : __('Item added to %name%', { name }),
});
doCollectionEdit(collectionId, {
claims: [contentClaim],
remove: source,
type: 'playlist',
});
if (contentClaim) {
doCollectionEdit(collectionId, { uris: [contentClaim.permanent_url], remove: source, type: 'playlist' });
}
}
function handleFollow() {

View file

@ -11,14 +11,9 @@ import {
selectDateForUri,
} from 'redux/selectors/claims';
import { makeSelectStreamingUrlForUri } from 'redux/selectors/file_info';
import {
makeSelectCollectionIsMine,
makeSelectUrlsForCollectionId,
makeSelectIndexForUrlInCollection,
} from 'redux/selectors/collections';
import { makeSelectCollectionIsMine } from 'redux/selectors/collections';
import { doResolveUri } from 'redux/actions/claims';
import { doCollectionEdit } from 'redux/actions/collections';
import { doFileGet } from 'redux/actions/file';
import { selectBanStateForUri } from 'lbryinc';
import { selectIsActiveLivestreamForUri } from 'redux/selectors/livestream';
@ -55,8 +50,6 @@ const select = (state, props) => {
isLivestream,
isLivestreamActive: isLivestream && selectIsActiveLivestreamForUri(state, props.uri),
isCollectionMine: makeSelectCollectionIsMine(props.collectionId)(state),
collectionUris: makeSelectUrlsForCollectionId(props.collectionId)(state),
collectionIndex: makeSelectIndexForUrlInCollection(props.uri, props.collectionId)(state),
lang: selectLanguage(state),
};
};
@ -64,7 +57,6 @@ const select = (state, props) => {
const perform = (dispatch) => ({
resolveUri: (uri) => dispatch(doResolveUri(uri)),
getFile: (uri) => dispatch(doFileGet(uri, false)),
editCollection: (id, params) => dispatch(doCollectionEdit(id, params)),
});
export default connect(select, perform)(ClaimPreview);

View file

@ -32,8 +32,7 @@ import ClaimPreviewLoading from './claim-preview-loading';
import ClaimPreviewHidden from './claim-preview-no-mature';
import ClaimPreviewNoContent from './claim-preview-no-content';
import { ENABLE_NO_SOURCE_CLAIMS } from 'config';
import Button from 'component/button';
import * as ICONS from 'constants/icons';
import CollectionEditButtons from 'component/collectionEditButtons';
const AbandonedChannelPreview = lazyImport(() =>
import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */)
@ -79,10 +78,7 @@ type Props = {
isLivestream?: boolean,
isLivestreamActive: boolean,
collectionId?: string,
editCollection: (string, CollectionEditParams) => void,
isCollectionMine: boolean,
collectionUris: Array<Collection>,
collectionIndex?: number,
disableNavigation?: boolean,
mediaDuration?: string,
date?: any,
@ -90,6 +86,9 @@ type Props = {
channelSubCount?: number,
swipeLayout: boolean,
lang: string,
showEdit?: boolean,
dragHandleProps?: any,
unavailableUris?: Array<string>,
};
const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
@ -143,15 +142,15 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
isLivestream,
isLivestreamActive,
collectionId,
collectionIndex,
editCollection,
isCollectionMine,
collectionUris,
disableNavigation,
indexInContainer,
channelSubCount,
swipeLayout = false,
lang,
showEdit,
dragHandleProps,
unavailableUris,
} = props;
const isCollection = claim && claim.value_type === 'collection';
@ -162,9 +161,10 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
claim === undefined || (claim !== null && claim.value_type === 'channel' && isEmpty(claim.meta) && !pending);
const abandoned = !isResolvingUri && !claim;
const isMyCollection = listId && (isCollectionMine || listId.includes('-'));
if (isMyCollection && claim === null && unavailableUris) unavailableUris.push(uri);
const shouldHideActions = hideActions || isMyCollection || type === 'small' || type === 'tooltip';
const canonicalUrl = claim && claim.canonical_url;
const lastCollectionIndex = collectionUris ? collectionUris.length - 1 : 0;
const channelSubscribers = React.useMemo(() => {
if (channelSubCount === undefined) {
return <span />;
@ -195,6 +195,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
claim && claim.repost_channel_url && claim.value_type === 'channel'
? claim.permanent_url || claim.canonical_url
: undefined;
const repostedContentUri = claim && (claim.reposted_claim ? claim.reposted_claim.permanent_url : claim.permanent_url);
// Get channel title ( use name as fallback )
let channelTitle = null;
@ -349,9 +350,14 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
'claim-preview--channel': isChannelUri,
'claim-preview--visited': !isChannelUri && !claimIsMine && hasVisitedUri,
'claim-preview--pending': pending,
'claim-preview--collection-mine': isMyCollection && showEdit,
'swipe-list__item': swipeLayout,
})}
>
{isMyCollection && showEdit && (
<CollectionEditButtons uri={uri} collectionId={listId} dragHandleProps={dragHandleProps} />
)}
{isChannelUri && claim ? (
<UriIndicator focusable={false} uri={uri} link>
<ChannelThumbnail uri={uri} small={type === 'inline'} />
@ -362,7 +368,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
<NavLink aria-hidden tabIndex={-1} {...navLinkProps}>
<FileThumbnail thumbnail={thumbnailUrl}>
<div className="claim-preview__hover-actions">
{isPlayable && <FileWatchLaterLink focusable={false} uri={uri} />}
{isPlayable && <FileWatchLaterLink focusable={false} uri={repostedContentUri} />}
</div>
{/* @if TARGET='app' */}
<div className="claim-preview__hover-actions">
@ -404,58 +410,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
{!pending && (
<>
{renderActions && claim && renderActions(claim)}
{Boolean(isMyCollection && listId) && (
<>
<div className="collection-preview__edit-buttons">
<div className="collection-preview__edit-group">
<Button
button="alt"
className={'button-collection-order'}
disabled={collectionIndex === 0}
icon={ICONS.UP}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
if (editCollection) {
// $FlowFixMe
editCollection(listId, {
order: { from: collectionIndex, to: Number(collectionIndex) - 1 },
});
}
}}
/>
<Button
button="alt"
className={'button-collection-order'}
icon={ICONS.DOWN}
disabled={collectionIndex === lastCollectionIndex}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
if (editCollection) {
// $FlowFixMe
editCollection(listId, {
order: { from: collectionIndex, to: Number(collectionIndex + 1) },
});
}
}}
/>
</div>
<div className="collection-preview__edit-group">
<Button
button="alt"
icon={ICONS.DELETE}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
// $FlowFixMe
if (editCollection) editCollection(listId, { claims: [claim], remove: true });
}}
/>
</div>
</div>
</>
)}
{shouldHideActions || renderActions ? null : actions !== undefined ? (
actions
) : (

View file

@ -93,6 +93,7 @@ function ClaimPreviewTile(props: Props) {
const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile, placeholder) || thumbnail;
const canonicalUrl = claim && claim.canonical_url;
const permanentUrl = claim && claim.permanent_url;
const repostedContentUri = claim && (claim.reposted_claim ? claim.reposted_claim.permanent_url : claim.permanent_url);
const listId = collectionId || collectionClaimId;
const navigateUrl =
formatLbryUrlForWeb(canonicalUrl || uri || '/') + (listId ? generateListSearchUrlParams(listId) : '');
@ -188,7 +189,7 @@ function ClaimPreviewTile(props: Props) {
{!isChannel && (
<React.Fragment>
<div className="claim-preview__hover-actions">
{isPlayable && <FileWatchLaterLink focusable={false} uri={uri} />}
{isPlayable && <FileWatchLaterLink focusable={false} uri={repostedContentUri} />}
</div>
{/* @if TARGET='app' */}
<div className="claim-preview__hover-actions">

View file

@ -22,6 +22,8 @@ type Props = {
collectionId: string,
showInfo: boolean,
setShowInfo: (boolean) => void,
showEdit: boolean,
setShowEdit: (boolean) => void,
collectionHasEdits: boolean,
isBuiltin: boolean,
doToggleShuffleList: (string, boolean) => void,
@ -44,6 +46,8 @@ function CollectionActions(props: Props) {
doToggleShuffleList,
playNextUri,
firstItem,
showEdit,
setShowEdit,
} = props;
const [doShuffle, setDoShuffle] = React.useState(false);
const { push } = useHistory();
@ -147,15 +151,28 @@ function CollectionActions(props: Props) {
</>
);
const infoButton = (
<Button
title={__('Info')}
className={classnames('button-toggle', {
'button-toggle--active': showInfo,
})}
icon={ICONS.MORE}
onClick={() => setShowInfo(!showInfo)}
/>
const infoButtons = (
<div className="section">
{uri && (
<Button
title={__('Info')}
className={classnames('button-toggle', {
'button-toggle--active': showInfo,
})}
icon={ICONS.MORE}
onClick={() => setShowInfo(!showInfo)}
/>
)}
{isMyCollection && (
<Button
title={__('Edit')}
className={classnames('button-toggle', { 'button-toggle--active': showEdit })}
icon={ICONS.EDIT}
onClick={() => setShowEdit(!showEdit)}
/>
)}
</div>
);
if (isMobile) {
@ -163,7 +180,7 @@ function CollectionActions(props: Props) {
<div className="media__actions">
{lhsSection}
{rhsSection}
{uri && <span>{infoButton}</span>}
{infoButtons}
</div>
);
} else {
@ -173,7 +190,8 @@ function CollectionActions(props: Props) {
{lhsSection}
{rhsSection}
</div>
{uri && <>{infoButton}</>}
{infoButtons}
</div>
);
}

View file

@ -1,13 +1,15 @@
import { connect } from 'react-redux';
import CollectionContent from './view';
import { selectClaimForUri, selectClaimIsMine } from 'redux/selectors/claims';
import { selectClaimForUri } from 'redux/selectors/claims';
import {
makeSelectUrlsForCollectionId,
makeSelectNameForCollectionId,
makeSelectCollectionForId,
makeSelectCollectionIsMine,
} from 'redux/selectors/collections';
import { selectPlayingUri, selectListLoop, selectListShuffle } from 'redux/selectors/content';
import { doToggleLoopList, doToggleShuffleList } from 'redux/actions/content';
import { doCollectionEdit } from 'redux/actions/collections';
const select = (state, props) => {
const playingUri = selectPlayingUri(state);
@ -24,7 +26,7 @@ const select = (state, props) => {
collection: makeSelectCollectionForId(props.id)(state),
collectionUrls: makeSelectUrlsForCollectionId(props.id)(state),
collectionName: makeSelectNameForCollectionId(props.id)(state),
isMine: selectClaimIsMine(state, claim),
isMyCollection: makeSelectCollectionIsMine(props.id)(state),
loop,
shuffle,
};
@ -33,4 +35,5 @@ const select = (state, props) => {
export default connect(select, {
doToggleLoopList,
doToggleShuffleList,
doCollectionEdit,
})(CollectionContent);

View file

@ -1,5 +1,10 @@
// @flow
// $FlowFixMe
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import React from 'react';
import classnames from 'classnames';
import ClaimList from 'component/claimList';
import Card from 'component/common/card';
import Button from 'component/button';
@ -11,7 +16,7 @@ import * as ICONS from 'constants/icons';
type Props = {
id: string,
url: string,
isMine: boolean,
isMyCollection: boolean,
collectionUrls: Array<Claim>,
collectionName: string,
collection: any,
@ -20,10 +25,35 @@ type Props = {
doToggleLoopList: (string, boolean) => void,
doToggleShuffleList: (string, string, boolean) => void,
createUnpublishedCollection: (string, Array<any>, ?string) => void,
doCollectionEdit: (string, CollectionEditParams) => void,
};
export default function CollectionContent(props: Props) {
const { collectionUrls, collectionName, id, url, loop, shuffle, doToggleLoopList, doToggleShuffleList } = props;
const {
isMyCollection,
collectionUrls,
collectionName,
id,
url,
loop,
shuffle,
doToggleLoopList,
doToggleShuffleList,
doCollectionEdit,
} = props;
const [showEdit, setShowEdit] = React.useState(false);
function handleOnDragEnd(result) {
const { source, destination } = result;
if (!destination) return;
const { index: from } = source;
const { index: to } = destination;
doCollectionEdit(id, { order: { from, to } });
}
return (
<Card
@ -63,20 +93,39 @@ export default function CollectionContent(props: Props) {
</>
}
titleActions={
<div className="card__title-actions--link">
{/* TODO: BUTTON TO SAVE COLLECTION - Probably save/copy modal */}
<Button label={__('View List')} button="link" navigate={`/$/${PAGES.LIST}/${id}`} />
</div>
<>
<div className="card__title-actions--link">
{/* TODO: BUTTON TO SAVE COLLECTION - Probably save/copy modal */}
<Button label={__('View List')} button="link" navigate={`/$/${PAGES.LIST}/${id}`} />
</div>
{isMyCollection && (
<Button
title={__('Edit')}
className={classnames('button-toggle', { 'button-toggle--active': showEdit })}
icon={ICONS.EDIT}
onClick={() => setShowEdit(!showEdit)}
/>
)}
</>
}
body={
<ClaimList
isCardBody
type="small"
activeUri={url}
uris={collectionUrls}
collectionId={id}
empty={__('List is Empty')}
/>
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="list__ordering">
{(DroppableProvided) => (
<ClaimList
isCardBody
type="small"
activeUri={url}
uris={collectionUrls}
collectionId={id}
empty={__('List is Empty')}
showEdit={showEdit}
droppableProvided={DroppableProvided}
/>
)}
</Droppable>
</DragDropContext>
}
/>
);

View file

@ -22,6 +22,7 @@ import * as ACTIONS from 'constants/action_types';
import CollectionForm from './view';
import { selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app';
import { doSetActiveChannel, doSetIncognito } from 'redux/actions/app';
import { doCollectionEdit } from 'redux/actions/collections';
const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state),
@ -44,12 +45,13 @@ const select = (state, props) => ({
collectionClaimIds: makeSelectClaimIdsForCollectionId(props.collectionId)(state),
});
const perform = (dispatch) => ({
const perform = (dispatch, ownProps) => ({
publishCollectionUpdate: (params) => dispatch(doCollectionPublishUpdate(params)),
publishCollection: (params, collectionId) => dispatch(doCollectionPublish(params, collectionId)),
clearCollectionErrors: () => dispatch({ type: ACTIONS.CLEAR_COLLECTION_ERRORS }),
setActiveChannel: (claimId) => dispatch(doSetActiveChannel(claimId)),
setIncognito: (incognito) => dispatch(doSetIncognito(incognito)),
doCollectionEdit: (params) => dispatch(doCollectionEdit(ownProps.collectionId, params)),
});
export default connect(select, perform)(CollectionForm);

View file

@ -1,4 +1,8 @@
// @flow
// $FlowFixMe
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import { DOMAIN } from 'config';
import React from 'react';
import classnames from 'classnames';
@ -55,6 +59,7 @@ type Props = {
onDone: (string) => void,
setActiveChannel: (string) => void,
setIncognito: (boolean) => void,
doCollectionEdit: (CollectionEditParams) => void,
};
function CollectionForm(props: Props) {
@ -88,6 +93,7 @@ function CollectionForm(props: Props) {
setActiveChannel,
setIncognito,
onDone,
doCollectionEdit,
} = props;
const activeChannelName = activeChannelClaim && activeChannelClaim.name;
let prefix = IS_WEB ? `${DOMAIN}/` : 'lbry://';
@ -197,6 +203,17 @@ function CollectionForm(props: Props) {
return collectionParams;
}
function handleOnDragEnd(result) {
const { source, destination } = result;
if (!destination) return;
const { index: from } = source;
const { index: to } = destination;
doCollectionEdit({ order: { from, to } });
}
function handleLanguageChange(index, code) {
let langs = [...languageParam];
if (index === 0) {
@ -287,7 +304,6 @@ function CollectionForm(props: Props) {
}
}, [uri, hasClaim]);
console.log('params', params);
return (
<>
<div className={classnames('main--contained', { 'card--disabled': disabled })}>
@ -358,7 +374,19 @@ function CollectionForm(props: Props) {
</div>
</TabPanel>
<TabPanel>
<ClaimList uris={collectionUrls} collectionId={collectionId} empty={__('This list has no items.')} />
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="list__ordering">
{(DroppableProvided) => (
<ClaimList
uris={collectionUrls}
collectionId={collectionId}
empty={__('This list has no items.')}
showEdit
droppableProvided={DroppableProvided}
/>
)}
</Droppable>
</DragDropContext>
</TabPanel>
<TabPanel>
<Card

View file

@ -0,0 +1,23 @@
import { connect } from 'react-redux';
import { doCollectionEdit } from 'redux/actions/collections';
import { makeSelectIndexForUrlInCollection, makeSelectUrlsForCollectionId } from 'redux/selectors/collections';
import CollectionButtons from './view';
const select = (state, props) => {
const { uri, collectionId } = props;
return {
collectionIndex: makeSelectIndexForUrlInCollection(uri, collectionId, true)(state),
collectionUris: makeSelectUrlsForCollectionId(collectionId)(state),
};
};
const perform = (dispatch, ownProps) => {
const { collectionId } = ownProps;
return {
editCollection: (params) => dispatch(doCollectionEdit(collectionId, params)),
};
};
export default connect(select, perform)(CollectionButtons);

View file

@ -0,0 +1,92 @@
// @flow
import * as ICONS from 'constants/icons';
import Button from 'component/button';
import Icon from 'component/common/icon';
import React from 'react';
type Props = {
collectionIndex?: number,
collectionUris: Array<Collection>,
dragHandleProps?: any,
uri: string,
editCollection: (CollectionEditParams) => void,
};
export default function CollectionButtons(props: Props) {
const { collectionIndex: foundIndex, collectionUris, dragHandleProps, uri, editCollection } = props;
const [confirmDelete, setConfirmDelete] = React.useState(false);
const lastCollectionIndex = collectionUris ? collectionUris.length - 1 : 0;
const collectionIndex = Number(foundIndex);
const orderButton = (className: string, title: string, icon: string, disabled: boolean, handleClick?: () => void) => (
<Button
className={`button-collection-manage ${className}`}
icon={icon}
title={title}
disabled={disabled}
onClick={() => handleClick && handleClick()}
/>
);
return (
<div
className="collection-preview__edit-buttons"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
}}
>
<div className="collection-preview__edit-group" {...dragHandleProps}>
<div className="button-collection-manage button-collection-drag top-left bottom-left">
<Icon icon={ICONS.DRAG} title={__('Drag')} size={20} />
</div>
</div>
<div className="collection-preview__edit-group">
{orderButton('', __('Move Top'), ICONS.UP_TOP, collectionIndex === 0, () =>
editCollection({ order: { from: collectionIndex, to: 0 } })
)}
{orderButton('', __('Move Bottom'), ICONS.DOWN_BOTTOM, collectionIndex === lastCollectionIndex, () =>
editCollection({ order: { from: collectionIndex, to: lastCollectionIndex } })
)}
</div>
<div className="collection-preview__edit-group">
{orderButton('', __('Move Up'), ICONS.UP, collectionIndex === 0, () =>
editCollection({ order: { from: collectionIndex, to: collectionIndex - 1 } })
)}
{orderButton('', __('Move Down'), ICONS.DOWN, collectionIndex === lastCollectionIndex, () =>
editCollection({ order: { from: collectionIndex, to: collectionIndex + 1 } })
)}
</div>
{!confirmDelete ? (
<div className="collection-preview__edit-group collection-preview__delete ">
<Button
className="button-collection-manage button-collection-delete top-right bottom-right"
icon={ICONS.DELETE}
title={__('Remove')}
onClick={() => setConfirmDelete(true)}
/>
</div>
) : (
<div className="collection-preview__edit-group collection-preview__delete">
<Button
className="button-collection-manage button-collection-delete-cancel top-right"
icon={ICONS.REMOVE}
title={__('Cancel')}
onClick={() => setConfirmDelete(false)}
/>
{orderButton('button-collection-delete-confirm bottom-right', __('Remove'), ICONS.DELETE, false, () =>
editCollection({ uris: [uri], remove: true })
)}
</div>
)}
</div>
);
}

View file

@ -5,10 +5,12 @@ import { doCollectionEdit } from 'redux/actions/collections';
import CollectionSelectItem from './view';
const select = (state, props) => {
const { collectionId, uri } = props;
return {
collection: makeSelectCollectionForId(props.collectionId)(state),
hasClaim: makeSelectCollectionForIdHasClaimUrl(props.collectionId, props.uri)(state),
collectionPending: makeSelectClaimIsPending(props.collectionId)(state),
collection: makeSelectCollectionForId(collectionId)(state),
hasClaim: makeSelectCollectionForIdHasClaimUrl(collectionId, uri)(state),
collectionPending: makeSelectClaimIsPending(collectionId)(state),
};
};

View file

@ -11,15 +11,15 @@ type Props = {
category: string,
edited: boolean,
editCollection: (string, CollectionEditParams) => void,
claim: Claim,
uri: string,
collectionPending: Collection,
};
function CollectionSelectItem(props: Props) {
const { collection, hasClaim, category, editCollection, claim, collectionPending } = props;
const { collection, hasClaim, category, editCollection, uri, collectionPending } = props;
const { name, id } = collection;
const handleChange = (e) => {
editCollection(id, { claims: [claim], remove: hasClaim });
editCollection(id, { uris: [uri], remove: hasClaim });
};
let icon;

View file

@ -534,6 +534,9 @@ export const icons = {
<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" />
),
[ICONS.UP]: buildIcon(<polyline transform="matrix(1,0,0,-1,0,24.707107)" points="6 9 12 15 18 9" />),
[ICONS.UP_TOP]: buildIcon(<path d="m6 16 6-6 6 6M6 8h12" />),
[ICONS.DOWN_BOTTOM]: buildIcon(<path d="m6 8 6 6 6-6M6 16h12" />),
[ICONS.DRAG]: buildIcon(<path d="m8 18 4 4 4-4M4 14h16M4 10h16M8 6l4-4 4 4" />),
[ICONS.DOWN]: buildIcon(<polyline points="6 9 12 15 18 9" />),
[ICONS.FULLSCREEN]: buildIcon(
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />

View file

@ -1,18 +1,15 @@
import { connect } from 'react-redux';
import { doCollectionEdit } from 'redux/actions/collections';
import { makeSelectCollectionForIdHasClaimUrl } from 'redux/selectors/collections';
import { makeSelectClaimForUri } from 'redux/selectors/claims';
import * as COLLECTIONS_CONSTS from 'constants/collections';
import FileWatchLaterLink from './view';
import { doToast } from 'redux/actions/notifications';
const select = (state, props) => {
const claim = makeSelectClaimForUri(props.uri)(state);
const permanentUri = claim && claim.permanent_url;
const { uri } = props;
return {
claim,
hasClaimInWatchLater: makeSelectCollectionForIdHasClaimUrl(COLLECTIONS_CONSTS.WATCH_LATER_ID, permanentUri)(state),
hasClaimInWatchLater: makeSelectCollectionForIdHasClaimUrl(COLLECTIONS_CONSTS.WATCH_LATER_ID, uri)(state),
};
};

View file

@ -7,7 +7,6 @@ import * as COLLECTIONS_CONSTS from 'constants/collections';
type Props = {
uri: string,
claim: StreamClaim,
focusable: boolean,
hasClaimInWatchLater: boolean,
doToast: ({ message: string }) => void,
@ -15,14 +14,10 @@ type Props = {
};
function FileWatchLaterLink(props: Props) {
const { claim, hasClaimInWatchLater, doToast, doCollectionEdit, focusable = true } = props;
const { uri, hasClaimInWatchLater, doToast, doCollectionEdit, focusable = true } = props;
const buttonRef = useRef();
let isHovering = useHover(buttonRef);
if (!claim) {
return null;
}
function handleWatchLater(e) {
e.preventDefault();
doToast({
@ -31,7 +26,7 @@ function FileWatchLaterLink(props: Props) {
linkTarget: !hasClaimInWatchLater && '/list/watchlater',
});
doCollectionEdit(COLLECTIONS_CONSTS.WATCH_LATER_ID, {
claims: [claim],
uris: [uri],
remove: hasClaimInWatchLater,
type: 'playlist',
});

View file

@ -65,7 +65,10 @@ export const OPTIONS = 'Sliders';
export const YES = 'ThumbsUp';
export const NO = 'ThumbsDown';
export const UP = 'ChevronUp';
export const UP_TOP = 'ChevronUpTop';
export const DOWN = 'ChevronDown';
export const DOWN_BOTTOM = 'ChevronDownBottom';
export const DRAG = 'DragAndDrop';
export const SECURE = 'Lock';
export const MENU = 'Menu';
export const BACKUP = 'Database';

View file

@ -1,4 +1,8 @@
// @flow
// $FlowFixMe
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import React from 'react';
import ClaimList from 'component/claimList';
import Page from 'component/page';
@ -51,6 +55,7 @@ export default function CollectionPage(props: Props) {
collectionHasEdits,
claimIsPending,
isResolvingCollection,
editCollection,
fetchCollectionItems,
deleteCollection,
} = props;
@ -62,9 +67,23 @@ export default function CollectionPage(props: Props) {
const [didTryResolve, setDidTryResolve] = React.useState(false);
const [showInfo, setShowInfo] = React.useState(false);
const [showEdit, setShowEdit] = React.useState(false);
const [unavailableUris, setUnavailable] = React.useState([]);
const { name, totalItems } = collection || {};
const isBuiltin = COLLECTIONS_CONSTS.BUILTIN_LISTS.includes(collectionId);
function handleOnDragEnd(result) {
const { source, destination } = result;
if (!destination) return;
const { index: from } = source;
const { index: to } = destination;
editCollection(collectionId, { order: { from, to } });
}
const urlParams = new URLSearchParams(search);
const editing = urlParams.get(PAGE_VIEW_QUERY) === EDIT_PAGE;
@ -93,6 +112,18 @@ export default function CollectionPage(props: Props) {
/>
);
const removeUnavailable = (
<Button
button="close"
icon={ICONS.DELETE}
label={__('Remove all unavailable claims')}
onClick={() => {
editCollection(collectionId, { uris: unavailableUris, remove: true });
setUnavailable([]);
}}
/>
);
let titleActions;
if (collectionHasEdits) {
titleActions = unpublished;
@ -123,7 +154,7 @@ export default function CollectionPage(props: Props) {
{claim ? claim.value.title || claim.name : collection && collection.name}
</span>
}
titleActions={titleActions}
titleActions={unavailableUris.length > 0 ? removeUnavailable : titleActions}
subtitle={subTitle}
body={
<CollectionActions
@ -133,6 +164,8 @@ export default function CollectionPage(props: Props) {
showInfo={showInfo}
isBuiltin={isBuiltin}
collectionUrls={collectionUrls}
setShowEdit={setShowEdit}
showEdit={showEdit}
/>
}
actions={
@ -188,7 +221,20 @@ export default function CollectionPage(props: Props) {
<Page>
<div className={classnames('section card-stack')}>
{info}
<ClaimList uris={collectionUrls} collectionId={collectionId} />
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="list__ordering">
{(DroppableProvided) => (
<ClaimList
uris={collectionUrls}
collectionId={collectionId}
showEdit={showEdit}
droppableProvided={DroppableProvided}
unavailableUris={unavailableUris}
/>
)}
</Droppable>
</DragDropContext>
</div>
</Page>
);

View file

@ -319,160 +319,49 @@ export const doCollectionEdit = (collectionId: string, params: CollectionEditPar
) => {
const state = getState();
const collection: Collection = makeSelectCollectionForId(collectionId)(state);
if (!collection) return dispatch({ type: ACTIONS.COLLECTION_ERROR, data: { message: 'collection does not exist' } });
const editedCollection: Collection = makeSelectEditedCollectionForId(collectionId)(state);
const unpublishedCollection: Collection = makeSelectUnpublishedCollectionForId(collectionId)(state);
const publishedCollection: Collection = makeSelectPublishedCollectionForId(collectionId)(state); // needs to be published only
const generateCollectionItemsFromSearchResult = (results) => {
return (
Object.values(results)
// $FlowFixMe
.reduce(
(
acc,
cur: {
stream: ?StreamClaim,
channel: ?ChannelClaim,
claimsInChannel: ?number,
collection: ?CollectionClaim,
}
) => {
let url;
if (cur.stream) {
url = cur.stream.permanent_url;
} else if (cur.channel) {
url = cur.channel.permanent_url;
} else if (cur.collection) {
url = cur.collection.permanent_url;
} else {
return acc;
}
acc.push(url);
return acc;
},
[]
)
);
};
if (!collection) {
return dispatch({
type: ACTIONS.COLLECTION_ERROR,
data: {
message: 'collection does not exist',
},
});
}
let currentItems = collection.items ? collection.items.concat() : [];
const { claims: passedClaims, order, claimIds, replace, remove, type } = params;
const { uris, order, remove, type } = params;
const collectionType = type || collection.type;
let newItems: Array<?string> = currentItems;
const currentUrls = collection.items ? collection.items.concat() : [];
let newItems = currentUrls;
if (passedClaims) {
// Passed uris to add/remove:
if (uris) {
if (remove) {
const passedUrls = passedClaims.map((claim) => claim.permanent_url);
// $FlowFixMe // need this?
newItems = currentItems.filter((item: string) => !passedUrls.includes(item));
// Filters (removes) the passed uris from the current list items
newItems = currentUrls.filter((url) => url && !uris.includes(url));
} else {
passedClaims.forEach((claim) => newItems.push(claim.permanent_url));
}
}
if (claimIds) {
const batches = [];
if (claimIds.length > 50) {
for (let i = 0; i < Math.ceil(claimIds.length / 50); i++) {
batches[i] = claimIds.slice(i * 50, (i + 1) * 50);
}
} else {
batches[0] = claimIds;
}
const resultArray = await Promise.all(
batches.map((batch) => {
let options = { claim_ids: batch, page: 1, page_size: 50 };
return dispatch(doClaimSearch(options));
})
);
const searchResults = Object.assign({}, ...resultArray);
if (replace) {
newItems = generateCollectionItemsFromSearchResult(searchResults);
} else {
newItems = currentItems.concat(generateCollectionItemsFromSearchResult(searchResults));
// Pushes (adds to the end) the passed uris to the current list items
uris.forEach((url) => newItems.push(url));
}
}
// Passed an ordering to change: (doesn't need the uris here since
// the items are already on the list)
if (order) {
const [movedItem] = currentItems.splice(order.from, 1);
currentItems.splice(order.to, 0, movedItem);
const [movedItem] = currentUrls.splice(order.from, 1);
currentUrls.splice(order.to, 0, movedItem);
}
// console.log('p&e', publishedCollection.items, newItems, publishedCollection.items.join(','), newItems.join(','))
if (editedCollection) {
// delete edited if newItems are the same as publishedItems
if (publishedCollection.items.join(',') === newItems.join(',')) {
dispatch({
type: ACTIONS.COLLECTION_DELETE,
data: {
id: collectionId,
collectionKey: 'edited',
},
});
} else {
dispatch({
type: ACTIONS.COLLECTION_EDIT,
data: {
id: collectionId,
collectionKey: 'edited',
collection: {
items: newItems,
id: collectionId,
name: params.name || collection.name,
updatedAt: getTimestamp(),
type: collectionType,
},
},
});
}
} else if (publishedCollection) {
// Delete 'edited' if newItems are the same as publishedItems
if (editedCollection && newItems && publishedCollection.items.join(',') === newItems.join(',')) {
dispatch({ type: ACTIONS.COLLECTION_DELETE, data: { id: collectionId, collectionKey: 'edited' } });
} else {
dispatch({
type: ACTIONS.COLLECTION_EDIT,
data: {
id: collectionId,
collectionKey: 'edited',
collection: {
items: newItems,
id: collectionId,
name: params.name || collection.name,
updatedAt: getTimestamp(),
type: collectionType,
},
},
});
} else if (COLS.BUILTIN_LISTS.includes(collectionId)) {
dispatch({
type: ACTIONS.COLLECTION_EDIT,
data: {
id: collectionId,
collectionKey: 'builtin',
collection: {
items: newItems,
id: collectionId,
name: params.name || collection.name,
updatedAt: getTimestamp(),
type: collectionType,
},
},
});
} else if (unpublishedCollection) {
dispatch({
type: ACTIONS.COLLECTION_EDIT,
data: {
id: collectionId,
collectionKey: 'unpublished',
collectionKey:
((editedCollection || publishedCollection) && 'edited') ||
(COLS.BUILTIN_LISTS.includes(collectionId) && 'builtin') ||
(unpublishedCollection && 'unpublished'),
collection: {
items: newItems,
id: collectionId,
@ -483,5 +372,6 @@ export const doCollectionEdit = (collectionId: string, params: CollectionEditPar
},
});
}
return true;
};

View file

@ -154,13 +154,13 @@ export const makeSelectClaimIdsForCollectionId = (id: string) =>
return ids;
});
export const makeSelectIndexForUrlInCollection = (url: string, id: string) =>
export const makeSelectIndexForUrlInCollection = (url: string, id: string, ignoreShuffle?: boolean) =>
createSelector(
(state) => state.content.shuffleList,
makeSelectUrlsForCollectionId(id),
makeSelectClaimForUri(url),
(shuffleState, urls, claim) => {
const shuffleUrls = shuffleState && shuffleState.collectionId === id && shuffleState.newUrls;
const shuffleUrls = !ignoreShuffle && shuffleState && shuffleState.collectionId === id && shuffleState.newUrls;
const listUrls = shuffleUrls || urls;
const index = listUrls && listUrls.findIndex((u) => u === url);

View file

@ -602,30 +602,65 @@ svg + .button__label {
}
}
.button-collection-order {
height: 100%;
.button-collection-manage {
font-size: var(--font-base);
border-left-width: 0;
border-radius: 0;
margin: 0;
color: var(--color-text);
width: 100%;
button {
padding: var(--spacing-xs);
padding: var(--spacing-xxs);
}
.button__content {
display: unset;
}
line-height: 1.2;
font-weight: var(--font-weight-bold);
height: 100%;
background-color: var(--color-button-alt-bg);
color: var(--color-button-alt-text);
text-align: center;
&:hover {
background-color: var(--color-button-alt-bg-hover);
}
@media (max-width: $breakpoint-small) {
padding: var(--spacing-s) var(--spacing-s);
font-size: var(--font-small);
&:focus {
background-color: var(--color-button-alt-bg);
}
}
&:first-of-type {
border-left-width: 1px;
&.top-right {
border-top-right-radius: var(--border-radius);
}
&.top-left {
border-top-left-radius: var(--border-radius);
}
&.bottom-right {
border-bottom-right-radius: var(--border-radius);
}
&.bottom-left {
border-bottom-left-radius: var(--border-radius);
}
&:last-of-type {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
&.button-collection-delete-confirm {
background-color: green;
}
&.button-collection-delete-cancel {
background-color: red;
}
&.button-collection-drag {
cursor: grab;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
padding-bottom: var(--spacing-xs);
}
}

View file

@ -215,6 +215,15 @@
}
}
.claim-preview--collection-mine {
padding-left: 9rem;
position: relative;
@media (max-width: $breakpoint-small) {
padding-left: 6.5rem;
}
}
.claim-preview--pending {
opacity: 0.6;
}

View file

@ -86,21 +86,30 @@
}
.collection-preview__edit-buttons {
display: flex;
flex-direction: row;
margin-top: var(--spacing-xs);
margin-bottom: var(--spacing-xs);
position: absolute;
left: 0;
top: calc(-1 * var(--spacing-m));
bottom: calc(-1 * var(--spacing-m));
padding-left: 0;
padding-top: var(--spacing-m);
padding-bottom: var(--spacing-m);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
align-items: center;
}
.collection-preview__edit-group {
&:not(:last-of-type) {
margin-right: var(--spacing-s);
}
margin-right: var(--spacing-s);
button {
@media (max-width: $breakpoint-small) {
padding: var(--spacing-s) var(--spacing-s);
}
height: 100%;
display: flex;
flex-direction: column;
width: 2rem;
align-items: center;
justify-content: center;
align-items: stretch;
flex-grow: 4;
@media (max-width: $breakpoint-small) {
width: 1.5rem;
}
}

View file

@ -173,6 +173,21 @@
flex-direction: column;
overflow-wrap: break-word;
.card__header--between {
align-items: flex-start !important;
.card__title-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: var(--spacing-s);
button {
margin-top: var(--spacing-xxs);
}
}
}
.file-page__recommended-collection__row {
display: block;
@ -184,6 +199,15 @@
max-width: 50rem;
}
}
.collection-preview__edit-group {
width: 1.5rem;
}
.claim-preview--collection-mine {
padding-left: 6.5rem;
position: relative;
}
}
@media (max-width: $breakpoint-medium) {

View file

@ -1188,6 +1188,13 @@
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.15.4", "@babel/runtime@^7.9.2":
version "7.16.7"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/template@^7.10.1", "@babel/template@^7.8.3", "@babel/template@^7.8.6":
version "7.10.1"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.1.tgz#e167154a94cb5f14b28dc58f5356d2162f539811"
@ -1935,6 +1942,14 @@
"@types/minimatch" "*"
"@types/node" "*"
"@types/hoist-non-react-statics@^3.3.0":
version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
dependencies:
"@types/react" "*"
hoist-non-react-statics "^3.3.0"
"@types/html-minifier-terser@^5.0.0":
version "5.1.1"
resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
@ -2000,6 +2015,16 @@
dependencies:
"@types/react" "*"
"@types/react-redux@^7.1.20":
version "7.1.21"
resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.21.tgz#f32bbaf7cbc4b93f51e10d340aa54035c084b186"
integrity sha512-bLdglUiBSQNzWVVbmNPKGYYjrzp3/YDPwfOH3nLEz99I4awLlaRAPWjo6bZ2POpxztFWtDDXIPxBLVykXqBt+w==
dependencies:
"@types/hoist-non-react-statics" "^3.3.0"
"@types/react" "*"
hoist-non-react-statics "^3.3.0"
redux "^4.0.0"
"@types/react-transition-group@^4.4.4":
version "4.4.4"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
@ -5365,6 +5390,13 @@ crypto-random-string@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
css-box-model@^1.2.0:
version "1.2.1"
resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
dependencies:
tiny-invariant "^1.0.6"
css-color-names@0.0.4, css-color-names@^0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@ -13551,6 +13583,11 @@ querystringify@^2.1.1:
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
raf-schd@^4.0.2:
version "4.0.3"
resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
randomatic@^3.0.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
@ -13627,6 +13664,19 @@ react-awesome-lightbox@^1.7.3:
resolved "https://registry.yarnpkg.com/react-awesome-lightbox/-/react-awesome-lightbox-1.7.3.tgz#ee1c00fd4197e0e65bf996aa219eac4d8b6db5a0"
integrity sha512-mSxdL3KGzuh2eR8I00nv9njiolmMoXITuCvfd71DBXK13JW3e+Z/sCMENS9+dngBJU8/m7dR1Ix0W6afS5cFsA==
react-beautiful-dnd@^13.1.0:
version "13.1.0"
resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d"
integrity sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==
dependencies:
"@babel/runtime" "^7.9.2"
css-box-model "^1.2.0"
memoize-one "^5.1.1"
raf-schd "^4.0.2"
react-redux "^7.2.0"
redux "^4.0.4"
use-memo-one "^1.1.1"
react-calendar@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/react-calendar/-/react-calendar-3.3.1.tgz#da691a5d59c88f178695fd8b33909a71d698021f"
@ -13877,6 +13927,18 @@ react-redux@^6.0.1:
prop-types "^15.7.2"
react-is "^16.8.2"
react-redux@^7.2.0:
version "7.2.6"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa"
integrity sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==
dependencies:
"@babel/runtime" "^7.15.4"
"@types/react-redux" "^7.1.20"
hoist-non-react-statics "^3.3.2"
loose-envify "^1.4.0"
prop-types "^15.7.2"
react-is "^17.0.2"
react-router-dom@^5.1.0:
version "5.1.2"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
@ -14218,6 +14280,13 @@ redux@^3.6.0:
loose-envify "^1.1.0"
symbol-observable "^1.0.3"
redux@^4.0.0, redux@^4.0.4:
version "4.1.2"
resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz#140f35426d99bb4729af760afcf79eaaac407104"
integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==
dependencies:
"@babel/runtime" "^7.9.2"
regenerate-unicode-properties@^8.2.0:
version "8.2.0"
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@ -16145,6 +16214,11 @@ tiny-invariant@^1.0.2:
version "1.1.0"
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
tiny-invariant@^1.0.6:
version "1.2.0"
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
tiny-relative-date@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz#fa08aad501ed730f31cc043181d995c39a935e07"
@ -16826,6 +16900,11 @@ url@^0.11.0:
punycode "1.3.2"
querystring "0.2.0"
use-memo-one@^1.1.1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"
integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==
use@^3.1.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"