@dhis2/analytics 28.1.2 → 29.0.0

package/build/cjs/components/Interpretations/InterpretationsProvider/hooks.js

@@ -0,0 +1,278 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUpdateInterpretationText = exports.useUpdateCommentForActiveInterpretation = exports.useLike = exports.useInterpretationsManager = exports.useInterpretationsList = exports.useInterpretationsCurrentUser = exports.useInterpretationAccess = exports.useInterpretation = exports.useDeleteInterpretation = exports.useDeleteCommentFromActiveInterpretation = exports.useCreateInterpretation = exports.useCommentAccess = exports.useAddCommentToActiveInterpretation = exports.useActiveInterpretation = void 0;
+var _react = require("react");
+var _getInterpretationAccess = require("../common/getInterpretationAccess.js");
+var _InterpretationsProvider = require("./InterpretationsProvider.js");
+const SET_LOADING = 'SET_LOADING';
+const SET_ERROR = 'SET_ERROR';
+const SET_DATA = 'SET_DATA';
+const RESET = 'RESET';
+const initialLoadingState = {
+  loading: false,
+  error: undefined,
+  data: undefined
+};
+function loadingReducer(state, action) {
+  switch (action.type) {
+    case SET_LOADING:
+      return {
+        ...state,
+        loading: true
+      };
+    case SET_ERROR:
+      return {
+        ...state,
+        error: action.payload,
+        loading: false
+      };
+    case SET_DATA:
+      return {
+        data: action.payload,
+        error: undefined,
+        loading: false
+      };
+    case RESET:
+      return {
+        ...initialLoadingState
+      };
+    default:
+      return state;
+  }
+}
+const useInterpretationsManager = () => {
+  const interpretationsManager = (0, _react.useContext)(_InterpretationsProvider.InterpretationsContext);
+  if (!interpretationsManager) {
+    throw new Error('Called useInterpretationsManager() from outside an InterpretationsProvider');
+  }
+  return interpretationsManager;
+};
+exports.useInterpretationsManager = useInterpretationsManager;
+const useInterpretationsCurrentUser = () => {
+  const interpretationsManager = useInterpretationsManager();
+  return interpretationsManager.getCurrentUser();
+};
+exports.useInterpretationsCurrentUser = useInterpretationsCurrentUser;
+const useInterpretationsList = (type, id) => {
+  const prevTypeRef = (0, _react.useRef)(null);
+  const prevIdRef = (0, _react.useRef)(null);
+  const interpretationsManager = useInterpretationsManager();
+  const [state, dispatch] = (0, _react.useReducer)(loadingReducer, initialLoadingState);
+  const fetchList = (0, _react.useCallback)(async () => {
+    dispatch({
+      type: SET_LOADING
+    });
+    try {
+      const data = await interpretationsManager.loadInterpretationsForVisualization(type, id);
+      dispatch({
+        type: SET_DATA,
+        payload: data
+      });
+    } catch (error) {
+      console.error(error);
+      dispatch({
+        type: SET_ERROR,
+        payload: error
+      });
+    }
+  }, [interpretationsManager, type, id, dispatch]);
+
+  // Ensure manager updates get propagated to the state
+  (0, _react.useEffect)(() => {
+    const unsubscribe = interpretationsManager.subscribeToInterpretationsListUpdates(interpretationIdsByDate => {
+      dispatch({
+        type: SET_DATA,
+        payload: interpretationIdsByDate
+      });
+    });
+    return unsubscribe;
+  }, [interpretationsManager]);
+
+  // Fetch when mounting or after a reset
+  (0, _react.useEffect)(() => {
+    if (type && id && !state.loading && !state.data && !state.error) {
+      fetchList();
+    }
+  }, [fetchList, state, type, id]);
+
+  // Handle active item changes and clearance
+  (0, _react.useEffect)(() => {
+    const prevType = prevTypeRef.current;
+    const prevId = prevIdRef.current;
+    const isTypeChange = prevType && type && prevType !== type;
+    const isIdChange = prevId && id && prevId !== id;
+    const isTypeClearance = prevType && !type;
+    const isIdClearance = prevId && !id;
+    if (isTypeChange || isIdChange || isTypeClearance || isIdClearance) {
+      dispatch({
+        type: RESET
+      });
+    }
+    if (isTypeClearance || isIdClearance) {
+      interpretationsManager.clearInterpretations();
+    }
+    prevTypeRef.current = type;
+    prevIdRef.current = id;
+  }, [interpretationsManager, type, id]);
+  return state;
+};
+exports.useInterpretationsList = useInterpretationsList;
+const useActiveInterpretation = id => {
+  const prevIdRef = (0, _react.useRef)(null);
+  const interpretationsManager = useInterpretationsManager();
+  const [state, dispatch] = (0, _react.useReducer)(loadingReducer, initialLoadingState);
+  const fetchInterpretation = (0, _react.useCallback)(async () => {
+    dispatch({
+      type: SET_LOADING
+    });
+    try {
+      const data = await interpretationsManager.loadActiveInterpretation(id);
+      dispatch({
+        type: SET_DATA,
+        payload: data
+      });
+    } catch (error) {
+      console.error(error);
+      dispatch({
+        type: SET_ERROR,
+        payload: error
+      });
+    }
+  }, [interpretationsManager, id, dispatch]);
+
+  // Ensure manager updates get propagated to the state
+  (0, _react.useEffect)(() => {
+    const unsubscribe = interpretationsManager.subscribeToInterpretationUpdates(id, interpretation => {
+      dispatch({
+        type: SET_DATA,
+        payload: interpretation
+      });
+    });
+    return unsubscribe;
+  }, [interpretationsManager, id]);
+
+  // Fetch when mounting or after a reset
+  (0, _react.useEffect)(() => {
+    if (id && !state.loading && !state.data && !state.error) {
+      fetchInterpretation();
+    }
+  }, [fetchInterpretation, state, id]);
+
+  // Handle active item changes and clearance
+  (0, _react.useEffect)(() => {
+    const prevId = prevIdRef.current;
+    const isIdChange = prevId && id && prevId !== id;
+    const isIdClearance = prevId && !id;
+    if (isIdChange || isIdClearance) {
+      dispatch({
+        type: RESET
+      });
+    }
+    if (isIdClearance) {
+      interpretationsManager.clearActiveInterpretation();
+    }
+    prevIdRef.current = id;
+  }, [id, interpretationsManager]);
+  return state;
+};
+exports.useActiveInterpretation = useActiveInterpretation;
+const useInterpretation = id => {
+  const interpretationsManager = useInterpretationsManager();
+  const [interpretation, setInterpretation] = (0, _react.useState)(interpretationsManager.getInterpretation(id));
+  (0, _react.useEffect)(() => {
+    const unsubscribe = interpretationsManager.subscribeToInterpretationUpdates(id, newInterpretation => {
+      setInterpretation(newInterpretation);
+    });
+    return unsubscribe;
+  }, [interpretationsManager, id]);
+  return interpretation;
+};
+exports.useInterpretation = useInterpretation;
+const useLike = id => {
+  const interpretationsManager = useInterpretationsManager();
+  const [{
+    loading: toggleLikeInProgress,
+    data: interpretation
+  }, dispatch] = (0, _react.useReducer)(loadingReducer, {
+    ...initialLoadingState,
+    data: interpretationsManager.getInterpretation(id)
+  });
+  const toggleLike = (0, _react.useCallback)(async () => {
+    dispatch({
+      type: SET_LOADING
+    });
+    try {
+      const data = await interpretationsManager.toggleInterpretationLike(id);
+      dispatch({
+        type: SET_DATA,
+        payload: data
+      });
+    } catch (error) {
+      console.error(error);
+      dispatch({
+        type: SET_ERROR,
+        payload: error
+      });
+    }
+  }, [id, interpretationsManager]);
+  const isLikedByCurrentUser = (0, _react.useMemo)(() => {
+    const currentUser = interpretationsManager.getCurrentUser();
+    return interpretation.likedBy.some(likedBy => likedBy.id === currentUser.id);
+  }, [interpretation, interpretationsManager]);
+  return {
+    isLikedByCurrentUser,
+    toggleLike,
+    toggleLikeInProgress
+  };
+};
+exports.useLike = useLike;
+const useInterpretationAccess = interpretation => {
+  const currentUser = useInterpretationsCurrentUser();
+  const access = (0, _react.useMemo)(() => (0, _getInterpretationAccess.getInterpretationAccess)(interpretation, currentUser), [interpretation, currentUser]);
+  return access;
+};
+exports.useInterpretationAccess = useInterpretationAccess;
+const useCommentAccess = (comment, canComment) => {
+  const currentUser = useInterpretationsCurrentUser();
+  const access = (0, _react.useMemo)(() => (0, _getInterpretationAccess.getCommentAccess)(comment, canComment, currentUser), [comment, canComment, currentUser]);
+  return access;
+};
+exports.useCommentAccess = useCommentAccess;
+const useInterpretationsManagerMutation = (methodName, options = {}) => {
+  const interpretationsManager = useInterpretationsManager();
+  const [state, dispatch] = (0, _react.useReducer)(loadingReducer, initialLoadingState);
+  const doAsyncCallback = (0, _react.useCallback)(async () => {
+    dispatch({
+      type: SET_LOADING
+    });
+    try {
+      const data = await interpretationsManager[methodName](options);
+      dispatch({
+        type: SET_DATA,
+        payload: data
+      });
+    } catch (error) {
+      console.error(error);
+      dispatch({
+        type: SET_ERROR,
+        payload: error
+      });
+    }
+  }, [interpretationsManager, methodName, options]);
+  return [doAsyncCallback, state];
+};
+const useCreateInterpretation = options => useInterpretationsManagerMutation('createInterpretation', options);
+exports.useCreateInterpretation = useCreateInterpretation;
+const useUpdateInterpretationText = options => useInterpretationsManagerMutation('updateInterpretationText', options);
+exports.useUpdateInterpretationText = useUpdateInterpretationText;
+const useDeleteInterpretation = options => useInterpretationsManagerMutation('deleteInterpretation', options);
+exports.useDeleteInterpretation = useDeleteInterpretation;
+const useAddCommentToActiveInterpretation = options => useInterpretationsManagerMutation('addCommentToActiveInterpretation', options);
+exports.useAddCommentToActiveInterpretation = useAddCommentToActiveInterpretation;
+const useUpdateCommentForActiveInterpretation = options => useInterpretationsManagerMutation('updateCommentForActiveInterpretation', options);
+exports.useUpdateCommentForActiveInterpretation = useUpdateCommentForActiveInterpretation;
+const useDeleteCommentFromActiveInterpretation = options => useInterpretationsManagerMutation('deleteCommentFromActiveInterpretation', options);
+exports.useDeleteCommentFromActiveInterpretation = useDeleteCommentFromActiveInterpretation;

