mirror of
				https://gitlab.nic.cz/turris/reforis/foris-js.git
				synced 2025-11-03 23:00:31 +01:00 
			
		
		
		
	Resolve "Discuss and implement proper API methods."
This commit is contained in:
		@@ -1,41 +0,0 @@
 | 
			
		||||
/*
 | 
			
		||||
 * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
 | 
			
		||||
 *
 | 
			
		||||
 * This is free software, licensed under the GNU General Public License v3.
 | 
			
		||||
 * See /LICENSE for more information.
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
import { useReducer, useCallback } from "react";
 | 
			
		||||
import axios from "axios";
 | 
			
		||||
 | 
			
		||||
import {
 | 
			
		||||
    API_ACTIONS, TIMEOUT, HEADERS, APIReducer, getErrorMessage,
 | 
			
		||||
} from "./utils";
 | 
			
		||||
 | 
			
		||||
export function useAPIDelete(url) {
 | 
			
		||||
    const [state, dispatch] = useReducer(APIReducer, {
 | 
			
		||||
        isSending: false,
 | 
			
		||||
        isError: false,
 | 
			
		||||
        isSuccess: false,
 | 
			
		||||
        data: null,
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    const requestDelete = useCallback(async () => {
 | 
			
		||||
        dispatch({ type: API_ACTIONS.INIT });
 | 
			
		||||
        try {
 | 
			
		||||
            await axios.delete(url, {
 | 
			
		||||
                timeout: TIMEOUT,
 | 
			
		||||
                headers: HEADERS,
 | 
			
		||||
            });
 | 
			
		||||
            dispatch({ type: API_ACTIONS.SUCCESS });
 | 
			
		||||
        } catch (error) {
 | 
			
		||||
            dispatch({
 | 
			
		||||
                type: API_ACTIONS.FAILURE,
 | 
			
		||||
                payload: getErrorMessage(error),
 | 
			
		||||
                status: error.response.status,
 | 
			
		||||
            });
 | 
			
		||||
        }
 | 
			
		||||
    }, [url]);
 | 
			
		||||
 | 
			
		||||
    return [state, requestDelete];
 | 
			
		||||
}
 | 
			
		||||
@@ -1,65 +0,0 @@
 | 
			
		||||
/*
 | 
			
		||||
 * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
 | 
			
		||||
 *
 | 
			
		||||
 * This is free software, licensed under the GNU General Public License v3.
 | 
			
		||||
 * See /LICENSE for more information.
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
import { useReducer, useCallback } from "react";
 | 
			
		||||
import axios from "axios";
 | 
			
		||||
 | 
			
		||||
import { ForisURLs } from "forisUrls";
 | 
			
		||||
import { API_ACTIONS, TIMEOUT } from "./utils";
 | 
			
		||||
 | 
			
		||||
const APIGetReducer = (state, action) => {
 | 
			
		||||
    switch (action.type) {
 | 
			
		||||
    case API_ACTIONS.INIT:
 | 
			
		||||
        return {
 | 
			
		||||
            ...state,
 | 
			
		||||
            isLoading: true,
 | 
			
		||||
            isError: false,
 | 
			
		||||
        };
 | 
			
		||||
    case API_ACTIONS.SUCCESS:
 | 
			
		||||
        return {
 | 
			
		||||
            ...state,
 | 
			
		||||
            isLoading: false,
 | 
			
		||||
            isError: false,
 | 
			
		||||
            data: action.payload,
 | 
			
		||||
        };
 | 
			
		||||
    case API_ACTIONS.FAILURE:
 | 
			
		||||
        if (action.status === 403) window.location.assign(ForisURLs.login);
 | 
			
		||||
        return {
 | 
			
		||||
            ...state,
 | 
			
		||||
            isLoading: false,
 | 
			
		||||
            isError: true,
 | 
			
		||||
            data: action.payload,
 | 
			
		||||
        };
 | 
			
		||||
    default:
 | 
			
		||||
        throw new Error();
 | 
			
		||||
    }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export function useAPIGet(url) {
 | 
			
		||||
    const [state, dispatch] = useReducer(APIGetReducer, {
 | 
			
		||||
        isLoading: false,
 | 
			
		||||
        isError: false,
 | 
			
		||||
        data: null,
 | 
			
		||||
    });
 | 
			
		||||
    const get = useCallback(async () => {
 | 
			
		||||
        dispatch({ type: API_ACTIONS.INIT });
 | 
			
		||||
        try {
 | 
			
		||||
            const result = await axios.get(url, {
 | 
			
		||||
                timeout: TIMEOUT,
 | 
			
		||||
            });
 | 
			
		||||
            dispatch({ type: API_ACTIONS.SUCCESS, payload: result.data });
 | 
			
		||||
        } catch (error) {
 | 
			
		||||
            dispatch({
 | 
			
		||||
                type: API_ACTIONS.FAILURE,
 | 
			
		||||
                payload: error.response.data,
 | 
			
		||||
                status: error.response.status,
 | 
			
		||||
            });
 | 
			
		||||
        }
 | 
			
		||||
    }, [url]);
 | 
			
		||||
 | 
			
		||||
    return [state, get];
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										86
									
								
								src/api/hooks.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										86
									
								
								src/api/hooks.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,86 @@
 | 
			
		||||
/*
 | 
			
		||||
 * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
 | 
			
		||||
 *
 | 
			
		||||
 * This is free software, licensed under the GNU General Public License v3.
 | 
			
		||||
 * See /LICENSE for more information.
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
import { useReducer, useCallback } from "react";
 | 
			
		||||
 | 
			
		||||
import { ForisURLs } from "forisUrls";
 | 
			
		||||
import {
 | 
			
		||||
    API_STATE, API_ACTIONS, API_METHODS, TIMEOUT, HEADERS, getErrorMessage,
 | 
			
		||||
} from "./utils";
 | 
			
		||||
 | 
			
		||||
const DATA_METHODS = ["POST", "PATCH", "PUT"];
 | 
			
		||||
 | 
			
		||||
function createAPIHook(method) {
 | 
			
		||||
    return (url, contentType) => {
 | 
			
		||||
        const [state, dispatch] = useReducer(APIReducer, {
 | 
			
		||||
            state: API_STATE.INIT,
 | 
			
		||||
            data: null,
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        const sendRequest = useCallback(async (data) => {
 | 
			
		||||
            const headers = { ...HEADERS };
 | 
			
		||||
            if (contentType) {
 | 
			
		||||
                headers["Content-Type"] = contentType;
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            dispatch({ type: API_ACTIONS.INIT });
 | 
			
		||||
            try {
 | 
			
		||||
                const request = API_METHODS[method];
 | 
			
		||||
                const config = { timeout: TIMEOUT, headers };
 | 
			
		||||
                let result;
 | 
			
		||||
                if (DATA_METHODS.includes(method)) {
 | 
			
		||||
                    result = await request(url, data, config);
 | 
			
		||||
                } else {
 | 
			
		||||
                    result = await request(url, config);
 | 
			
		||||
                }
 | 
			
		||||
                dispatch({ type: API_ACTIONS.SUCCESS, payload: result.data });
 | 
			
		||||
            } catch (error) {
 | 
			
		||||
                dispatch({
 | 
			
		||||
                    type: API_ACTIONS.FAILURE,
 | 
			
		||||
                    payload: getErrorMessage(error),
 | 
			
		||||
                    status: error.response.status,
 | 
			
		||||
                });
 | 
			
		||||
            }
 | 
			
		||||
        }, [url, contentType]);
 | 
			
		||||
        return [state, sendRequest];
 | 
			
		||||
    };
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function APIReducer(state, action) {
 | 
			
		||||
    switch (action.type) {
 | 
			
		||||
    case API_ACTIONS.INIT:
 | 
			
		||||
        return {
 | 
			
		||||
            ...state,
 | 
			
		||||
            state: API_STATE.SENDING,
 | 
			
		||||
        };
 | 
			
		||||
    case API_ACTIONS.SUCCESS:
 | 
			
		||||
        return {
 | 
			
		||||
            state: API_STATE.SUCCESS,
 | 
			
		||||
            data: action.payload,
 | 
			
		||||
        };
 | 
			
		||||
    case API_ACTIONS.FAILURE:
 | 
			
		||||
        if (action.status === 403) {
 | 
			
		||||
            window.location.assign(ForisURLs.login);
 | 
			
		||||
        }
 | 
			
		||||
        return {
 | 
			
		||||
            state: API_STATE.ERROR,
 | 
			
		||||
            data: action.payload,
 | 
			
		||||
        };
 | 
			
		||||
    default:
 | 
			
		||||
        throw new Error();
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const useAPIGet = createAPIHook("GET");
 | 
			
		||||
const useAPIPost = createAPIHook("POST");
 | 
			
		||||
const useAPIPatch = createAPIHook("PATCH");
 | 
			
		||||
const useAPIPut = createAPIHook("PUT");
 | 
			
		||||
const useAPIDelete = createAPIHook("DELETE");
 | 
			
		||||
 | 
			
		||||
export {
 | 
			
		||||
    useAPIGet, useAPIPost, useAPIPatch, useAPIPut, useAPIDelete,
 | 
			
		||||
};
 | 
			
		||||
@@ -1,40 +0,0 @@
 | 
			
		||||
/*
 | 
			
		||||
 * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
 | 
			
		||||
 *
 | 
			
		||||
 * This is free software, licensed under the GNU General Public License v3.
 | 
			
		||||
 * See /LICENSE for more information.
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
import { useReducer } from "react";
 | 
			
		||||
import axios from "axios";
 | 
			
		||||
 | 
			
		||||
import {
 | 
			
		||||
    API_ACTIONS, TIMEOUT, HEADERS, APIReducer, getErrorMessage,
 | 
			
		||||
} from "./utils";
 | 
			
		||||
 | 
			
		||||
export function useAPIPatch(url) {
 | 
			
		||||
    const [state, dispatch] = useReducer(APIReducer, {
 | 
			
		||||
        isSending: false,
 | 
			
		||||
        isError: false,
 | 
			
		||||
        isSuccess: false,
 | 
			
		||||
        data: null,
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    const patch = async (data) => {
 | 
			
		||||
        dispatch({ type: API_ACTIONS.INIT });
 | 
			
		||||
        try {
 | 
			
		||||
            const result = await axios.patch(url, data, {
 | 
			
		||||
                timeout: TIMEOUT,
 | 
			
		||||
                headers: HEADERS,
 | 
			
		||||
            });
 | 
			
		||||
            dispatch({ type: API_ACTIONS.SUCCESS, payload: result.data });
 | 
			
		||||
        } catch (error) {
 | 
			
		||||
            dispatch({
 | 
			
		||||
                type: API_ACTIONS.FAILURE,
 | 
			
		||||
                payload: getErrorMessage(error),
 | 
			
		||||
                status: error.response.status,
 | 
			
		||||
            });
 | 
			
		||||
        }
 | 
			
		||||
    };
 | 
			
		||||
    return [state, patch];
 | 
			
		||||
}
 | 
			
		||||
@@ -1,45 +0,0 @@
 | 
			
		||||
/*
 | 
			
		||||
 * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
 | 
			
		||||
 *
 | 
			
		||||
 * This is free software, licensed under the GNU General Public License v3.
 | 
			
		||||
 * See /LICENSE for more information.
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
import { useReducer } from "react";
 | 
			
		||||
import axios from "axios";
 | 
			
		||||
 | 
			
		||||
import {
 | 
			
		||||
    API_ACTIONS, TIMEOUT, HEADERS, APIReducer, getErrorMessage,
 | 
			
		||||
} from "./utils";
 | 
			
		||||
 | 
			
		||||
export function useAPIPost(url, contentType) {
 | 
			
		||||
    const [state, dispatch] = useReducer(APIReducer, {
 | 
			
		||||
        isSending: false,
 | 
			
		||||
        isError: false,
 | 
			
		||||
        isSuccess: false,
 | 
			
		||||
        data: null,
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    const headers = { ...HEADERS };
 | 
			
		||||
    if (contentType) {
 | 
			
		||||
        headers["Content-Type"] = contentType;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    const post = async (data) => {
 | 
			
		||||
        dispatch({ type: API_ACTIONS.INIT });
 | 
			
		||||
        try {
 | 
			
		||||
            const result = await axios.post(url, data, {
 | 
			
		||||
                timeout: TIMEOUT,
 | 
			
		||||
                headers,
 | 
			
		||||
            });
 | 
			
		||||
            dispatch({ type: API_ACTIONS.SUCCESS, payload: result.data });
 | 
			
		||||
        } catch (error) {
 | 
			
		||||
            dispatch({
 | 
			
		||||
                type: API_ACTIONS.FAILURE,
 | 
			
		||||
                payload: getErrorMessage(error),
 | 
			
		||||
                status: error.response.status,
 | 
			
		||||
            });
 | 
			
		||||
        }
 | 
			
		||||
    };
 | 
			
		||||
    return [state, post];
 | 
			
		||||
}
 | 
			
		||||
@@ -5,7 +5,36 @@
 | 
			
		||||
 * See /LICENSE for more information.
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
import { ForisURLs } from "forisUrls";
 | 
			
		||||
import axios from "axios";
 | 
			
		||||
 | 
			
		||||
export const HEADERS = {
 | 
			
		||||
    Accept: "application/json",
 | 
			
		||||
    "Content-Type": "application/json",
 | 
			
		||||
    "X-CSRFToken": getCookie("_csrf_token"),
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const TIMEOUT = 5000;
 | 
			
		||||
 | 
			
		||||
export const API_ACTIONS = {
 | 
			
		||||
    INIT: 1,
 | 
			
		||||
    SUCCESS: 2,
 | 
			
		||||
    FAILURE: 3,
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const API_STATE = {
 | 
			
		||||
    INIT: "init",
 | 
			
		||||
    SENDING: "sending",
 | 
			
		||||
    SUCCESS: "success",
 | 
			
		||||
    ERROR: "error",
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const API_METHODS = {
 | 
			
		||||
    GET: axios.get,
 | 
			
		||||
    POST: axios.post,
 | 
			
		||||
    PATCH: axios.patch,
 | 
			
		||||
    PUT: axios.put,
 | 
			
		||||
    DELETE: axios.delete,
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
function getCookie(name) {
 | 
			
		||||
    let cookieValue = null;
 | 
			
		||||
@@ -23,51 +52,6 @@ function getCookie(name) {
 | 
			
		||||
    return cookieValue;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export const HEADERS = {
 | 
			
		||||
    Accept: "application/json",
 | 
			
		||||
    "Content-Type": "application/json",
 | 
			
		||||
    "X-CSRFToken": getCookie("_csrf_token"),
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const TIMEOUT = 5000;
 | 
			
		||||
 | 
			
		||||
export const API_ACTIONS = {
 | 
			
		||||
    INIT: 1,
 | 
			
		||||
    SUCCESS: 2,
 | 
			
		||||
    FAILURE: 3,
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export function APIReducer(state, action) {
 | 
			
		||||
    switch (action.type) {
 | 
			
		||||
    case API_ACTIONS.INIT:
 | 
			
		||||
        return {
 | 
			
		||||
            ...state,
 | 
			
		||||
            isSending: true,
 | 
			
		||||
            isError: false,
 | 
			
		||||
            isSuccess: false,
 | 
			
		||||
        };
 | 
			
		||||
    case API_ACTIONS.SUCCESS:
 | 
			
		||||
        return {
 | 
			
		||||
            ...state,
 | 
			
		||||
            isSending: false,
 | 
			
		||||
            isError: false,
 | 
			
		||||
            isSuccess: true,
 | 
			
		||||
            data: action.payload,
 | 
			
		||||
        };
 | 
			
		||||
    case API_ACTIONS.FAILURE:
 | 
			
		||||
        if (action.status === 403) window.location.assign(ForisURLs.login);
 | 
			
		||||
        return {
 | 
			
		||||
            ...state,
 | 
			
		||||
            isSending: false,
 | 
			
		||||
            isError: true,
 | 
			
		||||
            isSuccess: false,
 | 
			
		||||
            data: action.payload,
 | 
			
		||||
        };
 | 
			
		||||
    default:
 | 
			
		||||
        throw new Error();
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function getErrorMessage(error) {
 | 
			
		||||
    let payload = "An unknown error occurred";
 | 
			
		||||
    if (error.response.headers["content-type"] === "application/json") {
 | 
			
		||||
 
 | 
			
		||||
@@ -9,7 +9,7 @@ import React, { useEffect, useState } from "react";
 | 
			
		||||
import PropTypes from "prop-types";
 | 
			
		||||
 | 
			
		||||
import { Spinner } from "bootstrap/Spinner";
 | 
			
		||||
import { useAPIPost } from "api/post";
 | 
			
		||||
import { useAPIPost } from "api/hooks";
 | 
			
		||||
 | 
			
		||||
import { Prompt } from "react-router";
 | 
			
		||||
import { useForisModule, useForm } from "../hooks";
 | 
			
		||||
 
 | 
			
		||||
@@ -8,10 +8,9 @@
 | 
			
		||||
import { useCallback, useEffect, useReducer } from "react";
 | 
			
		||||
import update from "immutability-helper";
 | 
			
		||||
 | 
			
		||||
import { useAPIGet } from "api/get";
 | 
			
		||||
import { useAPIGet } from "api/hooks";
 | 
			
		||||
import { useWSForisModule } from "webSockets/hooks";
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
const FORM_ACTIONS = {
 | 
			
		||||
    updateValue: 1,
 | 
			
		||||
    resetData: 2,
 | 
			
		||||
 
 | 
			
		||||
@@ -6,10 +6,10 @@
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
// API
 | 
			
		||||
export { useAPIGet } from "api/get";
 | 
			
		||||
export { useAPIPost } from "api/post";
 | 
			
		||||
export { useAPIDelete } from "api/delete";
 | 
			
		||||
export { useAPIPatch } from "api/patch";
 | 
			
		||||
export {
 | 
			
		||||
    useAPIGet, useAPIPost, useAPIDelete, useAPIPatch,
 | 
			
		||||
} from "api/hooks";
 | 
			
		||||
export { API_STATE } from "api/utils";
 | 
			
		||||
 | 
			
		||||
// Bootstrap
 | 
			
		||||
export { Alert, ALERT_TYPES } from "bootstrap/Alert";
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user