Feat/migrate page ,index and TraceIdSearch to functional component

[Mubashirshariq]

Which problem is this PR solving?

Migrating Class components to functional components
/attempt #2610

Description of the changes

migrate page,index and traceidsearch

How was this change tested?

Checklist

• I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
• I have signed all commits
• I have added unit tests for the new functionality
• I have run lint and test steps successfully
  • for jaeger: make lint test
  • for jaeger-ui: npm run lint and npm run test

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.59%. Comparing base (caed0b4) to head (e834cce).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2673      +/-   ##
==========================================
- Coverage   96.59%   96.59%   -0.01%     
==========================================
  Files         256      256              
  Lines        7727     7718       -9     
  Branches     2002     2024      +22     
==========================================
- Hits         7464     7455       -9     
  Misses        263      263              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[yurishkuro]

previously this was called conditionally. What happens now?

if (pathname !== nextPathname || search !== nextSearch) {

[Mubashirshariq]

@yurishkuro The conditional check if (pathname !== nextPathname || search !== nextSearch) was removed because useEffect's dependency array [pathname, search] handles this optimization automatically. The effect will only run when either dependency changes, making the manual comparison redundant. This achieves the same optimization with cleaner code.

[yurishkuro]

why is this ok to call this function unconditionally on importing index.jsx? Isn't there some lifecycle thing in functional components when it can be called? Is there an official recommendation for functions like this?

[Mubashirshariq]

i thought this is just a configuration step,which we can call at module level,but the processScripts interacts with DOM so it need to be in useEffect.updated it with useEffect so that it will run whenver the component mounts

[hari45678]

useEffect runs after the component mounts initially, while constructors are executed before the component mounts.
A better alternative would be to use a custom hook that uses a ref/state to keep track of the functional. Read a nice article here that explains why functional components lack this constructor alternative and what should be the workaround.

[Mubashirshariq]

but i think here it needs to be inside the useEffect since processScripts() directly interacts with DOM,so it should be rendered every time the component is mounted