added support for tag normalization

makefile

@@ -36,6 +36,7 @@ nuke:
 webext:
 	${MAKE} prepare
 	yarn && yarn build
+	rm -f '$(RELEASE_DIR)/webext.zip'
 	cd dist && zip -r '../$(RELEASE_DIR)/webext' ./*
 	${MAKE} clean
 

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint ./src/ --ext ts,tsx",
     "dev": "yarn run prepare && parcel watch ./src/content.html ./src/options.html ./src/backend.ts",
     "build": "yarn run prepare && parcel build ./src/content.html ./src/options.html ./src/backend.ts",
+    "make": "make",
     "test": "jest",
     "fmt": "prettier --write .",
     "fmt-check": "prettier --check ."

src/components/bookmark-form.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, FormEvent, FC } from "react"
+import { useSelector } from "react-redux"
 import { pipe } from "fp-ts/lib/pipeable"
 import * as O from "fp-ts/lib/Option"
 import styled from "~/styles"
@@ -66,6 +67,7 @@ type KeyofStringValues<T> = {
 }[keyof T]
 
 const BookmarkForm: FC<Props> = props => {
+  const normalizeTags = useSelector(state => state.user.normalizeTags)
   const firstInputRef = useRef<HTMLInputElement>(null)
 
   const [bookmarkInput, setBookmarkInput] = useState<BookmarkInput>({
@@ -103,23 +105,34 @@ const BookmarkForm: FC<Props> = props => {
     setInputBookmarkPartial({ [key]: input })
   }
 
+  const inputNormalizedTags = (changedTags: string[]): void => {
+    const tags = changedTags.map(s => s.trim().toLowerCase()).filter(Boolean)
+    setInputBookmarkPartial({ tags: Array.from(new Set(tags)).sort() })
+  }
+
   const handleTagAddition = (evt: FormEvent<HTMLFormElement>): void => {
     evt.preventDefault()
     evt.stopPropagation()
 
     const newTag = tagInput.trim()
+    if (normalizeTags) {
+      inputNormalizedTags([...bookmarkInput.tags, ...newTag.split(",")])
+    } else {
+      // Disallow adding an empty tag or the same tag twice
+      if (!newTag || bookmarkInput.tags.includes(newTag)) return
 
-    // Disallow adding an empty tag or the same tag twice
-    if (!newTag || bookmarkInput.tags.includes(newTag)) return
-
-    setInputBookmarkPartial({ tags: [...bookmarkInput.tags, newTag] })
+      setInputBookmarkPartial({ tags: [...bookmarkInput.tags, newTag] })
+    }
     setTagInput("")
   }
 
   const handleTagRemoval = (tagToRemove: string): void => {
-    setInputBookmarkPartial({
-      tags: bookmarkInput.tags.filter(tag => tag !== tagToRemove),
-    })
+    const tags = bookmarkInput.tags.filter(tag => tag !== tagToRemove)
+    if (normalizeTags) {
+      inputNormalizedTags(tags)
+    } else {
+      setInputBookmarkPartial({ tags })
+    }
   }
 
   const handleSubmit = (evt: FormEvent<HTMLFormElement>): void => {
@@ -179,7 +192,7 @@ const BookmarkForm: FC<Props> = props => {
             value={tagInput}
             onInput={setTagInput}
             form="tags"
-            label="Tags"
+            label={"Tags" + (!normalizeTags ? "" : " [normalized]")}
           />
 
           <AddTagButton type="submit" form="tags" tabIndex={-1}>

src/components/tag.tsx

@@ -8,6 +8,7 @@ const TagItem = styled.li<{ removable: boolean }>`
   font-size: 1.3rem;
   font-weight: normal;
   color: ${(props): string => props.theme.textColorOffset};
+  white-space: pre-wrap;
 
   ${(props): FlattenSimpleInterpolation | false =>
     props.removable &&

src/modules/settings.ts

@@ -41,9 +41,15 @@ const badgeDisplayCodec = fromRefinement<BadgeDisplay>(
   (x): x is BadgeDisplay => t.string.is(x) && isBadgeDisplayOpt(x),
 )
 
+export const isBool: Refinement<unknown, boolean> =
+  (x): x is boolean => typeof x === 'boolean'
+
+const normalizeTagsCodec = fromRefinement<boolean>("normalizeTags", isBool)
+
 const settingsCodec = t.type({
   theme: optionFromNullable(themeCodec),
   badgeDisplay: optionFromNullable(badgeDisplayCodec),
+  normalizeTags: optionFromNullable(normalizeTagsCodec),
 })
 
 export type Settings = t.TypeOf<typeof settingsCodec>
@@ -52,15 +58,17 @@ type SaveableSettings = Partial<UnwrapOptions<Settings>>
 const saveableSettings = (x: Settings): SaveableSettings => ({
   theme: O.toUndefined(x.theme),
   badgeDisplay: O.toUndefined(x.badgeDisplay),
+  normalizeTags: O.toUndefined(x.normalizeTags),
 })
 
 const theme = Lens.fromProp<Settings>()("theme")
 const badgeDisplay = Lens.fromProp<Settings>()("badgeDisplay")
+const normalizeTags = Lens.fromProp<Settings>()("normalizeTags")
 
 export const saveSettings = flow(saveableSettings, setSyncStorage)
 
 const getSettings: TaskEither<Error, Settings> = pipe(
-  getSyncStorage(["theme", "badgeDisplay"]),
+  getSyncStorage(["theme", "badgeDisplay", "normalizeTags"]),
   T.map(E.chain(decode(settingsCodec))),
 )
 
@@ -75,3 +83,10 @@ export const getBadgeDisplayOpt: TaskEither<Error, Option<BadgeDisplay>> = pipe(
     E.map(flow(badgeDisplay.get, O.chain(O.fromPredicate(isBadgeDisplayOpt)))),
   ),
 )
+
+export const getNormalizeTags: TaskEither<Error, Option<boolean>> = pipe(
+  getSettings,
+  T.map(
+    E.map(flow(normalizeTags.get, O.chain(O.fromPredicate(isBool)))),
+  ),
+)

src/pages/options.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, FC, FormEvent } from "react"
 import * as O from "fp-ts/lib/Option"
 import * as EO from "~/modules/eitherOption"
 import { useDispatch, useSelector } from "~/store"
-import { setActiveTheme } from "~/store/user/actions"
+import { setActiveTheme, setNormalizeTags } from "~/store/user/actions"
 import {
   saveSettings,
   getBadgeDisplayOpt,
@@ -25,10 +25,12 @@ const Page = styled.main`
 
 const OptionsPage: FC = () => {
   const activeTheme = useSelector(state => state.user.activeTheme)
+  const normalizeTags = useSelector(state => state.user.normalizeTags)
   const dispatch = useDispatch()
 
   const [themeOpt, setThemeOpt] = useState(activeTheme)
   const [badgeOpt, setBadgeOpt] = useState(BadgeDisplay.WithCount)
+  const [normTagsOpt, setNormTagsOpt] = useState(normalizeTags)
 
   useEffect(() => {
     getBadgeDisplayOpt().then(res => {
@@ -42,6 +44,10 @@ const OptionsPage: FC = () => {
     setThemeOpt(activeTheme)
   }, [activeTheme])
 
+  useEffect(() => {
+    setNormTagsOpt(normalizeTags)
+  }, [normalizeTags])
+
   const handleThemeOptChange = (evt: FormEvent<HTMLSelectElement>): void => {
     const themeOpt = evt.currentTarget.value
     if (!isTheme(themeOpt)) return
@@ -56,13 +62,18 @@ const OptionsPage: FC = () => {
     setBadgeOpt(badgeOpt)
   }
 
+  const handleNormTagsOptChange = (evt: FormEvent<HTMLInputElement>): void => {
+    setNormTagsOpt(evt.currentTarget.checked)
+  }
+
   const handleSubmit = (evt: FormEvent<HTMLFormElement>): void => {
     evt.preventDefault()
 
     dispatch(setActiveTheme(themeOpt))
     runTask(sendIsomorphicMessage(IsomorphicMessage.SettingsUpdated))
     runTask(
-      saveSettings({ theme: O.some(themeOpt), badgeDisplay: O.some(badgeOpt) }),
+      saveSettings({ theme: O.some(themeOpt), badgeDisplay: O.some(badgeOpt),
+                     normalizeTags: O.some(normTagsOpt) }),
     )
   }
 
@@ -84,6 +95,12 @@ const OptionsPage: FC = () => {
         </select>
         <br />
         <br />
+        <label title="Split by comma, trim spaces, lowercase, sort, remove duplicates">
+          <input type="checkbox" checked={normTagsOpt} onChange={handleNormTagsOptChange}/>
+          &nbsp;Normalize tags on edit (reproduce buku behaviour)
+        </label>
+        <br />
+        <br />
         <Button type="submit">Save Settings</Button>
       </form>
     </Page>

src/store/epics.ts

@@ -8,13 +8,18 @@ import {
   checkBinaryVersionFromNative,
   HostVersionCheckResult,
 } from "~/modules/comms/native"
-import { getActiveTheme, Theme } from "~/modules/settings"
+import { getActiveTheme, getNormalizeTags, Theme } from "~/modules/settings"
 import { ThunkAC, initAutoStoreSync } from "~/store"
 import {
   setLimitNumRendered,
   setFocusedBookmarkIndex,
 } from "~/store/bookmarks/actions"
-import { setActiveTheme, hostCheckResult, setPage } from "~/store/user/actions"
+import {
+  setActiveTheme,
+  setNormalizeTags,
+  hostCheckResult,
+  setPage,
+} from "~/store/user/actions"
 import { setSearchFilter } from "~/store/input/actions"
 import { addPermanentError } from "~/store/notices/epics"
 import {
@@ -76,6 +81,12 @@ export const onLoad = (): ThunkAC<Promise<void>> => async dispatch => {
       dispatch(setActiveTheme(theme))
     })
 
+  getNormalizeTags()
+    .then(EO.getOrElse(constant<boolean>(false)))
+    .then(normTags => {
+      dispatch(setNormalizeTags(normTags))
+    })
+
   const res = await checkBinaryVersionFromNative()
   dispatch(hostCheckResult(res))
 

src/store/user/actions.ts

@@ -10,6 +10,9 @@ export const hostCheckResult = (comms: HostVersionCheckResult) =>
 export const setActiveTheme = (theme: Theme) =>
   action(UserActionTypes.SetActiveTheme, theme)
 
+export const setNormalizeTags = (value: boolean) =>
+  action(UserActionTypes.SetNormalizeTags, value)
+
 export const setDisplayOpenAllBookmarksConfirmation = (display: boolean) =>
   action(UserActionTypes.SetDisplayOpenAllBookmarksConfirmation, display)
 

src/store/user/reducers.ts

@@ -7,6 +7,7 @@ import {
   Page,
   comms,
   activeTheme,
+  normalizeTags,
   displayOpenAllBookmarksConfirmation,
   page,
 } from "./types"
@@ -19,6 +20,7 @@ export type UserActions = ActionType<typeof userActions>
 const initialState: UserState = {
   comms: HostVersionCheckResult.Unchecked,
   activeTheme: Theme.Light,
+  normalizeTags: false,
   displayOpenAllBookmarksConfirmation: false,
   page: Page.Search,
 }
@@ -32,6 +34,9 @@ const userReducer = curryReducer<UserActions, UserState>(a => _s => {
     case UserActionTypes.SetActiveTheme:
       return activeTheme.set(a.payload)
 
+    case UserActionTypes.SetNormalizeTags:
+      return normalizeTags.set(a.payload)
+
     case UserActionTypes.SetDisplayOpenAllBookmarksConfirmation:
       return displayOpenAllBookmarksConfirmation.set(a.payload)
 

src/store/user/types.ts

@@ -7,6 +7,7 @@ export { Theme }
 export interface UserState {
   comms: HostVersionCheckResult
   activeTheme: Theme
+  normalizeTags: boolean
   displayOpenAllBookmarksConfirmation: boolean
   page: Page
 }
@@ -15,6 +16,7 @@ export const userL = Lens.fromProp<AppState>()("user")
 
 export const comms = Lens.fromProp<UserState>()("comms")
 export const activeTheme = Lens.fromProp<UserState>()("activeTheme")
+export const normalizeTags = Lens.fromProp<UserState>()("normalizeTags")
 export const displayOpenAllBookmarksConfirmation = Lens.fromProp<UserState>()(
   "displayOpenAllBookmarksConfirmation",
 )
@@ -25,6 +27,7 @@ export const commsL = userL.compose(comms)
 export enum UserActionTypes {
   HostCheckResult = "HOST_CHECK_RESULT",
   SetActiveTheme = "SET_ACTIVE_THEME",
+  SetNormalizeTags = "SET_NORMALIZE_TAGS",
   SetDisplayOpenAllBookmarksConfirmation = "SET_OPEN_ALL_BOOKMARKS_CONFIRMATION",
   SetPage = "SET_PAGE",
 }