From a234a36057e2ee4b9d9ee61a7954f1f36e48e7de Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Mon, 15 Jul 2024 12:06:43 -0700
Subject: [PATCH] standarize slugify

---
 frontend/src/pages/invite/ui/org-form.ts    |  6 +++---
 frontend/src/pages/org/settings/settings.ts | 12 +++---------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/invite/ui/org-form.ts b/frontend/src/pages/invite/ui/org-form.ts
index 4bce596a..3011d229 100644
--- a/frontend/src/pages/invite/ui/org-form.ts
+++ b/frontend/src/pages/invite/ui/org-form.ts
@@ -4,7 +4,6 @@ import type { SlInput } from "@shoelace-style/shoelace";
 import { serialize } from "@shoelace-style/shoelace/dist/utilities/form.js";
 import { html } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
-import slugify from "slugify";
 
 import { TailwindElement } from "@/classes/TailwindElement";
 import { APIController } from "@/controllers/api";
@@ -13,6 +12,7 @@ import { type APIUser } from "@/index";
 import { isApiError } from "@/utils/api";
 import type { AuthState } from "@/utils/AuthService";
 import { maxLengthValidator } from "@/utils/form";
+import slugifyStrict from "@/utils/slugify";
 import { AppStateService } from "@/utils/state";
 import { formatAPIUser } from "@/utils/user";
 
@@ -96,7 +96,7 @@ export class OrgForm extends TailwindElement {
             required
             @sl-input=${(e: InputEvent) => {
               const input = e.target as SlInput;
-              input.helpText = helpText(slugify(input.value, { strict: true }));
+              input.helpText = helpText(slugifyStrict(input.value));
             }}
           >
           </sl-input>
@@ -129,7 +129,7 @@ export class OrgForm extends TailwindElement {
 
     const params = serialize(form) as FormValues;
     const orgName = params.orgName;
-    const orgSlug = slugify(params.orgSlug, { strict: true });
+    const orgSlug = slugifyStrict(params.orgSlug);
 
     void this._renameOrgTask.run([this.orgId, orgName, orgSlug]);
   }
diff --git a/frontend/src/pages/org/settings/settings.ts b/frontend/src/pages/org/settings/settings.ts
index 02432c6b..30a2a642 100644
--- a/frontend/src/pages/org/settings/settings.ts
+++ b/frontend/src/pages/org/settings/settings.ts
@@ -5,7 +5,6 @@ import { html, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
-import slugify from "slugify";
 
 import { columns } from "./ui/columns";
 
@@ -20,6 +19,7 @@ import { isApiError } from "@/utils/api";
 import type { AuthState } from "@/utils/AuthService";
 import { maxLengthValidator } from "@/utils/form";
 import { AccessCode, isAdmin, isCrawler, type OrgData } from "@/utils/orgs";
+import slugifyStrict from "@/utils/slugify";
 import appState, { AppStateService, use } from "@/utils/state";
 import { formatAPIUser } from "@/utils/user";
 
@@ -233,7 +233,7 @@ export class OrgSettings extends TailwindElement {
                     window.location.hostname
                   }/orgs/${
                     this.slugValue
-                      ? this.slugify(this.slugValue)
+                      ? slugifyStrict(this.slugValue)
                       : this.org.slug
                   }`,
                 )}
@@ -454,12 +454,6 @@ export class OrgSettings extends TailwindElement {
     `;
   }
 
-  private slugify(value: string) {
-    return slugify(value, {
-      strict: true,
-    });
-  }
-
   private async checkFormValidity(formEl: HTMLFormElement) {
     await this.updateComplete;
     return !formEl.querySelector("[data-invalid]");
@@ -502,7 +496,7 @@ export class OrgSettings extends TailwindElement {
     };
 
     if (this.slugValue) {
-      params.slug = this.slugify(this.slugValue);
+      params.slug = slugifyStrict(this.slugValue);
     }
 
     this.isSavingOrgName = true;