pr change

Author: carocao-msft

packages/react-components/review/beta/react-components.api.md

@@ -2185,18 +2185,6 @@ export interface StreamMediaProps {
     videoStreamElement: HTMLElement | null;
 }
 
-// @public
-export interface SurveyCategories {
-    // (undocumented)
-    audioRating: string;
-    // (undocumented)
-    overallRating: string;
-    // (undocumented)
-    screenshareRating: string;
-    // (undocumented)
-    videoRating: string;
-}
-
 // @public
 export interface SurveyIssues {
     // (undocumented)
@@ -2243,6 +2231,18 @@ export interface SurveyIssues {
     };
 }
 
+// @public
+export interface SurveyIssuesHeadingStrings {
+    // (undocumented)
+    audioRating: string;
+    // (undocumented)
+    overallRating: string;
+    // (undocumented)
+    screenshareRating: string;
+    // (undocumented)
+    videoRating: string;
+}
+
 // @internal
 export type _SurveyTag = {
     [issueCategory: string]: {
@@ -2268,7 +2268,7 @@ export const _TagsSurvey: (props: _TagsSurveyProps) => JSX.Element;
 // @internal
 export interface _TagsSurveyProps {
     callIssuesToTag: SurveyIssues;
-    categoriesToHeader: SurveyCategories;
+    categoryHeadings: SurveyIssuesHeadingStrings;
     issues: (_AudioIssue | _OverallIssue | _ScreenshareIssue | _VideoIssue)[];
     onConfirm?: (selectedTags: _CallSurvey) => void;
     strings?: _TagsSurveyStrings;

packages/react-components/src/components/Survey/TagsSurvey/TagsSurvey.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Text, useTheme, Stack, Checkbox, Pivot, PivotItem } from '@fluentui/react';
 import { _formatString, _pxToRem } from '@internal/acs-ui-common';
 import { checkboxClassName, questionTextStyle, helperTextStyle } from './TagsSurvey.styles';
@@ -13,7 +13,7 @@ import {
   _ScreenshareIssue,
   _VideoIssue
 } from '../SurveyTypes';
-import { SurveyCategories, SurveyIssues } from '../../../types';
+import { SurveyIssuesHeadingStrings, SurveyIssues } from '../../../types';
 /**
  * Strings of {@link TagsSurvey} that can be overridden.
  *
@@ -25,7 +25,7 @@ export interface _TagsSurveyStrings {
    */
   tagsSurveyQuestion?: string;
   /**
-   * Confirm Button Label
+   * Helper text for tag survey explaining what the survey is for
    */
   tagsSurveyHelperText?: string;
 }
@@ -60,7 +60,7 @@ export interface _TagsSurveyProps {
   /** Mappings from call issues to tags displayed on the survey*/
   callIssuesToTag: SurveyIssues;
   /** Mappings from issue category to categories displayed on survey*/
-  categoriesToHeader: SurveyCategories;
+  categoryHeadings: SurveyIssuesHeadingStrings;
   /** Function to send TagsSurvey results*/
   onConfirm?: (selectedTags: _CallSurvey) => void;
   /** Tags survey strings */
@@ -73,32 +73,35 @@ export interface _TagsSurveyProps {
  * @internal
  */
 export const _TagsSurvey = (props: _TagsSurveyProps): JSX.Element => {
-  const { issues, callIssuesToTag, categoriesToHeader, onConfirm, strings } = props;
+  const { issues, callIssuesToTag, categoryHeadings, onConfirm, strings } = props;
 
   const [selectedTags, setSelectedTags] = useState({});
 
-  const tags: _SurveyTag[] = [];
-  issues.map((issue) => {
-    const issueCamelCase = issue?.charAt(0).toLowerCase() + issue?.slice(1);
-    const issueCategory = Object.keys(callIssuesToTag).find(
-      (key) => callIssuesToTag[key][issueCamelCase] !== undefined
-    );
-    if (issueCategory) {
-      if (tags[issueCategory]) {
-        tags[issueCategory].push({
-          message: callIssuesToTag[issueCategory][issueCamelCase],
-          issue: issue
-        });
-      } else {
-        tags[issueCategory] = [
-          {
+  const tags: _SurveyTag[] = useMemo(() => {
+    const tags: _SurveyTag[] = [];
+    issues.forEach((issue) => {
+      const issueCamelCase = issue?.charAt(0).toLowerCase() + issue?.slice(1);
+      const issueCategory = Object.keys(callIssuesToTag).find(
+        (key) => callIssuesToTag[key][issueCamelCase] !== undefined
+      );
+      if (issueCategory) {
+        if (tags[issueCategory]) {
+          tags[issueCategory].push({
             message: callIssuesToTag[issueCategory][issueCamelCase],
             issue: issue
-          }
-        ];
+          });
+        } else {
+          tags[issueCategory] = [
+            {
+              message: callIssuesToTag[issueCategory][issueCamelCase],
+              issue: issue
+            }
+          ];
+        }
       }
-    }
-  });
+    });
+    return tags;
+  }, [issues, callIssuesToTag]);
 
   const onChange = React.useCallback(
     (issue: string, issueCategory: string, checked: boolean): void => {
@@ -146,7 +149,7 @@ export const _TagsSurvey = (props: _TagsSurveyProps): JSX.Element => {
           return (
             <PivotItem
               key={`key-${i}`}
-              headerText={categoriesToHeader[key]}
+              headerText={categoryHeadings[key]}
               headerButtonProps={{
                 'data-order': i,
                 'data-title': key

packages/react-components/src/index.ts

@@ -74,4 +74,4 @@ export type { BlockedMessage } from './types';
 /* @conditional-compile-remove(end-of-call-survey) */
 export type { SurveyIssues } from './types';
 /* @conditional-compile-remove(end-of-call-survey) */
-export type { SurveyCategories } from './types';
+export type { SurveyIssuesHeadingStrings } from './types';

…components/src/types/SurveyCategories.ts …/src/types/SurveyIssuesHeadingStrings.tspackages/react-components/src/types/SurveyCategories.ts renamed to packages/react-components/src/types/SurveyIssuesHeadingStrings.ts packages/react-components/src/types/SurveyCategories.ts renamed to packages/react-components/src/types/SurveyIssuesHeadingStrings.ts

@@ -5,7 +5,7 @@
  * @public
  * Corresponding texts to each call issue category
  */
-export interface SurveyCategories {
+export interface SurveyIssuesHeadingStrings {
   overallRating: string;
   audioRating: string;
   videoRating: string;

packages/react-components/src/types/index.ts

@@ -11,4 +11,4 @@ export * from './OnRender';
 export * from './ReadReceiptsBySenderId';
 export * from './CaptionsAvailableLanguageStrings';
 export * from './SurveyIssues';
-export * from './SurveyCategories';
+export * from './SurveyIssuesHeadingStrings';

packages/storybook/stories/INTERNAL/Survey/TagsSurvey.stories.tsx

@@ -85,7 +85,7 @@ const TagsSurveyStory = (): JSX.Element => {
     }
   };
 
-  const categoriesToHeader = {
+  const categoryHeadings = {
     overallRating: 'Overall',
     audioRating: 'Audio',
     videoRating: 'Video',
@@ -118,7 +118,7 @@ const TagsSurveyStory = (): JSX.Element => {
         strings={strings}
         issues={issues}
         callIssuesToTag={callIssuesToTag}
-        categoriesToHeader={categoriesToHeader}
+        categoryHeadings={categoryHeadings}
       />
     </div>
   );
@@ -133,7 +133,7 @@ export default {
   argTypes: {
     issues: hiddenControl,
     callIssuesToTag: hiddenControl,
-    categoriesToHeader: hiddenControl,
+    categoryHeadings: hiddenControl,
     onConfirm: hiddenControl,
     strings: hiddenControl
   },

packages/storybook/stories/INTERNAL/Survey/snippets/TagsSurvey.snippet.tsx

@@ -71,7 +71,7 @@ export const TagsSurveyExample: () => JSX.Element = () => {
     'Echo',
     'Freezes'
   ];
-  const categoriesToHeader = {
+  const categoryHeadings = {
     overallRating: 'Overall',
     audioRating: 'Audio',
     videoRating: 'Video',
@@ -83,7 +83,7 @@ export const TagsSurveyExample: () => JSX.Element = () => {
       strings={strings}
       issues={issues}
       callIssuesToTag={callIssuesToTag}
-      categoriesToHeader={categoriesToHeader}
+      categoryHeadings={categoryHeadings}
     />
   );
 };