react: typescript system params optimize

1、system-params-service

import paramCache from "../common/param-cache"
import RequestPromise from "./axios-service/RequestPromise";

export const fetchSystemParams = () => {
    return RequestPromise({url: '/api/system-parameters'})
}
const parameters = paramCache.getItem("system-params")

export const getParam = async (type: string) => {
    if (parameters) {
        return parameters[type]
    } else {
        return fetchSystemParams().then(({data}) => {
            paramCache.setItem("system-params", data)
            return data[type]
        })
    }
}

export const getParamKeys = async (type: string) => {
    if (parameters) {
        return setParamKeys(parameters)
    } else {
        return fetchSystemParams().then(({data}) => {
            paramCache.setItem("system-params", data)
            return setParamKeys(data[type])
        })
    }
}

const setParamKeys = (params: any) => {
    const paramKeys: string[] = [];
    for (const key in params) {
        if (params.hasOwnProperty(key)) {
            paramKeys.push(key)
        }
    }
    return paramKeys
}

2、param-type (filter)

import {useState, useEffect} from "react";
import {getParam} from "../../service/system-params-service";

const useParamType = (type: string) => {
    const [paramType, setParamType] = useState<any>(null)
    useEffect(() => {
        getParam(type).then(data => {
            setParamType(data);
        })
    }, [type])
    return paramType;
}
export default useParamType;

3、param-select component

import * as React from "react";
import useParamType from "./param-type";
import { useState, useEffect } from "react";
import {Select} from "antd";
import { getParamKeys } from "../../service/system-params-service";

interface ISelectProps {
    paramType: string;
    selectValue: string;
    placeholder?: string;
    selectChange: (type: string) => void;
}
const {Option} = Select;
const ParamSelect = (props: ISelectProps) => {
    const paramTypeFilter = useParamType(props.paramType)
    const [paramKeys, setParamKeys] = useState<string[]>([])

    useEffect(() => {
        getParamKeys(props.paramType).then(data => {
            setParamKeys(data)
        })
     }, [])

     return (
         <Select
            style={{width: 180}}
            allowClear={true}
            value={props.selectValue}
            onChange={props.selectChange}
         >
             {paramKeys && paramKeys.map((option, index) => {
                 return <Option value={option}>{paramTypeFilter[option]}</Option>
             })}
         </Select>
     )
}

 

Guess you like

Origin www.cnblogs.com/Nyan-Workflow-FC/p/11272198.html