refactor(frontend): use new NetWrapParam API

frontend/src/components/app/ExternalDataUpdateInfo.jsx

@@ -49,5 +49,5 @@ ExternalDataUpdateInfo.propTypes = {
 ExternalDataUpdateInfo.defaultProps = {};
 
 export default withNetworkWrapper([
-  new NetWrapParam("externalDataUpdateInfo", "all", "updates")
+  new NetWrapParam("externalDataUpdateInfo", "all", { propKey: "updates" })
 ])(ExternalDataUpdateInfo);

frontend/src/components/app/InformationList.jsx

@@ -54,12 +54,10 @@ InformationList.defaultProps = {
 
 export default compose(
   withNetworkWrapper([
-    new NetWrapParam(
-      "information",
-      "all",
-      "informationList",
-      RequestParams.Builder.withQueryParam("now", "true").build()
-    )
+    new NetWrapParam("information", "all", {
+      propKey: "informationList",
+      params: RequestParams.Builder.withQueryParam("now", "true").build()
+    })
   ]),
   withErrorBoundary()
 )(InformationList);

frontend/src/components/app/NotifierImportantInformation.jsx

@@ -26,12 +26,10 @@ NotifierImportantInformation.propTypes = {
 export default compose(
   withNetworkWrapper(
     [
-      new NetWrapParam(
-        "information",
-        "all",
-        "informationList",
-        RequestParams.Builder.withQueryParam("now", "true").build()
-      )
+      new NetWrapParam("information", "all", {
+        propKey: "informationList",
+        params: RequestParams.Builder.withQueryParam("now", "true").build()
+      })
     ],
     React.Fragment
   ),

frontend/src/components/app/UnlinkedPartners.jsx

@@ -75,5 +75,7 @@ UnlinkedPartners.propTypes = {
 };
 
 export default withNetworkWrapper([
-  new NetWrapParam("unlinkedUtcPartners", "all", "unlinkedPartners")
+  new NetWrapParam("unlinkedUtcPartners", "all", {
+    propKey: "unlinkedPartners"
+  })
 ])(UnlinkedPartners);

frontend/src/components/common/theme/ThemeProvider.jsx

@@ -31,10 +31,8 @@ ThemeProvider.propTypes = {
 };
 
 export default withNetworkWrapper([
-  new NetWrapParam(
-    "userData",
-    "one",
-    "userData",
-    RequestParams.Builder.withId(CURRENT_USER_ID).build()
-  )
+  new NetWrapParam("userData", "one", {
+    propKey: "userData",
+    params: RequestParams.Builder.withId(CURRENT_USER_ID).build()
+  })
 ])(ThemeProvider);

frontend/src/components/edition/History.jsx

@@ -15,10 +15,7 @@ import FullScreenDialogService from "../../services/FullScreenDialogService";
 import useStepper from "../../hooks/useStepper";
 import FullScreenDialogFrame from "../common/FullScreenDialogFrame";
 import dateTimeStrToStr from "../../utils/dateTimeStrToStr";
-import withNetworkWrapper, {
-  getApiPropTypes,
-  NetWrapParam
-} from "../../hoc/withNetworkWrapper";
+import withNetworkWrapper, { NetWrapParam } from "../../hoc/withNetworkWrapper";
 import { useApiInvalidateAll } from "../../hooks/wrappers/api";
 
 const useStyles = makeStyles(theme => ({
@@ -74,8 +71,6 @@ const buildParams = modelInfo => {
 
 function History({
   versions,
-  modelInfo,
-  api,
   renderTitle,
   renderCore,
   editFromVersion,
@@ -87,11 +82,6 @@ function History({
     return () => resetVersions(); // only on unmount
   }, []);
 
-  // keep the component up to date
-  useEffect(() => {
-    api.versions.setParams(buildParams(modelInfo));
-  }, [modelInfo]);
-
   const [currentVersion, goNextVersion, goPreviousVersion] = useStepper(
     versions.length - 1
   );
@@ -154,20 +144,22 @@ function History({
 History.propTypes = {
   editFromVersion: PropTypes.func.isRequired,
   versions: PropTypes.array.isRequired,
-  modelInfo: PropTypes.shape({
-    contentTypeId: PropTypes.number.isRequired,
-    id: PropTypes.number.isRequired
-  }).isRequired,
   renderCore: PropTypes.func.isRequired,
   renderTitle: PropTypes.func.isRequired,
-  rawModelDataEx: PropTypes.object.isRequired,
-  api: getApiPropTypes("versions").isRequired
+  rawModelDataEx: PropTypes.object.isRequired
 };
 
 export default compose(
   withNetworkWrapper([
-    new NetWrapParam("versions", "all", "versions", props =>
-      buildParams(props.modelInfo)
-    )
+    new NetWrapParam("versions", "all", {
+      propKey: "versions",
+      params: props => buildParams(props.modelInfo),
+      propTypes: {
+        modelInfo: PropTypes.shape({
+          contentTypeId: PropTypes.number.isRequired,
+          id: PropTypes.number.isRequired
+        }).isRequired
+      }
+    })
   ])
 )(History);

frontend/src/components/edition/PendingModeration.jsx

-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 
 import PropTypes from "prop-types";
 import compose from "recompose/compose";
@@ -9,10 +9,7 @@ import { makeStyles } from "@material-ui/styles";
 import RequestParams from "../../utils/api/RequestParams";
 import FullScreenDialogService from "../../services/FullScreenDialogService";
 import FullScreenDialogFrame from "../common/FullScreenDialogFrame";
-import withNetworkWrapper, {
-  getApiPropTypes,
-  NetWrapParam
-} from "../../hoc/withNetworkWrapper";
+import withNetworkWrapper, { NetWrapParam } from "../../hoc/withNetworkWrapper";
 import { useApiInvalidateAll } from "../../hooks/wrappers/api";
 import useOnComponentUnMount from "../../hooks/useOnComponentUnMount";
 
@@ -69,8 +66,6 @@ const buildParams = modelInfo => {
 };
 
 function PendingModeration({
-  api,
-  modelInfo,
   pendingModeration,
   editFromPendingModeration,
   renderTitle,
@@ -83,11 +78,6 @@ function PendingModeration({
     resetData();
   });
 
-  // keep the component up to date
-  useEffect(() => {
-    api.pendingModeration.setParams(buildParams(modelInfo));
-  }, [modelInfo]);
-
   const pendingModelData = useMemo(() => {
     const pending = pendingModeration[0];
     return {
@@ -131,17 +121,20 @@ PendingModeration.propTypes = {
   userCanModerate: PropTypes.bool.isRequired,
   pendingModeration: PropTypes.array.isRequired,
   renderTitle: PropTypes.func.isRequired,
-  renderCore: PropTypes.func.isRequired,
-  api: getApiPropTypes("pendingModeration").isRequired
+  renderCore: PropTypes.func.isRequired
 };
 
 export default compose(
   withNetworkWrapper([
-    new NetWrapParam(
-      "pendingModerationObj",
-      "all",
-      "pendingModeration",
-      props => buildParams(props.modelInfo)
-    )
+    new NetWrapParam("pendingModerationObj", "all", {
+      propKey: "pendingModeration",
+      params: props => buildParams(props.modelInfo),
+      propTypes: {
+        modelInfo: PropTypes.shape({
+          contentTypeId: PropTypes.number.isRequired,
+          id: PropTypes.number.isRequired
+        }).isRequired
+      }
+    })
   ])
 )(PendingModeration);

frontend/src/components/pages/PageEditExchangeFeedbacks.jsx

-import React, { useEffect } from "react";
+import React from "react";
 import { compose } from "recompose";
 import PropTypes from "prop-types";
 import Typography from "@material-ui/core/Typography";
@@ -11,10 +11,7 @@ import EditModuleCoursesFeedback from "../university/modules/previousExchangeFee
 import CustomLink from "../common/CustomLink";
 import APP_ROUTES from "../../config/appRoutes";
 import UniversityService from "../../services/data/UniversityService";
-import withNetworkWrapper, {
-  getApiPropTypes,
-  NetWrapParam
-} from "../../hoc/withNetworkWrapper";
+import withNetworkWrapper, { NetWrapParam } from "../../hoc/withNetworkWrapper";
 
 function getExchangeId(match) {
   return parseInt(match.params.exchangeId, 10);
@@ -36,14 +33,10 @@ const buildParams = match =>
 /**
  * Page that handle the modification of exchange feedbacks.
  */
-function PageEditExchangeFeedbacks({ match, exchange, api }) {
+function PageEditExchangeFeedbacks({ match, exchange }) {
   const classes = useStyles();
   const id = getExchangeId(match);
 
-  useEffect(() => {
-    api.exchange.setParams(buildParams(match));
-  }, [id]);
-
   const univId = exchange.university;
   const univName = UniversityService.getUnivName(univId);
 
@@ -89,15 +82,22 @@ PageEditExchangeFeedbacks.propTypes = {
       exchangeId: PropTypes.string.isRequired
     })
   }).isRequired,
-  exchange: PropTypes.object.isRequired,
-  api: getApiPropTypes("exchange").isRequired
+  exchange: PropTypes.object.isRequired
 };
 
 export default compose(
   withNetworkWrapper([
-    new NetWrapParam("exchanges", "one", "exchange", props =>
-      buildParams(props.match)
-    )
+    new NetWrapParam("exchanges", "one", {
+      propKey: "exchange",
+      params: props => buildParams(props.match),
+      propTypes: {
+        match: PropTypes.shape({
+          params: PropTypes.shape({
+            exchangeId: PropTypes.string.isRequired
+          })
+        }).isRequired
+      }
+    })
   ]),
   withPaddedPaper(),
   withErrorBoundary()

frontend/src/components/pages/PageFiles.jsx

@@ -61,11 +61,27 @@ PageFiles.propTypes = {
 
 export default compose(
   withNetworkWrapper([
-    new NetWrapParam("pictures", "all", "pictures", props =>
-      buildPictureParams(props.match)
-    ),
-    new NetWrapParam("files", "all", "files", props =>
-      buildFilesParams(props.match)
-    )
+    new NetWrapParam("pictures", "all", {
+      propKey: "pictures",
+      params: props => buildPictureParams(props.match),
+      propTypes: {
+        match: PropTypes.shape({
+          params: PropTypes.shape({
+            userId: PropTypes.string.isRequired
+          })
+        }).isRequired
+      }
+    }),
+    new NetWrapParam("files", "all", {
+      propKey: "files",
+      params: props => buildFilesParams(props.match),
+      propTypes: {
+        match: PropTypes.shape({
+          params: PropTypes.shape({
+            userId: PropTypes.string.isRequired
+          })
+        }).isRequired
+      }
+    })
   ])
 )(PageFiles);

frontend/src/components/pages/PageMyExchanges.jsx

@@ -136,12 +136,13 @@ PageMyExchanges.propTypes = {
 
 export default compose(
   withNetworkWrapper([
-    new NetWrapParam(
-      "exchanges",
-      "all",
-      "exchanges",
-      RequestParams.Builder.withQueryParam("student", CURRENT_USER_ID).build()
-    )
+    new NetWrapParam("exchanges", "all", {
+      prop: "exchanges",
+      params: RequestParams.Builder.withQueryParam(
+        "student",
+        CURRENT_USER_ID
+      ).build()
+    })
   ]),
   withPaddedPaper(),
   withErrorBoundary()

frontend/src/components/recommendation/SelectListSubPage.jsx

@@ -181,5 +181,7 @@ SelectListSubPage.propTypes = {
 };
 
 export default compose(
-  withNetworkWrapper([new NetWrapParam("recommendationLists", "all", "lists")])
+  withNetworkWrapper([
+    new NetWrapParam("recommendationLists", "all", { propKey: "lists" })
+  ])
 )(SelectListSubPage);

frontend/src/components/recommendation/ViewListSubPage.jsx

-import React, { useEffect } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import { compose } from "recompose";
 import Button from "@material-ui/core/Button";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import RequestParams from "../../utils/api/RequestParams";
 import List from "./view/View";
-import withNetworkWrapper, {
-  getApiPropTypes,
-  NetWrapParam
-} from "../../hoc/withNetworkWrapper";
+import withNetworkWrapper, { NetWrapParam } from "../../hoc/withNetworkWrapper";
 import NavigationService from "../../services/NavigationService";
 
 const buildParams = listId => RequestParams.Builder.withId(listId).build();
@@ -16,11 +13,7 @@ const buildParams = listId => RequestParams.Builder.withId(listId).build();
 /**
  * Component to display one recommendation list
  */
-function ViewListSubPage({ list, listId, api }) {
-  useEffect(() => {
-    api.list.setParams(buildParams(listId));
-  }, [listId]);
-
+function ViewListSubPage({ list }) {
   return (
     <>
       <Button onClick={NavigationService.goToLists}>
@@ -32,15 +25,17 @@ function ViewListSubPage({ list, listId, api }) {
 }
 
 ViewListSubPage.propTypes = {
-  listId: PropTypes.number.isRequired,
-  list: PropTypes.object.isRequired,
-  api: getApiPropTypes("list").isRequired
+  list: PropTypes.object.isRequired
 };
 
 export default compose(
   withNetworkWrapper([
-    new NetWrapParam("recommendationLists", "one", "list", props =>
-      buildParams(props.listId)
-    )
+    new NetWrapParam("recommendationLists", "one", {
+      propKey: "list",
+      params: props => buildParams(props.listId),
+      propTypes: {
+        listId: PropTypes.number.isRequired
+      }
+    })
   ])
 )(ViewListSubPage);

frontend/src/components/settings/theme/ColorTools.jsx

@@ -331,12 +331,10 @@ const styles = theme => ({
 
 const ConnectedComp = compose(
   withNetworkWrapper([
-    new NetWrapParam(
-      "userData",
-      "one",
-      "userData",
-      RequestParams.Builder.withId(CURRENT_USER_ID).build()
-    )
+    new NetWrapParam("userData", "one", {
+      propKey: "userData",
+      params: RequestParams.Builder.withId(CURRENT_USER_ID).build()
+    })
   ]),
   withStyles(styles, { withTheme: true })
 )(ColorTool);

frontend/src/components/university/modules/CountryDri.jsx

-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import compose from "recompose/compose";
 
@@ -11,7 +11,6 @@ import CountryDriForm from "../forms/CountryDriForm";
 import withUnivInfo from "../../../hoc/withUnivInfo";
 import RequestParams from "../../../utils/api/RequestParams";
 import withNetworkWrapper, {
-  getApiPropTypes,
   NetWrapParam
 } from "../../../hoc/withNetworkWrapper";
 
@@ -33,11 +32,7 @@ CoreComponent.defaultProps = {
 const buildParams = countryId =>
   RequestParams.Builder.withQueryParam("countries", countryId).build();
 
-function CountryDri({ countryId, countryDriItems, api }) {
-  useEffect(() => {
-    api.countryDriItems.setParams(buildParams(countryId));
-  }, [countryId]);
-
+function CountryDri({ countryId, countryDriItems }) {
   const defaultModelData = useMemo(
     () => ({
       countries: [countryId],
@@ -67,15 +62,18 @@ function CountryDri({ countryId, countryDriItems, api }) {
 
 CountryDri.propTypes = {
   countryId: PropTypes.string.isRequired,
-  countryDriItems: PropTypes.array.isRequired,
-  api: getApiPropTypes("countryDriItems").isRequired
+  countryDriItems: PropTypes.array.isRequired
 };
 
 export default compose(
   withUnivInfo(["countryId"]),
   withNetworkWrapper([
-    new NetWrapParam("countryDri", "all", "countryDriItems", props =>
-      buildParams(props.countryId)
-    )
+    new NetWrapParam("countryDri", "all", {
+      propKey: "countryDriItems",
+      params: props => buildParams(props.countryId),
+      propTypes: {
+        countryId: PropTypes.string.isRequired
+      }
+    })
   ])
 )(CountryDri);

frontend/src/components/university/modules/CountryScholarships.jsx

-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import compose from "recompose/compose";
 
@@ -11,7 +11,6 @@ import CountryScholarshipForm from "../forms/CountryScholarshipForm";
 import withUnivInfo from "../../../hoc/withUnivInfo";
 import RequestParams from "../../../utils/api/RequestParams";
 import withNetworkWrapper, {
-  getApiPropTypes,
   NetWrapParam
 } from "../../../hoc/withNetworkWrapper";
 import ScholarshipCore, {
@@ -28,18 +27,9 @@ const useStyles = makeStyles(theme => ({
 const buildParams = countryId =>
   RequestParams.Builder.withQueryParam("countries", countryId).build();
 
-function CountryScholarships({
-  countryScholarshipsItems,
-  countryId,
-  country,
-  api
-}) {
+function CountryScholarships({ countryScholarshipsItems, countryId, country }) {
   const classes = useStyles();
 
-  useEffect(() => {
-    api.countryScholarshipsItems.setParams(buildParams(countryId));
-  }, [countryId]);
-
   const defaultModelData = useMemo(
     () => ({
       ...getScholarshipDefaultModelData(),
@@ -71,18 +61,18 @@ function CountryScholarships({
 CountryScholarships.propTypes = {
   countryId: PropTypes.string.isRequired,
   country: PropTypes.object.isRequired,
-  countryScholarshipsItems: PropTypes.array.isRequired,
-  api: getApiPropTypes("countryScholarshipsItems").isRequired
+  countryScholarshipsItems: PropTypes.array.isRequired
 };
 
 export default compose(
   withUnivInfo(["countryId", "country"]),
   withNetworkWrapper([
-    new NetWrapParam(
-      "countryScholarships",
-      "all",
-      "countryScholarshipsItems",
-      props => buildParams(props.countryId)
-    )
+    new NetWrapParam("countryScholarships", "all", {
+      propKey: "countryScholarshipsItems",
+      params: props => buildParams(props.countryId),
+      propTypes: {
+        countryId: PropTypes.string.isRequired
+      }
+    })
   ])
 )(CountryScholarships);

frontend/src/components/university/modules/SharedUnivFeedback.jsx

-import React, { useEffect } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import compose from "recompose/compose";
 import ModuleWrapper from "./common/ModuleWrapper";
@@ -7,7 +7,6 @@ import withUnivInfo from "../../../hoc/withUnivInfo";
 import RequestParams from "../../../utils/api/RequestParams";
 import TruncatedMarkdown from "../../common/markdown/TruncatedMarkdown";
 import withNetworkWrapper, {
-  getApiPropTypes,
   NetWrapParam
 } from "../../../hoc/withNetworkWrapper";
 
@@ -25,11 +24,7 @@ CoreComponent.propTypes = {
 const buildParams = univId =>
   RequestParams.Builder.withQueryParam("university", univId).build();
 
-function SharedUnivFeedback({ univId, api, feedback }) {
-  useEffect(() => {
-    api.feedback.setParams(buildParams(univId));
-  }, [univId]);
-
+function SharedUnivFeedback({ feedback }) {
   return (
     <ModuleWrapper
       buildTitle={() =>
@@ -43,16 +38,18 @@ function SharedUnivFeedback({ univId, api, feedback }) {
 }
 
 SharedUnivFeedback.propTypes = {
-  univId: PropTypes.number.isRequired,
-  feedback: PropTypes.array.isRequired,
-  api: getApiPropTypes("feedback").isRequired
+  feedback: PropTypes.array.isRequired
 };
 
 export default compose(
   withUnivInfo(),
   withNetworkWrapper([
-    new NetWrapParam("sharedUnivFeedbacks", "all", "feedback", props =>
-      buildParams(props.univId)
-    )
+    new NetWrapParam("sharedUnivFeedbacks", "all", {
+      propKey: "feedback",
+      params: props => buildParams(props.univId),
+      propTypes: {
+        univId: PropTypes.number.isRequired
+      }
+    })
   ])
 )(SharedUnivFeedback);

frontend/src/components/university/modules/UniversityDri.jsx

-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import compose from "recompose/compose";
 
@@ -10,7 +10,6 @@ import ModuleGroupWrapper from "./common/ModuleGroupWrapper";
 import UniversityDriForm from "../forms/UniversityDriForm";
 import RequestParams from "../../../utils/api/RequestParams";
 import withNetworkWrapper, {
-  getApiPropTypes,
   NetWrapParam
 } from "../../../hoc/withNetworkWrapper";
 import withUnivInfo from "../../../hoc/withUnivInfo";
@@ -30,11 +29,7 @@ CoreComponent.propTypes = {
 const buildParams = univId =>
   RequestParams.Builder.withQueryParam("universities", univId).build();
 
-function UniversityDri({ univId, univDriItems, api }) {
-  useEffect(() => {
-    api.univDriItems.setParams(buildParams(univId));
-  }, [univId]);
-
+function UniversityDri({ univId, univDriItems }) {
   const defaultModelData = useMemo(
     () => ({
       universities: [univId],
@@ -64,15 +59,18 @@ function UniversityDri({ univId, univDriItems, api }) {
 
 UniversityDri.propTypes = {
   univId: PropTypes.string.isRequired,
-  univDriItems: PropTypes.array.isRequired,
-  api: getApiPropTypes("univDriItems").isRequired