feat: use backend api in tag user

src/Components/SideSheet/Comments/Components/CommentView.tsx

@@ -4,13 +4,15 @@ import React, {
     useState,
 } from "react"
 import styled from "styled-components"
+import { useCurrentContext } from "@equinor/fusion"
 import { GetConversationService } from "../../../../api/ConversationService"
 import { Message } from "../../../../Models/Message"
 import InputController from "./InputController"
 import { ViewContext } from "../../../../Context/ViewContext"
 import ClusteredMessages from "./ClusteredMessages"
 import TagDropDown from "./TagDropDown"
 import { processMessageInput } from "../../../../utils/helpers"
+import { GetProjectService } from "../../../../api/ProjectService"
 
 const Controls = styled.div`
     position: sticky;
@@ -47,6 +49,7 @@ const CommentView: React.FC<CommentViewProps> = ({
     const [reRenderCounter, setReRenderCounter] = useState<number>(0)
     const [searchTerm, setSearchTerm] = useState<string>("")
     const [showTagDropDown, setShowTagDropDown] = useState<boolean>(false)
+    const [userTags, setUserTags] = useState<any[]>([])
     const [charCount, setCharCount] = useState(0)
 
     const {
@@ -57,36 +60,24 @@ const CommentView: React.FC<CommentViewProps> = ({
         setActiveConversation,
     } = useContext(ViewContext)
 
+    const fusionContextId = useCurrentContext()
+
     const getConversationForProperty = (property: string) => (
         conversations.find((conversation) => conversation.property?.toUpperCase() === property.toUpperCase())
     )
 
-    const dummyData = [
-        {
-            id: "1",
-            displayName: "Henrik Hansen",
-            accountType: "Consultant",
-            status: "Active",
-        },
-        {
-            id: "2",
-            displayName: "Peter Jensen",
-            accountType: "Consultant",
-            status: "Active",
-        },
-        {
-            id: "3",
-            displayName: "Jesper Gudbransen",
-            accountType: "Consultant",
-            status: "inactive",
-        },
-        {
-            id: "4",
-            displayName: "Mikkel Eriksen",
-            accountType: "Consultant",
-            status: "inactive",
-        },
-    ]
+    useEffect(() => {
+        (async () => {
+            if (fusionContextId) {
+                try {
+                    const userTagsResult = await (await GetProjectService()).getUsers(fusionContextId.id, "", 1000, 0)
+                    setUserTags(userTagsResult.data)
+                } catch (error) {
+                    console.error("Error getting users for project: ", error)
+                }
+            }
+        })()
+    }, [])
 
     useEffect(() => {
         (async () => {
@@ -195,7 +186,7 @@ const CommentView: React.FC<CommentViewProps> = ({
                         SearchTerm={searchTerm}
                         setReRenderCounter={setReRenderCounter}
                         onTagSelected={handleTagSelected}
-                        dummyData={dummyData}
+                        dummyData={userTags}
                     />
                 )}
 

src/Components/SideSheet/Comments/Components/RenderComment.tsx

@@ -114,7 +114,7 @@ const RenderComment: FC<RenderCommentProps> = ({
     const [open, setOpen] = useState(false)
 
     const {
-        activeTagData, conversations, activeConversation, setActiveConversation,
+        activeTagData, activeConversation, setActiveConversation,
     } = useContext(ViewContext)
 
     if (!activeConversation) { return (<>Error loading conversation</>) }

src/Components/SideSheet/Comments/Components/TagDropDown.tsx

@@ -45,14 +45,16 @@ const ListItem = styled.button`
 interface Props {
     SearchTerm?: string
     onTagSelected: (displayName: string, userId: string) => void
-    dummyData: { id: string; displayName: string; accountType: string; status: string }[]
+    dummyData: { azureUniqueId: string; displayName: string; accountType: string; status: string; mail: string }[]
     setReRenderCounter: React.Dispatch<React.SetStateAction<number>>
 }
 
 const TagDropDown: FC<Props> = ({
- SearchTerm, onTagSelected, dummyData, setReRenderCounter,
+    SearchTerm, onTagSelected, dummyData, setReRenderCounter,
 }) => {
-    const filteredNames = dummyData.filter(({ displayName }) => !SearchTerm || displayName.toLowerCase().includes(SearchTerm.toLowerCase()))
+    const filteredNames = dummyData.filter(({ displayName, mail }) => !SearchTerm
+        || displayName.toLowerCase().includes(SearchTerm.toLowerCase())
+        || mail.toLowerCase().includes(SearchTerm.toLowerCase()))
 
     const handleTagClick = (userId: string, displayName: string) => {
         setReRenderCounter((prev) => prev + 1)
@@ -61,9 +63,9 @@ const TagDropDown: FC<Props> = ({
 
     return (
         <List>
-            {filteredNames.map(({ id, displayName }) => (
-                <li key={id}>
-                    <ListItem onClick={() => handleTagClick(id, displayName)}>
+            {filteredNames.map(({ azureUniqueId, displayName }) => (
+                <li key={azureUniqueId}>
+                    <ListItem onClick={() => handleTagClick(azureUniqueId, displayName)}>
                         {displayName}
                     </ListItem>
                 </li>

src/api/BaseService.ts

@@ -77,9 +77,9 @@ export class BaseService {
         path: string,
         requestQuery?: AxiosRequestConfig,
     ): Promise<any> {
-        const { data } = await this.client.get(path, requestQuery)
+        const result = await this.client.get(path, requestQuery)
 
-        return data
+        return result
     }
 
     protected get<T = any>(path: string, options?: RequestOptions): Promise<T> {

src/api/ProjectService.ts

@@ -7,6 +7,16 @@ class ProjectService extends BaseService {
         const result: any = await this.get(`${id}`)
         return result.value
     }
+
+    async getUsers(fusionContextId: string, search: string, top: number, skip: number) {
+        const result: any = await this.getWithParams(
+            `${fusionContextId}/users`,
+            {
+                params: { search, top, skip },
+            },
+        )
+        return result
+    }
 }
 
 export async function GetProjectService() {

src/api/config.tsx

@@ -23,6 +23,9 @@ const configuration = {
     RevisionReviewService: {
         BASE_URL: "",
     },
+    UserTagService: {
+        BASE_URL: "",
+    },
 }
 
 export const buildConfig = (baseUrl: string) => {
@@ -32,6 +35,7 @@ export const buildConfig = (baseUrl: string) => {
     configuration.ConversationService.BASE_URL = `${baseUrl}/tag/reviews`
     configuration.TagDataReviewService.BASE_URL = `${baseUrl}/tagdatareviews`
     configuration.RevisionReviewService.BASE_URL = `${baseUrl}/revisionreviews`
+    configuration.UserTagService.BASE_URL = `${baseUrl}/usertags`
 }
 
 export const config = Object.freeze(configuration)

src/types.d.ts

@@ -1606,6 +1606,12 @@ declare namespace Components {
             userId?: string; // uuid
             displayName?: string | null;
         }
+        export interface UserTagDto {
+            azureUniqueId?: string | null;
+            displayName?: string | null;
+            mail?: string | null;
+            accountType?: string | null;
+        }
     }
 }
 declare namespace Paths {
@@ -1901,6 +1907,25 @@ declare namespace Paths {
             export type $200 = Components.Schemas.ITagDataDto[];
         }
     }
+    namespace GetUsersForProject {
+        namespace Parameters {
+            export type FusionContextId = string;
+            export type Search = string;
+            export type Skip = number; // int32
+            export type Top = number; // int32
+        }
+        export interface PathParameters {
+            fusionContextId: Parameters.FusionContextId;
+        }
+        export interface QueryParameters {
+            search?: Parameters.Search;
+            top?: Parameters.Top /* int32 */;
+            skip?: Parameters.Skip /* int32 */;
+        }
+        namespace Responses {
+            export type $200 = Components.Schemas.UserTagDto[];
+        }
+    }
     namespace UpdateMessage {
         namespace Parameters {
             export type ConversationId = string; // uuid

src/utils/helpers.tsx

@@ -66,7 +66,7 @@ export function getPropertyName<T>(property: keyof T): keyof T {
  * @returns {number[]} mentions - An array of mention IDs.
  */
 export function processMessageInput(input: string): { processedString: string, mentions: number[] } {
-    const regex = /<span data-mention="(\d+)" contenteditable="false">([^<]+)<\/span>/g
+    const regex = /<span data-mention="(\w+-\w+-\w+-\w+-\w+)" contenteditable="false">([^<]+)<\/span>/g
 
     let match
     const mentions: number[] = []