From 4e4dae89d7776dbaaa245a473d5b11efd9fac308 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 13 Apr 2022 10:51:56 -0700
Subject: [PATCH] Consistent naming on label controls

- Edit Labels: Edit all of a user's labels
- Set Labels: Set the labels assigned to a link
---
 .../templates/article/ArticleActionsMenu.tsx      |  6 +++---
 ...EditLabelsControl.tsx => SetLabelsControl.tsx} | 11 +++++------
 .../{EditLabelsModal.tsx => SetLabelsModal.tsx}   | 11 +++++------
 .../lib/keyboardShortcuts/navigationShortcuts.ts  |  4 ++--
 packages/web/pages/[username]/[slug]/index.tsx    | 15 +++++++--------
 5 files changed, 22 insertions(+), 25 deletions(-)
 rename packages/web/components/templates/article/{EditLabelsControl.tsx => SetLabelsControl.tsx} (97%)
 rename packages/web/components/templates/article/{EditLabelsModal.tsx => SetLabelsModal.tsx} (83%)

diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx
index 39bef218c..75be3afcc 100644
--- a/packages/web/components/templates/article/ArticleActionsMenu.tsx
+++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx
@@ -7,7 +7,7 @@ import { Dropdown } from "../../elements/DropdownElements"
 import { Box, SpanBox } from "../../elements/LayoutPrimitives"
 import { TooltipWrapped } from "../../elements/Tooltip"
 import { styled, theme } from "../../tokens/stitches.config"
-import { EditLabelsControl } from "./EditLabelsControl"
+import { SetLabelsControl } from "./SetLabelsControl"
 import { ReaderSettingsControl } from "./ReaderSettingsControl"
 
 export type ArticleActionsMenuLayout = 'horizontal' | 'vertical'
@@ -101,7 +101,7 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
           </TooltipWrapped>
           }
         >
-          <EditLabelsControl
+          <SetLabelsControl
             article={props.article}
             articleActionHandler={props.articleActionHandler}
           />
@@ -109,7 +109,7 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
       </SpanBox>
 
       <Button style='articleActionIcon'
-        onClick={() => props.articleActionHandler('editLabels')}
+        onClick={() => props.articleActionHandler('setLabels')}
         css={{
           'display': 'none',
           '@smDown': {
diff --git a/packages/web/components/templates/article/EditLabelsControl.tsx b/packages/web/components/templates/article/SetLabelsControl.tsx
similarity index 97%
rename from packages/web/components/templates/article/EditLabelsControl.tsx
rename to packages/web/components/templates/article/SetLabelsControl.tsx
index 6eff4bacb..1302369d8 100644
--- a/packages/web/components/templates/article/EditLabelsControl.tsx
+++ b/packages/web/components/templates/article/SetLabelsControl.tsx
@@ -9,7 +9,6 @@ import { Label } from '../../../lib/networking/fragments/labelFragment'
 import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
 import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
 import { Check, Circle, PencilSimple, Plus } from 'phosphor-react'
-
 import { isTouchScreenDevice } from '../../../lib/deviceType'
 import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
 import { createLabelMutation } from '../../../lib/networking/mutations/createLabelMutation'
@@ -17,7 +16,7 @@ import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 import { randomLabelColorHex } from '../../../utils/settings-page/labels/labelColorObjects'
 import { useRouter } from 'next/router'
 
-type EditLabelsControlProps = {
+type SetLabelsControlProps = {
   article: ArticleAttributes
   articleActionHandler: (action: string, arg?: unknown) => void
 }
@@ -147,11 +146,11 @@ function LabelListItem(props: LabelListItemProps): JSX.Element {
   )
 }
 
-type EditLabelsButtonFooterProps = {
+type FooterProps = {
   focused: boolean
 }
 
-function EditLabelsButtonFooter(props: EditLabelsButtonFooterProps): JSX.Element {
+function Footer(props: FooterProps): JSX.Element {
   const ref = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -184,7 +183,7 @@ function EditLabelsButtonFooter(props: EditLabelsButtonFooterProps): JSX.Element
   )
 }
 
-export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
+export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
   const router = useRouter()
   const [filterText, setFilterText] = useState('')
   const { labels, revalidate } = useGetLabelsQuery()
@@ -340,7 +339,7 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
         </Button>
       )}
 
-      <EditLabelsButtonFooter focused={focusedIndex === (filteredLabels.length + 1)} />
+      <Footer focused={focusedIndex === (filteredLabels.length + 1)} />
     </VStack>
   )
 }
