[UI]: Fixes after review #3473

Author: olgenn

frontend/src/pages/Project/Details/Events/index.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { Button, Header, SpaceBetween } from 'components';
+import { Button, Container, Header, Loader, SpaceBetween } from 'components';
 
 import { useBreadcrumbs } from 'hooks';
 import { ROUTES } from 'routes';
+import { useGetProjectQuery } from 'services/project';
 
 import { EventList } from 'pages/Events/List';
 
@@ -14,6 +15,7 @@ export const Events: React.FC = () => {
     const params = useParams();
     const paramProjectName = params.projectName ?? '';
     const navigate = useNavigate();
+    const { data, isLoading } = useGetProjectQuery({ name: paramProjectName });
 
     useBreadcrumbs([
         {
@@ -31,9 +33,16 @@ export const Events: React.FC = () => {
     ]);
 
     const goToEventsPage = () => {
-        navigate(ROUTES.EVENTS.LIST + `?within_projects=${paramProjectName}`);
+        navigate(ROUTES.EVENTS.LIST + `?within_projects=${data?.project_id}`);
     };
 
+    if (isLoading || !data)
+        return (
+            <Container>
+                <Loader />
+            </Container>
+        );
+
     return (
         <EventList
             renderHeader={() => {
@@ -48,7 +57,7 @@ export const Events: React.FC = () => {
                     />
                 );
             }}
-            permanentFilters={{ within_projects: [paramProjectName] }}
+            permanentFilters={{ within_projects: [data.project_id] }}
             showFilters={false}
         />
     );

frontend/src/pages/User/Details/Events/index.tsx

@@ -2,10 +2,11 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { Button, Header, SegmentedControl, SpaceBetween } from 'components';
+import { Button, Container, Header, Loader, SegmentedControl, SpaceBetween } from 'components';
 
 import { useBreadcrumbs } from 'hooks';
 import { ROUTES } from 'routes';
+import { useGetUserQuery } from 'services/user';
 
 import { EventList } from 'pages/Events/List';
 
@@ -15,6 +16,7 @@ export const Events: React.FC = () => {
     const paramUserName = params.userName ?? '';
     const navigate = useNavigate();
     const [filterParamName, setFilterParamName] = useState<keyof TEventListFilters>('actors');
+    const { data, isLoading } = useGetUserQuery({ name: paramUserName });
 
     useBreadcrumbs([
         {
@@ -32,9 +34,16 @@ export const Events: React.FC = () => {
     ]);
 
     const goToEventsPage = () => {
-        navigate(ROUTES.EVENTS.LIST + `?${filterParamName}=${paramUserName}`);
+        navigate(ROUTES.EVENTS.LIST + `?${filterParamName}=${data?.id}`);
     };
 
+    if (isLoading || !data)
+        return (
+            <Container>
+                <Loader />
+            </Container>
+        );
+
     return (
         <EventList
             renderHeader={() => {
@@ -57,7 +66,7 @@ export const Events: React.FC = () => {
                     />
                 );
             }}
-            permanentFilters={{ [filterParamName]: [paramUserName] }}
+            permanentFilters={{ [filterParamName]: [data.id] }}
             showFilters={false}
         />
     );