rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: item linking (#1781)

Browse Source
This commit is contained in:
Aman Harwara
2022-10-12 21:57:51 +05:30
committed by GitHub
parent 2b89ad488f
commit 81532f2f20
12 changed files with 292 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
View File

@@ -33,7 +33,7 @@ const LinkedItemsSectionItem = ({
getTitleForLinkedTag: LinkingController['getTitleForLinkedTag']
item: LinkableItem
searchQuery?: string
unlinkItem: LinkingController['unlinkItemFromSelectedItem']
unlinkItem: () => void
handleFileAction: FilesController['handleFileAction']
}) => {
const menuButtonRef = useRef<HTMLButtonElement>(null)
@@ -85,7 +85,7 @@ const LinkedItemsSectionItem = ({
</div>
) : (
<button
className="flex flex-grow items-center justify-between gap-4 py-2 pl-3 pr-12 text-sm hover:bg-info-backdrop focus:bg-info-backdrop"
className="flex max-w-full flex-grow items-center justify-between gap-4 py-2 pl-3 pr-12 text-sm hover:bg-info-backdrop focus:bg-info-backdrop"
onClick={() => activateItem(item)}
onContextMenu={(event) => {
event.preventDefault()
@@ -118,7 +118,7 @@ const LinkedItemsSectionItem = ({
<MenuItem
type={MenuItemType.IconButton}
onClick={() => {
unlinkItem(item)
unlinkItem()
toggleMenu()
}}
>
@@ -166,10 +166,11 @@ const LinkedItemsPanel = ({
}) => {
const {
tags,
files,
linkedFiles,
filesLinkingToActiveItem,
notesLinkedToItem,
notesLinkingToItem,
allLinkedItems,
notesLinkingToActiveItem,
allItemLinks: allLinkedItems,
getTitleForLinkedTag,
getLinkedItemIcon,
getSearchResults,
@@ -196,7 +197,7 @@ const LinkedItemsPanel = ({
<form
className={classNames(
'sticky top-0 z-10 bg-default px-2.5 pt-2.5',
allLinkedItems.length || linkedResults.length || unlinkedResults.length || notesLinkingToItem.length
allLinkedItems.length || linkedResults.length || unlinkedResults.length || notesLinkingToActiveItem.length
? 'border-b border-border pb-2.5'
: 'pb-1',
)}
@@ -246,14 +247,14 @@ const LinkedItemsPanel = ({
<div>
<div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked</div>
<div className="my-1">
{linkedResults.map((item) => (
{linkedResults.map((link) => (
<LinkedItemsSectionItem
key={item.uuid}
item={item}
key={link.id}
item={link.item}
getItemIcon={getLinkedItemIcon}
getTitleForLinkedTag={getTitleForLinkedTag}
searchQuery={searchQuery}
unlinkItem={unlinkItemFromSelectedItem}
unlinkItem={() => unlinkItemFromSelectedItem(link)}
activateItem={activateItem}
handleFileAction={filesController.handleFileAction}
/>
@@ -268,14 +269,14 @@ const LinkedItemsPanel = ({
<div>
<div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Tags</div>
<div className="my-1">
{tags.map((item) => (
{tags.map((link) => (
<LinkedItemsSectionItem
key={item.uuid}
item={item}
key={link.id}
item={link.item}
getItemIcon={getLinkedItemIcon}
getTitleForLinkedTag={getTitleForLinkedTag}
searchQuery={searchQuery}
unlinkItem={unlinkItemFromSelectedItem}
unlinkItem={() => unlinkItemFromSelectedItem(link)}
activateItem={activateItem}
handleFileAction={filesController.handleFileAction}
/>
@@ -283,18 +284,39 @@ const LinkedItemsPanel = ({
</div>
</div>
)}
{!!files.length && (
{!!linkedFiles.length && (
<div>
<div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Files</div>
<div className="my-1">
{files.map((item) => (
{linkedFiles.map((link) => (
<LinkedItemsSectionItem
key={item.uuid}
item={item}
key={link.id}
item={link.item}
getItemIcon={getLinkedItemIcon}
getTitleForLinkedTag={getTitleForLinkedTag}
searchQuery={searchQuery}
unlinkItem={unlinkItemFromSelectedItem}
unlinkItem={() => unlinkItemFromSelectedItem(link)}
activateItem={activateItem}
handleFileAction={filesController.handleFileAction}
/>
))}
</div>
</div>
)}
{!!filesLinkingToActiveItem.length && (
<div>
<div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">
Files Linking To Current File
</div>
<div className="my-1">
{filesLinkingToActiveItem.map((link) => (
<LinkedItemsSectionItem
key={link.id}
item={link.item}
getItemIcon={getLinkedItemIcon}
getTitleForLinkedTag={getTitleForLinkedTag}
searchQuery={searchQuery}
unlinkItem={() => unlinkItemFromSelectedItem(link)}
activateItem={activateItem}
handleFileAction={filesController.handleFileAction}
/>
@@ -306,14 +328,14 @@ const LinkedItemsPanel = ({
<div>
<div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Notes</div>
<div className="my-1">
{notesLinkedToItem.map((item) => (
{notesLinkedToItem.map((link) => (
<LinkedItemsSectionItem
key={item.uuid}
item={item}
key={link.id}
item={link.item}
getItemIcon={getLinkedItemIcon}
getTitleForLinkedTag={getTitleForLinkedTag}
searchQuery={searchQuery}
unlinkItem={unlinkItemFromSelectedItem}
unlinkItem={() => unlinkItemFromSelectedItem(link)}
activateItem={activateItem}
handleFileAction={filesController.handleFileAction}
/>
@@ -321,20 +343,20 @@ const LinkedItemsPanel = ({
</div>
</div>
)}
{!!notesLinkingToItem.length && (
{!!notesLinkingToActiveItem.length && (
<div>
<div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">
Notes Linking To This Note
</div>
<div className="my-1">
{notesLinkingToItem.map((item) => (
{notesLinkingToActiveItem.map((link) => (
<LinkedItemsSectionItem
key={item.uuid}
item={item}
key={link.id}
item={link.item}
getItemIcon={getLinkedItemIcon}
getTitleForLinkedTag={getTitleForLinkedTag}
searchQuery={searchQuery}
unlinkItem={unlinkItemFromSelectedItem}
unlinkItem={() => unlinkItemFromSelectedItem(link)}
activateItem={activateItem}
handleFileAction={filesController.handleFileAction}
/>