From 966295385aed2dad36c89b376231596e037db4e0 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Mon, 21 Feb 2022 16:03:00 +0800
Subject: [PATCH 01/20] add sql

---
 .../0070.do.update_labels_table.sql           | 19 +++++++++++++++++++
 .../0070.undo.update_labels_table.sql         | 15 +++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100755 packages/db/migrations/0070.do.update_labels_table.sql
 create mode 100755 packages/db/migrations/0070.undo.update_labels_table.sql

diff --git a/packages/db/migrations/0070.do.update_labels_table.sql b/packages/db/migrations/0070.do.update_labels_table.sql
new file mode 100755
index 000000000..617376715
--- /dev/null
+++ b/packages/db/migrations/0070.do.update_labels_table.sql
@@ -0,0 +1,19 @@
+-- Type: DO
+-- Name: update_labels_table
+-- Description: Update labels table and create link_labels table
+
+BEGIN;
+
+ALTER TABLE omnivore.labels
+    DROP COLUMN link_id,
+    ADD COLUMN color text,
+    ADD COLUMN description text,
+    ADD CONSTRAINT label_name_unique UNIQUE (user_id, name);
+
+CREATE TABLE omnivore.link_labels (
+    link_id uuid NOT NULL REFERENCES omnivore.links ON DELETE CASCADE,
+    label_id uuid NOT NULL REFERENCES omnivore.labels ON DELETE CASCADE,
+    created_at timestamptz NOT NULL DEFAULT current_timestamp
+);
+
+COMMIT;
diff --git a/packages/db/migrations/0070.undo.update_labels_table.sql b/packages/db/migrations/0070.undo.update_labels_table.sql
new file mode 100755
index 000000000..8285b5197
--- /dev/null
+++ b/packages/db/migrations/0070.undo.update_labels_table.sql
@@ -0,0 +1,15 @@
+-- Type: UNDO
+-- Name: update_labels_table
+-- Description: Update labels table and create link_labels table
+
+BEGIN;
+
+ALTER TABLE omnivore.labels
+    ADD COLUMN link_id uuid REFERENCES omnivore.links ON DELETE CASCADE,
+    DROP COLUMN color,
+    DROP COLUMN description,
+    DROP CONSTRAINT label_name;
+
+DROP TABLE omnivore.link_labels;
+
+COMMIT;

From e74f334db9352072e3c7731cc9cef3721ccd262e Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Mon, 21 Feb 2022 16:20:48 +0800
Subject: [PATCH 02/20] update entity

---
 packages/api/src/entity/label.ts                   | 14 +++++++++++---
 packages/api/src/entity/link.ts                    |  6 ++++--
 .../db/migrations/0070.do.update_labels_table.sql  |  2 +-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/api/src/entity/label.ts b/packages/api/src/entity/label.ts
index b7081e0a7..27ee04da9 100644
--- a/packages/api/src/entity/label.ts
+++ b/packages/api/src/entity/label.ts
@@ -4,6 +4,8 @@ import {
   CreateDateColumn,
   Entity,
   JoinColumn,
+  JoinTable,
+  ManyToMany,
   ManyToOne,
   PrimaryGeneratedColumn,
 } from 'typeorm'
