Feature/migrate fbw to reactquery

[selankon]

Migrate to React Query library instead of use the old redux system

[germanferrero]

@selankon great work! I've add some comments you may want to address :)

[germanferrero]

The lime-fbw set_network endpoint doesn't expect a network attribute in the body. Is this something intentional?

[selankon]

Well, when setNetwork is called, on the original code, it pass a param called network. See: Scan.js

if (state.apname && isValidHostname(state.hostname, true)) {
			setNetwork({
				file: state.file,
				hostname: state.hostname,
				network: state.community
			});
		}

[germanferrero]

Ah, ok! The backend is not using it anyway, we can remove it :)

[germanferrero]

commented code to be deleted

[germanferrero]

commented code to be deleted

[germanferrero]

You can avoid using:

const [status, setStatus] = useState()

And take it directly from:
const [setNetwork, { isError: isSetNetworkError}] = useSetNetwork()
and
const [searchNetworks, { isError: isSeachNetworkError}] = useSearchNetworks()

[selankon]

And on isSeachNetworkError and isSetNetworkError I have to do setStatus('error')?

Also, what about the onSuccess result? Its ok as is now?

[germanferrero]

isSeachNetworkError and isSetNetworkError are booleans you can use directly in your conditional rendering.

onSuccess callback looks god!

[germanferrero]

Hmm, the previous code doesn't help... But it would make much more sense to have a query called useGetNetworks to do the "GET action" and the mutation called useSearchNetworks to do the "POST action".

Then you would use something like this to obtain the networks.
const { data: networks, isLoading } = useGetNetworks();
(this query can right now call search_networks endpoint with rescan:false parameter).

And useSearchNetworks would do call setQueryData on the useGetNetworks on success. That would make the component re-render and update networks.

In this way, you also avoid using useState for something that it's backend state, rather than frontend state.

[germanferrero]

It's okey to do this hear, but just to give you options:
This data enrichment could also be done at query level.
You can check the "useAssocList" query to checkout what I mean.

[germanferrero]

Great work, thanks @selankon !! 🎉 😄

[selankon]

Hi @germanferrero I merged from develop and applied eslint rules but I faced that there are some files not involving to FBW that need lintern revisions. Cold we step forward with this PR?

➜ npx eslint .

limeapp/lime-app/plugins/lime-plugin-changeNode/src/changeNodePage.js
  62:41  error  Missing "key" prop for element in iterator  react/jsx-key

limeapp/lime-app/plugins/lime-plugin-fbw/src/FbwPage.spec.js
  61:9  error  Expect must have a corresponding matcher call  jest/valid-expect
  68:9  error  Expect must have a corresponding matcher call  jest/valid-expect

limeapp/lime-app/plugins/lime-plugin-metrics/src/metricsPage.js
  154:4  error  Missing "key" prop for element in iterator  react/jsx-key

limeapp/lime-app/plugins/lime-plugin-pirania/src/screens/voucherList.js
  68:7  error  Missing "key" prop for element in iterator  react/jsx-key

limeapp/lime-app/plugins/lime-plugin-rx/src/rxPage.js
  126:8  error  Missing "key" prop for element in iterator  react/jsx-key

limeapp/lime-app/src/components/app.js
  35:5  error  Missing "key" prop for element in iterator  react/jsx-key
  43:5  error  Missing "key" prop for element in iterator  react/jsx-key
  53:5  error  Missing "key" prop for element in iterator  react/jsx-key
  64:5  error  Missing "key" prop for element in iterator  react/jsx-key

limeapp/lime-app/src/components/tabs/index.js
  7:5  error  Missing "key" prop for element in iterator  react/jsx-key

limeapp/lime-app/src/utils/app.context.js
  3:1  error  'preact' import is duplicated  no-duplicate-imports

✖ 12 problems (12 errors, 0 warnings)