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

Set selected labels after creating

Browse source
This commit is contained in:
Jackson Harper 2023-06-19 16:28:41 +08:00
parent 58183540db
commit 0b7cd80c85
6 changed files with 72 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
packages/web/components/elements/LabelsPicker.tsx
View file

@ -67,6 +67,8 @@ export const LabelsPicker = (props: LabelsPickerProps): JSX.Element => {
if (idx !== -1) {
currentLabels[idx] = newLabel
props.setSelectedLabels([...currentLabels])
} else {
props.setSelectedLabels([...currentLabels, newLabel])
}
} else {
showMessage(`Error creating label ${tempLabel.name}`)
@ -105,6 +107,7 @@ export const LabelsPicker = (props: LabelsPickerProps): JSX.Element => {
color: randomLabelColorHex(),
description: '',
createdAt: new Date(),
_temporary: true,
}
props.setSelectedLabels([...current, tempLabel])
clearInputState()
@ -146,11 +149,6 @@ export const LabelsPicker = (props: LabelsPickerProps): JSX.Element => {
l.name.toLowerCase().startsWith(_tabStartValue)
)
console.log(
`'${_tabStartValue}' matches: `,
matches,
availableLabels.labels.map((l) => l.name.toLowerCase())
)
if (_tabCount < matches.length) {
setInputValue(matches[_tabCount].name)
} else if (matches.length > 0) {
@ -186,6 +184,7 @@ export const LabelsPicker = (props: LabelsPickerProps): JSX.Element => {
bg: '#3D3D3D',
border: '1px transparent solid',
borderRadius: '6px',
verticalAlign: 'center',
padding: '5px',
lineHeight: '2',
width: '100%',
@ -208,7 +207,6 @@ export const LabelsPicker = (props: LabelsPickerProps): JSX.Element => {
marginTop: '0px',
marginBottom: '0px',
borderColor: 'transparent',
padding: '1px 10px',
},
}}
onMouseDown={(event) => {
@ -235,61 +233,62 @@ export const LabelsPicker = (props: LabelsPickerProps): JSX.Element => {
useAppAppearance={true}
/>
))}
<AutosizeInput
placeholder={isEmpty ? 'Filter for label' : undefined}
inputRef={(ref) => {
inputRef.current = ref
<SpanBox
css={{
display: 'inline-flex',
height: '24px',
paddingBottom: '20px',
transform: `translateY(-2px)`,
}}
onFocus={() => {
if (props.onFocus) {
props.onFocus()
}
}}
minWidth="2px"
maxLength={48}
value={inputValue}
onClick={(event) => {
event.stopPropagation()
}}
onKeyUp={(event) => {
switch (event.key) {
case 'Escape':
clearInputState()
break
case 'Enter':
selectOrCreateLabel(inputValue)
event.preventDefault()
break
}
}}
onKeyDown={(event) => {
switch (event.key) {
case 'Tab':
autoComplete()
event.preventDefault()
break
case 'Delete':
case 'Backspace':
clearTabState()
if (inputValue.length === 0) {
deleteLastLabel()
>
<AutosizeInput
placeholder={isEmpty ? 'Filter for label' : undefined}
inputRef={(ref) => {
inputRef.current = ref
}}
onFocus={() => {
if (props.onFocus) {
props.onFocus()
}
}}
minWidth="2px"
maxLength={48}
value={inputValue}
onClick={(event) => {
event.stopPropagation()
}}
onKeyUp={(event) => {
switch (event.key) {
case 'Escape':
clearInputState()
break
case 'Enter':
selectOrCreateLabel(inputValue)
event.preventDefault()
}
break
}
}}
onKeyPress={(event) => {
// switch (event.key) {
// case 'Enter':
// selectOrCreateLabel(inputValue)
// event.preventDefault()
// break
// }
}}
onChange={function (event) {
setInputValue(event.target.value)
}}
/>
break
}
}}
onKeyDown={(event) => {
switch (event.key) {
case 'Tab':
autoComplete()
event.preventDefault()
break
case 'Delete':
case 'Backspace':
clearTabState()
if (inputValue.length === 0) {
deleteLastLabel()
event.preventDefault()
}
break
}
}}
onChange={function (event) {
setInputValue(event.target.value)
}}
/>
</SpanBox>
</Box>
)
}

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

@ -38,18 +38,6 @@ type HeaderProps = {
setSelectedLabels: (labels: Label[]) => void
}
const FormInput = styled('input', {
width: '100%',
fontSize: '16px',
fontFamily: 'inter',
fontWeight: 'normal',
lineHeight: '1.8',
color: '$grayTextContrast',
'&:focus': {
outline: 'none',
},
})
const StyledLabel = styled('label', {
display: 'flex',
justifyContent: 'flex-start',

55
packages/web/components/templates/article/SetLabelsModal.tsx
View file

@ -19,60 +19,31 @@ type SetLabelsModalProps = {
}
export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
const [previousSelectedLabels, setPreviousSelectedLabels] = useState(
props.provider.labels ?? []
)
const [selectedLabels, setSelectedLabels] = useState(
props.provider.labels ?? []
)
const labelsEqual = (left: Label[], right: Label[]) => {
if (left.length !== right.length) {
return false
}
for (const label of left) {
if (!right.find((r) => label.id == r.id)) {
return false
}
}
return true
const containsTemporaryLabel = (labels: Label[]) => {
return !!labels.find((l) => '_temporary' in l)
}
const onOpenChange = useCallback(
async (open: boolean) => {
// Only make API call if the labels have been modified
if (!labelsEqual(selectedLabels, previousSelectedLabels)) {
const result = await props.save(selectedLabels)
if (props.onLabelsUpdated) {
props.onLabelsUpdated(selectedLabels)
}
if (!result) {
showErrorToast('Error updating labels')
}
}
props.onOpenChange(open)
(open: boolean) => {
;(async () => {
await props.save(selectedLabels)
props.onOpenChange(open)
})()
},
[props, selectedLabels, previousSelectedLabels]
[props, selectedLabels]
)
useEffect(() => {
if (labelsEqual(selectedLabels, previousSelectedLabels)) {
return
if (!containsTemporaryLabel(selectedLabels)) {
;(async () => {
await props.save(selectedLabels)
})()
}
props
.save(selectedLabels)
.then((result) => {
setPreviousSelectedLabels(result ?? [])
})
.catch((err) => {
console.log('error saving labels: ', err)
})
}, [props, selectedLabels, previousSelectedLabels, setPreviousSelectedLabels])
}, [props, selectedLabels])
return (
<ModalRoot defaultOpen onOpenChange={onOpenChange}>

2
packages/web/lib/networking/mutations/createLabelMutation.ts
View file

@ -17,7 +17,7 @@ export async function createLabelMutation(
description?: string
): Promise<any | undefined> {
const mutation = gql`
mutation {
mutation CreateLabel($input: CreateLabelInput!) {
createLabel(input: $input) {
... on CreateLabelSuccess {
label {

1
packages/web/lib/networking/mutations/setLabelsMutation.ts
View file

@ -35,7 +35,6 @@ export async function setLabelsMutation(
const data = (await gqlFetcher(mutation, {
input: { pageId, labelIds },
})) as SetLabelsResult
console.log(' -- errorCodes', data.errorCodes)
return data.errorCodes ? undefined : data.setLabels.labels
} catch (error) {
console.log(' -- SetLabelsOutput error', error)

1
packages/web/pages/[username]/[slug]/index.tsx
View file

@ -150,7 +150,6 @@ export default function Home(): JSX.Element {
}
break
case 'refreshLabels':
console.log('refreshing labels: ', arg)
setLabels(arg as Label[])
break
case 'showHighlights':