db73879918
* fix: Logic error in toast fix: Remove useless component * fix: Logout not clearing all stores * Add icons to notification settings * Add eslint rule to enforce spaced comment * Add eslint rule for arrow-body-style * Add eslint rule to enforce self-closing components * Add menu to api key settings Fix: Deleting webhook subscription does not remove from UI Split webhook subscriptions into active and inactive Styling updates
87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
import fractionalIndex from "fractional-index";
|
|
import { observer } from "mobx-react";
|
|
import * as React from "react";
|
|
import { useDrop } from "react-dnd";
|
|
import { useTranslation } from "react-i18next";
|
|
import styled from "styled-components";
|
|
import Collection from "~/models/Collection";
|
|
import Flex from "~/components/Flex";
|
|
import Error from "~/components/List/Error";
|
|
import PaginatedList from "~/components/PaginatedList";
|
|
import { createCollection } from "~/actions/definitions/collections";
|
|
import useStores from "~/hooks/useStores";
|
|
import DraggableCollectionLink from "./DraggableCollectionLink";
|
|
import DropCursor from "./DropCursor";
|
|
import Header from "./Header";
|
|
import PlaceholderCollections from "./PlaceholderCollections";
|
|
import Relative from "./Relative";
|
|
import SidebarAction from "./SidebarAction";
|
|
import { DragObject } from "./SidebarLink";
|
|
|
|
function Collections() {
|
|
const { documents, collections } = useStores();
|
|
const { t } = useTranslation();
|
|
const orderedCollections = collections.orderedData;
|
|
|
|
const [
|
|
{ isCollectionDropping, isDraggingAnyCollection },
|
|
dropToReorderCollection,
|
|
] = useDrop({
|
|
accept: "collection",
|
|
drop: async (item: DragObject) => {
|
|
collections.move(
|
|
item.id,
|
|
fractionalIndex(null, orderedCollections[0].index)
|
|
);
|
|
},
|
|
canDrop: (item) => item.id !== orderedCollections[0].id,
|
|
collect: (monitor) => ({
|
|
isCollectionDropping: monitor.isOver(),
|
|
isDraggingAnyCollection: monitor.getItemType() === "collection",
|
|
}),
|
|
});
|
|
|
|
return (
|
|
<Flex column>
|
|
<Header id="collections" title={t("Collections")}>
|
|
<Relative>
|
|
<PaginatedList
|
|
fetch={collections.fetchPage}
|
|
options={{ limit: 25 }}
|
|
aria-label={t("Collections")}
|
|
items={collections.orderedData}
|
|
loading={<PlaceholderCollections />}
|
|
heading={
|
|
isDraggingAnyCollection ? (
|
|
<DropCursor
|
|
isActiveDrop={isCollectionDropping}
|
|
innerRef={dropToReorderCollection}
|
|
position="top"
|
|
/>
|
|
) : undefined
|
|
}
|
|
renderError={(props) => <StyledError {...props} />}
|
|
renderItem={(item: Collection, index) => (
|
|
<DraggableCollectionLink
|
|
key={item.id}
|
|
collection={item}
|
|
activeDocument={documents.active}
|
|
prefetchDocument={documents.prefetchDocument}
|
|
belowCollection={orderedCollections[index + 1]}
|
|
/>
|
|
)}
|
|
/>
|
|
<SidebarAction action={createCollection} depth={0} />
|
|
</Relative>
|
|
</Header>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
const StyledError = styled(Error)`
|
|
font-size: 15px;
|
|
padding: 0 8px;
|
|
`;
|
|
|
|
export default observer(Collections);
|