@@ -22,9 +24,15 @@ export class Label extends BaseEntity {
   @JoinColumn({ name: 'user_id' })
   user!: User
 
-  @ManyToOne(() => Link)
-  @JoinColumn({ name: 'link_id' })
-  link!: Link
+  @ManyToMany(() => Link, (link) => link.labels)
+  @JoinTable({ name: 'link_labels' })
+  link?: Link
+
+  @Column('text')
+  color!: string
+
+  @Column('text')
+  description?: string
 
   @CreateDateColumn()
   createdAt!: Date
diff --git a/packages/api/src/entity/link.ts b/packages/api/src/entity/link.ts
index cc3550cb1..fcd9ee2f4 100644
--- a/packages/api/src/entity/link.ts
+++ b/packages/api/src/entity/link.ts
@@ -15,7 +15,8 @@ import {
   CreateDateColumn,
   Entity,
   JoinColumn,
-  OneToMany,
+  JoinTable,
+  ManyToMany,
   OneToOne,
   PrimaryGeneratedColumn,
   UpdateDateColumn,
@@ -62,6 +63,7 @@ export class Link extends BaseEntity {
   @UpdateDateColumn()
   updatedAt?: Date
 
-  @OneToMany(() => Label, (label) => label.link)
+  @ManyToMany(() => Label, (label) => label.link)
+  @JoinTable({ name: 'link_labels' })
   labels?: Label[]
 }
diff --git a/packages/db/migrations/0070.do.update_labels_table.sql b/packages/db/migrations/0070.do.update_labels_table.sql
index 617376715..b3b5518d2 100755
--- a/packages/db/migrations/0070.do.update_labels_table.sql
+++ b/packages/db/migrations/0070.do.update_labels_table.sql
@@ -6,7 +6,7 @@ BEGIN;
 
 ALTER TABLE omnivore.labels
     DROP COLUMN link_id,
-    ADD COLUMN color text,
+    ADD COLUMN color text NOT NULL,
     ADD COLUMN description text,
     ADD CONSTRAINT label_name_unique UNIQUE (user_id, name);
 

From 9150e7dbc2ce4763708099e71994ee509b2dccad Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Mon, 21 Feb 2022 16:53:04 +0800
Subject: [PATCH 03/20] add tests for create/delete labels

---
 packages/api/src/entity/label.ts           |  2 +-
 packages/api/src/entity/user.ts            |  4 ++
 packages/api/src/generated/graphql.ts      | 17 +++--
 packages/api/src/generated/schema.graphql  |  9 ++-
 packages/api/src/resolvers/labels/index.ts | 78 ++++++++++------------
 packages/api/src/schema.ts                 |  9 ++-
 packages/api/test/resolvers/labels.test.ts | 67 ++++++++-----------
 7 files changed, 94 insertions(+), 92 deletions(-)

diff --git a/packages/api/src/entity/label.ts b/packages/api/src/entity/label.ts
index 27ee04da9..dec2046f4 100644
--- a/packages/api/src/entity/label.ts
+++ b/packages/api/src/entity/label.ts
@@ -31,7 +31,7 @@ export class Label extends BaseEntity {
   @Column('text')
   color!: string
 
-  @Column('text')
+  @Column('text', { nullable: true })
   description?: string
 
   @CreateDateColumn()
diff --git a/packages/api/src/entity/user.ts b/packages/api/src/entity/user.ts
index cc6af11c3..5aa1e5d05 100644
--- a/packages/api/src/entity/user.ts
+++ b/packages/api/src/entity/user.ts
@@ -11,6 +11,7 @@ import {
 import { MembershipTier, RegistrationType } from '../datalayer/user/model'
 import { NewsletterEmail } from './newsletter_email'
 import { Profile } from './profile'
+import { Label } from './label'
 
 @Entity()
 export class User extends BaseEntity {
@@ -46,4 +47,7 @@ export class User extends BaseEntity {
 
   @Column('varchar', { length: 255, nullable: true })
   password?: string
+
+  @OneToMany(() => Label, (label) => label.user)
+  labels?: Label[]
 }
diff --git a/packages/api/src/generated/graphql.ts b/packages/api/src/generated/graphql.ts
index 622bf586d..e854ff299 100644
--- a/packages/api/src/generated/graphql.ts
+++ b/packages/api/src/generated/graphql.ts
@@ -276,12 +276,14 @@ export type CreateLabelError = {
 
 export enum CreateLabelErrorCode {
   BadRequest = 'BAD_REQUEST',
+  LabelAlreadyExists = 'LABEL_ALREADY_EXISTS',
   NotFound = 'NOT_FOUND',
   Unauthorized = 'UNAUTHORIZED'
 }
 
 export type CreateLabelInput = {
-  linkId: Scalars['ID'];
+  color: Scalars['String'];
+  description?: InputMaybe<Scalars['String']>;
   name: Scalars['String'];
 };
 
@@ -624,6 +626,9 @@ export type HighlightStats = {
 
 export type Label = {
   __typename?: 'Label';
+  color: Scalars['String'];
+  createdAt: Scalars['Date'];
+  description?: Maybe<Scalars['String']>;
   id: Scalars['ID'];
   name: Scalars['String'];
 };
@@ -1120,11 +1125,6 @@ export type QueryGetFollowingArgs = {
 };
 
 
-export type QueryLabelsArgs = {
-  linkId: Scalars['ID'];
-};
-
-
 export type QueryReminderArgs = {
   linkId: Scalars['ID'];
 };
@@ -2762,6 +2762,9 @@ export type HighlightStatsResolvers<ContextType = ResolverContext, ParentType ex
 };
 
 export type LabelResolvers<ContextType = ResolverContext, ParentType extends ResolversParentTypes['Label'] = ResolversParentTypes['Label']> = {
+  color?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
+  createdAt?: Resolver<ResolversTypes['Date'], ParentType, ContextType>;
+  description?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   id?: Resolver<ResolversTypes['ID'], ParentType, ContextType>;
   name?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
@@ -2955,7 +2958,7 @@ export type QueryResolvers<ContextType = ResolverContext, ParentType extends Res
   getFollowing?: Resolver<ResolversTypes['GetFollowingResult'], ParentType, ContextType, Partial<QueryGetFollowingArgs>>;
   getUserPersonalization?: Resolver<ResolversTypes['GetUserPersonalizationResult'], ParentType, ContextType>;
   hello?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
-  labels?: Resolver<ResolversTypes['LabelsResult'], ParentType, ContextType, RequireFields<QueryLabelsArgs, 'linkId'>>;
+  labels?: Resolver<ResolversTypes['LabelsResult'], ParentType, ContextType>;
   me?: Resolver<Maybe<ResolversTypes['User']>, ParentType, ContextType>;
   newsletterEmails?: Resolver<ResolversTypes['NewsletterEmailsResult'], ParentType, ContextType>;
   reminder?: Resolver<ResolversTypes['ReminderResult'], ParentType, ContextType, RequireFields<QueryReminderArgs, 'linkId'>>;
diff --git a/packages/api/src/generated/schema.graphql b/packages/api/src/generated/schema.graphql
index 55558990d..a6288950d 100644
--- a/packages/api/src/generated/schema.graphql
+++ b/packages/api/src/generated/schema.graphql
@@ -234,12 +234,14 @@ type CreateLabelError {
 
 enum CreateLabelErrorCode {
   BAD_REQUEST
+  LABEL_ALREADY_EXISTS
   NOT_FOUND
   UNAUTHORIZED
 }
 
 input CreateLabelInput {
-  linkId: ID!
+  color: String!
+  description: String
   name: String!
 }
 
@@ -548,6 +550,9 @@ type HighlightStats {
 }
 
 type Label {
+  color: String!
+  createdAt: Date!
+  description: String
   id: ID!
   name: String!
 }
@@ -787,7 +792,7 @@ type Query {
   getFollowing(userId: ID): GetFollowingResult!
   getUserPersonalization: GetUserPersonalizationResult!
   hello: String
-  labels(linkId: ID!): LabelsResult!
+  labels: LabelsResult!
   me: User
   newsletterEmails: NewsletterEmailsResult!
   reminder(linkId: ID!): ReminderResult!
diff --git a/packages/api/src/resolvers/labels/index.ts b/packages/api/src/resolvers/labels/index.ts
index e83e29b84..2852171e7 100644
--- a/packages/api/src/resolvers/labels/index.ts
+++ b/packages/api/src/resolvers/labels/index.ts
@@ -11,57 +11,47 @@ import {
   LabelsSuccess,
   MutationCreateLabelArgs,
   MutationDeleteLabelArgs,
-  QueryLabelsArgs,
 } from '../../generated/graphql'
 import { analytics } from '../../utils/analytics'
 import { env } from '../../env'
 import { User } from '../../entity/user'
-import { Link } from '../../entity/link'
 import { Label } from '../../entity/label'
 import { getManager, getRepository } from 'typeorm'
 import { setClaims } from '../../entity/utils'
 
-export const labelsResolver = authorized<
-  LabelsSuccess,
-  LabelsError,
-  QueryLabelsArgs
->(async (_, { linkId }, { claims: { uid }, log }) => {
-  log.info('labelsResolver')
+export const labelsResolver = authorized<LabelsSuccess, LabelsError>(
+  async (_obj, _params, { claims: { uid }, log }) => {
+    log.info('labelsResolver')
 
-  analytics.track({
-    userId: uid,
-    event: 'labels',
-    properties: {
-      linkId: linkId,
-      env: env.server.apiEnv,
-    },
-  })
+    analytics.track({
+      userId: uid,
+      event: 'labels',
+      properties: {
+        env: env.server.apiEnv,
+      },
+    })
 
-  try {
-    const user = await User.findOne(uid)
-    if (!user) {
-      return {
-        errorCodes: [LabelsErrorCode.Unauthorized],
+    try {
+      const user = await User.findOne(uid, {
+        relations: ['labels'],
+      })
+      if (!user) {
+        return {
+          errorCodes: [LabelsErrorCode.Unauthorized],
+        }
       }
-    }
 
-    const link = await Link.findOne(linkId, { relations: ['labels'] })
-    if (!link) {
       return {
-        errorCodes: [LabelsErrorCode.NotFound],
+        labels: user.labels || [],
+      }
+    } catch (error) {
+      log.error(error)
+      return {
+        errorCodes: [LabelsErrorCode.BadRequest],
       }
-    }
-
-    return {
-      labels: link.labels || [],
-    }
-  } catch (error) {
-    log.error(error)
-    return {
-      errorCodes: [LabelsErrorCode.BadRequest],
     }
   }
-})
+)
 
 export const createLabelResolver = authorized<
   CreateLabelSuccess,
@@ -70,7 +60,7 @@ export const createLabelResolver = authorized<
 >(async (_, { input }, { claims: { uid }, log }) => {
   log.info('createLabelResolver')
 
-  const { linkId, name } = input
+  const { name, color, description } = input
 
   try {
     const user = await getRepository(User).findOne(uid)
@@ -80,18 +70,23 @@ export const createLabelResolver = authorized<
       }
     }
 
-    const link = await getRepository(Link).findOne(linkId)
-    if (!link) {
+    const existingLabel = await getRepository(Label).findOne({
+      where: {
+        name,
+      },
+    })
+    if (existingLabel) {
       return {
-        errorCodes: [CreateLabelErrorCode.NotFound],
+        errorCodes: [CreateLabelErrorCode.LabelAlreadyExists],
       }
     }
 
     const label = await getRepository(Label)
       .create({
         user,
-        link,
         name,
+        color,
+        description: description || '',
       })
       .save()
 
@@ -99,8 +94,9 @@ export const createLabelResolver = authorized<
       userId: uid,
       event: 'createLabel',
       properties: {
-        linkId,
         name,
+        color,
+        description,
         env: env.server.apiEnv,
       },
     })
diff --git a/packages/api/src/schema.ts b/packages/api/src/schema.ts
index b746475bc..ce3613b72 100755
--- a/packages/api/src/schema.ts
+++ b/packages/api/src/schema.ts
@@ -1242,6 +1242,9 @@ const schema = gql`
   type Label {
     id: ID!
     name: String!
+    color: String!
+    description: String
+    createdAt: Date!
   }
 
   type LabelsSuccess {
@@ -1261,8 +1264,9 @@ const schema = gql`
   union LabelsResult = LabelsSuccess | LabelsError
 
   input CreateLabelInput {
-    linkId: ID!
     name: String!
+    color: String!
+    description: String
   }
 
   type CreateLabelSuccess {
@@ -1273,6 +1277,7 @@ const schema = gql`
     UNAUTHORIZED
     BAD_REQUEST
     NOT_FOUND
+    LABEL_ALREADY_EXISTS
   }
 
   type CreateLabelError {
@@ -1414,7 +1419,7 @@ const schema = gql`
     articleSavingRequest(id: ID!): ArticleSavingRequestResult!
     newsletterEmails: NewsletterEmailsResult!
     reminder(linkId: ID!): ReminderResult!
-    labels(linkId: ID!): LabelsResult!
+    labels: LabelsResult!
   }
 `
 
diff --git a/packages/api/test/resolvers/labels.test.ts b/packages/api/test/resolvers/labels.test.ts
index 339411944..8fe06fd8e 100644
--- a/packages/api/test/resolvers/labels.test.ts
+++ b/packages/api/test/resolvers/labels.test.ts
@@ -36,14 +36,14 @@ describe('Labels API', () => {
       .create({
         name: 'label1',
         user: user,
-        link: link,
+        color: '#ffffff',
       })
       .save()
     const label2 = await getRepository(Label)
       .create({
         name: 'label2',
         user: user,
-        link: link,
+        color: '#eeeeee',
       })
       .save()
     labels = [label1, label2]
@@ -56,16 +56,18 @@ describe('Labels API', () => {
 
   describe('GET labels', () => {
     let query: string
-    let linkId: string
 
     beforeEach(() => {
       query = `
         query {
-          labels(linkId: "${linkId}") {
+          labels {
             ... on LabelsSuccess {
               labels {
                 id
                 name
+                color
+                description
+                createdAt
               }
             }
             ... on LabelsError {
@@ -76,33 +78,18 @@ describe('Labels API', () => {
       `
     })
 
-    context('when link exists', () => {
-      before(() => {
-        linkId = link.id
-      })
+    it('should return labels', async () => {
+      const res = await graphqlRequest(query, authToken).expect(200)
 
-      it('should return labels', async () => {
-        const res = await graphqlRequest(query, authToken).expect(200)
-
-        expect(res.body.data.labels.labels).to.eql(
-          labels.map((label) => ({
-            id: label.id,
-            name: label.name,
-          }))
-        )
-      })
-    })
-
-    context('when link not exist', () => {
-      before(() => {
-        linkId = generateFakeUuid()
-      })
-
-      it('should return error code NOT_FOUND', async () => {
-        const res = await graphqlRequest(query, authToken).expect(200)
-
-        expect(res.body.data.labels.errorCodes).to.eql(['NOT_FOUND'])
-      })
+      expect(res.body.data.labels.labels).to.eql(
+        labels.map((label) => ({
+          id: label.id,
+          name: label.name,
+          color: label.color,
+          description: label.description,
+          createdAt: new Date(label.createdAt.setMilliseconds(0)).toISOString(),
+        }))
+      )
     })
 
     it('responds status code 400 when invalid query', async () => {
@@ -122,15 +109,15 @@ describe('Labels API', () => {
 
   describe('Create label', () => {
     let query: string
-    let linkId: string
+    let name: string
 
     beforeEach(() => {
       query = `
         mutation {
           createLabel(
             input: {
-              linkId: "${linkId}",
-              name: "label3"
+              color: "#ffffff"
+              name: "${name}"
             }
           ) {
             ... on CreateLabelSuccess {
@@ -147,9 +134,9 @@ describe('Labels API', () => {
       `
     })
 
-    context('when link exists', () => {
+    context('when name not exists', () => {
       before(() => {
-        linkId = link.id
+        name = 'label3'
       })
 
       it('should create label', async () => {
@@ -161,15 +148,17 @@ describe('Labels API', () => {
       })
     })
 
-    context('when link not exist', () => {
+    context('when name exists', () => {
       before(() => {
-        linkId = generateFakeUuid()
+        name = labels[0].name
       })
 
-      it('should return error code NOT_FOUND', async () => {
+      it('should return error code LABEL_ALREADY_EXISTS', async () => {
         const res = await graphqlRequest(query, authToken).expect(200)
 
-        expect(res.body.data.createLabel.errorCodes).to.eql(['NOT_FOUND'])
+        expect(res.body.data.createLabel.errorCodes).to.eql([
+          'LABEL_ALREADY_EXISTS',
+        ])
       })
     })
 

From 138c9682cd43362bb654c68b583b2a01c8455578 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Tue, 22 Feb 2022 14:18:55 +0800
Subject: [PATCH 04/20] update tables

---
 packages/db/migrations/0070.do.update_labels_table.sql   | 4 +++-
 packages/db/migrations/0070.undo.update_labels_table.sql | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/db/migrations/0070.do.update_labels_table.sql b/packages/db/migrations/0070.do.update_labels_table.sql
index b3b5518d2..47bd667eb 100755
--- a/packages/db/migrations/0070.do.update_labels_table.sql
+++ b/packages/db/migrations/0070.do.update_labels_table.sql
@@ -11,9 +11,11 @@ ALTER TABLE omnivore.labels
     ADD CONSTRAINT label_name_unique UNIQUE (user_id, name);
 
 CREATE TABLE omnivore.link_labels (
+    id uuid PRIMARY KEY DEFAULT uuid_generate_v1mc(),
     link_id uuid NOT NULL REFERENCES omnivore.links ON DELETE CASCADE,
     label_id uuid NOT NULL REFERENCES omnivore.labels ON DELETE CASCADE,
-    created_at timestamptz NOT NULL DEFAULT current_timestamp
+    created_at timestamptz NOT NULL DEFAULT current_timestamp,
+    UNIQUE (link_id, label_id)
 );
 
 COMMIT;
diff --git a/packages/db/migrations/0070.undo.update_labels_table.sql b/packages/db/migrations/0070.undo.update_labels_table.sql
index 8285b5197..f6f4ddcd1 100755
--- a/packages/db/migrations/0070.undo.update_labels_table.sql
+++ b/packages/db/migrations/0070.undo.update_labels_table.sql
@@ -8,7 +8,7 @@ ALTER TABLE omnivore.labels
     ADD COLUMN link_id uuid REFERENCES omnivore.links ON DELETE CASCADE,
     DROP COLUMN color,
     DROP COLUMN description,
-    DROP CONSTRAINT label_name;
+    DROP CONSTRAINT label_name_unique;
 
 DROP TABLE omnivore.link_labels;
 

From d33b21309203c1f53ebacd76555ccb2fa0ee4908 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Tue, 22 Feb 2022 17:00:15 +0800
Subject: [PATCH 05/20] add setLabels api and tests

---
 packages/api/src/entity/label.ts              |   7 -
 packages/api/src/entity/link.ts               |   8 +-
 packages/api/src/entity/link_label.ts         |  27 ++++
 packages/api/src/generated/graphql.ts         |  56 ++++++++
 packages/api/src/generated/schema.graphql     |  22 +++
 .../api/src/resolvers/function_resolvers.ts   |   3 +
 packages/api/src/resolvers/labels/index.ts    |  73 ++++++++++
 packages/api/src/schema.ts                    |  22 +++
 packages/api/test/db.ts                       |  15 ++
 packages/api/test/resolvers/labels.test.ts    | 128 +++++++++++++++---
 10 files changed, 333 insertions(+), 28 deletions(-)
 create mode 100644 packages/api/src/entity/link_label.ts

diff --git a/packages/api/src/entity/label.ts b/packages/api/src/entity/label.ts
index dec2046f4..0b36eddec 100644
--- a/packages/api/src/entity/label.ts
+++ b/packages/api/src/entity/label.ts
@@ -4,13 +4,10 @@ import {
   CreateDateColumn,
   Entity,
   JoinColumn,
-  JoinTable,
-  ManyToMany,
   ManyToOne,
   PrimaryGeneratedColumn,
 } from 'typeorm'
 import { User } from './user'
-import { Link } from './link'
 
 @Entity({ name: 'labels' })
 export class Label extends BaseEntity {
@@ -24,10 +21,6 @@ export class Label extends BaseEntity {
   @JoinColumn({ name: 'user_id' })
   user!: User
 
-  @ManyToMany(() => Link, (link) => link.labels)
-  @JoinTable({ name: 'link_labels' })
-  link?: Link
-
   @Column('text')
   color!: string
 
diff --git a/packages/api/src/entity/link.ts b/packages/api/src/entity/link.ts
index fcd9ee2f4..40c0f208a 100644
--- a/packages/api/src/entity/link.ts
+++ b/packages/api/src/entity/link.ts
@@ -63,7 +63,11 @@ export class Link extends BaseEntity {
   @UpdateDateColumn()
   updatedAt?: Date
 
-  @ManyToMany(() => Label, (label) => label.link)
-  @JoinTable({ name: 'link_labels' })
+  @ManyToMany(() => Label)
+  @JoinTable({
+    name: 'link_labels',
+    joinColumn: { name: 'link_id' },
+    inverseJoinColumn: { name: 'label_id' },
+  })
   labels?: Label[]
 }
diff --git a/packages/api/src/entity/link_label.ts b/packages/api/src/entity/link_label.ts
new file mode 100644
index 000000000..5bcdd64d6
--- /dev/null
+++ b/packages/api/src/entity/link_label.ts
@@ -0,0 +1,27 @@
+import {
+  BaseEntity,
+  CreateDateColumn,
+  Entity,
+  JoinColumn,
+  ManyToOne,
+  PrimaryGeneratedColumn,
+} from 'typeorm'
+import { Link } from './link'
+import { Label } from './label'
+
+@Entity({ name: 'link_labels' })
+export class LinkLabel extends BaseEntity {
+  @PrimaryGeneratedColumn('uuid')
+  id!: string
+
+  @ManyToOne(() => Link)
+  @JoinColumn({ name: 'link_id' })
+  link!: Link
+
+  @ManyToOne(() => Label)
+  @JoinColumn({ name: 'label_id' })
+  label!: Label
+
+  @CreateDateColumn()
+  createdAt!: Date
+}
diff --git a/packages/api/src/generated/graphql.ts b/packages/api/src/generated/graphql.ts
index e854ff299..c844284eb 100644
--- a/packages/api/src/generated/graphql.ts
+++ b/packages/api/src/generated/graphql.ts
@@ -778,6 +778,7 @@ export type Mutation = {
   setBookmarkArticle: SetBookmarkArticleResult;
   setDeviceToken: SetDeviceTokenResult;
   setFollow: SetFollowResult;
+  setLabels: SetLabelsResult;
   setLinkArchived: ArchiveLinkResult;
   setShareArticle: SetShareArticleResult;
   setShareHighlight: SetShareHighlightResult;
@@ -919,6 +920,11 @@ export type MutationSetFollowArgs = {
 };
 
 
+export type MutationSetLabelsArgs = {
+  input: SetLabelsInput;
+};
+
+
 export type MutationSetLinkArchivedArgs = {
   input: ArchiveLinkInput;
 };
@@ -1350,6 +1356,29 @@ export type SetFollowSuccess = {
   updatedUser: User;
 };
 
+export type SetLabelsError = {
+  __typename?: 'SetLabelsError';
+  errorCodes: Array<SetLabelsErrorCode>;
+};
+
+export enum SetLabelsErrorCode {
+  BadRequest = 'BAD_REQUEST',
+  NotFound = 'NOT_FOUND',
+  Unauthorized = 'UNAUTHORIZED'
+}
+
+export type SetLabelsInput = {
+  labelIds: Array<Scalars['ID']>;
+  linkId: Scalars['ID'];
+};
+
+export type SetLabelsResult = SetLabelsError | SetLabelsSuccess;
+
+export type SetLabelsSuccess = {
+  __typename?: 'SetLabelsSuccess';
+  labels: Array<Label>;
+};
+
 export type SetShareArticleError = {
   __typename?: 'SetShareArticleError';
   errorCodes: Array<SetShareArticleErrorCode>;
@@ -2014,6 +2043,11 @@ export type ResolversTypes = {
   SetFollowInput: SetFollowInput;
   SetFollowResult: ResolversTypes['SetFollowError'] | ResolversTypes['SetFollowSuccess'];
   SetFollowSuccess: ResolverTypeWrapper<SetFollowSuccess>;
+  SetLabelsError: ResolverTypeWrapper<SetLabelsError>;
+  SetLabelsErrorCode: SetLabelsErrorCode;
+  SetLabelsInput: SetLabelsInput;
+  SetLabelsResult: ResolversTypes['SetLabelsError'] | ResolversTypes['SetLabelsSuccess'];
+  SetLabelsSuccess: ResolverTypeWrapper<SetLabelsSuccess>;
   SetShareArticleError: ResolverTypeWrapper<SetShareArticleError>;
   SetShareArticleErrorCode: SetShareArticleErrorCode;
   SetShareArticleInput: SetShareArticleInput;
@@ -2250,6 +2284,10 @@ export type ResolversParentTypes = {
   SetFollowInput: SetFollowInput;
   SetFollowResult: ResolversParentTypes['SetFollowError'] | ResolversParentTypes['SetFollowSuccess'];
   SetFollowSuccess: SetFollowSuccess;
+  SetLabelsError: SetLabelsError;
+  SetLabelsInput: SetLabelsInput;
+  SetLabelsResult: ResolversParentTypes['SetLabelsError'] | ResolversParentTypes['SetLabelsSuccess'];
+  SetLabelsSuccess: SetLabelsSuccess;
   SetShareArticleError: SetShareArticleError;
   SetShareArticleInput: SetShareArticleInput;
   SetShareArticleResult: ResolversParentTypes['SetShareArticleError'] | ResolversParentTypes['SetShareArticleSuccess'];
@@ -2878,6 +2916,7 @@ export type MutationResolvers<ContextType = ResolverContext, ParentType extends
   setBookmarkArticle?: Resolver<ResolversTypes['SetBookmarkArticleResult'], ParentType, ContextType, RequireFields<MutationSetBookmarkArticleArgs, 'input'>>;
   setDeviceToken?: Resolver<ResolversTypes['SetDeviceTokenResult'], ParentType, ContextType, RequireFields<MutationSetDeviceTokenArgs, 'input'>>;
   setFollow?: Resolver<ResolversTypes['SetFollowResult'], ParentType, ContextType, RequireFields<MutationSetFollowArgs, 'input'>>;
+  setLabels?: Resolver<ResolversTypes['SetLabelsResult'], ParentType, ContextType, RequireFields<MutationSetLabelsArgs, 'input'>>;
   setLinkArchived?: Resolver<ResolversTypes['ArchiveLinkResult'], ParentType, ContextType, RequireFields<MutationSetLinkArchivedArgs, 'input'>>;
   setShareArticle?: Resolver<ResolversTypes['SetShareArticleResult'], ParentType, ContextType, RequireFields<MutationSetShareArticleArgs, 'input'>>;
   setShareHighlight?: Resolver<ResolversTypes['SetShareHighlightResult'], ParentType, ContextType, RequireFields<MutationSetShareHighlightArgs, 'input'>>;
@@ -3084,6 +3123,20 @@ export type SetFollowSuccessResolvers<ContextType = ResolverContext, ParentType
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
 };
 
+export type SetLabelsErrorResolvers<ContextType = ResolverContext, ParentType extends ResolversParentTypes['SetLabelsError'] = ResolversParentTypes['SetLabelsError']> = {
+  errorCodes?: Resolver<Array<ResolversTypes['SetLabelsErrorCode']>, ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+};
+
+export type SetLabelsResultResolvers<ContextType = ResolverContext, ParentType extends ResolversParentTypes['SetLabelsResult'] = ResolversParentTypes['SetLabelsResult']> = {
+  __resolveType: TypeResolveFn<'SetLabelsError' | 'SetLabelsSuccess', ParentType, ContextType>;
+};
+
+export type SetLabelsSuccessResolvers<ContextType = ResolverContext, ParentType extends ResolversParentTypes['SetLabelsSuccess'] = ResolversParentTypes['SetLabelsSuccess']> = {
+  labels?: Resolver<Array<ResolversTypes['Label']>, ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+};
+
 export type SetShareArticleErrorResolvers<ContextType = ResolverContext, ParentType extends ResolversParentTypes['SetShareArticleError'] = ResolversParentTypes['SetShareArticleError']> = {
   errorCodes?: Resolver<Array<ResolversTypes['SetShareArticleErrorCode']>, ParentType, ContextType>;
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
@@ -3460,6 +3513,9 @@ export type Resolvers<ContextType = ResolverContext> = {
   SetFollowError?: SetFollowErrorResolvers<ContextType>;
   SetFollowResult?: SetFollowResultResolvers<ContextType>;
   SetFollowSuccess?: SetFollowSuccessResolvers<ContextType>;
+  SetLabelsError?: SetLabelsErrorResolvers<ContextType>;
+  SetLabelsResult?: SetLabelsResultResolvers<ContextType>;
+  SetLabelsSuccess?: SetLabelsSuccessResolvers<ContextType>;
   SetShareArticleError?: SetShareArticleErrorResolvers<ContextType>;
   SetShareArticleResult?: SetShareArticleResultResolvers<ContextType>;
   SetShareArticleSuccess?: SetShareArticleSuccessResolvers<ContextType>;
diff --git a/packages/api/src/generated/schema.graphql b/packages/api/src/generated/schema.graphql
index a6288950d..0e7793c8d 100644
--- a/packages/api/src/generated/schema.graphql
+++ b/packages/api/src/generated/schema.graphql
@@ -691,6 +691,7 @@ type Mutation {
   setBookmarkArticle(input: SetBookmarkArticleInput!): SetBookmarkArticleResult!
   setDeviceToken(input: SetDeviceTokenInput!): SetDeviceTokenResult!
   setFollow(input: SetFollowInput!): SetFollowResult!
+  setLabels(input: SetLabelsInput!): SetLabelsResult!
   setLinkArchived(input: ArchiveLinkInput!): ArchiveLinkResult!
   setShareArticle(input: SetShareArticleInput!): SetShareArticleResult!
   setShareHighlight(input: SetShareHighlightInput!): SetShareHighlightResult!
@@ -989,6 +990,27 @@ type SetFollowSuccess {
   updatedUser: User!
 }
 
+type SetLabelsError {
+  errorCodes: [SetLabelsErrorCode!]!
+}
+
+enum SetLabelsErrorCode {
+  BAD_REQUEST
+  NOT_FOUND
+  UNAUTHORIZED
+}
+
+input SetLabelsInput {
+  labelIds: [ID!]!
+  linkId: ID!
+}
+
+union SetLabelsResult = SetLabelsError | SetLabelsSuccess
+
+type SetLabelsSuccess {
+  labels: [Label!]!
+}
+
 type SetShareArticleError {
   errorCodes: [SetShareArticleErrorCode!]!
 }
diff --git a/packages/api/src/resolvers/function_resolvers.ts b/packages/api/src/resolvers/function_resolvers.ts
index 287c43003..47858f573 100644
--- a/packages/api/src/resolvers/function_resolvers.ts
+++ b/packages/api/src/resolvers/function_resolvers.ts
@@ -59,6 +59,7 @@ import {
   setBookmarkArticleResolver,
   setDeviceTokenResolver,
   setFollowResolver,
+  setLabelsResolver,
   setLinkArchivedResolver,
   setShareArticleResolver,
   setShareHighlightResolver,
@@ -135,6 +136,7 @@ export const functionResolvers = {
     deleteLabel: deleteLabelResolver,
     login: loginResolver,
     signup: signupResolver,
+    setLabels: setLabelsResolver,
   },
   Query: {
     me: getMeUserResolver,
@@ -525,4 +527,5 @@ export const functionResolvers = {
   ...resultResolveTypeResolver('DeleteLabel'),
   ...resultResolveTypeResolver('Login'),
   ...resultResolveTypeResolver('Signup'),
+  ...resultResolveTypeResolver('SetLabels'),
 }
diff --git a/packages/api/src/resolvers/labels/index.ts b/packages/api/src/resolvers/labels/index.ts
index 2852171e7..2d111b507 100644
--- a/packages/api/src/resolvers/labels/index.ts
+++ b/packages/api/src/resolvers/labels/index.ts
@@ -11,6 +11,10 @@ import {
   LabelsSuccess,
   MutationCreateLabelArgs,
   MutationDeleteLabelArgs,
+  MutationSetLabelsArgs,
+  SetLabelsError,
+  SetLabelsErrorCode,
+  SetLabelsSuccess,
 } from '../../generated/graphql'
 import { analytics } from '../../utils/analytics'
 import { env } from '../../env'
@@ -18,6 +22,8 @@ import { User } from '../../entity/user'
 import { Label } from '../../entity/label'
 import { getManager, getRepository } from 'typeorm'
 import { setClaims } from '../../entity/utils'
+import { Link } from '../../entity/link'
+import { LinkLabel } from '../../entity/link_label'
 
 export const labelsResolver = authorized<LabelsSuccess, LabelsError>(
   async (_obj, _params, { claims: { uid }, log }) => {
@@ -172,3 +178,70 @@ export const deleteLabelResolver = authorized<
     }
   }
 })
+
+export const setLabelsResolver = authorized<
+  SetLabelsSuccess,
+  SetLabelsError,
+  MutationSetLabelsArgs
+>(async (_, { input }, { claims: { uid }, log }) => {
+  log.info('setLabelsResolver')
+
+  const { linkId, labelIds } = input
+
+  try {
+    const user = await getRepository(User).findOne(uid)
+    if (!user) {
+      return {
+        errorCodes: [SetLabelsErrorCode.Unauthorized],
+      }
+    }
+
+    const link = await getRepository(Link).findOne(linkId)
+    if (!link) {
+      return {
+        errorCodes: [SetLabelsErrorCode.NotFound],
+      }
+    }
+
+    const labels = await getRepository(Label).findByIds(labelIds, {
+      where: {
+        user,
+      },
+      relations: ['user'],
+    })
+    if (labels.length !== labelIds.length) {
+      return {
+        errorCodes: [SetLabelsErrorCode.NotFound],
+      }
+    }
+
+    // delete all existing labels of the link
+    await getManager().transaction(async (t) => {
+      await t.getRepository(LinkLabel).delete({ link })
+
+      // add new labels
+      await t
+        .getRepository(LinkLabel)
+        .save(labels.map((label) => ({ link, label })))
+    })
+
+    analytics.track({
+      userId: uid,
+      event: 'setLabels',
+      properties: {
+        linkId,
+        labelIds,
+        env: env.server.apiEnv,
+      },
+    })
+
+    return {
+      labels,
+    }
+  } catch (error) {
+    log.error(error)
+    return {
+      errorCodes: [SetLabelsErrorCode.BadRequest],
+    }
+  }
+})
diff --git a/packages/api/src/schema.ts b/packages/api/src/schema.ts
index ce3613b72..6d4f32525 100755
--- a/packages/api/src/schema.ts
+++ b/packages/api/src/schema.ts
@@ -1326,6 +1326,27 @@ const schema = gql`
 
   union SignupResult = SignupSuccess | SignupError
 
+  input SetLabelsInput {
+    linkId: ID!
+    labelIds: [ID!]!
+  }
+
+  union SetLabelsResult = SetLabelsSuccess | SetLabelsError
+
+  type SetLabelsSuccess {
+    labels: [Label!]!
+  }
+
+  type SetLabelsError {
+    errorCodes: [SetLabelsErrorCode!]!
+  }
+
+  enum SetLabelsErrorCode {
+    UNAUTHORIZED
+    BAD_REQUEST
+    NOT_FOUND
+  }
+
   # Mutations
   type Mutation {
     googleLogin(input: GoogleLoginInput!): LoginResult!
@@ -1384,6 +1405,7 @@ const schema = gql`
     deleteLabel(id: ID!): DeleteLabelResult!
     login(input: LoginInput!): LoginResult!
     signup(input: SignupInput!): SignupResult!
+    setLabels(input: SetLabelsInput!): SetLabelsResult!
   }
 
   # FIXME: remove sort from feedArticles after all cahced tabs are closed
diff --git a/packages/api/test/db.ts b/packages/api/test/db.ts
index 68596e748..b92af6ead 100644
--- a/packages/api/test/db.ts
+++ b/packages/api/test/db.ts
@@ -14,6 +14,7 @@ import { Link } from '../src/entity/link'
 import { Reminder } from '../src/entity/reminder'
 import { NewsletterEmail } from '../src/entity/newsletter_email'
 import { UserDeviceToken } from '../src/entity/user_device_tokens'
+import { Label } from '../src/entity/label'
 
 const runMigrations = async () => {
   const migrationDirectory = __dirname + '/../../db/migrations'
@@ -200,3 +201,17 @@ export const getUser = async (id: string): Promise<User | undefined> => {
 export const getLink = async (id: string): Promise<Link | undefined> => {
   return getRepository(Link).findOne(id)
 }
+
+export const createTestLabel = async (
+  user: User,
+  name: string,
+  color: string
+): Promise<Label> => {
+  return getRepository(Label)
+    .create({
+      user: user,
+      name: name,
+      color: color,
+    })
+    .save()
+}
diff --git a/packages/api/test/resolvers/labels.test.ts b/packages/api/test/resolvers/labels.test.ts
index 8fe06fd8e..737908272 100644
--- a/packages/api/test/resolvers/labels.test.ts
+++ b/packages/api/test/resolvers/labels.test.ts
@@ -1,4 +1,5 @@
 import {
+  createTestLabel,
   createTestLink,
   createTestPage,
   createTestUser,
@@ -11,10 +12,13 @@ import { expect } from 'chai'
 import { Page } from '../../src/entity/page'
 import { getRepository } from 'typeorm'
 import 'mocha'
+import { LinkLabel } from '../../src/entity/link_label'
+import { User } from '../../src/entity/user'
 
 describe('Labels API', () => {
   const username = 'fakeUser'
 
+  let user: User
   let authToken: string
   let page: Page
   let link: Link
@@ -22,31 +26,30 @@ describe('Labels API', () => {
 
   before(async () => {
     // create test user and login
-    const user = await createTestUser(username)
+    user = await createTestUser(username)
     const res = await request
       .post('/local/debug/fake-user-login')
       .send({ fakeEmail: user.email })
 
     authToken = res.body.authToken
 
-    //  create test label
+    //  create testing labels
+    const label1 = await createTestLabel(user, 'label_1', '#ffffff')
+    const label2 = await createTestLabel(user, 'label_2', '#eeeeee')
+    labels = [label1, label2]
+
     page = await createTestPage()
     link = await createTestLink(user, page)
-    const label1 = await getRepository(Label)
-      .create({
-        name: 'label1',
-        user: user,
-        color: '#ffffff',
-      })
-      .save()
-    const label2 = await getRepository(Label)
-      .create({
-        name: 'label2',
-        user: user,
-        color: '#eeeeee',
-      })
-      .save()
-    labels = [label1, label2]
+    const existingLabelOfLink = await createTestLabel(
+      user,
+      'different_label',
+      '#dddddd'
+    )
+    //  set another label to link
+    await getRepository(LinkLabel).save({
+      link,
+      label: existingLabelOfLink,
+    })
   })
 
   after(async () => {
@@ -81,6 +84,7 @@ describe('Labels API', () => {
     it('should return labels', async () => {
       const res = await graphqlRequest(query, authToken).expect(200)
 
+      const labels = await getRepository(Label).find({ where: { user } })
       expect(res.body.data.labels.labels).to.eql(
         labels.map((label) => ({
           id: label.id,
@@ -200,8 +204,9 @@ describe('Labels API', () => {
     })
 
     context('when label exists', () => {
-      before(() => {
-        labelId = labels[0].id
+      before(async () => {
+        const toDeleteLabel = await createTestLabel(user, 'label4', '#ffffff')
+        labelId = toDeleteLabel.id
       })
 
       it('should delete label', async () => {
@@ -237,4 +242,89 @@ describe('Labels API', () => {
       return graphqlRequest(query, invalidAuthToken).expect(500)
     })
   })
+
+  describe('Set labels', () => {
+    let query: string
+    let linkId: string
+    let labelIds: string[] = []
+
+    beforeEach(() => {
+      query = `
+        mutation {
+          setLabels(
+            input: {
+              linkId: "${linkId}",
+              labelIds: [
+                "${labelIds[0]}",
+                "${labelIds[1]}"
+              ]
+            }
+          ) {
+            ... on SetLabelsSuccess {
+              labels {
+                id
+                name
+              }
+            }
+            ... on SetLabelsError {
+              errorCodes
+            }
+          }
+        }
+      `
+    })
+
+    context('when labels exists', () => {
+      before(() => {
+        linkId = link.id
+        labelIds = [labels[0].id, labels[1].id]
+      })
+
+      it('should set labels', async () => {
+        await graphqlRequest(query, authToken).expect(200)
+        const link = await getRepository(Link).findOne(linkId, {
+          relations: ['labels'],
+        })
+        expect(link?.labels?.map((l) => l.id)).to.eql(labelIds)
+      })
+    })
+
+    context('when labels not exist', () => {
+      before(() => {
+        linkId = link.id
+        labelIds = [generateFakeUuid(), generateFakeUuid()]
+      })
+
+      it('should return error code NOT_FOUND', async () => {
+        const res = await graphqlRequest(query, authToken).expect(200)
+        expect(res.body.data.setLabels.errorCodes).to.eql(['NOT_FOUND'])
+      })
+    })
+
+    context('when link not exist', () => {
+      before(() => {
+        linkId = generateFakeUuid()
+        labelIds = [labels[0].id, labels[1].id]
+      })
+
+      it('should return error code NOT_FOUND', async () => {
+        const res = await graphqlRequest(query, authToken).expect(200)
+        expect(res.body.data.setLabels.errorCodes).to.eql(['NOT_FOUND'])
+      })
+    })
+
+    it('responds status code 400 when invalid query', async () => {
+      const invalidQuery = `
+        mutation {
+          setLabels {}
+        }
+      `
+      return graphqlRequest(invalidQuery, authToken).expect(400)
+    })
+
+    it('responds status code 500 when invalid user', async () => {
+      const invalidAuthToken = 'Fake token'
+      return graphqlRequest(query, invalidAuthToken).expect(500)
+    })
+  })
 })

From 4d770399bd994bfbe0d30c939c87dd42943284ea Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Tue, 22 Feb 2022 18:33:39 +0800
Subject: [PATCH 06/20] add labels testing page

---
 .../mutations/createLabelMutation.ts          |  42 +++++++
 .../mutations/deleteLabelMutation.ts          |  34 ++++++
 .../networking/queries/useGetLabelsQuery.tsx  |  70 ++++++++++++
 packages/web/pages/settings/labels.tsx        | 107 ++++++++++++++++++
 4 files changed, 253 insertions(+)
 create mode 100644 packages/web/lib/networking/mutations/createLabelMutation.ts
 create mode 100644 packages/web/lib/networking/mutations/deleteLabelMutation.ts
 create mode 100644 packages/web/lib/networking/queries/useGetLabelsQuery.tsx
 create mode 100644 packages/web/pages/settings/labels.tsx

diff --git a/packages/web/lib/networking/mutations/createLabelMutation.ts b/packages/web/lib/networking/mutations/createLabelMutation.ts
new file mode 100644
index 000000000..2da414b22
--- /dev/null
+++ b/packages/web/lib/networking/mutations/createLabelMutation.ts
@@ -0,0 +1,42 @@
+import { gql } from 'graphql-request'
+import { gqlFetcher } from '../networkHelpers'
+
+export async function createLabelMutation(
+  name: string,
+  color: string,
+  description?: string
+): Promise<any | undefined> {
+  const mutation = gql`
+    mutation {
+      createLabel(
+        input: {
+          color: "${color}"
+          name: "${name}"
+          description: "${description}"
+        }
+      ) {
+        ... on CreateLabelSuccess {
+          label {
+            id
+            name
+            color
+            description
+            createdAt
+          }
+        }
+        ... on CreateLabelError {
+          errorCodes
+        }
+      }
+    }
+  `
+
+  try {
+    const data = await gqlFetcher(mutation)
+    console.log('created label', data)
+    return data
+  } catch (error) {
+    console.log('createLabelMutation error', error)
+    return undefined
+  }
+}
diff --git a/packages/web/lib/networking/mutations/deleteLabelMutation.ts b/packages/web/lib/networking/mutations/deleteLabelMutation.ts
new file mode 100644
index 000000000..cef0b4d53
--- /dev/null
+++ b/packages/web/lib/networking/mutations/deleteLabelMutation.ts
@@ -0,0 +1,34 @@
+import { gql } from 'graphql-request'
+import { gqlFetcher } from '../networkHelpers'
+
+export async function deleteLabelMutation(
+  labelId: string
+): Promise<any | undefined> {
+  const mutation = gql`
+    mutation {
+      deleteLabel(id: "${labelId}") {
+        ... on DeleteLabelSuccess {
+          label {
+            id
+            name
+            color
+            description
+            createdAt
+          }
+        }
+        ... on DeleteLabelError {
+          errorCodes
+        }
+      }
+    }
+  `
+
+  try {
+    const data = await gqlFetcher(mutation)
+    console.log('deleted label', data)
+    return data
+  } catch (error) {
+    console.log('deleteLabelMutation error', error)
+    return undefined
+  }
+}
diff --git a/packages/web/lib/networking/queries/useGetLabelsQuery.tsx b/packages/web/lib/networking/queries/useGetLabelsQuery.tsx
new file mode 100644
index 000000000..d132d3042
--- /dev/null
+++ b/packages/web/lib/networking/queries/useGetLabelsQuery.tsx
@@ -0,0 +1,70 @@
+import { gql } from 'graphql-request'
+import useSWR from 'swr'
+import { publicGqlFetcher } from '../networkHelpers'
+
+type LabelsQueryResponse = {
+  isValidating: boolean
+  labels: Label[]
+  revalidate: () => void
+}
+
+type LabelsResponseData = {
+  labels?: LabelsData
+}
+
+type LabelsData = {
+  labels?: unknown
+}
+
+export type Label = {
+  id: string
+  name: string
+  color: string
+  description?: string
+  createdAt: Date
+}
+
+export function useGetLabelsQuery(): LabelsQueryResponse {
+  const query = gql`
+    query GetLabels {
+      labels {
+        ... on LabelsSuccess {
+          labels {
+            id
+            name
+            color
+            description
+            createdAt
+          }
+        }
+        ... on LabelsError {
+          errorCodes
+        }
+      }
+    }
+  `
+
+  const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher)
+
+  try {
+    if (data) {
+      const result = data as LabelsResponseData
+      const labels = result.labels?.labels as Label[]
+      return {
+        isValidating,
+        labels,
+        revalidate: () => {
+          mutate()
+        },
+      }
+    }
+  } catch (error) {
+    console.log('error', error)
+  }
+  return {
+    isValidating: false,
+    labels: [],
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    revalidate: () => {},
+  }
+}
diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx
new file mode 100644
index 000000000..971890030
--- /dev/null
+++ b/packages/web/pages/settings/labels.tsx
@@ -0,0 +1,107 @@
+import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
+import { Button } from '../../components/elements/Button'
+import { Box, VStack } from '../../components/elements/LayoutPrimitives'
+import { toast, Toaster } from 'react-hot-toast'
+import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuery'
+import { createLabelMutation } from '../../lib/networking/mutations/createLabelMutation'
+import { deleteLabelMutation } from '../../lib/networking/mutations/deleteLabelMutation'
+import { useState } from 'react'
+
+export default function LabelsPage(): JSX.Element {
+  const { labels, revalidate, isValidating } = useGetLabelsQuery()
+  const [name, setName] = useState('')
+  const [color, setColor] = useState('')
+  const [description, setDescription] = useState('')
+
+  async function createLabel(): Promise<void> {
+    const res = await createLabelMutation(name, color, description)
+    if (res) {
+      if (res.createLabel.errorCodes && res.createLabel.errorCodes.length > 0) {
+        toast.error(res.createLabel.errorCodes[0])
+      } else {
+        toast.success('Label created')
+        setName('')
+        setColor('')
+        setDescription('')
+        revalidate()
+      }
+    } else {
+      toast.error('Failed to create label')
+    }
+  }
+
+  async function deleteLabel(id: string): Promise<void> {
+    await deleteLabelMutation(id)
+    revalidate()
+  }
+
+  return (
+    <PrimaryLayout pageTestId="settings-labels-tag">
+      <Toaster />
+      <VStack css={{ mx: '42px' }}>
+        <h2>Create a new label</h2>
+        <form
+          onSubmit={async (e): Promise<void> => {
+            e.preventDefault()
+            await createLabel()
+          }}
+        >
+          <input
+            type="text"
+            name="name"
+            placeholder="Name"
+            required
+            value={name}
+            onChange={(event) => {
+              setName(event.target.value)
+            }}
+          />
+          <input
+            type="text"
+            name="color"
+            placeholder="Color"
+            required
+            value={color}
+            onChange={(event) => {
+              setColor(event.target.value)
+            }}
+          />
+          <input
+            type="text"
+            name="description"
+            placeholder="Description"
+            value={description}
+            onChange={(event) => {
+              setDescription(event.target.value)
+            }}
+          />
+          <Button type="submit" disabled={isValidating}>
+            Create
+          </Button>
+        </form>
+
+        <h2>Labels</h2>
+        {labels &&
+          labels.map((label) => {
+            return (
+              <Box key={label.id}>
+                <form
+                  onSubmit={async (e): Promise<void> => {
+                    e.preventDefault()
+                    await deleteLabel(label.id)
+                  }}
+                >
+                  <input type="text" value={label.name} disabled />
+                  <input type="text" value={label.color} disabled />
+                  <input type="text" value={label.description} disabled />
+                  <Button type="submit" disabled={isValidating}>
+                    Delete
+                  </Button>
+                </form>
+              </Box>
+            )
+          })}
+      </VStack>
+    </PrimaryLayout>
+  )
+}

From fc37d06fd2255fb23f1c273ff3c7d30a2a317159 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Wed, 23 Feb 2022 11:22:44 +0800
Subject: [PATCH 07/20] update params variable

---
 packages/api/src/resolvers/article/index.ts | 30 +++++++++++----------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/api/src/resolvers/article/index.ts b/packages/api/src/resolvers/article/index.ts
index fb4aac499..c21f13f85 100644
--- a/packages/api/src/resolvers/article/index.ts
+++ b/packages/api/src/resolvers/article/index.ts
@@ -4,21 +4,25 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-floating-promises */
 import {
-  FeedArticle,
-  PageInfo,
   Article,
   ArticleError,
   ArticleErrorCode,
   ArticlesError,
   ArticleSuccess,
+  ContentReader,
   CreateArticleError,
   CreateArticleErrorCode,
   CreateArticleSuccess,
+  FeedArticle,
   MutationCreateArticleArgs,
   MutationSaveArticleReadingProgressArgs,
   MutationSetBookmarkArticleArgs,
   MutationSetShareArticleArgs,
+  PageInfo,
+  PageType,
   QueryArticleArgs,
+  QueryArticlesArgs,
+  ResolverFn,
   SaveArticleReadingProgressError,
   SaveArticleReadingProgressErrorCode,
   SaveArticleReadingProgressSuccess,
@@ -28,15 +32,12 @@ import {
   SetShareArticleError,
   SetShareArticleErrorCode,
   SetShareArticleSuccess,
-  ResolverFn,
-  PageType,
-  ContentReader,
 } from '../../generated/graphql'
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Merge } from '../../util'
 import {
-  makeStorageFilePublic,
   getStorageFileDetails,
+  makeStorageFilePublic,
 } from '../../utils/uploads'
 import { ContentParseError } from '../../utils/errors'
 import {
@@ -49,9 +50,9 @@ import {
   validatedDate,
 } from '../../utils/helpers'
 import {
+  ParsedContentPuppeteer,
   parseOriginalContent,
   parsePreparedContent,
-  ParsedContentPuppeteer,
 } from '../../utils/parser'
 import { isSiteBlockedForParse } from '../../utils/blocked'
 import { Readability } from '@omnivore/readability'
@@ -530,16 +531,17 @@ type PaginatedPartialArticles = {
 
 export const getArticlesResolver = authorized<
   PaginatedPartialArticles,
-  ArticlesError
->(async (_obj, _params, { models, claims, authTrx }) => {
-  const notNullField = _params?.sharedOnly ? 'sharedAt' : null
-  const startCursor = _params.after || ''
-  const first = _params.first || 10
+  ArticlesError,
+  QueryArticlesArgs
+>(async (_obj, params, { models, claims, authTrx }) => {
+  const notNullField = params.sharedOnly ? 'sharedAt' : null
+  const startCursor = params.after || ''
+  const first = params.first || 10
 
   // Perform basic sanitization. Right now we just allow alphanumeric, space and quote
   // so queries can contain phrases like "human race". In the future we will need to
   // split out terms like "label:unread".
-  const searchQuery = parseSearchQuery(_params.query)
+  const searchQuery = parseSearchQuery(params.query || undefined)
 
   analytics.track({
     userId: claims.uid,
@@ -559,7 +561,7 @@ export const getArticlesResolver = authorized<
       {
         cursor: startCursor,
         first: first + 1, // fetch one more item to get next cursor
-        sort: _params.sort,
+        sort: params.sort || undefined,
         query: searchQuery.query,
         inFilter: searchQuery.inFilter,
         readFilter: searchQuery.readFilter,

From 9599c98c77d3a7e239d9bd49c38d0b3686942602 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Wed, 23 Feb 2022 13:25:12 +0800
Subject: [PATCH 08/20] add label filters in search query

---
 packages/api/src/utils/search.ts | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/api/src/utils/search.ts b/packages/api/src/utils/search.ts
index 5eadf9e11..4769e4638 100644
--- a/packages/api/src/utils/search.ts
+++ b/packages/api/src/utils/search.ts
@@ -5,8 +5,8 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import {
   parse,
-  SearchParserTextOffset,
   SearchParserKeyWordOffset,
+  SearchParserTextOffset,
 } from 'search-query-parser'
 import { PageType } from '../generated/graphql'
 
@@ -27,6 +27,7 @@ export type SearchFilter = {
   inFilter: InFilter
   readFilter: ReadFilter
   typeFilter?: PageType | undefined
+  labelFilters?: string[]
 }
 
 const parseIsFilter = (str: string | undefined): ReadFilter => {
@@ -77,6 +78,17 @@ const parseTypeFilter = (str: string | undefined): PageType | undefined => {
   return undefined
 }
 
+const parseLabelFilters = (
+  str: string | undefined,
+  labelFilters: string[] | undefined
+): string[] | undefined => {
+  if (str === undefined) {
+    return labelFilters
+  }
+
+  return labelFilters ? labelFilters.concat(str) : [str]
+}
+
 export const parseSearchQuery = (query: string | undefined): SearchFilter => {
   const searchQuery = query ? query.replace(/\W\s":/g, '') : undefined
   const result: SearchFilter = {
@@ -94,7 +106,7 @@ export const parseSearchQuery = (query: string | undefined): SearchFilter => {
   }
 
   const parsed = parse(searchQuery, {
-    keywords: ['in', 'is', 'type'],
+    keywords: ['in', 'is', 'type', 'label'],
     tokenize: true,
   })
   if (parsed.offsets) {
@@ -133,6 +145,12 @@ export const parseSearchQuery = (query: string | undefined): SearchFilter => {
         case 'type':
           result.typeFilter = parseTypeFilter(keyword.value)
           break
+        case 'label':
+          result.labelFilters = parseLabelFilters(
+            keyword.value,
+            result.labelFilters
+          )
+          break
       }
     }
   }

From 5651c92efe38d78e0ca7916d7c28755c0b0ba44f Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Wed, 23 Feb 2022 14:56:44 +0800
Subject: [PATCH 09/20] ingore case when checking name uniqueness

---
 packages/api/src/resolvers/labels/index.ts             | 5 +++--
 packages/db/migrations/0070.do.update_labels_table.sql | 4 +++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/api/src/resolvers/labels/index.ts b/packages/api/src/resolvers/labels/index.ts
index 2d111b507..a2d369f03 100644
--- a/packages/api/src/resolvers/labels/index.ts
+++ b/packages/api/src/resolvers/labels/index.ts
@@ -20,7 +20,7 @@ import { analytics } from '../../utils/analytics'
 import { env } from '../../env'
 import { User } from '../../entity/user'
 import { Label } from '../../entity/label'
-import { getManager, getRepository } from 'typeorm'
+import { getManager, getRepository, ILike } from 'typeorm'
 import { setClaims } from '../../entity/utils'
 import { Link } from '../../entity/link'
 import { LinkLabel } from '../../entity/link_label'
@@ -76,9 +76,10 @@ export const createLabelResolver = authorized<
       }
     }
 
+    // Check if label already exists ignoring case of name
     const existingLabel = await getRepository(Label).findOne({
       where: {
-        name,
+        name: ILike(name),
       },
     })
     if (existingLabel) {
diff --git a/packages/db/migrations/0070.do.update_labels_table.sql b/packages/db/migrations/0070.do.update_labels_table.sql
index 47bd667eb..13262ca7c 100755
--- a/packages/db/migrations/0070.do.update_labels_table.sql
+++ b/packages/db/migrations/0070.do.update_labels_table.sql
@@ -6,7 +6,7 @@ BEGIN;
 
 ALTER TABLE omnivore.labels
     DROP COLUMN link_id,
-    ADD COLUMN color text NOT NULL,
+    ADD COLUMN color text NOT NULL DEFAULT '#000000',
     ADD COLUMN description text,
     ADD CONSTRAINT label_name_unique UNIQUE (user_id, name);
 
@@ -18,4 +18,6 @@ CREATE TABLE omnivore.link_labels (
     UNIQUE (link_id, label_id)
 );
 
+GRANT SELECT, INSERT, DELETE ON omnivore.link_labels TO omnivore_user;
+
 COMMIT;

From edb9339897120decd017160b22c1bca515e15457 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Wed, 23 Feb 2022 14:57:29 +0800
Subject: [PATCH 10/20] add labels and link_labels table name

---
 packages/api/src/utils/dictionary.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/api/src/utils/dictionary.ts b/packages/api/src/utils/dictionary.ts
index 3fa214eda..2c3425f21 100644
--- a/packages/api/src/utils/dictionary.ts
+++ b/packages/api/src/utils/dictionary.ts
@@ -23,4 +23,6 @@ export enum Table {
   HIGHLIGHT_REPLY = 'omnivore.highlight_reply',
   REACTION = 'omnivore.reaction',
   REMINDER = 'omnivore.reminders',
+  LABELS = 'omnivore.labels',
+  LINK_LABELS = 'omnivore.link_labels',
 }

From fc18004a5d7fdce1a3b1aa0183fa5698153877ad Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Wed, 23 Feb 2022 16:43:07 +0800
Subject: [PATCH 11/20] add labels in search query

---
 packages/api/src/datalayer/links/index.ts   | 14 ++++++++++++--
 packages/api/src/resolvers/article/index.ts |  6 ++++--
 packages/api/src/utils/search.ts            |  5 ++++-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/api/src/datalayer/links/index.ts b/packages/api/src/datalayer/links/index.ts
index 10a8d991e..70ecc56bf 100644
--- a/packages/api/src/datalayer/links/index.ts
+++ b/packages/api/src/datalayer/links/index.ts
@@ -403,6 +403,7 @@ class UserArticleModel extends DataModel<
       inFilter: InFilter
       readFilter: ReadFilter
       typeFilter: PageType | undefined
+      labelFilters?: string[]
     },
     userId: string,
     tx = this.kx,
@@ -441,6 +442,16 @@ class UserArticleModel extends DataModel<
       }
     }
 
+    // search by labels using lowercase
+    if (args.labelFilters) {
+      queryPromise
+        .innerJoin(Table.LINK_LABELS, 'link_labels.link_id', 'links.id')
+        .innerJoin(Table.LABELS, 'labels.id', 'link_labels.label_id')
+        .whereRaw('LOWER(omnivore.labels.name) = ANY(?)', [args.labelFilters])
+    }
+
+    console.log(queryPromise.toString())
+
     if (notNullField) {
       queryPromise.whereNotNull(notNullField)
     }
@@ -469,12 +480,11 @@ class UserArticleModel extends DataModel<
       .orderBy('omnivore.links.id', sortOrder)
       .limit(limit)
 
-    // console.log('query', queryPromise.toString())
     const rows = await queryPromise
-
     for (const row of rows) {
       this.loader.prime(row.id, row)
     }
+
     return [rows, parseInt(totalCount as string)]
   }
 
diff --git a/packages/api/src/resolvers/article/index.ts b/packages/api/src/resolvers/article/index.ts
index c21f13f85..56a3872d1 100644
--- a/packages/api/src/resolvers/article/index.ts
+++ b/packages/api/src/resolvers/article/index.ts
@@ -539,8 +539,8 @@ export const getArticlesResolver = authorized<
   const first = params.first || 10
 
   // Perform basic sanitization. Right now we just allow alphanumeric, space and quote
-  // so queries can contain phrases like "human race". In the future we will need to
-  // split out terms like "label:unread".
+  // so queries can contain phrases like "human race";
+  // We can also split out terms like "label:unread".
   const searchQuery = parseSearchQuery(params.query || undefined)
 
   analytics.track({
@@ -551,6 +551,7 @@ export const getArticlesResolver = authorized<
       inFilter: searchQuery.inFilter,
       readFilter: searchQuery.readFilter,
       typeFilter: searchQuery.typeFilter,
+      labelFilters: searchQuery.labelFilters,
       env: env.server.apiEnv,
     },
   })
@@ -566,6 +567,7 @@ export const getArticlesResolver = authorized<
         inFilter: searchQuery.inFilter,
         readFilter: searchQuery.readFilter,
         typeFilter: searchQuery.typeFilter,
+        labelFilters: searchQuery.labelFilters,
       },
       claims.uid,
       tx,
diff --git a/packages/api/src/utils/search.ts b/packages/api/src/utils/search.ts
index 4769e4638..2f14fd196 100644
--- a/packages/api/src/utils/search.ts
+++ b/packages/api/src/utils/search.ts
@@ -86,7 +86,10 @@ const parseLabelFilters = (
     return labelFilters
   }
 
-  return labelFilters ? labelFilters.concat(str) : [str]
+  // use lower case for label names
+  const label = str.toLowerCase()
+
+  return labelFilters ? labelFilters.concat(label) : [label]
 }
 
 export const parseSearchQuery = (query: string | undefined): SearchFilter => {

From c7841b8e8aed3a4086631ad1eb68bc672a925d56 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Wed, 23 Feb 2022 17:12:37 +0800
Subject: [PATCH 12/20] remove duplicate links because of join with link_labels
 table

---
 packages/api/src/datalayer/links/index.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/api/src/datalayer/links/index.ts b/packages/api/src/datalayer/links/index.ts
index 70ecc56bf..02374e26b 100644
--- a/packages/api/src/datalayer/links/index.ts
+++ b/packages/api/src/datalayer/links/index.ts
@@ -448,10 +448,9 @@ class UserArticleModel extends DataModel<
         .innerJoin(Table.LINK_LABELS, 'link_labels.link_id', 'links.id')
         .innerJoin(Table.LABELS, 'labels.id', 'link_labels.label_id')
         .whereRaw('LOWER(omnivore.labels.name) = ANY(?)', [args.labelFilters])
+        .distinct('links.id')
     }
 
-    console.log(queryPromise.toString())
-
     if (notNullField) {
       queryPromise.whereNotNull(notNullField)
     }

From 8f68b60f18c4d4638f8a0cfe9b274811949cff90 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 23 Feb 2022 17:06:04 -0800
Subject: [PATCH 13/20] Add basic UI for editing labels

---
 packages/web/components/elements/Label.tsx    |  34 ++++++
 .../templates/article/ArticleContainer.tsx    |  10 ++
 .../templates/article/EditLabelsModal.tsx     | 102 ++++++++++++++++++
 .../keyboardShortcuts/navigationShortcuts.ts  |   7 ++
 .../networking/mutations/setLabelsMutation.ts |  29 +++++
 5 files changed, 182 insertions(+)
 create mode 100644 packages/web/components/elements/Label.tsx
 create mode 100644 packages/web/components/templates/article/EditLabelsModal.tsx
 create mode 100644 packages/web/lib/networking/mutations/setLabelsMutation.ts

diff --git a/packages/web/components/elements/Label.tsx b/packages/web/components/elements/Label.tsx
new file mode 100644
index 000000000..2a666e0b0
--- /dev/null
+++ b/packages/web/components/elements/Label.tsx
@@ -0,0 +1,34 @@
+import { styled } from './../tokens/stitches.config'
+import { Root, Image, Fallback } from '@radix-ui/react-avatar'
+import { StyledText } from './StyledText'
+
+type LabelProps = {
+  text: string
+  color: string // expected to be a RGB hex color string
+}
+
+export function Label(props: LabelProps): JSX.Element {
+  const hexToRgb = (hex: string) => {
+    var bigint = parseInt(hex.substring(1), 16);
+    var r = (bigint >> 16) & 255;
+    var g = (bigint >> 8) & 255;
+    var b = bigint & 255;
+
+    return [r,g,b];
+  }
+  const color = hexToRgb(props.color)
+  return (
+    <StyledText
+      css={{
+        margin: '4px',
+        borderRadius: '32px',
+        color: props.color,
+        padding: '4px 8px 4px 8px',
+        border: `1px solid ${props.color}`,
+        backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.3)`,
+      }}
+    >
+      {props.text}
+    </StyledText>
+  )
+}
diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx
index 0611b2c09..4058b32d5 100644
--- a/packages/web/components/templates/article/ArticleContainer.tsx
+++ b/packages/web/components/templates/article/ArticleContainer.tsx
@@ -17,6 +17,7 @@ import { ShareArticleModal } from './ShareArticleModal'
 import { userPersonalizationMutation } from '../../../lib/networking/mutations/userPersonalizationMutation'
 import { webBaseURL } from '../../../lib/appConfig'
 import { updateThemeLocally } from '../../../lib/themeUpdater'
+import { EditLabelsModal } from './EditLabelsModal'
 
 type ArticleContainerProps = {
   viewerUsername: string
@@ -32,6 +33,7 @@ type ArticleContainerProps = {
 
 export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
   const [showShareModal, setShowShareModal] = useState(false)
+  const [showLabelsModal, setShowLabelsModal] = useState(false)
   const [showNotesSidebar, setShowNotesSidebar] = useState(false)
   const [showReportIssuesModal, setShowReportIssuesModal] = useState(false)
   const [fontSize, setFontSize] = useState(props.fontSize ?? 20)
@@ -56,6 +58,9 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
         case 'decrementFontSize':
           updateFontSize(Math.max(fontSize - 2, 10))
           break
+        case 'editLabels':
+          setShowLabelsModal(true)
+          break
       }
     })
   )
@@ -234,6 +239,11 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
           onOpenChange={(open: boolean) => setShowShareModal(open)}
         />
       )}
+      {showLabelsModal && (
+        <EditLabelsModal article={props.article} labels={[ /* props.article.labels */]} onOpenChange={() => {
+          setShowLabelsModal(false)
+        }} />
+      )}
     </>
   )
 }
diff --git a/packages/web/components/templates/article/EditLabelsModal.tsx b/packages/web/components/templates/article/EditLabelsModal.tsx
new file mode 100644
index 000000000..b266e05c3
--- /dev/null
+++ b/packages/web/components/templates/article/EditLabelsModal.tsx
@@ -0,0 +1,102 @@
+import {
+  ModalRoot,
+  ModalContent,
+  ModalOverlay,
+} from '../../elements/ModalPrimitives'
+import { HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { Button } from '../../elements/Button'
+import { StyledText } from '../../elements/StyledText'
+import { CrossIcon } from '../../elements/images/CrossIcon'
+import { theme } from '../../tokens/stitches.config'
+import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
+import { ChangeEvent, useCallback, useState } from 'react'
+import { Label } from '../../elements/Label'
+import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
+import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
+
+type EditLabelsModalProps = {
+  labels: string[]
+  article: ArticleAttributes
+  onOpenChange: (open: boolean) => void
+}
+
+export function EditLabelsModal(
+  props: EditLabelsModalProps
+): JSX.Element {
+  const [selectedLabels, setSelectedLabels] = useState(props.labels)
+  const { labels, revalidate, isValidating } = useGetLabelsQuery()
+
+  const saveAndExit = useCallback(async () => {
+    if (selectedLabels.length > 0) {
+      const result = await setLabelsMutation(
+        props.article.id,
+        selectedLabels,
+      )
+      console.log('result of setting labels', result)
+    }
+    props.onOpenChange(false)
+  }, [selectedLabels, props.onOpenChange])
+
+  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    const label = event.target.value
+    if (event.target.checked) {
+      setSelectedLabels([...selectedLabels, label])
+    } else {
+      setSelectedLabels(selectedLabels.filter((l) => l !== label))
+    }
+  }, [selectedLabels, setSelectedLabels])
+
+  return (
+    <ModalRoot defaultOpen onOpenChange={saveAndExit}>
+      <ModalOverlay />
+      <ModalContent
+        onPointerDownOutside={(event) => {
+          event.preventDefault()
+        }}
+        css={{ overflow: 'auto', p: '0' }}
+      >
+        <VStack distribution="start" css={{ p: '0' }}>
+          <HStack
+            distribution="between"
+            alignment="center"
+            css={{ width: '100%' }}
+          >
+            <StyledText style="modalHeadline" css={{ p: '16px' }}>Edit Labels</StyledText>
+            <Button
+              css={{ pt: '16px', pr: '16px' }}
+              style="ghost"
+              onClick={() => {
+                props.onOpenChange(false)
+              }}
+            >
+              <CrossIcon
+                size={20}
+                strokeColor={theme.colors.grayText.toString()}
+              />
+            </Button>
+          </HStack>
+          {labels && labels.map((label) => (
+            <HStack key={label.id} css={{ height: '50px', verticalAlign: 'middle' }} onClick={() => {
+              if (selectedLabels.includes(label.id)) {
+                setSelectedLabels(selectedLabels.filter((id) => id !== label.id))
+              } else {
+                setSelectedLabels([...selectedLabels, label.id])
+              }
+            }}>
+               <Label color={label.color} text={label.name} />
+               <input
+                type="checkbox"
+                value={label.id}
+                onChange={handleChange}
+                checked={selectedLabels.includes(label.id)}
+              />
+            </HStack>
+          ))}
+          <HStack css={{ width: '100%', mb: '16px' }} alignment="center">
+            <Button style="ctaDarkYellow" onClick={saveAndExit}>Save</Button>
+          </HStack>
+        </VStack>
+      </ModalContent>
+    </ModalRoot>
+  )
+}
diff --git a/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts b/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts
index 3bf61288f..29c5eff7e 100644
--- a/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts
+++ b/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts
@@ -210,6 +210,7 @@ type ArticleKeyboardAction =
   | 'openOriginalArticle'
   | 'incrementFontSize'
   | 'decrementFontSize'
+  | 'editLabels'
 
 export function articleKeyboardCommands(
   actionHandler: (action: ArticleKeyboardAction) => void
@@ -233,5 +234,11 @@ export function articleKeyboardCommands(
       shortcutKeyDescription: '-',
       callback: () => actionHandler('decrementFontSize'),
     },
+    {
+      shortcutKeys: ['l'],
+      actionDescription: 'Edit labels',
+      shortcutKeyDescription: 'l',
+      callback: () => actionHandler('editLabels'),
+    },
   ]
 }
diff --git a/packages/web/lib/networking/mutations/setLabelsMutation.ts b/packages/web/lib/networking/mutations/setLabelsMutation.ts
new file mode 100644
index 000000000..3136daa23
--- /dev/null
+++ b/packages/web/lib/networking/mutations/setLabelsMutation.ts
@@ -0,0 +1,29 @@
+import { gql } from 'graphql-request'
+import { gqlFetcher } from '../networkHelpers'
+
+export async function setLabelsMutation(
+  linkId: string,
+  labelIds: string[],
+): Promise<unknown> {
+  const mutation = gql`
+  mutation SetLabels($input: SetLabelsInput!) {
+    setLabels(input: $input) {
+      ... on SetLabelsSuccess {
+        labels {
+          id
+        }
+      }
+      ... on SetLabelsError {
+        errorCodes
+      }
+    }
+  }`
+
+  try {
+    const data = await gqlFetcher(mutation, { input: { linkId, labelIds }})
+    return data
+  } catch (error) {
+    console.log('SetLabelsOutput error', error)
+    return undefined
+  }
+}

From 276205d52a0e7b8ba22fb45f81944cce3a2c9ecc Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Thu, 24 Feb 2022 11:46:51 +0800
Subject: [PATCH 14/20] add linkId and labels in article type

---
 packages/api/src/datalayer/links/index.ts        |  1 +
 packages/api/src/generated/graphql.ts            |  4 ++++
 packages/api/src/generated/schema.graphql        |  2 ++
 packages/api/src/resolvers/function_resolvers.ts | 10 ++++++++++
 packages/api/src/schema.ts                       |  2 ++
 5 files changed, 19 insertions(+)

diff --git a/packages/api/src/datalayer/links/index.ts b/packages/api/src/datalayer/links/index.ts
index 02374e26b..48885a347 100644
--- a/packages/api/src/datalayer/links/index.ts
+++ b/packages/api/src/datalayer/links/index.ts
@@ -36,6 +36,7 @@ type UserArticleStats = {
 }
 
 const LINK_COLS = [
+  'omnivore.links.id as linkId',
   'omnivore.links.userId',
   'omnivore.links.slug',
   'omnivore.links.article_url as url',
diff --git a/packages/api/src/generated/graphql.ts b/packages/api/src/generated/graphql.ts
index c844284eb..35ed9737b 100644
--- a/packages/api/src/generated/graphql.ts
+++ b/packages/api/src/generated/graphql.ts
@@ -53,6 +53,8 @@ export type Article = {
   id: Scalars['ID'];
   image?: Maybe<Scalars['String']>;
   isArchived: Scalars['Boolean'];
+  labels?: Maybe<Array<Label>>;
+  linkId?: Maybe<Scalars['ID']>;
   originalArticleUrl?: Maybe<Scalars['String']>;
   originalHtml?: Maybe<Scalars['String']>;
   pageType?: Maybe<PageType>;
@@ -2387,6 +2389,8 @@ export type ArticleResolvers<ContextType = ResolverContext, ParentType extends R
   id?: Resolver<ResolversTypes['ID'], ParentType, ContextType>;
   image?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   isArchived?: Resolver<ResolversTypes['Boolean'], ParentType, ContextType>;
+  labels?: Resolver<Maybe<Array<ResolversTypes['Label']>>, ParentType, ContextType>;
+  linkId?: Resolver<Maybe<ResolversTypes['ID']>, ParentType, ContextType>;
   originalArticleUrl?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   originalHtml?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   pageType?: Resolver<Maybe<ResolversTypes['PageType']>, ParentType, ContextType>;
diff --git a/packages/api/src/generated/schema.graphql b/packages/api/src/generated/schema.graphql
index 0e7793c8d..b6adbb67f 100644
--- a/packages/api/src/generated/schema.graphql
+++ b/packages/api/src/generated/schema.graphql
@@ -34,6 +34,8 @@ type Article {
   id: ID!
   image: String
   isArchived: Boolean!
+  labels: [Label!]
+  linkId: ID
   originalArticleUrl: String
   originalHtml: String
   pageType: PageType
diff --git a/packages/api/src/resolvers/function_resolvers.ts b/packages/api/src/resolvers/function_resolvers.ts
index 47858f573..9a2641952 100644
--- a/packages/api/src/resolvers/function_resolvers.ts
+++ b/packages/api/src/resolvers/function_resolvers.ts
@@ -79,6 +79,9 @@ import {
   generateDownloadSignedUrl,
   generateUploadFilePathName,
 } from '../utils/uploads'
+import { getRepository } from 'typeorm'
+import { Link } from '../entity/link'
+import { Label } from '../entity/label'
 
 /* eslint-disable @typescript-eslint/naming-convention */
 type ResultResolveType = {
@@ -425,6 +428,13 @@ export const functionResolvers = {
         ctx.models
       )
     },
+    async labels(article: { linkId: string }): Promise<Label[] | undefined> {
+      console.log('labels', article.linkId)
+      const link = await getRepository(Link).findOne(article.linkId, {
+        relations: ['labels'],
+      })
+      return link?.labels
+    },
   },
   ArticleSavingRequest: {
     async article(
diff --git a/packages/api/src/schema.ts b/packages/api/src/schema.ts
index 6d4f32525..bd7d5d21b 100755
--- a/packages/api/src/schema.ts
+++ b/packages/api/src/schema.ts
@@ -333,6 +333,8 @@ const schema = gql`
     highlights(input: ArticleHighlightsInput): [Highlight!]!
     shareInfo: LinkShareInfo
     isArchived: Boolean!
+    linkId: ID
+    labels: [Label!]
   }
 
   # Query: article

From 6482d280f7238499ac337ad2f14bf843d80e4051 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Thu, 24 Feb 2022 12:35:42 +0800
Subject: [PATCH 15/20] add loading and set labels ui

---
 .../templates/article/EditLabelsModal.tsx     | 90 ++++++++++---------
 .../networking/fragments/articleFragment.ts   |  2 +
 .../lib/networking/fragments/labelFragment.ts | 18 ++++
 .../networking/queries/useGetArticleQuery.tsx | 21 +++--
 .../queries/useGetLibraryItemsQuery.tsx       | 11 ++-
 5 files changed, 94 insertions(+), 48 deletions(-)
 create mode 100644 packages/web/lib/networking/fragments/labelFragment.ts

diff --git a/packages/web/components/templates/article/EditLabelsModal.tsx b/packages/web/components/templates/article/EditLabelsModal.tsx
index b266e05c3..117f7a7e4 100644
--- a/packages/web/components/templates/article/EditLabelsModal.tsx
+++ b/packages/web/components/templates/article/EditLabelsModal.tsx
@@ -1,9 +1,9 @@
 import {
-  ModalRoot,
   ModalContent,
   ModalOverlay,
+  ModalRoot,
 } from '../../elements/ModalPrimitives'
-import { HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { HStack, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
 import { CrossIcon } from '../../elements/images/CrossIcon'
@@ -15,36 +15,33 @@ import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticle
 import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
 
 type EditLabelsModalProps = {
-  labels: string[]
   article: ArticleAttributes
   onOpenChange: (open: boolean) => void
 }
 
-export function EditLabelsModal(
-  props: EditLabelsModalProps
-): JSX.Element {
-  const [selectedLabels, setSelectedLabels] = useState(props.labels)
+export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element {
+  const [selectedLabels, setSelectedLabels] = useState(
+    props.article.labels?.map((l) => l.id) || []
+  )
   const { labels, revalidate, isValidating } = useGetLabelsQuery()
 
   const saveAndExit = useCallback(async () => {
-    if (selectedLabels.length > 0) {
-      const result = await setLabelsMutation(
-        props.article.id,
-        selectedLabels,
-      )
-      console.log('result of setting labels', result)
-    }
+    const result = await setLabelsMutation(props.article.linkId, selectedLabels)
+    console.log('result of setting labels', result)
     props.onOpenChange(false)
   }, [selectedLabels, props.onOpenChange])
 
-  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    const label = event.target.value
-    if (event.target.checked) {
-      setSelectedLabels([...selectedLabels, label])
-    } else {
-      setSelectedLabels(selectedLabels.filter((l) => l !== label))
-    }
-  }, [selectedLabels, setSelectedLabels])
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const label = event.target.value
+      if (event.target.checked) {
+        setSelectedLabels([...selectedLabels, label])
+      } else {
+        setSelectedLabels(selectedLabels.filter((l) => l !== label))
+      }
+    },
+    [selectedLabels, setSelectedLabels]
+  )
 
   return (
     <ModalRoot defaultOpen onOpenChange={saveAndExit}>
@@ -61,7 +58,9 @@ export function EditLabelsModal(
             alignment="center"
             css={{ width: '100%' }}
           >
-            <StyledText style="modalHeadline" css={{ p: '16px' }}>Edit Labels</StyledText>
+            <StyledText style="modalHeadline" css={{ p: '16px' }}>
+              Edit Labels
+            </StyledText>
             <Button
               css={{ pt: '16px', pr: '16px' }}
               style="ghost"
@@ -75,25 +74,34 @@ export function EditLabelsModal(
               />
             </Button>
           </HStack>
-          {labels && labels.map((label) => (
-            <HStack key={label.id} css={{ height: '50px', verticalAlign: 'middle' }} onClick={() => {
-              if (selectedLabels.includes(label.id)) {
-                setSelectedLabels(selectedLabels.filter((id) => id !== label.id))
-              } else {
-                setSelectedLabels([...selectedLabels, label.id])
-              }
-            }}>
-               <Label color={label.color} text={label.name} />
-               <input
-                type="checkbox"
-                value={label.id}
-                onChange={handleChange}
-                checked={selectedLabels.includes(label.id)}
-              />
-            </HStack>
-          ))}
+          {labels &&
+            labels.map((label) => (
+              <HStack
+                key={label.id}
+                css={{ height: '50px', verticalAlign: 'middle' }}
+                onClick={() => {
+                  if (selectedLabels.includes(label.id)) {
+                    setSelectedLabels(
+                      selectedLabels.filter((id) => id !== label.id)
+                    )
+                  } else {
+                    setSelectedLabels([...selectedLabels, label.id])
+                  }
+                }}
+              >
+                <Label color={label.color} text={label.name} />
+                <input
+                  type="checkbox"
+                  value={label.id}
+                  onChange={handleChange}
+                  checked={selectedLabels.includes(label.id)}
+                />
+              </HStack>
+            ))}
           <HStack css={{ width: '100%', mb: '16px' }} alignment="center">
-            <Button style="ctaDarkYellow" onClick={saveAndExit}>Save</Button>
+            <Button style="ctaDarkYellow" onClick={saveAndExit}>
+              Save
+            </Button>
           </HStack>
         </VStack>
       </ModalContent>
diff --git a/packages/web/lib/networking/fragments/articleFragment.ts b/packages/web/lib/networking/fragments/articleFragment.ts
index 19e0581c6..65c83b5e2 100644
--- a/packages/web/lib/networking/fragments/articleFragment.ts
+++ b/packages/web/lib/networking/fragments/articleFragment.ts
@@ -17,6 +17,7 @@ export const articleFragment = gql`
     slug
     isArchived
     description
+    linkId
   }
 `
 
@@ -38,4 +39,5 @@ export type ArticleFragmentData = {
   slug: string
   isArchived: boolean
   description: string
+  linkId?: string
 }
diff --git a/packages/web/lib/networking/fragments/labelFragment.ts b/packages/web/lib/networking/fragments/labelFragment.ts
new file mode 100644
index 000000000..a3ed216cb
--- /dev/null
+++ b/packages/web/lib/networking/fragments/labelFragment.ts
@@ -0,0 +1,18 @@
+import { gql } from 'graphql-request'
+
+export const labelFragment = gql`
+  fragment LabelFields on Label {
+    id
+    name
+    color
+    description
+  }
+`
+
+export type Label = {
+  id: string
+  name: string
+  color: string
+  description?: string
+  createdAt: string
+}
diff --git a/packages/web/lib/networking/queries/useGetArticleQuery.tsx b/packages/web/lib/networking/queries/useGetArticleQuery.tsx
index 7774f79fd..257edaa5c 100644
--- a/packages/web/lib/networking/queries/useGetArticleQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetArticleQuery.tsx
@@ -1,9 +1,10 @@
 import { gql } from 'graphql-request'
-import useSWRImmutable, { useSWRConfig } from 'swr'
+import useSWRImmutable from 'swr'
 import { makeGqlFetcher, RequestContext, ssrFetcher } from '../networkHelpers'
 import { articleFragment, ContentReader } from '../fragments/articleFragment'
-import { highlightFragment, Highlight } from '../fragments/highlightFragment'
+import { Highlight, highlightFragment } from '../fragments/highlightFragment'
 import { ScopedMutator } from 'swr/dist/types'
+import { Label, labelFragment } from '../fragments/labelFragment'
 
 type ArticleQueryInput = {
   username?: string
@@ -46,6 +47,8 @@ export type ArticleAttributes = {
   content: string
   shareInfo?: ArticleShareInfo
   highlights: Highlight[]
+  linkId: string
+  labels?: Label[]
 }
 
 type ArticleShareInfo = {
@@ -73,6 +76,9 @@ const query = gql`
           highlights(input: { includeFriends: $includeFriendsHighlights }) {
             ...HighlightFields
           }
+          labels {
+            ...LabelFields
+          }
         }
       }
       ... on ArticleError {
@@ -82,10 +88,16 @@ const query = gql`
   }
   ${articleFragment}
   ${highlightFragment}
+  ${labelFragment}
 `
-export const cacheArticle = (mutate: ScopedMutator, username: string, article: ArticleAttributes, includeFriendsHighlights = false) => {
+export const cacheArticle = (
+  mutate: ScopedMutator,
+  username: string,
+  article: ArticleAttributes,
+  includeFriendsHighlights = false
+) => {
   mutate([query, username, article.slug, includeFriendsHighlights], {
-    article: { article: {...article, cached: true} }
+    article: { article: { ...article, cached: true } },
   })
 }
 
@@ -134,4 +146,3 @@ export async function articleQuery(
 
   return Promise.reject()
 }
-
diff --git a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx
index 499875ddf..d6ab3ac4e 100644
--- a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx
@@ -1,11 +1,12 @@
 import { gql } from 'graphql-request'
 import useSWRInfinite from 'swr/infinite'
 import { gqlFetcher } from '../networkHelpers'
-import { articleFragment } from '../fragments/articleFragment'
 import type { ArticleFragmentData } from '../fragments/articleFragment'
+import { articleFragment } from '../fragments/articleFragment'
 import { setLinkArchivedMutation } from '../mutations/setLinkArchivedMutation'
 import { deleteLinkMutation } from '../mutations/deleteLinkMutation'
 import { articleReadingProgressMutation } from '../mutations/articleReadingProgressMutation'
+import { labelFragment } from '../fragments/labelFragment'
 
 export type LibraryItemsQueryInput = {
   limit: number
@@ -89,6 +90,9 @@ export function useGetLibraryItemsQuery({
             cursor
             node {
               ...ArticleFields
+              labels {
+                ...LabelFields
+              }
               originalArticleUrl
             }
           }
@@ -106,6 +110,7 @@ export function useGetLibraryItemsQuery({
       }
     }
     ${articleFragment}
+    ${labelFragment}
   `
 
   const variables = {
@@ -132,7 +137,9 @@ export function useGetLibraryItemsQuery({
         limit,
         sortDescending,
         searchQuery,
-        pageIndex === 0 ? undefined : previousResult.articles.pageInfo.endCursor,
+        pageIndex === 0
+          ? undefined
+          : previousResult.articles.pageInfo.endCursor,
       ]
     },
     (query, _l, _s, _sq, cursor: string) => {

From 42f2cffdf86da6c311e2f4cc897353bc67051860 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Thu, 24 Feb 2022 12:35:57 +0800
Subject: [PATCH 16/20] remove debug log

---
 packages/api/src/resolvers/function_resolvers.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/api/src/resolvers/function_resolvers.ts b/packages/api/src/resolvers/function_resolvers.ts
index 9a2641952..3955b00fb 100644
--- a/packages/api/src/resolvers/function_resolvers.ts
+++ b/packages/api/src/resolvers/function_resolvers.ts
@@ -429,7 +429,6 @@ export const functionResolvers = {
       )
     },
     async labels(article: { linkId: string }): Promise<Label[] | undefined> {
-      console.log('labels', article.linkId)
       const link = await getRepository(Link).findOne(article.linkId, {
         relations: ['labels'],
       })

From 81324c128d6248b24faf34971d4793a08930981c Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Thu, 24 Feb 2022 14:38:06 +0800
Subject: [PATCH 17/20] update selected labels once close the modal

---
 .../templates/article/ArticleContainer.tsx    | 18 ++++++++++---
 .../templates/article/EditLabelsModal.tsx     | 15 ++++++-----
 .../networking/mutations/setLabelsMutation.ts | 26 ++++++++++---------
 3 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx
index 4058b32d5..95741d271 100644
--- a/packages/web/components/templates/article/ArticleContainer.tsx
+++ b/packages/web/components/templates/article/ArticleContainer.tsx
@@ -6,7 +6,7 @@ import { ArticleSubtitle } from './../../patterns/ArticleSubtitle'
 import { theme, ThemeId } from './../../tokens/stitches.config'
 import { HighlightsLayer } from '../../templates/article/HighlightsLayer'
 import { Button } from '../../elements/Button'
-import { useState, useEffect, MutableRefObject } from 'react'
+import { MutableRefObject, useEffect, useState } from 'react'
 import { ReportIssuesModal } from './ReportIssuesModal'
 import { reportIssueMutation } from '../../../lib/networking/mutations/reportIssueMutation'
 import { ArticleHeaderToolbar } from './ArticleHeaderToolbar'
@@ -37,6 +37,9 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
   const [showNotesSidebar, setShowNotesSidebar] = useState(false)
   const [showReportIssuesModal, setShowReportIssuesModal] = useState(false)
   const [fontSize, setFontSize] = useState(props.fontSize ?? 20)
+  const [labels, setLabels] = useState(
+    props.article.labels?.map((l) => l.id) || []
+  )
 
   const updateFontSize = (newFontSize: number) => {
     setFontSize(newFontSize)
@@ -240,9 +243,16 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
         />
       )}
       {showLabelsModal && (
-        <EditLabelsModal article={props.article} labels={[ /* props.article.labels */]} onOpenChange={() => {
-          setShowLabelsModal(false)
-        }} />
+        <EditLabelsModal
+          labels={labels}
+          article={props.article}
+          onOpenChange={() => {
+            setShowLabelsModal(false)
+          }}
+          setLabels={(labels: string[]) => {
+            setLabels(labels)
+          }}
+        />
       )}
     </>
   )
diff --git a/packages/web/components/templates/article/EditLabelsModal.tsx b/packages/web/components/templates/article/EditLabelsModal.tsx
index 117f7a7e4..45d96a179 100644
--- a/packages/web/components/templates/article/EditLabelsModal.tsx
+++ b/packages/web/components/templates/article/EditLabelsModal.tsx
@@ -11,25 +11,26 @@ import { theme } from '../../tokens/stitches.config'
 import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
 import { ChangeEvent, useCallback, useState } from 'react'
 import { Label } from '../../elements/Label'
-import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
 import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
+import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
 
 type EditLabelsModalProps = {
+  labels: string[]
   article: ArticleAttributes
   onOpenChange: (open: boolean) => void
+  setLabels: (labels: string[]) => void
 }
 
 export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element {
-  const [selectedLabels, setSelectedLabels] = useState(
-    props.article.labels?.map((l) => l.id) || []
-  )
-  const { labels, revalidate, isValidating } = useGetLabelsQuery()
+  const [selectedLabels, setSelectedLabels] = useState(props.labels)
+  const { labels } = useGetLabelsQuery()
 
   const saveAndExit = useCallback(async () => {
     const result = await setLabelsMutation(props.article.linkId, selectedLabels)
     console.log('result of setting labels', result)
     props.onOpenChange(false)
-  }, [selectedLabels, props.onOpenChange])
+    props.setLabels(selectedLabels)
+  }, [props, selectedLabels])
 
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
@@ -40,7 +41,7 @@ export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element {
         setSelectedLabels(selectedLabels.filter((l) => l !== label))
       }
     },
-    [selectedLabels, setSelectedLabels]
+    [selectedLabels]
   )
 
   return (
diff --git a/packages/web/lib/networking/mutations/setLabelsMutation.ts b/packages/web/lib/networking/mutations/setLabelsMutation.ts
index 3136daa23..e7ef63bad 100644
--- a/packages/web/lib/networking/mutations/setLabelsMutation.ts
+++ b/packages/web/lib/networking/mutations/setLabelsMutation.ts
@@ -3,24 +3,26 @@ import { gqlFetcher } from '../networkHelpers'
 
 export async function setLabelsMutation(
   linkId: string,
-  labelIds: string[],
-): Promise<unknown> {
+  labelIds: string[]
+): Promise<any | undefined> {
   const mutation = gql`
-  mutation SetLabels($input: SetLabelsInput!) {
-    setLabels(input: $input) {
-      ... on SetLabelsSuccess {
-        labels {
-          id
+    mutation SetLabels($input: SetLabelsInput!) {
+      setLabels(input: $input) {
+        ... on SetLabelsSuccess {
+          labels {
+            id
+          }
+        }
+        ... on SetLabelsError {
+          errorCodes
         }
       }
-      ... on SetLabelsError {
-        errorCodes
-      }
     }
-  }`
+  `
 
   try {
-    const data = await gqlFetcher(mutation, { input: { linkId, labelIds }})
+    const data = await gqlFetcher(mutation, { input: { linkId, labelIds } })
+    console.log(data)
     return data
   } catch (error) {
     console.log('SetLabelsOutput error', error)

From b9d581166ef7d717c2808c62f38cd8237e6f07f3 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Thu, 24 Feb 2022 14:56:00 +0800
Subject: [PATCH 18/20] fix merge conflicts

---
 packages/api/test/resolvers/article.test.ts | 92 ++++++++++++++++-----
 1 file changed, 70 insertions(+), 22 deletions(-)

diff --git a/packages/api/test/resolvers/article.test.ts b/packages/api/test/resolvers/article.test.ts
index cd28a2e0a..3fc22d2f0 100644
--- a/packages/api/test/resolvers/article.test.ts
+++ b/packages/api/test/resolvers/article.test.ts
@@ -1,16 +1,20 @@
 import {
+  createTestLabel,
   createTestLink,
   createTestPage,
   createTestUser,
   deleteTestUser,
 } from '../db'
 import { generateFakeUuid, graphqlRequest, request } from '../util'
+import * as chai from 'chai'
 import { expect } from 'chai'
-import { Page } from '../../src/entity/page'
+import { Link } from '../../src/entity/link'
 import 'mocha'
 import { User } from '../../src/entity/user'
-import * as chai from 'chai'
 import chaiString from 'chai-string'
+import { getRepository } from 'typeorm'
+import { LinkLabel } from '../../src/entity/link_label'
+import { Label } from '../../src/entity/label'
 
 chai.use(chaiString)
 
@@ -32,7 +36,7 @@ const archiveLink = async (authToken: string, linkId: string) => {
     }
   }
   `
- return await graphqlRequest(query, authToken).expect(200)
+  return graphqlRequest(query, authToken).expect(200)
 }
 
 const articlesQuery = (after = '', order = 'ASCENDING') => {
@@ -53,6 +57,12 @@ const articlesQuery = (after = '', order = 'ASCENDING') => {
           node {
             id
             url
+            linkId
+            labels {
+              id
+              name
+              color
+            }
           }
         }
         pageInfo {
@@ -98,7 +108,8 @@ describe('Article API', () => {
   const username = 'fakeUser'
   let authToken: string
   let user: User
-  let links: Page[] = []
+  let links: Link[] = []
+  let label: Label
 
   before(async () => {
     // create test user and login
@@ -110,9 +121,17 @@ describe('Article API', () => {
     // Create some test links
     for (let i = 0; i < 15; i++) {
       const page = await createTestPage()
-      await createTestLink(user, page)
-      links.push(page)
+      const link = await createTestLink(user, page)
+      links.push(link)
     }
+    //  create testing labels
+    label = await createTestLabel(user, 'label', '#ffffff')
+    //  set label to a link
+    await getRepository(LinkLabel).save({
+      link: links[0],
+      label: label,
+    })
+
     authToken = res.body.authToken
   })
 
@@ -129,17 +148,29 @@ describe('Article API', () => {
       query = articlesQuery(after)
     })
 
+    it('should return linkId', async () => {
+      const res = await graphqlRequest(query, authToken).expect(200)
+
+      expect(res.body.data.articles.edges[0].node.linkId).to.eql(links[0].id)
+    })
+
+    it('should return labels', async () => {
+      const res = await graphqlRequest(query, authToken).expect(200)
+
+      expect(res.body.data.articles.edges[0].node.labels[0].id).to.eql(label.id)
+    })
+
     context('when we fetch the first page', () => {
       it('should return the first five items', async () => {
         after = ''
         const res = await graphqlRequest(query, authToken).expect(200)
 
         expect(res.body.data.articles.edges.length).to.eql(5)
-        expect(res.body.data.articles.edges[0].node.id).to.eql(links[0].id)
-        expect(res.body.data.articles.edges[1].node.id).to.eql(links[1].id)
-        expect(res.body.data.articles.edges[2].node.id).to.eql(links[2].id)
-        expect(res.body.data.articles.edges[3].node.id).to.eql(links[3].id)
-        expect(res.body.data.articles.edges[4].node.id).to.eql(links[4].id)
+        expect(res.body.data.articles.edges[0].node.id).to.eql(links[0].page.id)
+        expect(res.body.data.articles.edges[1].node.id).to.eql(links[1].page.id)
+        expect(res.body.data.articles.edges[2].node.id).to.eql(links[2].page.id)
+        expect(res.body.data.articles.edges[3].node.id).to.eql(links[3].page.id)
+        expect(res.body.data.articles.edges[4].node.id).to.eql(links[4].page.id)
       })
 
       it('should set the pageInfo', async () => {
@@ -166,11 +197,11 @@ describe('Article API', () => {
         const res = await graphqlRequest(query, authToken).expect(200)
 
         expect(res.body.data.articles.edges.length).to.eql(5)
-        expect(res.body.data.articles.edges[0].node.id).to.eql(links[5].id)
-        expect(res.body.data.articles.edges[1].node.id).to.eql(links[6].id)
-        expect(res.body.data.articles.edges[2].node.id).to.eql(links[7].id)
-        expect(res.body.data.articles.edges[3].node.id).to.eql(links[8].id)
-        expect(res.body.data.articles.edges[4].node.id).to.eql(links[9].id)
+        expect(res.body.data.articles.edges[0].node.id).to.eql(links[5].page.id)
+        expect(res.body.data.articles.edges[1].node.id).to.eql(links[6].page.id)
+        expect(res.body.data.articles.edges[2].node.id).to.eql(links[7].page.id)
+        expect(res.body.data.articles.edges[3].node.id).to.eql(links[8].page.id)
+        expect(res.body.data.articles.edges[4].node.id).to.eql(links[9].page.id)
       })
 
       it('should set the pageInfo', async () => {
@@ -208,27 +239,44 @@ describe('Article API', () => {
     context('when we save a new page', () => {
       it('should return a slugged url', async () => {
         const res = await graphqlRequest(query, authToken).expect(200)
-        expect(res.body.data.savePage.url).to.startsWith("http://localhost:3000/fakeUser/example-title-")
+        expect(res.body.data.savePage.url).to.startsWith(
+          'http://localhost:3000/fakeUser/example-title-'
+        )
       })
     })
 
     context('when we save a page that is already archived', () => {
       it('it should return that page in the GetArticles Query', async () => {
         url = 'https://example.com/new-url'
-        await graphqlRequest(savePageQuery(url, title, originalContent), authToken).expect(200)
+        await graphqlRequest(
+          savePageQuery(url, title, originalContent),
+          authToken
+        ).expect(200)
 
         // Save a link, then archive it
-        let allLinks = await graphqlRequest(articlesQuery('', 'DESCENDING'), authToken).expect(200)
+        let allLinks = await graphqlRequest(
+          articlesQuery('', 'DESCENDING'),
+          authToken
+        ).expect(200)
         const justSavedId = allLinks.body.data.articles.edges[0].node.id
         await archiveLink(authToken, justSavedId)
 
         // test the negative case, ensuring the archive link wasn't returned
-        allLinks = await graphqlRequest(articlesQuery('', 'DESCENDING'), authToken).expect(200)
+        allLinks = await graphqlRequest(
+          articlesQuery('', 'DESCENDING'),
+          authToken
+        ).expect(200)
         expect(allLinks.body.data.articles.edges[0].node.url).to.not.eq(url)
 
         // Now save the link again, and ensure it is returned
-        const resaved = await graphqlRequest(savePageQuery(url, title, originalContent), authToken).expect(200)
-        allLinks = await graphqlRequest(articlesQuery('', 'DESCENDING'), authToken).expect(200)
+        const resaved = await graphqlRequest(
+          savePageQuery(url, title, originalContent),
+          authToken
+        ).expect(200)
+        allLinks = await graphqlRequest(
+          articlesQuery('', 'DESCENDING'),
+          authToken
+        ).expect(200)
         expect(allLinks.body.data.articles.edges[0].node.url).to.eq(url)
       })
     })

From f9bdc84980531d1792938c468a9a278f9fddbcbb Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Thu, 24 Feb 2022 15:03:18 +0800
Subject: [PATCH 19/20] lint

---
 packages/web/components/elements/Label.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/web/components/elements/Label.tsx b/packages/web/components/elements/Label.tsx
index 2a666e0b0..4ff38f505 100644
--- a/packages/web/components/elements/Label.tsx
+++ b/packages/web/components/elements/Label.tsx
@@ -1,5 +1,3 @@
-import { styled } from './../tokens/stitches.config'
-import { Root, Image, Fallback } from '@radix-ui/react-avatar'
 import { StyledText } from './StyledText'
 
 type LabelProps = {
@@ -9,12 +7,12 @@ type LabelProps = {
 
 export function Label(props: LabelProps): JSX.Element {
   const hexToRgb = (hex: string) => {
-    var bigint = parseInt(hex.substring(1), 16);
-    var r = (bigint >> 16) & 255;
-    var g = (bigint >> 8) & 255;
-    var b = bigint & 255;
+    const bigint = parseInt(hex.substring(1), 16)
+    const r = (bigint >> 16) & 255
+    const g = (bigint >> 8) & 255
+    const b = bigint & 255
 
-    return [r,g,b];
+    return [r, g, b]
   }
   const color = hexToRgb(props.color)
   return (

From 3d98604d9731ea8d20eea8361a89b6471c449508 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Fri, 25 Feb 2022 11:44:05 +0800
Subject: [PATCH 20/20] remove labels in getArticles query

---
 .../web/lib/networking/queries/useGetLibraryItemsQuery.tsx   | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx
index d6ab3ac4e..cafef6ae3 100644
--- a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx
@@ -6,7 +6,6 @@ import { articleFragment } from '../fragments/articleFragment'
 import { setLinkArchivedMutation } from '../mutations/setLinkArchivedMutation'
 import { deleteLinkMutation } from '../mutations/deleteLinkMutation'
 import { articleReadingProgressMutation } from '../mutations/articleReadingProgressMutation'
-import { labelFragment } from '../fragments/labelFragment'
 
 export type LibraryItemsQueryInput = {
   limit: number
@@ -90,9 +89,6 @@ export function useGetLibraryItemsQuery({
             cursor
             node {
               ...ArticleFields
-              labels {
-                ...LabelFields
-              }
               originalArticleUrl
             }
           }
@@ -110,7 +106,6 @@ export function useGetLibraryItemsQuery({
       }
     }
     ${articleFragment}
-    ${labelFragment}
   `
 
   const variables = {