Better import in progress

[flohhhh]

We want to view when an account import is in
progress on the balance page and in the settings
page. For that we activate the realtime on the jobs
when we are on one of these 2 pages otherwise we
stop it. We also want to display a notification to
the user whether it went correctly or not.

[ptbrowne]

Please take the time to write a PR description :)

[ptbrowne]

This looks really nice 👏 , the real blocker for me is the lack of test for the JobsContextProvider though.

I have some remarks and nits.

[ptbrowne]

There is useRealtime hook that could simplify the logic, it does the start/stop/subscribe/unsubscribe for you:

https://github.com/cozy/cozy-ui/blob/db54f27493b6ba61cf41a1b48cf363b9957dd049/react/hooks/useRealtime.js

cozy-ui might not be the good place for it though.

[flohhhh]

Yes I think so too, it would be better in realtime lib

[ptbrowne]

Nit: It could be nice to prepare a bit the context value to make its consumption easier for the components below. For example, indexing the accounts or the triggers, or the connectors.

  const value = useMemo(() => ({
    inProgress: jobsInProgress,
    byAccountId: keyBy(jobsInProgress, x => x.account),
    byKonnectorSlug: keyBy(jobsInProgress, x => x.konnector),,
    byTriggerId: keyBy(jobsInProgress, x => x.trigger), // useMemo could be used 
  }, [jobsInProgress])
  return <JobsContext.Provider
    value={value}
  ...
  />

The value passed below is here memoized not to incure unnecessary renders (not sure if this is really necessary but it cannot hurt I guess) and indexed so that a component can access info easily.

[todo]

add tests for JobsContext

cozy-banks/src/components/JobsContext.jsx

Lines 23 to 28 in ae5e5da

	// @TODO add tests for JobsContext
	/** Allows to subscribe to jobs and thus to know jobs in progress
	*
	* @param client
	* @param options
	* @returns jobsInProgress

---

This comment was generated by todo based on a TODO comment in ae5e5da in #2027. cc @cozy.

[todo]

useRealtime hook

cozy-banks/src/components/JobsContext.jsx

Lines 93 to 98 in ae5e5da

	// @TODO useRealtime hook
	useEffect(() => {
	startJobsRealtime()
	return () => stopJobsRealtime()
	}, [])

---

This comment was generated by todo based on a TODO comment in ae5e5da in #2027. cc @cozy.

[todo]

use 'useQuery' instead of 'client'

cozy-banks/src/ducks/balance/ImportGroupPanel.jsx

Lines 125 to 130 in 3e6c596

	// @TODO use 'useQuery' instead of 'client'
	// const resp = useQuery(konnectorConn.query(slug), konnectorConn)
	// const name = get(resp, 'data[0].attributes.name', '')
	return (
	<ListItem button disableRipple>

---

This comment was generated by todo based on a TODO comment in 3e6c596 in #2027. cc @cozy.

[todo]

use 'useQuery' instead of 'client'

cozy-banks/src/ducks/balance/ImportGroupPanel.jsx

Lines 125 to 130 in 02a303d

	// @TODO use 'useQuery' instead of 'client'
	// const resp = useQuery(konnectorConn.query(slug), konnectorConn)
	// const name = get(resp, 'data[0].attributes.name', '')
	return (
	<ListItem button disableRipple>

---

This comment was generated by todo based on a TODO comment in 02a303d in #2027. cc @cozy.

[todo]

use 'useQuery' instead of 'client'

cozy-banks/src/ducks/balance/ImportGroupPanel.jsx

Lines 125 to 130 in e932082

	// @TODO use 'useQuery' instead of 'client'
	// const resp = useQuery(konnectorConn.query(slug), konnectorConn)
	// const name = get(resp, 'data[0].attributes.name', '')
	return (
	<ListItem button disableRipple>

---

This comment was generated by todo based on a TODO comment in e932082 in #2027. cc @cozy.

[ptbrowne]

Thanks !