Feat: tree details page

[mari1912]

Description

• Add tree navigation ui
• Add navigation
• Add api call to tree

Related Issues

• Closes Create Tree Details Page #77

How to test it

• Run docker compose

Visual reference

[lfjnascimento]

Nit: There is no need to use the word Component in the name of a component

[lfjnascimento]

If you can, it would be good to create a DebounInput component that accepts the interval

[mari1912]

I'm not sure if I get your point, the DEBOUNCE_INTERVAL is being used in the const debouncedInput that calls useDebounce. The only function of the input here is to get the input value. How do you though in doing it?

[lfjnascimento]

My ideia is a component like <DebounceInput onChange={...} interval={...} /> that holds the debounce logic (useDebounce) and calls onChange only when needed respecting the debounce interval.

[mari1912]

and how would you make to get the value from the input to filter the page by it? also, we have to save all the data that the user type, just the filter value changes that will be updated later

[lfjnascimento]

In this case we would use as

<DebounceInput
    onChange={onInputSearchTextChange}
    interval={debouncedInput}
  />

The onInputSearchTextChange will be called respecting the debounce. That way we will not re-render the page on every key stroke just the DebounceInput component.
The way it is know we are re-render the Trees for every stroke (because it update the inputSearchText state) and also for every debounce trigger (by updating debouncedInput state)

[lfjnascimento]

Suggested change

	export const useTreeDetail = (treeId: string): UseQueryResult => {
	export const useTreeDetails = (treeId: string): UseQueryResult<TreeDetails> => {

so we can avoid data as TreeDetailsType such as here

[lfjnascimento]

The summary card content in scrolling on top of TopBar

[lfjnascimento]

Left menu is not following the page scroll