package/build/cjs/components/Interpretations/InterpretationsProvider/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "InterpretationsProvider", {
+  enumerable: true,
+  get: function () {
+    return _InterpretationsProvider.InterpretationsProvider;
+  }
+});
+var _InterpretationsProvider = require("./InterpretationsProvider.js");

package/build/cjs/components/Interpretations/InterpretationsUnit/InterpretationForm.js

@@ -4,64 +4,61 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InterpretationForm = void 0;
-var _appRuntime = require("@dhis2/app-runtime");
 var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
 var _ui = require("@dhis2/ui");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _index = require("../../RichText/index.js");
 var _index2 = require("../common/index.js");
+var _hooks = require("../InterpretationsProvider/hooks.js");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const InterpretationForm = ({
   type,
   id,
-  currentUser,
   disabled,
-  showNoTimeDimensionHelpText,
-  onSave
+  showNoTimeDimensionHelpText
 }) => {
   const [showRichTextEditor, setShowRichTextEditor] = (0, _react.useState)(false);
-  const [interpretationText, setInterpretationText] = (0, _react.useState)('');
-  const saveMutationRef = (0, _react.useRef)({
-    resource: `interpretations/${type}/${id}`,
-    type: 'create',
-    data: ({
-      interpretationText
-    }) => interpretationText
-  });
+  const [text, setText] = (0, _react.useState)('');
+  const onComplete = (0, _react.useCallback)(() => {
+    setShowRichTextEditor(false);
+    setText('');
+  }, []);
+  const currentUser = (0, _hooks.useInterpretationsCurrentUser)();
   const [save, {
-    loading: saveMutationInProgress
-  }] = (0, _appRuntime.useDataMutation)(saveMutationRef.current, {
-    onComplete: () => {
-      setShowRichTextEditor(false);
-      setInterpretationText('');
-      onSave();
-    }
+    loading,
+    error
+  }] = (0, _hooks.useCreateInterpretation)({
+    type,
+    id,
+    text,
+    onComplete
   });
   const inputPlaceholder = _d2I18n.default.t('Write an interpretation');
   return /*#__PURE__*/_react.default.createElement(_index2.MessageEditorContainer, {
-    currentUser: currentUser,
+    currentUserName: currentUser.name,
     dataTest: "interpretation-form"
   }, showRichTextEditor ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.RichTextEditor, {
-    disabled: saveMutationInProgress,
+    disabled: loading,
     inputPlaceholder: inputPlaceholder,
-    onChange: setInterpretationText,
-    value: interpretationText,
+    onChange: setText,
+    value: text,
+    errorText: error ? _d2I18n.default.t('Could not post interpretation') : '',
     helpText: showNoTimeDimensionHelpText ? _d2I18n.default.t('Other people viewing this interpretation in the future may see more data.') : undefined
   }), /*#__PURE__*/_react.default.createElement(_index2.MessageButtonStrip, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
     primary: true,
     small: true,
-    loading: saveMutationInProgress,
+    loading: loading,
     onClick: () => save({
-      interpretationText
+      interpretationText: text
     })
   }, _d2I18n.default.t('Post interpretation')), /*#__PURE__*/_react.default.createElement(_ui.Button, {
     secondary: true,
     small: true,
-    disabled: saveMutationInProgress,
+    disabled: loading,
     onClick: () => {
-      setInterpretationText('');
+      setText('');
       setShowRichTextEditor(false);
     }
   }, _d2I18n.default.t('Cancel')))) : /*#__PURE__*/_react.default.createElement(_ui.Input, {
@@ -72,10 +69,8 @@ const InterpretationForm = ({
 };
 exports.InterpretationForm = InterpretationForm;
 InterpretationForm.propTypes = {
-  currentUser: _propTypes.default.object,
   disabled: _propTypes.default.bool,
   id: _propTypes.default.string,
   showNoTimeDimensionHelpText: _propTypes.default.bool,
-  type: _propTypes.default.string,
-  onSave: _propTypes.default.func
+  type: _propTypes.default.string
 };

package/build/cjs/components/Interpretations/InterpretationsUnit/InterpretationList.js

@@ -12,43 +12,20 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _index = require("../common/index.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const sortByCreatedDateDesc = (a, b) => {
-  const dateA = a.created;
-  const dateB = b.created;
-  if (dateA < dateB) {
-    return 1;
-  }
-  if (dateA > dateB) {
-    return -1;
-  }
-  return 0;
-};
 const InterpretationList = ({
-  currentUser,
-  interpretations,
+  interpretationIdsByDate,
   onInterpretationClick,
-  onLikeToggled,
   onReplyIconClick,
-  refresh,
   disabled,
   dashboardRedirectUrl
 }) => {
   const {
     fromServerDate
   } = (0, _appRuntime.useTimeZoneConversion)();
-  const interpretationsByDate = interpretations.reduce((groupedInterpretations, interpretation) => {
-    const date = interpretation.created.split('T')[0];
-    if (date in groupedInterpretations) {
-      groupedInterpretations[date].push(interpretation);
-    } else {
-      groupedInterpretations[date] = [interpretation];
-    }
-    return groupedInterpretations;
-  }, {});
   return /*#__PURE__*/_react.default.createElement("ol", {
     "data-test": "interpretations-list",
     className: _style.default.dynamic([["4058400613", [_ui.spacers.dp8, _ui.spacers.dp8, _ui.spacers.dp16, _ui.colors.grey800, _ui.spacers.dp12, _ui.spacers.dp12, _ui.spacers.dp32, _ui.spacers.dp4]]]) + " " + "interpretation-groups"
-  }, Object.keys(interpretationsByDate).sort().reverse().map(date => /*#__PURE__*/_react.default.createElement("li", {
+  }, Object.keys(interpretationIdsByDate).map(date => /*#__PURE__*/_react.default.createElement("li", {
     key: date,
     className: _style.default.dynamic([["4058400613", [_ui.spacers.dp8, _ui.spacers.dp8, _ui.spacers.dp16, _ui.colors.grey800, _ui.spacers.dp12, _ui.spacers.dp12, _ui.spacers.dp32, _ui.spacers.dp4]]])
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -60,17 +37,13 @@ const InterpretationList = ({
     className: _style.default.dynamic([["4058400613", [_ui.spacers.dp8, _ui.spacers.dp8, _ui.spacers.dp16, _ui.colors.grey800, _ui.spacers.dp12, _ui.spacers.dp12, _ui.spacers.dp32, _ui.spacers.dp4]]]) + " " + "date-header"
   }, (0, _moment.default)(fromServerDate(date)).format('ll'))), /*#__PURE__*/_react.default.createElement("ol", {
     className: _style.default.dynamic([["4058400613", [_ui.spacers.dp8, _ui.spacers.dp8, _ui.spacers.dp16, _ui.colors.grey800, _ui.spacers.dp12, _ui.spacers.dp12, _ui.spacers.dp32, _ui.spacers.dp4]]]) + " " + "interpretation-list"
-  }, interpretationsByDate[date].sort(sortByCreatedDateDesc).map(interpretation => /*#__PURE__*/_react.default.createElement(_index.Interpretation, {
-    key: interpretation.id,
-    interpretation: interpretation,
-    currentUser: currentUser,
-    onClick: onInterpretationClick,
-    onLikeToggled: onLikeToggled,
+  }, interpretationIdsByDate[date].map(interpretationId => /*#__PURE__*/_react.default.createElement(_index.Interpretation, {
+    key: interpretationId,
+    id: interpretationId,
     onReplyIconClick: onReplyIconClick,
-    onDeleted: refresh,
-    onUpdated: refresh,
+    dashboardRedirectUrl: dashboardRedirectUrl,
     disabled: disabled,
-    dashboardRedirectUrl: dashboardRedirectUrl
+    onClick: onInterpretationClick
   }))))), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "4058400613",
     dynamic: [_ui.spacers.dp8, _ui.spacers.dp8, _ui.spacers.dp16, _ui.colors.grey800, _ui.spacers.dp12, _ui.spacers.dp12, _ui.spacers.dp32, _ui.spacers.dp4]
@@ -78,11 +51,8 @@ const InterpretationList = ({
 };
 exports.InterpretationList = InterpretationList;
 InterpretationList.propTypes = {
-  currentUser: _propTypes.default.object.isRequired,
-  interpretations: _propTypes.default.array.isRequired,
-  refresh: _propTypes.default.func.isRequired,
+  interpretationIdsByDate: _propTypes.default.objectOf(_propTypes.default.arrayOf(_propTypes.default.string)).isRequired,
   onInterpretationClick: _propTypes.default.func.isRequired,
-  onLikeToggled: _propTypes.default.func.isRequired,
   onReplyIconClick: _propTypes.default.func.isRequired,
   dashboardRedirectUrl: _propTypes.default.string,
   disabled: _propTypes.default.bool

package/build/cjs/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js

@@ -5,126 +5,75 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InterpretationsUnit = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-var _appRuntime = require("@dhis2/app-runtime");
 var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
 var _ui = require("@dhis2/ui");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../InterpretationsProvider/hooks.js");
 var _InterpretationForm = require("./InterpretationForm.js");
 var _InterpretationList = require("./InterpretationList.js");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const interpretationsQuery = {
-  interpretations: {
-    resource: 'interpretations',
-    params: ({
-      type,
-      id
-    }) => ({
-      fields: ['access[write,manage]', 'id', 'createdBy[id,displayName]', 'created', 'text', 'comments[id]', 'likes', 'likedBy[id]'],
-      filter: `${type}.id:eq:${id}`
-    })
-  }
-};
-const InterpretationsUnit = exports.InterpretationsUnit = /*#__PURE__*/(0, _react.forwardRef)(({
-  currentUser,
+const InterpretationsUnit = ({
   type,
   id,
   visualizationHasTimeDimension = true,
-  onInterpretationClick = Function.prototype,
+  onInterpretationClick,
   onReplyIconClick,
   disabled,
-  renderId,
   dashboardRedirectUrl
-}, ref) => {
+}) => {
   const [isExpanded, setIsExpanded] = (0, _react.useState)(true);
-  const [interpretations, setInterpretations] = (0, _react.useState)([]);
   const showNoTimeDimensionHelpText = type === 'eventVisualization' && !visualizationHasTimeDimension;
   const {
+    data: interpretationIdsByDate,
     loading,
-    fetching,
-    refetch
-  } = (0, _appRuntime.useDataQuery)(interpretationsQuery, {
-    lazy: true,
-    onComplete: data => setInterpretations(data.interpretations.interpretations)
-  });
-  const onCompleteAction = (0, _react.useCallback)(() => {
-    refetch({
-      type,
-      id
-    });
-  }, [type, id, refetch]);
-  (0, _react.useImperativeHandle)(ref, () => ({
-    refresh: onCompleteAction
-  }), [onCompleteAction]);
-  (0, _react.useEffect)(() => {
-    if (id) {
-      refetch({
-        type,
-        id
-      });
-    }
-  }, [type, id, renderId, refetch]);
-  const onLikeToggled = ({
-    id,
-    likedBy
-  }) => {
-    const interpretation = interpretations.find(interp => interp.id === id);
-    interpretation.likedBy = likedBy;
-    interpretation.likes = likedBy.length;
-  };
+    error
+  } = (0, _hooks.useInterpretationsList)(type, id);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["4120713286", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + ((0, _classnames.default)('container', {
+    className: _style.default.dynamic([["2008120072", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + ((0, _classnames.default)('container', {
       expanded: isExpanded
     }) || "")
-  }, fetching && !loading && /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["4120713286", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + "fetching-loader"
-  }, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, {
-    small: true
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("button", {
     onClick: () => setIsExpanded(!isExpanded),
-    className: _style.default.dynamic([["4120713286", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + "header"
+    className: _style.default.dynamic([["2008120072", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + "header"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.dynamic([["4120713286", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + "title"
+    className: _style.default.dynamic([["2008120072", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + "title"
   }, _d2I18n.default.t('Interpretations')), isExpanded ? /*#__PURE__*/_react.default.createElement(_ui.IconChevronUp24, {
     color: _ui.colors.grey700
   }) : /*#__PURE__*/_react.default.createElement(_ui.IconChevronDown24, {
     color: _ui.colors.grey700
   })), isExpanded && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading && /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["4120713286", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + "loader"
+    className: _style.default.dynamic([["2008120072", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + "loader"
   }, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, {
     small: true
-  })), interpretations && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InterpretationForm.InterpretationForm, {
-    currentUser: currentUser,
+  })), error && /*#__PURE__*/_react.default.createElement(_ui.NoticeBox, {
+    error: true,
+    title: _d2I18n.default.t('Error loading interpretations')
+  }, error.message || _d2I18n.default.t('Could not load interpretations')), interpretationIdsByDate && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InterpretationForm.InterpretationForm, {
     type: type,
     id: id,
-    onSave: onCompleteAction,
     disabled: disabled,
     showNoTimeDimensionHelpText: showNoTimeDimensionHelpText
   }), /*#__PURE__*/_react.default.createElement(_InterpretationList.InterpretationList, {
-    currentUser: currentUser,
-    interpretations: interpretations,
+    interpretationIdsByDate: interpretationIdsByDate,
     onInterpretationClick: onInterpretationClick,
-    onLikeToggled: onLikeToggled,
     onReplyIconClick: onReplyIconClick,
-    refresh: onCompleteAction,
     disabled: disabled,
     dashboardRedirectUrl: dashboardRedirectUrl
   }))), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "4120713286",
+    id: "2008120072",
     dynamic: [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]
-  }, [`.container.__jsx-style-dynamic-selector{position:relative;padding:${_ui.spacers.dp16};border-bottom:1px solid ${_ui.colors.grey400};background-color:${_ui.colors.white};}`, ".fetching-loader.__jsx-style-dynamic-selector{position:absolute;inset:0px;background-color:rgba(255,255,255,0.8);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;z-index:1;}", `.expanded.__jsx-style-dynamic-selector{padding-bottom:${_ui.spacers.dp32};}`, ".loader.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;cursor:pointer;}", `.title.__jsx-style-dynamic-selector{font-size:16px;font-weight:500;line-height:21px;color:${_ui.colors.grey900};}`]));
-});
-InterpretationsUnit.displayName = 'InterpretationsUnit';
+  }, [`.container.__jsx-style-dynamic-selector{position:relative;padding:${_ui.spacers.dp16};border-bottom:1px solid ${_ui.colors.grey400};background-color:${_ui.colors.white};}`, `.expanded.__jsx-style-dynamic-selector{padding-bottom:${_ui.spacers.dp32};}`, ".loader.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".header.__jsx-style-dynamic-selector{all:unset;inline-size:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;cursor:pointer;}", `.title.__jsx-style-dynamic-selector{font-size:16px;font-weight:500;line-height:21px;color:${_ui.colors.grey900};}`]));
+};
+exports.InterpretationsUnit = InterpretationsUnit;
 InterpretationsUnit.propTypes = {
-  currentUser: _propTypes.default.object.isRequired,
   id: _propTypes.default.string.isRequired,
   type: _propTypes.default.string.isRequired,
+  onInterpretationClick: _propTypes.default.func.isRequired,
   dashboardRedirectUrl: _propTypes.default.string,
   disabled: _propTypes.default.bool,
-  renderId: _propTypes.default.number,
   visualizationHasTimeDimension: _propTypes.default.bool,
-  onInterpretationClick: _propTypes.default.func,
   onReplyIconClick: _propTypes.default.func
 };