Move Project Manager into cached React Query to ensure it is globally unique

[somebody1234]

Pull Request Description

• This prevents two separate Project Managers from being created, due to React.useEffect firing twice when Strict Mode is enabled.
• Fix crashes with npm run dev in app/gui2 when there are broken symlinks in the projects directory

Important Notes

None

Testing Instructions

• Inspect the websockets with address 127.0.0.1:30535 to make sure that only one of them has any messages at all
• Create a broken symlink in the projects directory and confirm that the Local Backend does not fail on this PR (but does on develop)

Checklist

Please ensure that the following checklist has been satisfied before submitting the PR:

• The documentation has been updated, if necessary.
• Screenshots/screencasts have been attached, if there are any visual changes. For interactive or animated visual changes, a screencast is preferred.
• All code follows the
  Scala,
  Java,
  and
  Rust
  style guides. In case you are using a language not listed above, follow the Rust style guide.
• All code has been tested:
  • Unit tests have been written where possible.
  • If GUI codebase was changed, the GUI was tested when built using ./run ide build.

[MrFlashAccount]

I think with react-query we don't need to write code like that anymore. All we need is to:

// it's mostly a pseudocode
export function useProjectManager(){
 return useQuery({
queryKey: ['projectManager'],
queryFn: ...
})
} 

Please refer to the documentation for additional info

[MrFlashAccount]

TLDR:

1. Create custom hook 'useProjectManager()`
2. configure useQuery to store the current project manager as long as needed (maybe forever?) By default, it stores data as long as it's in use and 5 minutes after unmount of the latest component that uses this data.
3. Use that hook in the app.
4. Additionally, we might want to use useSuspenceQuery to integrate fetching with React.Suspense
5. Also, there's a possibility to prefetch data with usePrefetchQuery, so it might be helpful to separate query options from useQuery, You can use queryOptions function for that: https://tanstack.com/query/latest/docs/framework/react/typescript#typing-query-options

[somebody1234]

true, but as this is a fix i think it's better to avoid migrating to react-query for now, if we really should migrate then we can do that in another PR

[MrFlashAccount]

Not sure, because migrating to react query makes this PR obsolete(it'll be not the next step, but a whole rewrite, and it's relatively easy to rewrite).

If you need any help with rewriting to react-query please reach me in the DM

[somebody1234]

while that's true, the part i'm unsure about isn't so much about using react query...

... it's about (ab)using react query as a form of permanent global state. i think it'd make it harder for users to figure out how the project manager is being cached, especially if they are unfamiliar with React Query.

iow: we have all other globals in Contexts, i'd prefer staying consistent and maybe switch to React Query after figuring out what we should and shouldn't be keeping in React Query.

[MrFlashAccount]

I think it's okay to use React.Context to provide variables that don't require fetching or accessing asynchronously, such as clipboard or geolocation. For asynchronous tasks, I strongly recommend using react-query. There's a clear distinction between React.Context and react-query. As far as I can see, we need to fetch some data before we create a ProjectManager instance, which is why I suggest rewriting it using react-query.

[somebody1234]

sure, but again the issue is not with using react-query, but rather with using react-query as hidden global state

[MrFlashAccount]

It's more about proper working with the async flow, integration with React.Suspense, prefetching, invalidation, avoiding bad practices(ignoring errors, fetching in useEffect), consistency across the codebase(we're moving away from fetching in useEffect) and so on.
The global state goes latter