Implement the Create new Label button

packages/web/components/templates/article/EditLabelsControl.tsx

@@ -12,6 +12,9 @@ import { Check, Circle, PencilSimple, Plus } from 'phosphor-react'
 
 import { isTouchScreenDevice } from '../../../lib/deviceType'
 import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
+import { createLabelMutation } from '../../../lib/networking/mutations/createLabelMutation'
+import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
+import { randomLabelColorHex } from '../../../utils/settings-page/labels/labelColorObjects'
 
 type EditLabelsControlProps = {
   article: ArticleAttributes
@@ -194,8 +197,6 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
     )
     props.article.labels = result
     props.articleActionHandler('refreshLabels', result)
-
-    console.log('refreshing article with labels', props.article.labels)
   }, [isSelected, selectedLabels])
 
   const filteredLabels = useMemo(() => {
@@ -276,17 +277,23 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
         <Button style='modalOption' css={{
           pl: '26px', color: theme.colors.grayText.toString(), height: '42px', borderBottom: '1px solid $grayBorder'
         }} 
-          onClick={() => {
-            // props.createLabel(filterText)
-            // setFilterText('')
+          onClick={async () => {
+            const label = await createLabelMutation(filterText, randomLabelColorHex(), '')
+            if (label) {
+              showSuccessToast(`Created label ${label.name}`, { position: 'bottom-right' })
+              toggleLabel(label)
+            } else {
+              showErrorToast('Failed to create label', { position: 'bottom-right' })
+            }
           }}
         >
           <HStack alignment='center' distribution='start' css={{ gap: '8px' }}>
             <Plus size={18} color={theme.colors.grayText.toString()} />
             <SpanBox css={{ fontSize: '12px' }}>{`Create new label "${filterText}"`}</SpanBox>
             </HStack>
-        </Button>)}
-        {/* Footer */}
+        </Button>
+      )}
+
       <HStack  distribution="start"  alignment="center" css={{
           ml: '20px', gap: '8px', width: '100%', fontSize: '12px', p: '8px', height: '42px',
           'a:link': {

packages/web/lib/networking/mutations/createLabelMutation.ts

@@ -1,6 +1,16 @@
 import { gql } from 'graphql-request'
+import { Label } from '../fragments/labelFragment'
 import { gqlFetcher } from '../networkHelpers'
 
+type CreateLabelResult = {
+  createLabel: CreateLabel
+  errorCodes?: unknown[]
+}
+
+type CreateLabel = {
+  label: Label
+}
+
 export async function createLabelMutation(
   name: string,
   color: string,
@@ -32,9 +42,9 @@ export async function createLabelMutation(
   `
 
   try {
-    const data = await gqlFetcher(mutation)
+    const data = await gqlFetcher(mutation) as CreateLabelResult
     console.log('created label', data)
-    return data
+    return data.errorCodes ? undefined : data.createLabel.label
   } catch (error) {
     console.log('createLabelMutation error', error)
     return undefined

packages/web/utils/settings-page/labels/labelColorObjects.tsx

@@ -44,3 +44,9 @@ export const labelColorObjects: LabelColorObjects = {
     background: '#D8D7D50D',
   },
 }
+
+export const randomLabelColorHex = () => {
+  const colorHexes = Object.keys(labelColorObjects).slice(0, -1)
+  const randomColorHex = colorHexes[Math.floor(Math.random() * colorHexes.length)]
+  return randomColorHex
+}