flag updates actually save

.eslintrc.json

@@ -20,284 +20,14 @@
         "react"
     ],
     "rules": {
-        "@typescript-eslint/no-unused-vars": "off",
-        "@typescript-eslint/no-var-requires":"off",
-        "react/no-unescaped-entities": "warn",
-        "react/prop-types": "off",
-        "accessor-pairs": "error",
-        "array-bracket-newline": "error",
-        "array-bracket-spacing": [
-            "error",
-            "never"
-        ],
-        "array-callback-return": "error",
-        "array-element-newline": "off",
-        "arrow-body-style": "off",
-        "arrow-parens": "off",
-        "arrow-spacing": [
-            "error",
-            {
-                "after": true,
-                "before": true
-            }
-        ],
-        "block-scoped-var": "error",
-        "block-spacing": [
-            "error",
-            "always"
+        "nonblock-statement-body-position": [
+            "warn",
+            "below"
         ],
         "brace-style": [
-            "error",
-            "1tbs",
-            {
-                "allowSingleLine": true
-            }
-        ],
-        "camelcase": "error",
-        "capitalized-comments": "off",
-        "class-methods-use-this": "error",
-        "comma-dangle": "error",
-        "comma-spacing": "off",
-        "comma-style": [
-            "error",
-            "last"
-        ],
-        "complexity": "off",
-        "computed-property-spacing": [
-            "error",
-            "never"
-        ],
-        "consistent-return": "off",
-        "consistent-this": "error",
-        "curly": "off",
-        "default-case": "error",
-        "default-case-last": "error",
-        "default-param-last": "error",
-        "dot-location": [
             "warn",
-            "property"
+            "allman"
         ],
-        "dot-notation": [
-            "error",
-            {
-                "allowKeywords": true
-            }
-        ],
-        "eol-last": "off",
-        "eqeqeq": "error",
-        "func-call-spacing": "error",
-        "func-name-matching": "error",
-        "func-names": "error",
-        "func-style": [
-            "error",
-            "declaration",
-            {
-                "allowArrowFunctions": true
-            }
-        ],
-        "function-call-argument-newline": [
-            "error",
-            "consistent"
-        ],
-        "function-paren-newline": "error",
-        "generator-star-spacing": "error",
-        "grouped-accessor-pairs": "error",
-        "guard-for-in": "error",
-        "id-denylist": "error",
-        "id-length": "off",
-        "id-match": "error",
-        "implicit-arrow-linebreak": [
-            "error",
-            "beside"
-        ],
-        "indent": "off",
-        "init-declarations": "error",
-        "jsx-quotes": "off",
-        "key-spacing": "off",
-        "keyword-spacing": "off",
-        "line-comment-position": "off",
-        "linebreak-style": "off",
-        "lines-around-comment": "error",
-        "max-classes-per-file": "error",
-        "max-depth": "error",
-        "max-len": "off",
-        // "max-lines": "error",
-        "max-lines-per-function": "off",
-        "max-nested-callbacks": "error",
-        "max-params": "off",
-        "max-statements": "off",
-        "max-statements-per-line": "error",
-        "multiline-comment-style": [
-            "error",
-            "separate-lines"
-        ],
-        "multiline-ternary": [
-            "error",
-            "always-multiline"
-        ],
-        "new-cap": "error",
-        "new-parens": "error",
-        "newline-per-chained-call": "error",
-        "no-alert": "error",
-        "no-array-constructor": "error",
-        "no-await-in-loop": "error",
-        "no-bitwise": "error",
-        "no-caller": "error",
-        "no-confusing-arrow": "error",
-        "no-console": "off",
-        "no-constructor-return": "error",
-        "no-continue": "error",
-        "no-div-regex": "error",
-        "no-duplicate-imports": "error",
-        "no-else-return": [
-            "error",
-            {
-                "allowElseIf": true
-            }
-        ],
-        "no-empty-function": "off",
-        "no-eq-null": "error",
-        "no-eval": "error",
-        "no-extend-native": "error",
-        "no-extra-bind": "error",
-        "no-extra-label": "error",
-        // "no-extra-parens": "error",
-        "no-floating-decimal": "error",
-        "no-implicit-coercion": "error",
-        "no-implicit-globals": "error",
-        "no-implied-eval": "error",
-        "no-inline-comments": "off",
-        "no-invalid-this": "error",
-        "no-iterator": "error",
-        "no-label-var": "error",
-        "no-labels": "error",
-        "no-lone-blocks": "error",
-        "no-lonely-if": "error",
-        "no-loop-func": "error",
-        "no-loss-of-precision": "error",
-        "no-magic-numbers": "off",
-        "no-mixed-operators": "error",
-        "no-multi-assign": "error",
-        "no-multi-spaces": "error",
-        "no-multi-str": "error",
-        "no-multiple-empty-lines": "error",
-        "no-negated-condition": "off",
-        "no-nested-ternary": "error",
-        "no-new": "error",
-        "no-new-func": "error",
-        "no-new-object": "error",
-        "no-new-wrappers": "error",
-        "no-nonoctal-decimal-escape": "error",
-        "no-octal-escape": "error",
-        "no-param-reassign": "off",
-        "no-plusplus": "off",
-        "no-promise-executor-return": "error",
-        "no-proto": "error",
-        "no-restricted-exports": "error",
-        "no-restricted-globals": "error",
-        "no-restricted-imports": "error",
-        "no-restricted-properties": "error",
-        "no-restricted-syntax": "error",
-        "no-return-assign": "error",
-        "no-return-await": "error",
-        "no-script-url": "error",
-        "no-self-compare": "error",
-        "no-sequences": "error",
-        "no-shadow": "off",
-        "no-tabs": "error",
-        "no-template-curly-in-string": "error",
-        "no-ternary": "off",
-        "no-throw-literal": "error",
-        "no-trailing-spaces": "off",
-        "no-undef-init": "error",
-        "no-undefined": "error",
-        "no-underscore-dangle": "off",
-        "no-unmodified-loop-condition": "error",
-        "no-unneeded-ternary": "error",
-        "no-unreachable-loop": "error",
-        "no-unsafe-optional-chaining": "error",
-        "no-unused-expressions": "error",
-        "no-use-before-define": "off",
-        "no-useless-backreference": "error",
-        "no-useless-call": "error",
-        "no-useless-computed-key": "error",
-        "no-useless-concat": "error",
-        "no-useless-constructor": "error",
-        "no-useless-rename": "error",
-        "no-useless-return": "error",
-        "no-var": "error",
-        "no-void": "error",
-        "no-warning-comments": "warn",
-        "no-whitespace-before-property": "error",
-        // "nonblock-statement-body-position": ["warn", "below"],
-        "object-curly-newline": "error",
-        "object-curly-spacing": "off",
-        // "object-property-newline": "error",
-        "object-shorthand": "error",
-        "one-var": "off",
-        "one-var-declaration-per-line": "error",
-        "operator-assignment": [
-            "error",
-            "always"
-        ],
-        "operator-linebreak": "off",
-        "padded-blocks": "off",
-        "padding-line-between-statements": "error",
-        "prefer-arrow-callback": "error",
-        "prefer-const": "error",
-        "prefer-destructuring": "error",
-        "prefer-exponentiation-operator": "error",
-        "prefer-named-capture-group": "error",
-        "prefer-numeric-literals": "error",
-        "prefer-object-spread": "error",
-        "prefer-promise-reject-errors": "error",
-        "prefer-regex-literals": "error",
-        "prefer-rest-params": "error",
-        "prefer-spread": "error",
-        "prefer-template": "off",
-        "quote-props": "off",
-        "quotes": "off",
-        "radix": [
-            "error",
-            "as-needed"
-        ],
-        "require-atomic-updates": "error",
-        "require-await": "error",
-        "require-unicode-regexp": "off",
-        "rest-spread-spacing": "error",
-        "semi": "warn",
-        "semi-spacing": "warn",
-        "semi-style": [
-            "error",
-            "last"
-        ],
-        "sort-keys": "off",
-        "sort-vars": "off",
-        "space-before-blocks": "error",
-        "space-before-function-paren": "off",
-        "space-in-parens": [
-            "error",
-            "never"
-        ],
-        "space-infix-ops": "off",
-        "space-unary-ops": "error",
-        "spaced-comment": "off",
-        "strict": "error",
-        "switch-colon-spacing": "error",
-        "symbol-description": "error",
-        "template-curly-spacing": "off",
-        "template-tag-spacing": "error",
-        "unicode-bom": [
-            "error",
-            "never"
-        ],
-        "vars-on-top": "error",
-        "wrap-iife": "error",
-        "wrap-regex": "error",
-        "yield-star-spacing": "error",
-        "yoda": [
-            "error",
-            "never"
-        ]
+        "indent": "warn"
     }
 }

