refactor: Refactors match types (#244)

BREAKING CHANGE

src/ts/components/FilterResults.tsx

@@ -10,9 +10,9 @@ import {
 } from "../utils/decoration";
 
 const filterOrder = Object.values([
-  MatchType.CORRECT,
-  MatchType.DEFAULT,
-  MatchType.HAS_REPLACEMENT
+  MatchType.OK,
+  MatchType.REVIEW,
+  MatchType.AMEND
 ]);
 
 interface IProps {

src/ts/components/SidebarMatch.tsx

@@ -34,7 +34,7 @@ export const getSidebarMatchStyles = (
     : "";
 
   switch (matchType) {
-    case MatchType.CORRECT:
+    case MatchType.OK:
       return css`
         &:after {
           position: absolute;
@@ -53,7 +53,7 @@ export const getSidebarMatchStyles = (
           background-size: 2px 5px;
         }
       `;
-    case MatchType.DEFAULT:
+    case MatchType.REVIEW:
       return css`
         &:after {
           position: absolute;
@@ -67,7 +67,7 @@ export const getSidebarMatchStyles = (
           background-image: url('${getSquiggleAsUri(color, 'VERTICAL')}');
         }
       `;
-    case MatchType.HAS_REPLACEMENT:
+    case MatchType.AMEND:
       return css`
         border-left: 2px solid ${color};
       `;

src/ts/components/icons.tsx

@@ -48,17 +48,17 @@ export const tickIcon = (colour: string) => (
 );
 
 export const iconMap = {
-  CORRECT: {
+  OK: {
     icon: tickIcon(neutral[100]),
     description: "OK",
     tooltip: "Typerighter thinks these matches are correct."
   },
-  HAS_REPLACEMENT: {
+  AMEND: {
     icon: warningIcon(neutral[100]),
     description: "Amend",
     tooltip: "Typerighter doesn’t think these matches are correct."
   },
-  DEFAULT: {
+  REVIEW: {
     icon: infoIcon(neutral[100]),
     description: "Review",
     tooltip: "Typerighter can’t figure out whether these matches are correct or not. They might be worth reviewing."

src/ts/state/selectors.ts

@@ -142,9 +142,9 @@ export const selectHasMatches = (state: IPluginState): boolean =>
 
 const getSortOrderForMatchType = (match: IMatch) => {
   const matchType = getMatchType(match);
-  if (matchType === MatchType.HAS_REPLACEMENT) {
+  if (matchType === MatchType.AMEND) {
     return 0;
-  } else if (matchType === MatchType.CORRECT) {
+  } else if (matchType === MatchType.OK) {
     return 2;
   } else {
     return 1;

src/ts/state/test/helpers.spec.ts

@@ -60,7 +60,7 @@ describe("State helpers", () => {
     });
     it("should report stale when the filter state changes", () => {
       const oldFilterState = [] as MatchType[];
-      const newFilterState = [MatchType.CORRECT];
+      const newFilterState = [MatchType.OK];
       const matches = [] as IMatch[];
       const { state: oldState } = getState(matches, oldFilterState);
       const { state: newState } = getState(matches, newFilterState);
@@ -108,7 +108,7 @@ describe("State helpers", () => {
     });
     it("should remove matches when they don't pass the filter", () => {
       const matches = [createMatch(1, 4), createMatch(4, 7)];
-      const { tr, state } = getState(matches, [MatchType.DEFAULT]);
+      const { tr, state } = getState(matches, [MatchType.REVIEW]);
       const {
         currentMatches,
         filteredMatches,
@@ -125,7 +125,7 @@ describe("State helpers", () => {
     });
 
     it("should not touch non-match-related decorations", () => {
-      const { tr, state } = getState([], [MatchType.DEFAULT]);
+      const { tr, state } = getState([], [MatchType.REVIEW]);
       const debugDecos = DecorationSet.create(tr.doc, [
         createDebugDecorationFromRange({ from: 0, to: 1 })
       ]);
@@ -149,7 +149,7 @@ describe("State helpers", () => {
       const deleteRange = 1;
       const deleteFrom = 2;
       const matches = [createMatch(1, 4), createMatch(4, 7)];
-      const { tr, state } = getState(matches, [MatchType.DEFAULT]);
+      const { tr, state } = getState(matches, [MatchType.REVIEW]);
 
       tr.delete(deleteFrom, deleteFrom + deleteRange);
       const newState = getNewStateFromTransaction(tr, state);
@@ -165,7 +165,7 @@ describe("State helpers", () => {
     it("should map dirtied ranges through the transaction mapping", () => {
       const deleteRange = 1;
       const deleteFrom = 2;
-      const { tr, state } = getState([], [MatchType.DEFAULT]);
+      const { tr, state } = getState([], [MatchType.REVIEW]);
       const dirtiedRange = { from: 0, to: 4 };
       const initState = {
         ...state,
@@ -184,7 +184,7 @@ describe("State helpers", () => {
     it("should add mapping to the requests in flight", () => {
       const deleteRange = 1;
       const deleteFrom = 2;
-      const { tr, state } = getState([], [MatchType.DEFAULT]);
+      const { tr, state } = getState([], [MatchType.REVIEW]);
       const initState = {
         ...state,
         requestsInFlight: createRequestInFlight([
@@ -203,7 +203,7 @@ describe("State helpers", () => {
     it("should map requestsInFlight blocks through the incoming transaction mapping", () => {
       const deleteRange = 1;
       const deleteFrom = 2;
-      const { tr, state } = getState([], [MatchType.DEFAULT]);
+      const { tr, state } = getState([], [MatchType.REVIEW]);
       const requestsInFlight = createRequestInFlight([
         createBlock(1, 23, "Example text to check")
       ]);

src/ts/test/createTyperighterPlugin.spec.ts

@@ -229,7 +229,7 @@ describe("createTyperighterPlugin", () => {
   describe("filtering matchers", () => {
     const filterOptions = {
       filterMatches: filterByMatchState,
-      initialFilterState: [MatchType.CORRECT]
+      initialFilterState: [MatchType.OK]
     };
     it("should filter matches with the supplied predicate when the plugin initialises – remove matches", () => {
       const correctMatches = [{ ...createMatch(1), markAsCorrect: true }];
@@ -270,7 +270,7 @@ describe("createTyperighterPlugin", () => {
         filterOptions
       });
 
-      commands.setFilterState([MatchType.DEFAULT]);
+      commands.setFilterState([MatchType.REVIEW]);
 
       const decorationSpecs = getDecorationSpecsFromDoc(view);
       const decorationsSpecsToExpect = getDecorationSpecs(

src/ts/utils/decoration.ts

@@ -6,9 +6,9 @@ import { IRange, IMatch } from "../interfaces/IMatch";
 import { getSquiggleAsUri } from "./squiggle";
 
 export enum MatchType {
-  HAS_REPLACEMENT = "HAS_REPLACEMENT",
-  DEFAULT = "DEFAULT",
-  CORRECT = "CORRECT"
+  AMEND = "AMEND",
+  REVIEW = "REVIEW",
+  OK = "OK"
 }
 
 export interface IMatchTypeToColourMap {
@@ -42,9 +42,9 @@ export const DecorationClassMap = {
   [DECORATION_MATCH]: "MatchDecoration",
   [DECORATION_MATCH_HEIGHT_MARKER]: "MatchDecoration__height-marker",
   [DECORATION_MATCH_IS_SELECTED]: "MatchDecoration--is-selected",
-  [MatchType.CORRECT]: "MatchDecoration--is-correct",
-  [MatchType.DEFAULT]: "MatchDecoration--default",
-  [MatchType.HAS_REPLACEMENT]: "MatchDecoration--has-replacement"
+  [MatchType.OK]: "MatchDecoration--is-correct",
+  [MatchType.REVIEW]: "MatchDecoration--default",
+  [MatchType.AMEND]: "MatchDecoration--has-replacement"
 };
 
 export const DECORATION_ATTRIBUTE_ID = "data-match-id";
@@ -147,12 +147,12 @@ export const createDecorationSpecFromMatch = (match: IMatch) => ({
 
 export const getMatchType = (match: IMatch): MatchType => {
   if (match.markAsCorrect) {
-    return MatchType.CORRECT;
+    return MatchType.OK;
   }
   if (match.replacement) {
-    return MatchType.HAS_REPLACEMENT;
+    return MatchType.AMEND;
   }
-  return MatchType.DEFAULT;
+  return MatchType.REVIEW;
 };
 
 export const getColourForMatch = (
@@ -183,13 +183,13 @@ export const getColourForMatchType = (
   const backgroundOpacitySelected = "50";
   const backgroundOpacity = "07";
   switch (matchType) {
-    case MatchType.CORRECT:
+    case MatchType.OK:
       return {
         backgroundColour: `${matchColours.correct}${backgroundOpacity}`,
         backgroundColourSelected: `${matchColours.correct}${backgroundOpacitySelected}`,
         borderColour: `${matchColours.correct}${matchColours.correctOpacity}`
       };
-    case MatchType.HAS_REPLACEMENT:
+    case MatchType.AMEND:
       return {
         backgroundColour: `${matchColours.hasSuggestion}${backgroundOpacity}`,
         backgroundColourSelected: `${matchColours.hasSuggestion}${backgroundOpacitySelected}`,
@@ -273,20 +273,20 @@ export const GLOBAL_DECORATION_STYLE_ID = "prosemirror-typerighter-global-styles
 export const createGlobalDecorationStyleTag = (
   matchColours: IMatchTypeToColourMap
 ): HTMLStyleElement => {
-  const correctColours = getColourForMatchType(MatchType.CORRECT, matchColours);
-  const hasReplacementColours = getColourForMatchType(MatchType.HAS_REPLACEMENT, matchColours);
-  const defaultColours = getColourForMatchType(MatchType.DEFAULT, matchColours);
+  const correctColours = getColourForMatchType(MatchType.OK, matchColours);
+  const hasReplacementColours = getColourForMatchType(MatchType.AMEND, matchColours);
+  const defaultColours = getColourForMatchType(MatchType.REVIEW, matchColours);
   const styleContent = `
-    .${DecorationClassMap.HAS_REPLACEMENT} {
+    .${DecorationClassMap.AMEND} {
       background-color: ${hasReplacementColours.backgroundColour};
       border-bottom: 2px solid ${hasReplacementColours.borderColour};
     }
 
-    .${DecorationClassMap.HAS_REPLACEMENT}.MatchDecoration--is-selected {
+    .${DecorationClassMap.AMEND}.MatchDecoration--is-selected {
       background-color: ${hasReplacementColours.backgroundColourSelected};
     }
 
-    .${DecorationClassMap.DEFAULT} {
+    .${DecorationClassMap.REVIEW} {
       position: relative;
       background-color: ${defaultColours.backgroundColour};
       border-image-source: url('${getSquiggleAsUri(defaultColours.borderColour)}');
@@ -297,12 +297,12 @@ export const createGlobalDecorationStyleTag = (
       border-width: 0 0 2px 0;
     }
 
-    .${DecorationClassMap.DEFAULT}.MatchDecoration--is-selected {
+    .${DecorationClassMap.REVIEW}.MatchDecoration--is-selected {
       background-color: ${defaultColours.backgroundColourSelected};
       border-image-source: linear-gradient(0deg, ${defaultColours.backgroundColourSelected} 3px, transparent 3px), url('${getSquiggleAsUri(defaultColours.borderColour)}');
     }
 
-    .${DecorationClassMap.CORRECT} {
+    .${DecorationClassMap.OK} {
       position: relative;
       box-decoration-break: clone;
       -webkit-box-decoration-break: clone;
@@ -314,8 +314,8 @@ export const createGlobalDecorationStyleTag = (
       border-width: 0 0 2px 0;
     }
 
-    .${DecorationClassMap.CORRECT}.MatchDecoration--is-selected,
-    .${DecorationClassMap.CORRECT}.MatchDecoration--is-selected:after {
+    .${DecorationClassMap.OK}.MatchDecoration--is-selected,
+    .${DecorationClassMap.OK}.MatchDecoration--is-selected:after {
       background-color: ${correctColours.backgroundColourSelected};
     }
   `;

src/ts/utils/test/decoration.spec.ts

@@ -58,19 +58,19 @@ describe("Decoration utils", () => {
   });
   describe("getMatchType", () => {
     const defaultMatch = createMatch(0, 5);
-    it("gives a MatchType of CORRECT when markAsCorrect is set", () => {
+    it("gives a MatchType of OK when markAsCorrect is set", () => {
       const match = { ...defaultMatch, markAsCorrect: true };
-      expect(getMatchType(match)).toBe(MatchType.CORRECT);
+      expect(getMatchType(match)).toBe(MatchType.OK);
     });
-    it("gives a matchType of HAS_REPLACEMENT when a replacement is available", () => {
+    it("gives a matchType of AMEND when a replacement is available", () => {
       const match = {
         ...defaultMatch,
         replacement: { text: "u r wrong", type: "TEXT_SUGGESTION" as const }
       };
-      expect(getMatchType(match)).toBe(MatchType.HAS_REPLACEMENT);
+      expect(getMatchType(match)).toBe(MatchType.AMEND);
     });
-    it("gives a match type of DEFAULT when none of the above apply", () => {
-      expect(getMatchType(defaultMatch)).toBe(MatchType.DEFAULT);
+    it("gives a match type of REVIEW when none of the above apply", () => {
+      expect(getMatchType(defaultMatch)).toBe(MatchType.REVIEW);
     });
   });
 });