From bdf38708087e1e7a816e4b1f1802fb019da2956c Mon Sep 17 00:00:00 2001 From: Jody Bailey Date: Tue, 16 May 2023 11:04:25 +0200 Subject: [PATCH] chore: attempt at fixing query to CPR endpoint --- package-lock.json | 198 ++++++++++++++++-- src/widgets/ProductRecommendations/api.js | 4 +- .../ProductRecommendationsContainer.jsx | 8 +- src/widgets/ProductRecommendations/hooks.js | 50 +++-- 4 files changed, 220 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index a8beae4..8701ae7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5909,6 +5909,8 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz", "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "json-schema-traverse": "^1.0.0", @@ -5924,7 +5926,9 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/ajv-keywords": { "version": "3.5.2", @@ -19107,7 +19111,179 @@ "treeverse", "validate-npm-package-name", "which", - "write-file-atomic" + "write-file-atomic", + "@gar/promisify", + "@npmcli/disparity-colors", + "@npmcli/fs", + "@npmcli/git", + "@npmcli/installed-package-contents", + "@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", + "color-support", + "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", + "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", + "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", + "negotiator", + "normalize-package-data", + "npm-bundled", + "npm-normalize-package-bin", + "npm-packlist", + "number-is-nan", + "oauth-sign", + "object-assign", + "once", + "p-map", + "path-is-absolute", + "performance-now", + "proc-log", + "promise-all-reject-late", + "promise-call-limit", + "promise-inflight", + "promise-retry", + "promzard", + "psl", + "punycode", + "qs", + "read-cmd-shim", + "readable-stream", + "request", + "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" ], "dev": true, "dependencies": { @@ -21682,11 +21858,6 @@ "safer-buffer": "^2.0.2", "tweetnacl": "~0.14.0" }, - "bin": { - "sshpk-conv": "bin/sshpk-conv", - "sshpk-sign": "bin/sshpk-sign", - "sshpk-verify": "bin/sshpk-verify" - }, "engines": { "node": ">=0.10.0" } @@ -34397,15 +34568,14 @@ "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==", "dev": true, - "requires": { - "ajv": "^8.0.0" - }, + "requires": {}, "dependencies": { "ajv": { - "version": "8.11.0", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz", + "version": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz", "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==", "dev": true, + "optional": true, + "peer": true, "requires": { "fast-deep-equal": "^3.1.1", "json-schema-traverse": "^1.0.0", @@ -34417,7 +34587,9 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", - "dev": true + "dev": true, + "optional": true, + "peer": true } } }, diff --git a/src/widgets/ProductRecommendations/api.js b/src/widgets/ProductRecommendations/api.js index b6285e3..aac8efb 100644 --- a/src/widgets/ProductRecommendations/api.js +++ b/src/widgets/ProductRecommendations/api.js @@ -1,9 +1,9 @@ import { get, stringifyUrl } from 'data/services/lms/utils'; import urls from 'data/services/lms/urls'; -export const getCrossProductRecommendationsUrl = (courseId) => `${urls.api}/learner_recommendations/cross_product/${courseId}`; +export const crossProductRecommendationsUrl = (courseId) => `${urls.api}/learner_recommendations/cross_product/${courseId}`; -const fetchCrossProductCourses = (courseId) => get(stringifyUrl(getCrossProductRecommendationsUrl(courseId))); +const fetchCrossProductCourses = (courseId) => get(stringifyUrl(crossProductRecommendationsUrl(courseId))); export default { fetchCrossProductCourses, diff --git a/src/widgets/ProductRecommendations/components/ProductRecommendationsContainer.jsx b/src/widgets/ProductRecommendations/components/ProductRecommendationsContainer.jsx index 388c0b6..493d008 100644 --- a/src/widgets/ProductRecommendations/components/ProductRecommendationsContainer.jsx +++ b/src/widgets/ProductRecommendations/components/ProductRecommendationsContainer.jsx @@ -4,18 +4,18 @@ import { useIntl } from '@edx/frontend-platform/i18n'; import './index.scss'; import messages from '../messages'; -import useFetchCrossProductCourses from '../hooks'; +import useCrossProductRecommendationsData from '../hooks'; import ProductCardContainer from './ProductCardContainer'; import mockCrossProductRecommendations from '../mockData'; const ProductRecommendationsContainer = () => { const { formatMessage } = useIntl(); const mockRecommendations = mockCrossProductRecommendations.courses; - const { productRecommendations, isProductRecommendationsLoading } = useFetchCrossProductCourses(); + const { courses, isLoading } = useCrossProductRecommendationsData(); return (
- {!isProductRecommendationsLoading && ( + {!isLoading && ( {

{formatMessage(messages.recommendationsHeading)}

- + )}
diff --git a/src/widgets/ProductRecommendations/hooks.js b/src/widgets/ProductRecommendations/hooks.js index a11921b..d9ac808 100644 --- a/src/widgets/ProductRecommendations/hooks.js +++ b/src/widgets/ProductRecommendations/hooks.js @@ -1,13 +1,14 @@ import { useState, useEffect } from "react"; import { StrictDict } from 'utils'; +import { RequestStates } from 'data/constants/requests'; import api from './api'; import * as module from './hooks'; -// export const state = StrictDict({ -// requestState: (val) => useState(val), // eslint-disable-line -// courses: (val) => useState(val), // eslint-disable-line -// }); +export const state = StrictDict({ + requestState: (val) => useState(val), // eslint-disable-line + courses: (val) => useState(val), // eslint-disable-line +}); const useFetchMostRecentCourse = () => { // Gets the most recent course a user is enrolled in @@ -15,39 +16,46 @@ const useFetchMostRecentCourse = () => { // Can we assume that the order the courses are listed on the Dashbaord is the order that the course was enrolled in? }; -const useFetchCrossProductCourses = () => { - const [productRecommendations, setProductRecommendations] = useState([]); - const [isProductRecommendationsLoading, setIsProductRecommendationsLoading] = useState(false); +const useFetchCrossProductCourses = (setRequestState, setCourses) => { - // Uses the data from the most recently enrolled course to get the courseId to query our cross product endpoint - // const mostRecentCourse = useFetchMostRecentCourse() useEffect(() => { let isMounted = true; - setIsProductRecommendationsLoading(true); if (isMounted) { - api + setTimeout(() => { + console.log("timing") + api .fetchCrossProductCourses('course-v1:IBM+IBMBCC001+1T2022') .then((response) => { console.log("Here is the response", response) if (response.status === 200) { - setIsProductRecommendationsLoading(false); - setProductRecommendations(response.data.courses); + setRequestState(RequestStates.completed); + setCourses(response.data.courses); } }).catch(err => { - console.log("here is the error", err) + console.log("here is the error", err); }); + }, 5000); + } return () => { isMounted = false; }; - }, []); // most recent course ID will be the dependancy - - return { - productRecommendations, - isProductRecommendationsLoading, - }; + /* eslint-disable */ + }, []); // most recent course ID will be the dependancy; }; const useFetchAlgoliaRecommendations = () => { // This hook will fetch algolia reccs and return the reccs } -export default useFetchCrossProductCourses; +const useCrossProductRecommendationsData = () => { + const [requestState, setRequestState] = state.requestState(RequestStates.pending); + const [courses, setCourses] = state.courses([]); + useFetchCrossProductCourses(setRequestState, setCourses); + + return { + courses, + isLoading: requestState === RequestStates.pending + } + +} + +export default useCrossProductRecommendationsData;