diff --git a/packages/web/components/elements/LabelsPicker.tsx b/packages/web/components/elements/LabelsPicker.tsx index 3ba42ca57..97440c6ff 100644 --- a/packages/web/components/elements/LabelsPicker.tsx +++ b/packages/web/components/elements/LabelsPicker.tsx @@ -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} /> ))} - { - inputRef.current = ref + { - 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() + > + { + 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) + }} + /> + ) } diff --git a/packages/web/components/templates/article/SetLabelsControl.tsx b/packages/web/components/templates/article/SetLabelsControl.tsx index 6e0964c43..a24af4a49 100644 --- a/packages/web/components/templates/article/SetLabelsControl.tsx +++ b/packages/web/components/templates/article/SetLabelsControl.tsx @@ -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', diff --git a/packages/web/components/templates/article/SetLabelsModal.tsx b/packages/web/components/templates/article/SetLabelsModal.tsx index 48ce45105..6f8fd4ebb 100644 --- a/packages/web/components/templates/article/SetLabelsModal.tsx +++ b/packages/web/components/templates/article/SetLabelsModal.tsx @@ -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 ( diff --git a/packages/web/lib/networking/mutations/createLabelMutation.ts b/packages/web/lib/networking/mutations/createLabelMutation.ts index 5095ca12f..791f29055 100644 --- a/packages/web/lib/networking/mutations/createLabelMutation.ts +++ b/packages/web/lib/networking/mutations/createLabelMutation.ts @@ -17,7 +17,7 @@ export async function createLabelMutation( description?: string ): Promise { const mutation = gql` - mutation { + mutation CreateLabel($input: CreateLabelInput!) { createLabel(input: $input) { ... on CreateLabelSuccess { label { diff --git a/packages/web/lib/networking/mutations/setLabelsMutation.ts b/packages/web/lib/networking/mutations/setLabelsMutation.ts index dabdb4ec2..46d842e64 100644 --- a/packages/web/lib/networking/mutations/setLabelsMutation.ts +++ b/packages/web/lib/networking/mutations/setLabelsMutation.ts @@ -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) diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx index 7e4e02dfa..b60b5918b 100644 --- a/packages/web/pages/[username]/[slug]/index.tsx +++ b/packages/web/pages/[username]/[slug]/index.tsx @@ -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':