prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #1570 from omnivore-app/fix/sort-labels-alphabetically

Browse source 
Sort labels alphabetically on the web
This commit is contained in:
Jackson Harper 2022-12-22 10:40:38 +08:00 committed by GitHub
commit 0e75e7bf86
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/web/components/templates/article/SetLabelsControl.tsx
View file

@ -285,9 +285,13 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
if (!labels) {
return []
}
return labels.filter((label) => {
return label.name.toLowerCase().includes(filterText.toLowerCase())
})
return labels
.filter((label) => {
return label.name.toLowerCase().includes(filterText.toLowerCase())
})
.sort((left: Label, right: Label) => {
return left.name.localeCompare(right.name)
})
}, [labels, filterText])
// Move focus through the labels list on tab or arrow up/down keys

14
packages/web/pages/settings/labels.tsx
View file

@ -1,4 +1,4 @@
import { useEffect, useState } from 'react'
import { useEffect, useMemo, useState } from 'react'
import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
import { Button } from '../../components/elements/Button'
import { styled, theme } from '../../components/tokens/stitches.config'
@ -162,6 +162,12 @@ export default function LabelsPage(): JSX.Element {
applyStoredTheme(false)
const sortedLabels = useMemo(() => {
return labels.sort((left: Label, right: Label) =>
left.name.localeCompare(right.name)
)
}, [labels])
useEffect(() => {
const handleResizeWindow = () => setWindowWidth(window.innerWidth)
if (windowWidth === 0) {
@ -362,9 +368,9 @@ export default function LabelsPage(): JSX.Element {
)
) : null}
</>
{labels
? labels.map((label, i) => {
const isLastChild = i === labels.length - 1
{sortedLabels
? sortedLabels.map((label, i) => {
const isLastChild = i === sortedLabels.length - 1
const isFirstChild = i === 0
const cardProps = {
label: label,