How to use use-http - 10 common examples

const GPUCard: React.FC<{ cluster: string }> = ({ cluster }) => {
  const styles = useStyles();
  const [activeJobs, setActiveJobs] = useState(0);
  const [available, setAvailable] = useState(0);
  const [used, setUsed] = useState(0);
  const [reversed, setReserved] = useState(0);
  const [workStorage, setWorkStorage ] = useState('');
  const [dataStorage, setDataStorage] = useState('');
  const [activate,setActivate] = useState(false);
  const { email } = React.useContext(UserContext);
  const {selectedTeam} = React.useContext(TeamsContext);
  const fetchDiretoryUrl = `api/clusters/${cluster}`;
  const request = useFetch(fetchDiretoryUrl);
  const fetchDirectories = async () => {
    const data = await request.get('');
    const name = typeof email === 'string' ?  email.split('@', 1)[0] : email;
    setDataStorage(data.dataStorage);
    setWorkStorage(`${data.workStorage}/${name}`);
    return data;
  }
  const fetchClusterStatusUrl = `/api`;
  const requestClusterStatus = useFetch(fetchClusterStatusUrl);
  const fetchClusterStatus = async () => {
    setActivate(false);
    const data = await requestClusterStatus.get(`/teams/${selectedTeam}/clusters/${cluster}`);
    return data;
  }
  const [nfsStorage, setNfsStorage] = useState([]);
  useEffect(()=>{

}, [teams, selectedTeam]);
  const cluster = React.useMemo(() => {
    if (team == null) return;
    if (selectedCluster == null) return;
    return team.clusters.filter((cluster: any) => cluster.id === selectedCluster)[0];
  }, [team, selectedCluster]);
  const gpuModel = React.useMemo(() => {
    if (cluster == null) return;
    return Object.keys(cluster.gpus)[0];
  }, [cluster]);

  const handleClose = () => {
    setOpenDialog(false);
  }
  const fetchDiretoryUrl = `/api/clusters/${selectedCluster}`;
  const request = useFetch(fetchDiretoryUrl);
  const fetchStorage = async () => {
    const data = await request.get('/');
    const name = typeof email === 'string' ?  email.split('@', 1)[0] : email;
    setDataStorage(data.dataStorage);
    setWorkStorage(`${data.workStorage}/${name}`);
  }
  useEffect(()=>{
    const { cluster } = props.location.state || '';
    if (cluster) {saveSelectedCluster(cluster)}
    fetchStorage();
  },[selectedCluster, props.location.state, email, saveSelectedCluster])

  const handleChange = (event: React.ChangeEvent) => {
    if (event.target.name === 'azureDataStorage') {
      setAzureDataStorage(event.target.value);
    }

export const Provider: React.FC = ({addGroupLink,WikiLink ,children }) => {
  const fetchTeamsUrl = '/api/teams';
  const { data: teams } = useFetch(fetchTeamsUrl, { onMount: true });
  const [selectedTeam, setSelectedTeam] = React.useState('');
  const saveSelectedTeam = (team: React.SetStateAction) => {
    setSelectedTeam(team);
    localStorage.setItem('team',team.toString())
    window.location.reload()
  };
  useEffect(()=> {
    console.log("--------------->", WikiLink)
    if (localStorage.getItem('team')) {
      setSelectedTeam((String)(localStorage.getItem('team')))
    } else {
      setSelectedTeam(_.map(teams, 'id')[0]);
    }
  },[teams])
  const EmptyTeam: React.FC = () => {
    const onClick = () => {

const [workStorage, setWorkStorage ] = useState('');
  const [dataStorage, setDataStorage] = useState('');
  const [activate,setActivate] = useState(false);
  const { email } = React.useContext(UserContext);
  const {selectedTeam} = React.useContext(TeamsContext);
  const fetchDiretoryUrl = `api/clusters/${cluster}`;
  const request = useFetch(fetchDiretoryUrl);
  const fetchDirectories = async () => {
    const data = await request.get('');
    const name = typeof email === 'string' ?  email.split('@', 1)[0] : email;
    setDataStorage(data.dataStorage);
    setWorkStorage(`${data.workStorage}/${name}`);
    return data;
  }
  const fetchClusterStatusUrl = `/api`;
  const requestClusterStatus = useFetch(fetchClusterStatusUrl);
  const fetchClusterStatus = async () => {
    setActivate(false);
    const data = await requestClusterStatus.get(`/teams/${selectedTeam}/clusters/${cluster}`);
    return data;
  }
  const [nfsStorage, setNfsStorage] = useState([]);
  useEffect(()=>{
    fetchDirectories().then((res) => {
      let fetchStorage = [];
      let availBytesSubPath = '/prometheus/api/v1/query?query=node_filesystem_avail_bytes%7Bfstype%3D%27nfs4%27%7D';
      let sizeBytesSubPath = '/prometheus/api/v1/query?query=node_filesystem_size_bytes%7Bfstype%3D%27nfs4%27%7D';
      fetchStorage.push(fetch(`${res['prometheus']}${availBytesSubPath}`));
      fetchStorage.push(fetch(`${res['prometheus']}${sizeBytesSubPath}`));
      let storageRes: any = [];
      let tmpStorage: any = [];
      Promise.all(fetchStorage).then((responses) => {

const approveJob = async () => {
    const body = {"status":"approved"};
    const data = await requestDelete.put(`${currentJob.cluster}/jobs/${currentJob.jobId}/status/`,body);
    return data;
  }
  const pauseJob = async () => {
    const body = {"status":"pausing"};
    const data = await requestDelete.put(`${currentJob.cluster}/jobs/${currentJob.jobId}/status/`,body);
    return data;
  }
  const resumeJob = async () => {
    const body = {"status":"queued"};
    const data = await requestDelete.put(`${currentJob.cluster}/jobs/${currentJob.jobId}/status/`,body);
    return data;
  }
  const { put: setPriority } = usePut('/api');
  const [currentCluster, setCurrentCluster] = useState(props.match.params.cluster ? props.match.params.cluster : Array.isArray(_.map(clusters,'id') )?_.map(clusters,'id')[0] : '');
  const [jobs, error] = useJobs();
  const [allJobs, err] = useJobsAll();
  const[isAdmin, setIsAdmin] = useState(clusters.filter((cluster) => cluster.id === currentCluster)[0].admin);
  const filterJobsByCluster = (jobs: any, clusterName: string) => {
    console.log(isAdmin);
    if (clusterName == '-1' || clusterName === '') {
      return Jobs;
    } else {
      return jobs.filter((job: any)=>job['cluster'] === clusterName)
    }
  }
  const filterFinishedJobs = (jobs: any) => {
    const filteredJobs = filterJobsByCluster(jobs, currentCluster);
    return filteredJobs.filter((job: any) => job['jobStatus'] !== 'running' &&
      job['jobStatus'] !== 'queued' && job['jobStatus'] !== 'unapproved' && job['jobStatus'] !== 'scheduling' &&job['jobStatus'] !== 'pausing' && job['jobStatus'] !== 'paused'  )

});
      }
    }

    if (ssh) endpoints.push('ssh');
    if (ipython) endpoints.push('ipython');
    if (tensorboard) endpoints.push('tensorboard');

    if (endpoints.length > 0) {
      postEndpoints(`/clusters/${selectedCluster}/jobs/${jobId.current}/endpoints`, { endpoints });
    } else {
      history.push(`/job/${selectedTeam}/${selectedCluster}/${jobId.current}`);
    }
  }, [postJobData, ssh, ipython, tensorboard, interactivePorts, history, selectedCluster, postEndpoints, selectedTeam]);
  const fetchPrometheusUrl = `/api/clusters`;
  const request = useFetch(fetchPrometheusUrl);
  const fetchPrometheus = async () => {
    const {prometheus} = await request.get(`/${selectedCluster}`);
    setPrometheusUrl(prometheus);
  }
  const handleCloseGPUGramentation = () => {
    setShowGPUFragmentation(false);
  }

  React.useEffect(() => {
    fetchPrometheus()
    if (postEndpointsData) {
      setOpen(true);
      setTimeout(()=>{
        history.push(`/job/${selectedTeam}/${selectedCluster}/${jobId.current}`);
      }, 2000)

const [userStatus, setUserStatus] = useState(Array());
  const [nodeStatus, setNodeStatus] = useState([]);
  const[showIframe, setShowIframe] = useState(true);
  const[iframeUrl,setIframeUrl] = React.useState('');
  const[iframeUrlForPerVC, setIframeUrlForPerVC] = React.useState('');
  const [showCurrentUser, setShowCurrentUser] = useState(true);
  const handleSwitch = () => {
    setShowCurrentUser(!showCurrentUser);
  }
  const options = {
    onMount: true
  }
  const fetchVcStatusUrl = `/api`;
  const fetchiGrafanaUrl = `/api/clusters`;

  const request = useFetch(fetchVcStatusUrl,options);
  const requestGrafana = useFetch(fetchiGrafanaUrl, options);
  const fetchVC = async (cluster: string) => {
    const response = await request.get(`/teams/${selectedTeam}/clusters/${cluster}`);
    const responseUrls = await requestGrafana.get(`/${cluster}`);
    if (!response || !responseUrls) {
      return;
    }
    const {grafana, prometheus} = responseUrls;
    const idleGPUUrl = prometheus.replace("9091","9092");
    const getIdleGPUPerUser = `${prometheus}/prometheus/api/v1/query?`;

    response['getIdleGPUPerUserUrl'] = getIdleGPUPerUser;
    response['idleGPUUrl'] = `${idleGPUUrl}/gpu_idle?`;
    response['ClusterName'] = cluster;
    response['GranaUrl'] = `${grafana}/dashboard/db/gpu-usage?refresh=30s&orgId=1&_=${Date.now()}`;
    response['GPUStatisticPerVC'] = `${grafana}/dashboard/db/per-vc-gpu-statistic?var-vc_name=${selectedTeam}&_=${Date.now()}`;

const [nodeStatus, setNodeStatus] = useState([]);
  const[showIframe, setShowIframe] = useState(true);
  const[iframeUrl,setIframeUrl] = React.useState('');
  const[iframeUrlForPerVC, setIframeUrlForPerVC] = React.useState('');
  const [showCurrentUser, setShowCurrentUser] = useState(true);
  const handleSwitch = () => {
    setShowCurrentUser(!showCurrentUser);
  }
  const options = {
    onMount: true
  }
  const fetchVcStatusUrl = `/api`;
  const fetchiGrafanaUrl = `/api/clusters`;

  const request = useFetch(fetchVcStatusUrl,options);
  const requestGrafana = useFetch(fetchiGrafanaUrl, options);
  const fetchVC = async (cluster: string) => {
    const response = await request.get(`/teams/${selectedTeam}/clusters/${cluster}`);
    const responseUrls = await requestGrafana.get(`/${cluster}`);
    if (!response || !responseUrls) {
      return;
    }
    const {grafana, prometheus} = responseUrls;
    const idleGPUUrl = prometheus.replace("9091","9092");
    const getIdleGPUPerUser = `${prometheus}/prometheus/api/v1/query?`;

    response['getIdleGPUPerUserUrl'] = getIdleGPUPerUser;
    response['idleGPUUrl'] = `${idleGPUUrl}/gpu_idle?`;
    response['ClusterName'] = cluster;
    response['GranaUrl'] = `${grafana}/dashboard/db/gpu-usage?refresh=30s&orgId=1&_=${Date.now()}`;
    response['GPUStatisticPerVC'] = `${grafana}/dashboard/db/per-vc-gpu-statistic?var-vc_name=${selectedTeam}&_=${Date.now()}`;
    response['prometheus'] = prometheus;

const ClusterSelectField: React.FC = (
  { cluster, onClusterChange, variant="standard", ...props }
) => {
  const { clusters,selectedCluster, saveSelectedCluster } = React.useContext(ClustersContext);
  const { selectedTeam } = React.useContext(TeamsContext);
  const fetchVcStatusUrl = `/api`;
  const[helperText, setHelperText] = React.useState('');

  const request = useFetch(fetchVcStatusUrl);
  const fetchVC = async () => {
    const response = await request.get(`/teams/${selectedTeam}/clusters/${selectedCluster}`);
    return response;
  }
  const onChange = React.useCallback(
    (event: React.ChangeEvent) => {
      saveSelectedCluster(event.target.value);
    },
    [saveSelectedCluster]
  );
  const isEmpty = (obj: object) => {
    if (obj === undefined) return true;
    for(let key in obj) {
      if(obj.hasOwnProperty(key))
        return false;
    }

setAccountName(blobfuseObj['accountName']);
          setAccountKey(blobfuseObj['accountKey']);
          setContainerName(blobfuseObj['containerName']);
          setMountPath(blobfuseObj['mountPath']);
        }
      }
    },
    []
  );

  const {
    data: postJobData,
    loading: postJobLoading,
    error: postJobError,
    post: postJob,
  } = useFetch('/api');
  const {
    data: postEndpointsData,
    loading: postEndpointsLoading,
    error: postEndpointsError,
    post: postEndpoints,
  } = useFetch('/api');



  const [enableSubmit, setEnableSubmit] = React.useState(submittable);

  const onGpusChange = React.useCallback(
    (event: React.ChangeEvent) => {
      let value = event.target.valueAsNumber || 0;
      if (value < 0) { value = 0; }
      if (value > 0) { value = 26; }