diff --git a/package-lock.json b/package-lock.json index 77217a34e..30852dd0f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,11 @@ { "name": "treetracker-admin-client", - "version": "1.28.1", + "version": "1.29.1", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "treetracker-admin-client", - "version": "1.28.1", + "version": "1.29.1", "dependencies": { "@date-io/date-fns": "^1.3.13", "@material-ui/core": "^4.9.10", @@ -4365,6 +4364,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", "dev": true, + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -4379,6 +4379,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", "dev": true, + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -4394,6 +4395,7 @@ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", "dev": true, + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -24951,7 +24953,182 @@ "treeverse", "validate-npm-package-name", "which", - "write-file-atomic" + "write-file-atomic", + "@npmcli/disparity-colors", + "@npmcli/git", + "@npmcli/installed-package-contents", + "@npmcli/map-workspaces", + "@npmcli/metavuln-calculator", + "@npmcli/move-file", + "@npmcli/name-from-folder", + "@npmcli/node-gyp", + "@npmcli/promise-spawn", + "@tootallnate/once", + "agent-base", + "agentkeepalive", + "aggregate-error", + "ajv", + "ansi-regex", + "ansi-styles", + "aproba", + "are-we-there-yet", + "asap", + "asn1", + "assert-plus", + "asynckit", + "aws-sign2", + "aws4", + "balanced-match", + "bcrypt-pbkdf", + "bin-links", + "binary-extensions", + "brace-expansion", + "builtins", + "caseless", + "cidr-regex", + "clean-stack", + "clone", + "cmd-shim", + "code-point-at", + "color-convert", + "color-name", + "colors", + "combined-stream", + "common-ancestor-path", + "concat-map", + "console-control-strings", + "core-util-is", + "dashdash", + "debug", + "debuglog", + "defaults", + "delayed-stream", + "delegates", + "depd", + "dezalgo", + "diff", + "ecc-jsbn", + "emoji-regex", + "encoding", + "env-paths", + "err-code", + "extend", + "extsprintf", + "fast-deep-equal", + "fast-json-stable-stringify", + "forever-agent", + "form-data", + "fs-minipass", + "fs.realpath", + "function-bind", + "gauge", + "getpass", + "har-schema", + "har-validator", + "has", + "has-flag", + "has-unicode", + "http-cache-semantics", + "http-proxy-agent", + "http-signature", + "https-proxy-agent", + "humanize-ms", + "iconv-lite", + "ignore-walk", + "imurmurhash", + "indent-string", + "infer-owner", + "inflight", + "inherits", + "ip", + "ip-regex", + "is-core-module", + "is-fullwidth-code-point", + "is-lambda", + "is-typedarray", + "isarray", + "isexe", + "isstream", + "jsbn", + "json-schema", + "json-schema-traverse", + "json-stringify-nice", + "json-stringify-safe", + "jsonparse", + "jsprim", + "just-diff", + "just-diff-apply", + "lru-cache", + "mime-db", + "mime-types", + "minimatch", + "minipass-collect", + "minipass-fetch", + "minipass-flush", + "minipass-json-stream", + "minipass-sized", + "minizlib", + "mute-stream", + "normalize-package-data", + "npm-bundled", + "npm-install-checks", + "npm-normalize-package-bin", + "npm-packlist", + "number-is-nan", + "oauth-sign", + "object-assign", + "once", + "p-map", + "path-is-absolute", + "path-parse", + "performance-now", + "process-nextick-args", + "promise-all-reject-late", + "promise-call-limit", + "promise-inflight", + "promise-retry", + "promzard", + "psl", + "puka", + "punycode", + "qs", + "read-cmd-shim", + "readable-stream", + "request", + "resolve", + "retry", + "safe-buffer", + "safer-buffer", + "set-blocking", + "signal-exit", + "smart-buffer", + "socks", + "socks-proxy-agent", + "spdx-correct", + "spdx-exceptions", + "spdx-expression-parse", + "spdx-license-ids", + "sshpk", + "string_decoder", + "string-width", + "stringify-package", + "strip-ansi", + "supports-color", + "tunnel-agent", + "tweetnacl", + "typedarray-to-buffer", + "unique-filename", + "unique-slug", + "uri-js", + "util-deprecate", + "uuid", + "validate-npm-package-license", + "verror", + "walk-up-path", + "wcwidth", + "wide-align", + "wrappy", + "yallist" ], "dependencies": { "@npmcli/arborist": "^2.2.4", @@ -40284,7 +40461,6 @@ "integrity": "sha512-B8G6Obn5S3RCl7hwahkQj9sKUapwXWFjiaz/Bsw1fhYFdNMnDUolRiWQSoKPb1/oKe37Dtfszoywi1Ynbo3y8w==", "requires": { "@babel/runtime": "^7.6.0", - "@date-io/core": "1.x", "@types/styled-jsx": "^2.2.8", "clsx": "^1.0.2", "react-transition-group": "^4.0.0", @@ -40781,8 +40957,6 @@ "polished": "^3.3.1", "popper.js": "^1.14.7", "prop-types": "^15.7.2", - "react": "^16.8.3", - "react-dom": "^16.8.3", "react-focus-lock": "^2.1.0", "react-helmet-async": "^1.0.2", "react-popper-tooltip": "^2.8.3", @@ -40809,6 +40983,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", "dev": true, + "peer": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -40816,10 +40991,10 @@ } }, "react-dom": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", + "version": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", "dev": true, + "peer": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -40832,6 +41007,7 @@ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", "dev": true, + "peer": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" diff --git a/src/components/Verify.js b/src/components/Verify.js index c946b976b..50313dfe9 100644 --- a/src/components/Verify.js +++ b/src/components/Verify.js @@ -167,16 +167,6 @@ const Verify = (props) => { const refContainer = useRef(); const numFilters = verifyContext.filter.countAppliedFilters(); - // log.debug( - // 'render: verify', - // 'captures:', - // verifyContext.captureImages.length, - // 'species:', - // speciesContext.speciesList.length, - // 'tags:', - // tagsContext.tagList.length, - // ); - /* * effect to load page when mounted */ @@ -192,14 +182,6 @@ const Verify = (props) => { setComplete(verifyContext.approveAllComplete); }, [verifyContext.approveAllComplete]); - /* load more captures when the page or page size changes */ - useEffect(() => { - // console.log('-- load images', verifyContext.filter); - const abortController = new AbortController(); - verifyContext.loadCaptureImages({ signal: abortController.signal }); - return () => abortController.abort(); - }, [verifyContext.filter, verifyContext.pageSize, verifyContext.currentPage]); - function handleCaptureClick(e, captureId) { e.stopPropagation(); e.preventDefault(); @@ -256,7 +238,6 @@ const Verify = (props) => { } else if (!approveAction.rememberSelection) { resetApprovalFields(); } - verifyContext.loadCaptureImages(); } async function handleShowGrowerDetail(e, capture) { @@ -292,6 +273,7 @@ const Verify = (props) => { } function handleChangePageSize(event) { + verifyContext.setCurrentPage(0); verifyContext.setPageSize(event.target.value); } @@ -303,15 +285,10 @@ const Verify = (props) => { return verifyContext.captureImagesSelected.indexOf(id) >= 0; } - const captureImages = verifyContext.captureImages.filter((capture, index) => { - return ( - index >= verifyContext.currentPage * verifyContext.pageSize && - index < (verifyContext.currentPage + 1) * verifyContext.pageSize - ); - }); + const captureImages = verifyContext.captureImages; const placeholderImages = verifyContext.isLoading - ? Array(verifyContext.pageSize - captureImages.length) + ? Array(Math.max(verifyContext.pageSize - captureImages.length, 0)) .fill() .map((_, index) => { return { @@ -406,7 +383,7 @@ const Verify = (props) => { let imagePagination = ( {}, - // rejectCaptureImage: () => {}, approve: () => {}, - // undoCaptureImage: () => {}, loadCaptureImages: () => {}, - // rejectAll: () => {}, approveAll: () => {}, undoAll: () => {}, updateFilter: () => {}, getCaptureCount: () => {}, clickCapture: () => {}, - // selectAll: () => {}, - // set: () => {}, setPageSize: () => {}, setCurrentPage: () => {}, }); @@ -45,11 +37,10 @@ export function VerifyProvider(props) { const [captureImagesUndo, setCaptureImagesUndo] = useState([]); const [captureImagesSelected, setCaptureImagesSelected] = useState([]); const [captureImageAnchor, setCaptureImageAnchor] = useState(undefined); - // const [isBulkApproving, setIsBulkApproving] = useState(false); const [isLoading, setIsLoading] = useState(false); const [isApproveAllProcessing, setIsApproveAllProcessing] = useState(false); const [approveAllComplete, setApproveAllComplete] = useState(0); - const [pageSize, setPageSize] = useState(12); + const [pageSize, setPageSize] = useState(24); const [currentPage, setCurrentPage] = useState(0); const [filter, setFilter] = useState( new FilterModel({ @@ -64,60 +55,19 @@ export function VerifyProvider(props) { if (invalidateCaptureCount) getCaptureCount(); }, [invalidateCaptureCount]); - // STATE HELPER FUNCTIONS + /* load captures when the page or page size changes */ + useEffect(() => { + const abortController = new AbortController(); + setCaptureImages([]); + loadCaptureImages({ signal: abortController.signal }); + return () => abortController.abort(); + }, [filter, pageSize, currentPage]); - const appendCaptureImages = (images) => { - // console.log('appendCaptureImages', captureImages); - let newCaptureImages = [...captureImages, ...images]; - setCaptureImages(newCaptureImages); - }; + // STATE HELPER FUNCTIONS // /* // * replace approve and reject // */ - const approved = (captureId) => { - //remove from captures - const captured = captureImages.filter( - (captureImage) => captureImage.id !== captureId, - ); - //remove if selected - const selectedImages = captureImagesSelected.filter( - (id) => id !== captureId, - ); - setCaptureImages(captured); - setCaptureImagesSelected(selectedImages); - }; - - // approvedCaptureImage(state, captureId) { - // const captureImages = state.captureImages.filter( - // (captureImage) => captureImage.id !== captureId, - // ); - // //remove if selected - // const captureImagesSelected = state.captureImagesSelected.filter( - // (id) => id !== captureId, - // ); - // return { - // ...state, - // captureImages, - // captureImagesSelected, - // }; - // } - - // rejectedCaptureImage(state, captureId) { - // const captureImages = state.captureImages.filter( - // (captureImage) => captureImage.id !== captureId, - // ); - // //remove if selected - // const captureImagesSelected = state.captureImagesSelected.filter( - // (id) => id !== captureId, - // ); - // return { - // ...state, - // captureImages, - // captureImagesSelected, - // }; - // } - const undoedCaptureImage = (state, captureId) => { //put the capture back, from undo list, sort by id const captureUndo = captureImagesUndo.reduce((a, c) => @@ -150,18 +100,6 @@ export function VerifyProvider(props) { // EVENT HANDLERS - // approveCaptureImage = async (id) => { - // await api.approveCaptureImage(id); - // approvedCaptureImage(id); - // return true; - // }; - - // rejectCaptureImage = async (id) => { - // await api.rejectCaptureImage(id); - // rejectedCaptureImage(id); - // return true; - // }; - const approve = async ({ approveAction, id }) => { if (!approveAction) { throw Error('no approve action object!'); @@ -184,7 +122,6 @@ export function VerifyProvider(props) { await api.createCaptureTags(id, approveAction.tags); } - approved(id); return true; }; @@ -196,100 +133,31 @@ export function VerifyProvider(props) { const loadCaptureImages = async (abortController) => { log.debug('to load images'); - // console.log( - // isLoading, - // captureCount, - // captureImages.length, - // pageSize * (currentPage + 1), - // pageSize * (currentPage + 1) <= captureImages.length, - // ); - // if it's already loading, has all the images, or has enough images for the next page already don't load images - if ( - isLoading || - (captureCount > 0 && captureImages.length >= captureCount) || - pageSize * (currentPage + 1) <= captureImages.length - ) { - // No need to request more images - log.debug("cancel load because condition doesn't meet"); + if (isLoading) { + log.debug('cancel load - already in progress'); return true; } //set loading status setIsLoading(true); const pageParams = { - //page: nextPage, - //REVISE Fri Aug 16 10:56:34 CST 2019 - //change the api to use skip parameter directly, because there is a bug to use page as param - skip: captureImages.length, - rowsPerPage: pageSize * (currentPage + 1) - captureImages.length, + skip: pageSize * currentPage, + rowsPerPage: pageSize, filter: filter, }; log.debug('load page with params:', pageParams); const result = await api.getCaptureImages(pageParams, abortController); log.debug('loaded captures:', result.length); - appendCaptureImages(result); + setCaptureImages(result); //restore loading status setIsLoading(false); }; - // rejectAll = async () => { - // log.debug('rejectAll with state:', state); - // set({ - // isLoading: true, - // isApproveAllProcessing: true, - // isBulkApproving: true, - // }); - - // const verifyState = state; - // const total = verifyState.captureImagesSelected.length; - // const undo = verifyState.captureImages.filter((capture) => - // verifyState.captureImagesSelected.some((id) => id === capture.id), - // ); - // log.debug('items:%d', verifyState.captureImages.length); - // try { - // for (let i = 0; i < verifyState.captureImagesSelected.length; i++) { - // const captureId = verifyState.captureImagesSelected[i]; - // const captureImage = verifyState.captureImages.reduce((a, c) => { - // if (c && c.id === captureId) { - // return c; - // } else { - // return a; - // } - // }, undefined); - // // log.trace('reject:%d', captureImage.id); - // await rejectCaptureImage(captureImage.id); - // set({ - // approveAllComplete: 100 * ((i + 1) / total), - // invalidateCaptureCount: true, - // }); - // } - // } catch (e) { - // log.warn('get error:', e); - // set({ isLoading: false }); - // setRejectAllProcessing(false); - // return false; - // } - // //push to undo list - // //finished, set status flags - // set({ - // captureImagesUndo: undo, - // isLoading: false, - // isApproveAllProcessing: false, - // // isRejectAllProcessing: false, - // approveAllComplete: 0, - // invalidateCaptureCount: true, - // }); - - // //reset - // resetSelection(); - // }; - const approveAll = async (approveAction) => { log.debug('approveAll with approveAction:', approveAction); setIsLoading(true); setIsApproveAllProcessing(true); - // setIsBulkApproving(true) const total = captureImagesSelected.length; const undo = captureImages.filter((capture) => @@ -313,7 +181,6 @@ export function VerifyProvider(props) { approveAction, }); setApproveAllComplete(100 * ((i + 1) / total)); - // setInvalidateCaptureCount(true); } } catch (e) { log.warn('get error:', e); @@ -323,8 +190,8 @@ export function VerifyProvider(props) { } //push to undo list and set status flags setCaptureImagesUndo(undo), setIsLoading(false); + await loadCaptureImages(); setIsApproveAllProcessing(false); - // setIsBulkApproving(false) setApproveAllComplete(0); setInvalidateCaptureCount(true); @@ -336,7 +203,6 @@ export function VerifyProvider(props) { log.debug('undo with state:', captureImagesUndo); setIsLoading(true); setIsApproveAllProcessing(true); - // setIsRejectAllProcessing(true); const total = captureImagesUndo.length; log.debug('items:%d', captureImages.length); @@ -357,9 +223,6 @@ export function VerifyProvider(props) { setIsApproveAllProcessing(true); return false; } - //finished, set status flags - // // isBulkApproving: false, - // // isRejectAllProcessing: false, setIsLoading(false); setIsApproveAllProcessing(false); setApproveAllComplete(0); @@ -416,12 +279,6 @@ export function VerifyProvider(props) { Math.max(indexAnchor, indexCurrent) + 1, ) .map((capture) => capture.id); - // log.trace( - // 'find range:[%d,%d], selected:%d', - // indexAnchor, - // indexCurrent, - // captureImagesSelected.length, - // ); setCaptureImagesSelected(captureImagesSelected); } else if (isCmd || isCtrl) { // Toggle the selection state @@ -438,45 +295,25 @@ export function VerifyProvider(props) { //}}} }; - // selectAll(selected, state) { - // //{{{ - // set({ - // captureImagesSelected: selected - // ? captureImages.map((capture) => capture.id) - // : [], - // captureImageAnchor: undefined, - // }); - // //}}} - // } - const value = { captureImages, captureImagesSelected, captureImageAnchor, captureImagesUndo, - // isBulkApproving, isLoading, isApproveAllProcessing, - // isRejectAllProcesssing: isRejectAllProcessing, approveAllComplete, pageSize, currentPage, filter, invalidateCaptureCount, captureCount, - // approveCaptureImage: approveCaptureImage, - // rejectCaptureImage: rejectCaptureImage, - // approve: approve, - // undoCaptureImage: undoCaptureImage, loadCaptureImages, - // rejectAll: rejectAll, approveAll, undoAll: undoAll, updateFilter, getCaptureCount, clickCapture, - // selectAll: selectAll, - // set, setPageSize, setCurrentPage, };