feat(gui): new achievement "commentator" (#979)

* feat(gui): new badges

* fix(gui): change counter for value annotations

* feat(gui): new achievement "commentator"

* style: apply automatic fixes of linters

Co-authored-by: lars-reimann <[email protected]>

Author: lars-reimann

api-editor/gui/public/img/badges/0 Stars Commentator.png

@@ -6,13 +6,15 @@ import {
     selectNumberOfAnnotationsCreated,
     selectNumberOfAnnotationsDeleted,
     selectNumberOfAnnotationsMarkedAsCorrect,
+    selectNumberOfCommentsTouched,
     selectNumberOfElementsMarkedAsComplete,
 } from '../annotations/annotationSlice';
 import { pluralize } from '../../common/util/stringOperations';
 import {
     auditorAchievement,
     authorAchievement,
     cleanerAchievement,
+    commentatorAchievement,
     completionistAchievement,
     editorAchievement,
 } from './achievements';
@@ -23,13 +25,15 @@ export const AchievementDisplay: React.FC = function () {
     const authorCount = useAppSelector(selectNumberOfAnnotationsCreated);
     const cleanerCount = useAppSelector(selectNumberOfAnnotationsDeleted);
     const completionistCount = useAppSelector(selectNumberOfElementsMarkedAsComplete);
+    const commentatorCount = useAppSelector(selectNumberOfCommentsTouched);
     const editorCount = useAppSelector(selectNumberOfAnnotationsChanged);
 
     if (
         auditorCount === 0 &&
         authorCount === 0 &&
         cleanerCount === 0 &&
         completionistCount === 0 &&
+        commentatorCount === 0 &&
         editorCount === 0
     ) {
         return null;
@@ -62,6 +66,11 @@ export const AchievementDisplay: React.FC = function () {
                         achievement={completionistAchievement}
                         description={`${pluralize(completionistCount, 'API element')} marked as complete`}
                     />
+                    <AchievementCard
+                        currentCount={commentatorCount}
+                        achievement={commentatorAchievement}
+                        description={`${pluralize(commentatorCount, 'comment')} touched`}
+                    />
                     <AchievementCard
                         currentCount={editorCount}
                         achievement={editorAchievement}

api-editor/gui/public/img/badges/1 Star Commentator.png

@@ -6,13 +6,15 @@ import {
     selectNumberOfAnnotationsCreated,
     selectNumberOfAnnotationsDeleted,
     selectNumberOfAnnotationsMarkedAsCorrect,
+    selectNumberOfCommentsTouched,
     selectNumberOfElementsMarkedAsComplete,
 } from '../annotations/annotationSlice';
 import {
     Achievement,
     auditorAchievement,
     authorAchievement,
     cleanerAchievement,
+    commentatorAchievement,
     completionistAchievement,
     editorAchievement,
 } from './achievements';
@@ -23,6 +25,7 @@ export const useAnnotationToasts = () => {
     useAnnotationToast(authorAchievement, useAppSelector(selectNumberOfAnnotationsCreated));
     useAnnotationToast(cleanerAchievement, useAppSelector(selectNumberOfAnnotationsDeleted));
     useAnnotationToast(completionistAchievement, useAppSelector(selectNumberOfElementsMarkedAsComplete));
+    useAnnotationToast(commentatorAchievement, useAppSelector(selectNumberOfCommentsTouched));
     useAnnotationToast(editorAchievement, useAppSelector(selectNumberOfAnnotationsChanged));
 };
 

api-editor/gui/public/img/badges/2 Stars Commentator.png

@@ -65,6 +65,14 @@ export const completionistAchievement = new Achievement('Completionist', [
     new AchievementLevel('Expert', 500, '4 Stars Completionist'),
     new AchievementLevel('Master', 1000, '5 Stars Completionist'),
 ]);
+export const commentatorAchievement = new Achievement('Commentator', [
+    new AchievementLevel('Rookie', 1, '0 Stars Commentator'),
+    new AchievementLevel('Beginner', 10, '1 Star Commentator'),
+    new AchievementLevel('Senior', 100, '2 Stars Commentator'),
+    new AchievementLevel('Pro', 250, '3 Stars Commentator'),
+    new AchievementLevel('Expert', 500, '4 Stars Commentator'),
+    new AchievementLevel('Master', 1000, '5 Stars Commentator'),
+]);
 export const editorAchievement = new Achievement('Editor', [
     new AchievementLevel('Rookie', 1, '0 Stars Editor'),
     new AchievementLevel('Beginner', 10, '1 Star Editor'),

api-editor/gui/public/img/badges/3 Stars Commentator.png

@@ -57,6 +57,7 @@ export interface AnnotationSlice {
     numberOfAnnotationsCreated: number;
     numberOfAnnotationsChanged: number;
     numberOfAnnotationsDeleted: number;
+    numberOfCommentsTouched: number;
 }
 
 // Initial state -------------------------------------------------------------------------------------------------------
@@ -88,6 +89,7 @@ export const initialAnnotationSlice: AnnotationSlice = {
     numberOfAnnotationsCreated: 0,
     numberOfAnnotationsChanged: 0,
     numberOfAnnotationsDeleted: 0,
+    numberOfCommentsTouched: 0,
 };
 
 // Thunks --------------------------------------------------------------------------------------------------------------
@@ -616,12 +618,6 @@ const annotationsSlice = createSlice({
             updateQueue(state);
         },
         upsertValueAnnotation(state, action: PayloadAction<ValueAnnotation>) {
-            updateCreationOrChangedCount(
-                state,
-                state.annotations.valueAnnotations[action.payload.target],
-                action.payload,
-            );
-
             if (action.payload.variant === 'required' || action.payload.variant === 'omitted') {
                 // @ts-ignore
                 delete action.payload.defaultValue;
@@ -634,6 +630,12 @@ const annotationsSlice = createSlice({
                 action.payload.defaultValue = parseFloat(action.payload.defaultValue);
             }
 
+            updateCreationOrChangedCount(
+                state,
+                state.annotations.valueAnnotations[action.payload.target],
+                action.payload,
+            );
+
             state.annotations.valueAnnotations[action.payload.target] = withAuthorAndReviewers(
                 state.annotations.valueAnnotations[action.payload.target],
                 action.payload,
@@ -644,8 +646,6 @@ const annotationsSlice = createSlice({
         },
         upsertValueAnnotations(state, action: PayloadAction<ValueAnnotation[]>) {
             action.payload.forEach((annotation) => {
-                updateCreationOrChangedCount(state, state.annotations.valueAnnotations[annotation.target], annotation);
-
                 if (annotation.variant === 'required' || annotation.variant === 'omitted') {
                     // @ts-ignore
                     delete annotation.defaultValue;
@@ -658,6 +658,8 @@ const annotationsSlice = createSlice({
                     annotation.defaultValue = parseFloat(annotation.defaultValue);
                 }
 
+                updateCreationOrChangedCount(state, state.annotations.valueAnnotations[annotation.target], annotation);
+
                 state.annotations.valueAnnotations[annotation.target] = withAuthorAndReviewers(
                     state.annotations.valueAnnotations[annotation.target],
                     annotation,
@@ -735,6 +737,10 @@ const updateCreationOrChangedCount = function (
     } else {
         state.numberOfAnnotationsCreated++;
     }
+
+    if ((oldAnnotation?.comment ?? '') !== newAnnotation.comment) {
+        state.numberOfCommentsTouched++;
+    }
 };
 
 const withAuthorAndReviewers = function <T extends Annotation>(
@@ -1025,3 +1031,5 @@ export const selectNumberOfAnnotationsChanged = (state: RootState): number =>
     selectAnnotationSlice(state).numberOfAnnotationsChanged;
 export const selectNumberOfAnnotationsDeleted = (state: RootState): number =>
     selectAnnotationSlice(state).numberOfAnnotationsDeleted;
+export const selectNumberOfCommentsTouched = (state: RootState): number =>
+    selectAnnotationSlice(state).numberOfCommentsTouched;