src/pages/admin/Flags.tsx

@@ -1,108 +1,132 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Flag as APIFlag } from "../../@types/ApiStructures";
-import { OrganisedFlags, capitalise, get, organiseFlags } from "../../util/Util";
-import { ClickToEdit, Dropdown, InputElementType, NumberInput, StringInput, ToggleSwitch } from "../../components/InputElements";
-import { PageButtons } from "../../components/PageControls";
+import React, { useEffect, useRef, useState } from 'react';
+import { Flag as APIFlag } from '../../@types/ApiStructures';
+import { OrganisedFlags, capitalise, get, organiseFlags, patch } from '../../util/Util';
+import { ClickToEdit, Dropdown, NumberInput, StringInput, ToggleSwitch } from '../../components/InputElements';
+import { PageButtons } from '../../components/PageControls';
 
-const Flag = ({ flag: incoming }: { flag: APIFlag }) => {
+const Flag = ({ flag: incoming }: { flag: APIFlag }) => 
+{
 
-    const [flag, setFlag] = useState(incoming);
+    const [ flag, setFlag ] = useState(incoming);
     const [unsaved, setUnsaved] = useState(false);
+    const [error, setError] = useState<string>();
     const valueRef = useRef<HTMLInputElement>(null);
 
-    const updateFlag = (f: APIFlag) => {
-        console.log(f);
+    const updateFlag = (f: APIFlag) => 
+    {
         setFlag(f);
         setUnsaved(true);
     };
 
-    const save = () => {
-        console.log('save');
-        console.log(flag);
+    const save = async () => 
+    {
+        const response = await patch(`/api/flags/${flag.id}`, flag);
+        if (response.success)
             setUnsaved(false);
+        else        
+            setError(response.message)
     };
 
     let Input = <p>Loading...</p>;
-    if (flag.type === 'string') Input = <StringInput onChange={() => setUnsaved(true)} inputRef={valueRef} value={flag.value as string} />;
-    else if (flag.type === 'number') Input = <NumberInput onChange={() => setUnsaved(true)} inputRef={valueRef} value={flag.value as number} type='float' />;
-    else if (flag.type === 'boolean') Input = <ToggleSwitch onChange={() => setUnsaved(true)} inputRef={valueRef} value={flag.value as boolean} />;
+    if (flag.type === 'string') 
+        Input = <StringInput onChange={() => setUnsaved(true)} inputRef={valueRef} value={flag.value as string} />;
+    else if (flag.type === 'number') 
+        Input = <NumberInput onChange={() => setUnsaved(true)} inputRef={valueRef} value={flag.value as number} type='float' />;
+    else if (flag.type === 'boolean') 
+        Input = <ToggleSwitch onChange={() => setUnsaved(true)} inputRef={valueRef} value={flag.value as boolean} />;
 
     return <div className='flag mt-0 mb-1'>
+        {/* TODO: Improve these*/}
         {unsaved && <i><small>Unsaved changes</small></i>}
-        <h3 className="mt-0 mb-1">
+        {error && <p>{error}</p>}
+        <h3 className='mt-0 mb-1'>
             <ClickToEdit onUpdate={val => updateFlag({ ...flag, name: val })} value={flag.name} />
         </h3>
-        <p className="mt-0 mb-1"><b>ID:</b> {flag.id}</p>
-        <p className="mt-0 mb-1">
+        <p className='mt-0 mb-1'><b>ID:</b> {flag.id}</p>
+        <p className='mt-0 mb-1'>
             <b>Environment: </b>
             <ClickToEdit onUpdate={val => updateFlag({ ...flag, env: val })} value={flag.env} />
         </p>
-        <p className="mt-0 mb-1">
+        <p className='mt-0 mb-1'>
             <b>Consumer: </b>
             <ClickToEdit onUpdate={val => updateFlag({ ...flag, consumer: val })} value={flag.consumer} />
         </p>
-        <p className="mt-0 mb-1">
+        <p className='mt-0 mb-1'>
             <b>Hierarchy: </b>
             <ClickToEdit onUpdate={val => updateFlag({ ...flag, hierarchy: val })} value={flag.hierarchy} />
         </p>
-        <p className="mt-0 mb-1">
+        <p className='mt-0 mb-1'>
             <b>Value: </b>
             {Input}
         </p>
-        <button className="button danger">Delete</button>
-        {unsaved && <button onClick={save} className="button primary">Save</button>}
+        <button className='button danger'>Delete</button>
+        {unsaved && <button onClick={save} className='button primary'>Save</button>}
     </div>;
 
 };
 
-const FlagTile = ({ flag }: { flag: APIFlag }) => {
-    return <div className="card tile">
+const FlagTile = ({ flag }: { flag: APIFlag }) => 
+{
+    return <div className='card tile'>
         <Flag flag={flag} />
     </div>;
 };
 
 
-const FlagListElement = ({ flag }: { flag: APIFlag, onClick?: React.ReactEventHandler }) => {
+const FlagListElement = ({ flag }: { flag: APIFlag, onClick?: React.ReactEventHandler }) => 
+{
     return <details className='card list-element mt-2 mb-2'>
-        <summary className="clickable">
-            <i className="list-carrot"></i>
+        <summary className='clickable'>
+            <i className='list-carrot'></i>
             <b>{flag.name}</b>&nbsp;[{flag.type}] ({flag.id})
         </summary>
         <Flag flag={flag} />
     </details>;
 };
 
-const ListCategory = ({ flags, name, setFlag }: { flags: OrganisedFlags, name: string, setFlag?: (flag: APIFlag) => void }) => {
+const ListCategory = ({ flags, name, setFlag }: { flags: OrganisedFlags, name: string, setFlag?: (flag: APIFlag) => void }) => 
+{
 
     const categories = Object.keys(flags);
     const elements: JSX.Element[] = [];
-    for (const category of categories) {
+    for (const category of categories) 
+    {
         const element = flags[category];
         if (element.id)
-            elements.push(<FlagListElement onClick={() => setFlag && setFlag(element as APIFlag)} key={element.id as string} flag={element as APIFlag} />);
+            elements.push(<FlagListElement
+                onClick={() => setFlag && setFlag(element as APIFlag)}
+                key={element.id as string}
+                flag={element as APIFlag}
+            />);
         else
             elements.push(<ListCategory setFlag={setFlag} key={category} name={category} flags={element as OrganisedFlags} />);
     }
 
-    const [hidden, setHidden] = useState(true);
+    const [ hidden, setHidden ] = useState(true);
 
-    if (name === 'root') return <div>
+    if (name === 'root') 
+        return <div>
             {elements}
         </div>;
 
-    return <div className={`list category${ hidden ? "" : " open" }`}>
-        <b className="clickable listHeader" onClick={() => { setHidden(!hidden); }}><i className="list-carrot"></i> {capitalise(name || 'Unordered')}</b>
-        <div className="listBody">
+    return <div className={`list category${hidden ? '' : ' open'}`}>
+        <b className='clickable listHeader' onClick={() => 
+        {
+            setHidden(!hidden); 
+        }}><i className='list-carrot'></i> {capitalise(name || 'Unordered')}</b>
+        <div className='listBody'>
             {elements}
         </div>
     </div>;
 };
 
-const ListView = ({ flags }: { flags: APIFlag[] }) => {
+const ListView = ({ flags }: { flags: APIFlag[] }) => 
+{
     const organised = organiseFlags(flags);
 
-    const [currentFlag, setCurrentFlag] = useState<APIFlag | null>(null);
-    const selectFlag = (flag: APIFlag) => {
+    const [ currentFlag, setCurrentFlag ] = useState<APIFlag | null>(null);
+    const selectFlag = (flag: APIFlag) => 
+    {
         console.log(flag);
         setCurrentFlag(flag);
     };
@@ -119,9 +143,10 @@ const ListView = ({ flags }: { flags: APIFlag[] }) => {
     return <ListCategory setFlag={(flag: APIFlag) => selectFlag(flag)} name={'root'} flags={organised} />;
 };
 
-const TileView = ({ flags, children }: { flags: APIFlag[], children: React.ReactNode }) => {
+const TileView = ({ flags, children }: { flags: APIFlag[], children: React.ReactNode }) => 
+{
     return <div>
-        <div className="flag-list-tiles">
+        <div className='flag-list-tiles'>
             {flags.map(flag => <FlagTile key={flag.id} flag={flag} />)}
         </div>
         {children}
@@ -129,34 +154,43 @@ const TileView = ({ flags, children }: { flags: APIFlag[], children: React.React
 };
 
 
-const FlagList = () => {
+const FlagList = () => 
+{
 
     const searchBarRef = useRef<HTMLInputElement>(null);
-    const [flags, setFlags] = useState<APIFlag[]>([]);
-    const [error, setError] = useState<string | null>(null);
-    const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
-    const [availableFilters, setAvailableFilters] = useState<string[] | null>(null);
-    const [nameSearch, setNameSearch] = useState<string>('');
-    const [page, setPage] = useState(1);
-    const [pages, setPages] = useState(1);
-    const [listView, toggleList] = useState(false);
+    const [ flags, setFlags ] = useState<APIFlag[]>([]);
+    const [ error, setError ] = useState<string | null>(null);
+    const [ selectedFilters, setSelectedFilters ] = useState<string[]>([]);
+    const [ availableFilters, setAvailableFilters ] = useState<string[] | null>(null);
+    const [ nameSearch, setNameSearch ] = useState<string>('');
+    const [ page, setPage ] = useState(1);
+    const [ pages, setPages ] = useState(1);
+    const [ listView, toggleList ] = useState(false);
 
-    useEffect(() => {
-        (async () => {
+    useEffect(() => 
+    {
+        (async () => 
+        {
 
             const query: { [key: string]: string[] | boolean } = {};
-            for (const selected of selectedFilters) {
-                const [prop, val] = selected.split(':');
-                if (!query[prop]) query[prop] = [val];
-                else (query[prop] as string[]).push(val);
+            for (const selected of selectedFilters) 
+            {
+                const [ prop, val ] = selected.split(':');
+                if (query[prop]) 
+                    (query[prop] as string[]).push(val);
+                else 
+                    query[prop] = [ val ];
             }
 
-            if (nameSearch) query.name = [nameSearch];
-            if (listView) query.all = true;
+            if (nameSearch) 
+                query.name = [ nameSearch ];
+            if (listView) 
+                query.all = true;
 
             const response = await get('/api/flags', query);
 
-            if (!response.success || !response.data) {
+            if (!response.success || !response.data) 
+            {
                 setFlags([]);
                 return setError(response.message as string);
             }
@@ -168,7 +202,7 @@ const FlagList = () => {
             setError(null);
 
         })();
-    }, [selectedFilters, nameSearch, page, listView]);
+    }, [ selectedFilters, nameSearch, page, listView ]);
 
     return <div className='col-12-lg col-12'>
 
@@ -176,24 +210,27 @@ const FlagList = () => {
         <div>
             <StringInput
                 inputRef={searchBarRef}
-                onBlur={() => {
+                onBlur={() => 
+                {
                     setNameSearch(searchBarRef.current?.value || '');
                 }}
-                onKeyUp={(event) => {
+                onKeyUp={(event) => 
+                {
                     if (event.key === 'Enter')
                         setNameSearch(searchBarRef.current?.value || '');
                 }}
-                placeholder="Flag name or ID"
+                placeholder='Flag name or ID'
             />
             {availableFilters && <Dropdown>
                 <Dropdown.Header>
                     {selectedFilters.length === 0
-                        ? <p className="placeholder">Click to filter</p>
+                        ? <p className='placeholder'>Click to filter</p>
                         : selectedFilters.map(f => <Dropdown.Item
                             key={f}
-                            onClick={() => {
+                            onClick={() => 
+                            {
                                 setSelectedFilters(selectedFilters.filter(ff => f !== ff));
-                                setAvailableFilters([...availableFilters, f]);
+                                setAvailableFilters([ ...availableFilters, f ]);
                             }}
                         >
                             {f}
@@ -204,9 +241,10 @@ const FlagList = () => {
                 <Dropdown.ItemList>
                     {availableFilters.map(f => <Dropdown.Item
                         key={f}
-                        onClick={() => {
+                        onClick={() => 
+                        {
                             setAvailableFilters(availableFilters.filter(ff => f !== ff));
-                            setSelectedFilters([...selectedFilters, f]);
+                            setSelectedFilters([ ...selectedFilters, f ]);
                         }}
                     >
                         {f}
@@ -216,13 +254,14 @@ const FlagList = () => {
         </div>
 
         <h4>Flags</h4>
-        <ToggleSwitch value={listView} onChange={(event) => {
+        <ToggleSwitch value={listView} onChange={(event) => 
+        {
             toggleList(event.target.checked);
         }}>List View:</ToggleSwitch>
         {error && <p>{error}</p>}
-        {listView ?
-            <ListView flags={flags} /> :
-            <TileView flags={flags}>
+        {listView
+            ? <ListView flags={flags} />
+            : <TileView flags={flags}>
                 <PageButtons {...{ page, setPage, pages }} />
 
             </TileView>}
@@ -231,7 +270,8 @@ const FlagList = () => {
 
 };
 
-const CreateFlag = () => {
+const CreateFlag = () => 
+{
     return <div className='col-6-lg col-12'>
         <h4>Create Flag</h4>
 
@@ -241,7 +281,8 @@ const CreateFlag = () => {
     </div>;
 };
 
-const Flags = () => {
+const Flags = () => 
+{
 
     return <div className='row'>
 

src/util/Util.ts

@@ -6,135 +6,167 @@ type HttpOpts = {
     method: string
 }
 
-export const getUser = () => {
+export const getUser = () => 
+{
     const data = sessionStorage.getItem('user');
-    if (data) return JSON.parse(data);
+    if (data) 
+        return JSON.parse(data);
     return null;
 };
 
-export const clearSession = () => {
+export const clearSession = () => 
+{
     sessionStorage.removeItem('user');
 };
 
-export const setSession = (user: User) => {
+export const setSession = (user: User) => 
+{
     sessionStorage.setItem('user', JSON.stringify(user));
 };
 
-export const fetchUser = async (force = false) => {
+export const fetchUser = async (force = false) => 
+{
     const user = getUser();
-    if (!force && user) return user;
+    if (!force && user) 
+        return user;
 
     const result = await get('/api/user');
-    if (result.status === 200) {
+    if (result.status === 200) 
+    {
         setSession(result.data as User);
         return result.data;
     }
     return result;
 };
 
-export const setSettings = (settings: ClientSettings) => {
-    if(settings) sessionStorage.setItem('settings', JSON.stringify(settings));
+export const setSettings = (settings: ClientSettings) => 
+{
+    if(settings) 
+        sessionStorage.setItem('settings', JSON.stringify(settings));
 };
 
-export const getSettings = (): ClientSettings | null => {
+export const getSettings = (): ClientSettings | null => 
+{
     const data = sessionStorage.getItem('settings');
-    if (data) return JSON.parse(data);
+    if (data) 
+        return JSON.parse(data);
     return null;
 };
 
-const parseResponse = async (response: Response): Promise<Res> => {
+const parseResponse = async (response: Response): Promise<Res> => 
+{
     const { headers: rawHeaders, status } = response;
     // Fetch returns heders as an interable for some reason
-    const headers = [...rawHeaders].reduce((acc, [key, val]) => {
+    const headers = [...rawHeaders].reduce((acc, [key, val]) => 
+    {
         acc[key.toLowerCase()] = val;
         return acc;
     }, {} as {[key: string]: string});
     const success = status >= 200 && status < 300;
     const base = { success, status };
 
-    if (status === 401) {
+    if (status === 401) 
+    {
         clearSession();
         if (!location.pathname.includes('/login')
         && !location.pathname.includes('/register')
-        && location.pathname !== '/') location.pathname = '/login';
+        && location.pathname !== '/') 
+            location.pathname = '/login';
     }
 
-    if (headers['content-type']?.includes('application/json')) {
+    if (headers['content-type']?.includes('application/json')) 
+    {
         const data = await response.json();
         return {...base, data};
     }
     return { ...base, message: (await response.text() || response.statusText) };
 };
 
-export const post = async (url: string, body?: object | string, opts: ReqOptions = {}) => {
+export const post = async (url: string, body?: object | string, opts: ReqOptions = {}) => 
+{
     
     const options: HttpOpts & RequestOptions = {
-        method: 'post'
+        method: 'POST'
     };
 
-    if (opts.headers !== null) {
+    if (opts.headers !== null) 
+    {
         options.headers = {
             'Content-Type': 'application/json',
             ...opts.headers || {}
         };
     }
 
-    if (options.headers && options.headers['Content-Type'] === 'application/json' && body) options.body = JSON.stringify(body);
-    else options.body = body as string;
+    if (options.headers && options.headers['Content-Type'] === 'application/json' && body) 
+        options.body = JSON.stringify(body);
+    else 
+        options.body = body as string;
 
     console.log(url, options);
     const response = await fetch(url, options);
     return parseResponse(response);
 };
 
-export const patch = async (url: string, body: object | string, opts: RequestOptions = {}) => {
+export const patch = async (url: string, body: object | string, opts: RequestOptions = {}) => 
+{
     const options: HttpOpts & RequestOptions = {
-        method: 'patch'
+        method: 'PATCH'
     };
 
-    if (opts.headers !== null) {
+    if (opts.headers !== null) 
+    {
         options.headers = {
             'Content-Type': 'application/json',
             ...opts.headers || {}
         };
     }
 
-    if (options.headers && options.headers['Content-Type'] === 'application/json' && body) options.body = JSON.stringify(body);
-    else options.body = body as string;
+    if (options.headers && options.headers['Content-Type'] === 'application/json' && body) 
+        options.body = JSON.stringify(body);
+    else 
+        options.body = body as string;
     
+    console.log(url, options);
     const response = await fetch(url, options);
     return parseResponse(response);
 
 };
 
-export const get = async (url: string, params?: {[key: string]: boolean | string | number | string[] | number[]}) => {
-    if (params) url += '?' + Object.entries(params)
+export const get = async (url: string, params?: {[key: string]: boolean | string | number | string[] | number[]}) => 
+{
+    if (params) 
+        url += '?' + Object.entries(params)
             .map(([key, val]) => `${key}=${val instanceof Array ? val.join(',') : val}`)
             .join('&');
     const response = await fetch(url);
     return parseResponse(response);
 };
 
-export const del = async (url: string, body?: object | string, opts: RequestOptions = {}) => {
+export const del = async (url: string, body?: object | string, opts: RequestOptions = {}) => 
+{
     const options: HttpOpts & RequestOptions = {
-        method: 'delete'
+        method: 'DELETE'
     };
 
-    if (opts.headers !== null) {
+    if (opts.headers !== null) 
+    {
         options.headers = {
             'Content-Type': 'application/json',
             ...opts.headers || {}
         };
     }
 
-    if (options.headers && options.headers['Content-Type'] === 'application/json' && body) options.body = JSON.stringify(body);
-    else options.body = body as string;
+    if (options.headers && options.headers['Content-Type'] === 'application/json' && body) 
+        options.body = JSON.stringify(body);
+    else 
+        options.body = body as string;
 
     const response = await fetch(url, options);
     return parseResponse(response);
 };
 
-export const capitalise = (str: string) => {
+export const capitalise = (str: string) => 
+{
     const first = str[0].toUpperCase();
     return `${first}${str.substring(1)}`;
 };
@@ -142,12 +174,15 @@ export const capitalise = (str: string) => {
 export type OrganisedFlags = {
     [key: string]: Flag | OrganisedFlags
 }
-export const organiseFlags = (flags: Flag[]) => {
+export const organiseFlags = (flags: Flag[]) => 
+{
     const obj: OrganisedFlags = {};
-    for (const flag of flags) {
+    for (const flag of flags) 
+    {
         const hierarchy = flag.hierarchy.split(':');
         let selected = obj;
-        for (let i = 0; i < hierarchy.length; i++) {
+        for (let i = 0; i < hierarchy.length; i++) 
+        {
             const rank = hierarchy[i];
             if (!selected[rank])
                 selected[rank] = {} as OrganisedFlags;