starred/linsa-linsa-io
1
0
Fork 0
mirror of https://github.com/linsa-io/linsa.git synced 2026-04-24 17:28:41 +02:00
Code Issues 2 Packages Projects Releases Wiki Activity

fix(link): improve UX, maintain state (#154)

Browse Source 
* fix(topic): handleSelectLearningState missing depth

* fix(link): use active index instead of native focus

* chore(palette): use atom for maintain state

* chore(link): prevent keydown if command palette active

* fix: responsive link item

* chore: add active item index state to LinkRoute

* fix: ability to press enter go to edit mode
This commit is contained in:
Aslam
2024-09-08 13:38:23 +07:00
committed by GitHub
parent 1cd6063768
commit 7100ded35a
3 changed files with 101 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
web/components/routes/link/list.tsx
View File

@@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useMemo, useState } from "react"
import React, { useCallback, useEffect, useMemo } from "react"
import {
DndContext,
closestCenter,
@@ -22,13 +22,16 @@ import { useQueryState } from "nuqs"
import { learningStateAtom } from "./header"
import { commandPaletteOpenAtom } from "@/components/custom/command-palette/command-palette"
interface LinkListProps {}
interface LinkListProps {
activeItemIndex: number | null
setActiveItemIndex: React.Dispatch<React.SetStateAction<number | null>>
}
const LinkList: React.FC<LinkListProps> = () => {
const LinkList: React.FC<LinkListProps> = ({ activeItemIndex, setActiveItemIndex }) => {
const [isCommandPalettePpen] = useAtom(commandPaletteOpenAtom)
const [editId, setEditId] = useQueryState("editId")
const [activeLearningState] = useAtom(learningStateAtom)
const [activeItemIndex, setActiveItemIndex] = useState<number | null>(null)
const [draggingId, setDraggingId] = React.useState<UniqueIdentifier | null>(null)
const { me } = useAccount({
root: { personalLinks: [] }
@@ -36,7 +39,6 @@ const LinkList: React.FC<LinkListProps> = () => {
const personalLinks = useMemo(() => me?.root?.personalLinks || [], [me?.root?.personalLinks])
const [sort] = useAtom(linkSortAtom)
const [draggingId, setDraggingId] = useState<UniqueIdentifier | null>(null)
const filteredLinks = useMemo(
() =>
@@ -73,6 +75,16 @@ const LinkList: React.FC<LinkListProps> = () => {
}
})
// on mounted, if editId is set, set activeItemIndex to the index of the item with the editId
useEffect(() => {
if (editId) {
const index = sortedLinks.findIndex(link => link?.id === editId)
if (index !== -1) {
setActiveItemIndex(index)
}
}
}, [editId, sortedLinks, setActiveItemIndex])
const updateSequences = useCallback((links: PersonalLinkLists) => {
links.forEach((link, index) => {
if (link) {
@@ -111,12 +123,28 @@ const LinkList: React.FC<LinkListProps> = () => {
return newIndex
})
} else if (e.key === "Enter" && activeItemIndex !== null) {
e.preventDefault()
const activeLink = sortedLinks[activeItemIndex]
if (activeLink) {
setEditId(activeLink.id)
}
}
}
window.addEventListener("keydown", handleKeyDown)
return () => window.removeEventListener("keydown", handleKeyDown)
}, [me?.root?.personalLinks, sortedLinks, editId, sort, updateSequences, isCommandPalettePpen])
}, [
me?.root?.personalLinks,
sortedLinks,
editId,
sort,
updateSequences,
isCommandPalettePpen,
activeItemIndex,
setEditId,
setActiveItemIndex
])
const handleDragStart = useCallback(
(event: DragStartEvent) => {