fix: select only the required values from state and useEffect to get description error message (#3395)

* Update dependencies and workspace

* Select only the required values from the state

Having the selector returning the entire state and then using spread operators to get the values we want will cause components to rerender. This will impact performance because if a component has the entire state and a part of the state it does not use is updated, the component has to rerender. To avoid this, only get what you need from the state for a component.

* Ensure that AutoComplete finishes rendering before calling ValidationProvider

ValidationProvider is updating when AutoComplete tries to call it while rendering.

Author: musale

.vscode/settings.json

@@ -22,4 +22,7 @@
     "*.tsx": "$(capture).ts, $(capture).d.ts, $(capture).spec.tsx, $(capture).styles.ts",
     "package.json": "package-lock.json, .npmrc"
   },
+  "cSpell.words": [
+    "fluentui"
+  ],
 }

package-lock.json

@@ -33,7 +33,7 @@
                 "eslint-config-react-app": "7.0.1",
                 "eslint-plugin-react": "7.33.2",
                 "eslint-webpack-plugin": "4.1.0",
-                "express": "4.21.0",
+                "express": "^4.21.1",
                 "expvariantassignmentsdk": "file:packages/expvariantassignmentsdk-1.0.0.tgz",
                 "file-loader": "6.2.0",
                 "fork-ts-checker-webpack-plugin": "9.0.2",

package.json

@@ -13,7 +13,7 @@ interface ValidationProviderProps {
 }
 
 export const ValidationProvider = ({ children }: ValidationProviderProps) => {
-  const { resources } = useAppSelector((state) => state);
+  const resources = useAppSelector((state) => state.resources);
   const base = Object.keys(resources.data).length > 0 ?
     resources.data[GRAPH_API_VERSIONS[0]].children! : [];
 

src/app/services/context/validation-context/ValidationProvider.tsx

@@ -9,8 +9,8 @@ import MessageDisplay from '../common/message-display/MessageDisplay';
 
 const StatusMessages = () => {
   const dispatch = useAppDispatch();
-  const { queryRunnerStatus, sampleQuery } =
-    useAppSelector((state) => state);
+    const queryRunnerStatus = useAppSelector((state)=> state.queryRunnerStatus);
+    const sampleQuery = useAppSelector((state)=> state.sampleQuery);
 
   function setQuery(link: string) {
     const query: IQuery = { ...sampleQuery };

src/app/views/app-sections/StatusMessages.tsx

@@ -9,8 +9,7 @@ import { appStyles } from '../App.styles';
 
 const StyledTermsOfUseMessage = () => {
 
-  const { termsOfUse } =
-    useAppSelector((state) => state);
+  const  termsOfUse = useAppSelector((state) => state.termsOfUse);
 
   const dispatch = useAppDispatch();
   if (termsOfUse) {

src/app/views/app-sections/TermsOfUseMessage.tsx

@@ -16,7 +16,7 @@ import { translateMessage } from '../../utils/translate-messages';
 const Authentication = (props: any) => {
   const dispatch: AppDispatch = useAppDispatch();
   const [loginInProgress, setLoginInProgress] = useState(false);
-  const { auth: { authToken } } = useAppSelector((state) => state);
+  const authToken = useAppSelector((state) => state.auth.authToken);
   const tokenPresent = !!authToken.token;
   const logoutInProgress = !!authToken.pending;
 

src/app/views/authentication/Authentication.tsx

@@ -8,7 +8,8 @@ import { useAppSelector } from '../../../store';
 
 export const FeedbackButton = () => {
   const [enableSurvey, setEnableSurvey] = useState(false);
-  const { profile: { user } } = useAppSelector((state) => state);
+  const user = useAppSelector((state) => state.profile.user)
+
   const currentTheme = getTheme();
   const feedbackIcon : IIconProps = {
     iconName : 'Feedback'

src/app/views/main-header/FeedbackButton.tsx

@@ -17,7 +17,8 @@ import { mainHeaderStyles } from './MainHeader.styles';
 import { useAppSelector } from '../../../store';
 
 export const Help = () => {
-  const { auth: { authToken } } = useAppSelector((state) => state);
+  const auth = useAppSelector((state)=> state.auth)
+  const authToken = auth.authToken;
   const authenticated = authToken.token;
   const [items, setItems] = useState([]);
   const currentTheme = getTheme();

src/app/views/main-header/Help.tsx

@@ -29,9 +29,10 @@ registerIcons({
   }
 });
 export const MainHeader: React.FunctionComponent<MainHeaderProps> = (props: MainHeaderProps) => {
-  const { profile: { user }, graphExplorerMode, sidebarProperties } = useAppSelector(
-    (state) => state
-  );
+  const profile = useAppSelector((state)=> state.profile)
+  const user = profile.user;
+  const graphExplorerMode = useAppSelector((state)=> state.graphExplorerMode)
+  const sidebarProperties = useAppSelector((state)=> state.sidebarProperties)
 
   const mobileScreen = !!sidebarProperties.mobileScreen;
   const showSidebar = !!sidebarProperties.showSidebar;