Feature/swr for simple queries (#187)

* Refactor simple queries with useSWR hook

* Fix plus button in Extensions screen

* Add type to categories query

* Add useQuery abstraction which adds loading attribute

* Reload categories even if reorder fails

src/screens/SourceConfigure.tsx

@@ -5,10 +5,10 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import NavbarContext from 'components/context/NavbarContext';
 import { useParams } from 'react-router-dom';
-import client from 'util/client';
+import client, { useQuery } from 'util/client';
 import { SwitchPreferenceCompat, CheckBoxPreference } from 'components/sourceConfiguration/TwoStatePreference';
 import ListPreference from 'components/sourceConfiguration/ListPreference';
 import EditTextPreference from 'components/sourceConfiguration/EditTextPreference';
@@ -34,21 +34,12 @@ function getPrefComponent(type: string) {
 }
 
 export default function SourceConfigure() {
-    const [sourcePreferences, setSourcePreferences] = useState<SourcePreferences[]>([]);
     const { setTitle, setAction } = useContext(NavbarContext);
 
-    const [updateTriggerHolder, setUpdateTriggerHolder] = useState<number>(0); // just a hack
-    const triggerUpdate = () => setUpdateTriggerHolder(updateTriggerHolder + 1); // just a hack
-
     useEffect(() => { setTitle('Source Configuration'); setAction(<></>); }, []);
 
     const { sourceId } = useParams<{ sourceId: string }>();
-
-    useEffect(() => {
-        client.get(`/api/v1/source/${sourceId}/preferences`)
-            .then((response) => response.data)
-            .then((data) => setSourcePreferences(data));
-    }, [updateTriggerHolder]);
+    const { data: sourcePreferences = [], mutate } = useQuery<SourcePreferences[]>(`/api/v1/source/${sourceId}/preferences`);
 
     const convertToString = (position: number, value: any): string => {
         switch (sourcePreferences[position].props.defaultValueType) {
@@ -63,7 +54,7 @@ export default function SourceConfigure() {
         (value: any) => {
             client.post(`/api/v1/source/${sourceId}/preferences`,
                 JSON.stringify({ position, value: convertToString(position, value) }))
-                .then(() => triggerUpdate());
+                .then(() => mutate());
         }
     );