hooks#useDocumentSet TypeScript Examples

StatusPage: React.FC = () => {
  const { docs, updateDocuments, pageCount } = useDocumentSet();
  const tableColumns = useMemo(createColumns, []);

  const renderSubComponent = ({
    original: { shipTo, holder, part, statuses }
  }: Row<Document>) => (
    <>
      <DocumentStepper statuses={statuses} />
      <DocumentDetails
        shipper={holder}
        receiver={shipTo}
        part={part}
        statuses={statuses}
      />
    </>
  );

  const renderPagination = (table: TableInstance<Document>) => (
    <Paginator table={table} />
  );
  const renderFilterControls = ({
    setGlobalFilter
  }: TableInstance<Document>) => (
    <SelectFilterControls options={filterable} onSubmit={setGlobalFilter} />
  );

  return (
    <div className="tablet:margin-x-8 overflow-x-auto">
      <Title>Status</Title>
      <Table<Document>
        columns={tableColumns}
        data={docs}
        renderSubComponent={renderSubComponent}
        renderPagination={renderPagination}
        renderFilterControls={renderFilterControls}
        fetchData={updateDocuments}
        pageCount={pageCount}
      />
    </div>
  );
}

useCORDocuments = () => {
  const { apiCall } = useAuthContext();
  const [bulkSubmitStatus, setBulkSubmitStatus] = useState<LoadingStatus>({
    loading: false
  });
  const {
    setDocs,
    docs,
    updateDocuments,
    modifyDocument,
    removeDocument,
    ...rest
  } = useDocumentSet();

  const updateDocumentsWithD6TStatus = useCallback(
    (query: Query<Document>) =>
      // always filter for documents that are ready for COR
      updateDocuments({
        ...query,
        filters: [
          ...query.filters,
          {
            id: "status",
            value: "D6T"
          },
          {
            id: "exclude_status",
            value: "COR"
          }
        ]
      }),
    [updateDocuments]
  );

  const submitCOR = useCallback(
    async (sdn: string, received_by: string) => {
      modifyDocument(sdn, {
        loadingStatus: {
          loading: true
        }
      });
      // simulate up to 1.5 seconds of load time
      await sleep(Math.floor(Math.random() * 1500));
      try {
        // submit single document and remove from current list
        await apiCall("/document/cor/", {
          method: "POST",
          body: JSON.stringify([
            {
              sdn,
              received_by,
              status: "COR"
            }
          ])
        });
        removeDocument(sdn);
      } catch (e) {
        // api or network error
        modifyDocument(sdn, {
          loadingStatus: {
            loading: false,
            error: true,
            message: e.message || "Something went wrong"
          }
        });
      }
    },
    [modifyDocument, removeDocument, apiCall]
  );

  const submitBulkCOR = useCallback(
    async (sdns: string[], received_by: string) => {
      setBulkSubmitStatus({
        loading: true
      });
      // simulate up to 1.5 seconds of load time
      await sleep(Math.floor(Math.random() * 1500));
      try {
        // submit bulk documents and remove from list
        await apiCall("/document/cor/", {
          method: "POST",
          body: JSON.stringify(
            sdns.map(sdn => ({
              sdn,
              received_by,
              status: "COR"
            }))
          )
        });
        // filter all submitted sdns
        setDocs(prevDocs =>
          prevDocs.filter(({ sdn }) => sdns.indexOf(sdn) < 0)
        );
        setBulkSubmitStatus({
          loading: false
        });
      } catch (e) {
        setBulkSubmitStatus({
          loading: false,
          error: true,
          message: e.message || "Something went wrong"
        });
      }
    },
    [setBulkSubmitStatus, setDocs, apiCall]
  );

  const resetBulkSubmitStatus = useCallback(() => {
    setBulkSubmitStatus({
      loading: false
    });
  }, [setBulkSubmitStatus]);

  return {
    setDocs,
    docs,
    updateDocuments: updateDocumentsWithD6TStatus,
    submitCOR,
    submitBulkCOR,
    bulkSubmitStatus,
    resetBulkSubmitStatus,
    ...rest
  };
}

useDocuments = () => {
  const { apiCall } = useAuthContext();
  const [submitAllLoadingStatus, setSubmitAllLoadingStatus] = useState<
    LoadingStatus
  >({
    loading: false
  });
  const {
    addDocument,
    modifyDocument,
    fetchDocuments,
    clearAllDocuments,
    docs,
    ...rest
  } = useDocumentSet();

  const fetchDetailsForDocument = useCallback(
    async (sdn: string) => {
      try {
        const [doc] = await fetchDocuments({
          filters: [
            { id: "sdn_exact", value: sdn },
            { id: "exclude_status", value: "D6T" }
          ],
          sort: [],
          page: 0
        });
        if (!doc) {
          throw new Error("SDN not found");
        }
        modifyDocument(sdn, {
          ...doc,
          loadingStatus: {
            loading: false
          }
        });
      } catch (e) {
        /* istanbul ignore next */
        modifyDocument(sdn, {
          loadingStatus: {
            loading: false,
            message: e.message || "Something went wrong",
            error: true
          }
        });
      }
    },
    [fetchDocuments, modifyDocument]
  );

  const addSdn = (sdn: string) => {
    addDocument(sdn, {
      loadingStatus: {
        loading: true
      }
    });
    fetchDetailsForDocument(sdn);
  };

  const submitAll = useCallback(async () => {
    setSubmitAllLoadingStatus({
      loading: true
    });

    if (!validateDocsBeforeSubmit(docs)) {
      // can't submit documents that are loading or contain errors
      setSubmitAllLoadingStatus({
        loading: false,
        error: true,
        message: "All documents must be successfully loaded before submitting"
      });
      return;
    }

    // format documents for api call
    const data = docs.map(doc => ({
      sdn: doc.sdn,
      status: "D6T",
      received_quantity: doc.enteredReceivedQty,
      subinventory: doc.enteredSubinventoryCode,
      locator: doc.enteredLocatorCode
    }));

    try {
      // submit documents
      await apiCall<{}>("/document/d6t/", {
        method: "POST",
        body: JSON.stringify(data)
      });
      clearAllDocuments();
      setSubmitAllLoadingStatus({
        loading: false,
        error: false,
        message: `Successfully submitted ${data.length} document(s)`
      });
    } catch (e) {
      // api or network error
      setSubmitAllLoadingStatus({
        loading: false,
        error: true,
        message: e.message || "Something went wrong"
      });
    }
  }, [docs, apiCall, clearAllDocuments]);

  return {
    docs,
    submitAllLoadingStatus,
    addSdn,
    modifyDocument,
    submitAll,
    ...rest
  };
}