\ No newline at end of file
diff --git a/packages/web/components/templates/article/EditLabelsModal.tsx b/packages/web/components/templates/article/SetLabelsModal.tsx
similarity index 83%
rename from packages/web/components/templates/article/EditLabelsModal.tsx
rename to packages/web/components/templates/article/SetLabelsModal.tsx
index 1ef6da940..81696600f 100644
--- a/packages/web/components/templates/article/EditLabelsModal.tsx
+++ b/packages/web/components/templates/article/SetLabelsModal.tsx
@@ -1,8 +1,7 @@
-import { X } from 'phosphor-react'
 import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
 import { Button } from '../../elements/Button'
 import { CrossIcon } from '../../elements/images/CrossIcon'
-import { Box, HStack, VStack } from '../../elements/LayoutPrimitives'
+import { HStack, VStack } from '../../elements/LayoutPrimitives'
 import {
   ModalRoot,
   ModalOverlay,
@@ -10,15 +9,15 @@ import {
 } from '../../elements/ModalPrimitives'
 import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
-import { EditLabelsControl } from './EditLabelsControl'
+import { SetLabelsControl } from './SetLabelsControl'
 
-type EditLabelsModalProps = {
+type SetLabelsModalProps = {
   article: ArticleAttributes
   onOpenChange: (open: boolean) => void
   articleActionHandler: (action: string, arg?: unknown) => void
 }
 
-export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element {
+export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
   return (
     <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
       <ModalOverlay />
@@ -49,7 +48,7 @@ export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element {
                 />
               </Button>
           </HStack>
-          <EditLabelsControl {...props} />
+          <SetLabelsControl {...props} />
         </VStack>
       </ModalContent>
     </ModalRoot>
diff --git a/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts b/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts
index 2ce3f7ab8..98da5cf33 100644
--- a/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts
+++ b/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts
@@ -209,7 +209,7 @@ type ArticleKeyboardAction =
   | 'decrementFontSize'
   | 'incrementMarginWidth'
   | 'decrementMarginWidth'
-  | 'editLabels'
+  | 'setLabels'
 
 export function articleKeyboardCommands(
   router: NextRouter | undefined,
@@ -256,7 +256,7 @@ export function articleKeyboardCommands(
       shortcutKeys: ['l'],
       actionDescription: 'Edit labels',
       shortcutKeyDescription: 'l',
-      callback: () => actionHandler('editLabels'),
+      callback: () => actionHandler('setLabels'),
     },
   ]
 }
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 598f7e0cf..8fd47910a 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -27,8 +27,7 @@ import { setLinkArchivedMutation } from '../../../lib/networking/mutations/setLi
 import { Label } from '../../../lib/networking/fragments/labelFragment'
 import { useSWRConfig } from 'swr'
 import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
-import { EditLabelsControl } from '../../../components/templates/article/EditLabelsControl'
-import { EditLabelsModal } from '../../../components/templates/article/EditLabelsModal'
+import { SetLabelsModal } from '../../../components/templates/article/SetLabelsModal'
 import { DisplaySettingsModal } from '../../../components/templates/article/DisplaySettingsModal'
 
 
@@ -49,7 +48,7 @@ export default function Home(): JSX.Element {
   const [fontSize, setFontSize] = useState(preferencesData?.fontSize ?? 20)
   const [marginWidth, setMarginWidth] = useState(preferencesData?.margin ?? 360)
   const [lineHeight, setLineHeight] = useState(preferencesData?.lineHeight ?? 150)
-  const [showEditLabelsModal, setShowEditLabelsModal] = useState(false)
+  const [showSetLabelsModal, setShowSetLabelsModal] = useState(false)
   const [showEditDisplaySettingsModal, setShowEditDisplaySettingsModal] = useState(false)
   
   const { articleData } = useGetArticleQuery({
@@ -140,8 +139,8 @@ export default function Home(): JSX.Element {
         setShowEditDisplaySettingsModal(true)
         break
       }
-      case 'editLabels': {
-        setShowEditLabelsModal(true)
+      case 'setLabels': {
+        setShowSetLabelsModal(true)
         break
       }
       case 'resetReaderSettings': {
@@ -243,11 +242,11 @@ export default function Home(): JSX.Element {
               </VStack>
             )}
 
-        {showEditLabelsModal && (
-          <EditLabelsModal
+        {showSetLabelsModal && (
+          <SetLabelsModal
             article={article}
             articleActionHandler={actionHandler}
-            onOpenChange={() => setShowEditLabelsModal(false)}
+            onOpenChange={() => setShowSetLabelsModal(false)}
           />
         )}