frontend2/src/hooks/LogListContext.tsx

import React, { useState, useCallback, useEffect } from "react";
import { LogFilter, LogHeader, listLogs, logFilterToQueryString } from "../lib/rpdata/logs"; const stuff = [0,1,2,3,4,5,6,7,8];
import gqlBrowserClient from "../lib/client/graphql";
import { useRouter } from "next/dist/client/router";

export interface LogListContextData {
  filter: LogFilter
  headers: LogHeader[]
  loading: boolean
  error: Error | null

  updateFilter: (filter: LogFilter) => void
  refresh: () => void
}

const LogListContext: React.Context<LogListContextData> = React.createContext({
  filter:{}, error: null, headers:[], loading:Boolean(), updateFilter:(filter)=>{},refresh:()=>{}
});

interface StaticLogListContextProviderProps {
  filter: LogFilter
  header: LogHeader[]
  children: any
}

export function StaticLogListContextProvider(props: StaticLogListContextProviderProps) {
  const updateFilterCallback = useCallback((_) => {
    throw new Error("StaticLogListContextProvider's filter cannot be updated");
  }, []);

  const refreshCallback = useCallback(() => {
    throw new Error("StaticLogListContextProvider cannot be refreshed");
  }, []);

  return (
    <LogListContext.Provider value={{
      filter: props.filter,
      headers: props.header,
      updateFilter: updateFilterCallback,
      refresh: refreshCallback,
      loading: false,
      error: null,
    }}>
      {props.children}
    </LogListContext.Provider>
  );
}

interface LogListContextProviderProps {
  initialFilter: LogFilter
  initialHeader: LogHeader[]
  children: any
}

export function LogListContextProvider(props: LogListContextProviderProps) {
  const [dirty, setDirty] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error>(null);
  const [filter, setFilter] = useState<LogFilter>(props.initialFilter);
  const [headers, setHeaders] = useState<LogHeader[]>(props.initialHeader);
  const router = useRouter();

  const updateFilter = useCallback((filter: LogFilter) => {
    history.replaceState({}, document.title, router.pathname + logFilterToQueryString(filter));

    setFilter(filter);
    setDirty(true);
  }, [router.pathname]);

  const refresh = useCallback(() => {
    setDirty(true);
  }, []);

  useEffect(() => {
    if (!dirty && !loading) {
      return;
    }

    setLoading(true);
    setDirty(false);

    listLogs(gqlBrowserClient, filter).then(headers => {
      setHeaders(headers);
    }).catch(err => {
      setError(err);
    }).then(() => {
      setLoading(true);
    });
  }, [filter, dirty, loading]);

  return (
    <LogListContext.Provider value={{loading, filter, headers, error, updateFilter, refresh}}>
      {props.children}
    </LogListContext.Provider>
  );
}

export default LogListContext;