hooks#useDocumentSet TypeScript Examples

The following examples show how to use hooks#useDocumentSet. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: StatusPage.tsx    From solo with MIT License 5 votes vote down vote up 
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>
  );
}
Example #2
Source File: useCORDocuments.ts    From solo with MIT License 4 votes vote down vote up 
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
  };
}
Example #3
Source File: useEnterReceiptDocuments.ts    From solo with MIT License 4 votes vote down vote up 
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
  };
}