resourceEvaluation end and add refresh deck action

claroline · Sep 13, 2023 · 78faba6 · 78faba6
1 parent 9140103
commit 78faba6
Show file tree

Hide file tree

Showing 13 changed files with 79 additions and 69 deletions.
diff --git a/src/plugin/flashcard/Controller/FlashcardDeckController.php b/src/plugin/flashcard/Controller/FlashcardDeckController.php
@@ -2,6 +2,7 @@
 
 namespace Claroline\FlashcardBundle\Controller;
 
+use Claroline\AppBundle\API\Serializer\SerializerInterface;
 use Claroline\AppBundle\Controller\AbstractCrudController;
 use Claroline\CoreBundle\Entity\User;
 use Claroline\FlashcardBundle\Entity\Flashcard;
@@ -67,8 +68,11 @@ public function updateProgressionAction(Flashcard $card, User $user, Request $re
 
         $this->evaluationManager->update($card->getDeck()->getResourceNode(), $user, $userProgression);
 
+        $resourceUserEvaluation = $this->evaluationManager->getResourceUserEvaluation($card->getDeck()->getResourceNode(), $user);
+
         return new JsonResponse([
             'progression' => $this->userProgressionSerializer->serialize($userProgression),
+            'userEvaluation' => $this->serializer->serialize($resourceUserEvaluation, [SerializerInterface::SERIALIZE_MINIMAL]),
         ]);
     }
 }
diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/components/overview.jsx b/src/plugin/flashcard/Resources/modules/resources/flashcard/components/overview.jsx
@@ -9,11 +9,11 @@ import {ResourceEvaluation as ResourceEvaluationTypes} from '#/main/evaluation/r
 import {FlashcardDeck as FlashcardDeckTypes} from '#/plugin/flashcard/resources/flashcard/prop-types'
 import {FlashcardInfo} from '#/plugin/flashcard/resources/flashcard/components/info'
 
-const Overview = (props) => {
-  console.log(props)
-  return <ResourceOverview
+const Overview = (props) =>
+  <ResourceOverview
     contentText={get(props.flashcardDeck, 'overview.message')}
     evaluation={props.evaluation}
+    resourceNode={props.resourceNode}
     actions={[{
       type: LINK_BUTTON,
       label: trans('start', {}, 'actions'),
@@ -33,7 +33,6 @@ const Overview = (props) => {
       </div>
     </section>
   </ResourceOverview>
-}
 
 Overview.propTypes = {
   basePath: T.string.isRequired,
@@ -43,7 +42,8 @@ Overview.propTypes = {
   evaluation: T.shape(
     ResourceEvaluationTypes.propTypes
   ),
-  empty: T.bool.isRequired
+  empty: T.bool.isRequired,
+  resourceNode: T.object
 }
 
 Overview.defaultProps = {

diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/components/resource.jsx b/src/plugin/flashcard/Resources/modules/resources/flashcard/components/resource.jsx
@@ -38,15 +38,23 @@ const FlashcardResource = props =>
       }, {
         path: '/play',
         exact: true,
-        component: Player
+        component: Player,
+        onEnter: () => {
+          props.refreshDeck(props.flashcardDeck.id)
+        }
       }, {
         path: '/',
         component: Overview,
         disabled: !props.overview
       }
     ]}
     redirect={[
-      {from: '/', exact: true, to: '/play', disabled: props.overview}
+      {
+        from: '/',
+        exact: true,
+        to: '/play',
+        disabled: props.overview
+      }
     ]}
   />
 

diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/containers/overview.jsx b/src/plugin/flashcard/Resources/modules/resources/flashcard/containers/overview.jsx
@@ -12,9 +12,10 @@ const Overview = connect(
     evaluation: resourceSelectors.resourceEvaluation(state),
     cards: selectors.cards(state),
     empty: selectors.empty(state),
-    overviewMessage: selectors.overviewMessage(state),
     overview: selectors.showOverview(state),
-    showEndPage: selectors.showEndPage(state)
+    resourceNode: resourceSelectors.resourceNode(state),
+    showEndPage: selectors.showEndPage(state),
+    flashcardDeckProgression: selectors.flashcardDeckProgression(state)
   })
 )(OverviewComponent)
 

diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/containers/resource.jsx b/src/plugin/flashcard/Resources/modules/resources/flashcard/containers/resource.jsx
@@ -6,14 +6,19 @@ import {selectors as resourceSelectors} from '#/main/core/resource/store'
 import {hasPermission} from '#/main/app/security/permissions'
 
 import {FlashcardResource as FlashcardResourceComponent} from '#/plugin/flashcard/resources/flashcard/components/resource'
-import {selectors} from '#/plugin/flashcard/resources/flashcard/store'
+import {actions, selectors} from '#/plugin/flashcard/resources/flashcard/store'
 
 const FlashcardResource = withRouter(
   connect(
     (state) => ({
       flashcardDeck: selectors.flashcardDeck(state),
       overview: selectors.showOverview(state),
       editable: hasPermission('edit', resourceSelectors.resourceNode(state))
+    }),
+    (dispatch) => ({
+      async refreshDeck(deckId) {
+        return dispatch(actions.refreshDeck(deckId))
+      }
     })
   )(FlashcardResourceComponent)
 )

diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/editor/components/editor.jsx b/src/plugin/flashcard/Resources/modules/resources/flashcard/editor/components/editor.jsx
@@ -163,8 +163,6 @@ const Editor = connect(
   }),
   (dispatch) => ({
     update(prop, value) {
-      console.log(prop)
-      console.log(value)
       dispatch(formActions.updateProp(selectors.FORM_NAME, prop, value))
     }
   })

diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/editor/store/selectors.js b/src/plugin/flashcard/Resources/modules/resources/flashcard/editor/store/selectors.js
@@ -1,36 +1,18 @@
-import get from 'lodash/get'
 import {createSelector} from 'reselect'
 
 import {selectors as formSelectors} from '#/main/app/content/form/store/selectors'
 import {selectors as baseSelectors} from '#/plugin/flashcard/resources/flashcard/store/selectors'
 
-
-const STORE_NAME = 'editor'
 const FORM_NAME = `${baseSelectors.STORE_NAME}.flashcardForm`
 
 const flashcardDeck = (state) => formSelectors.data(formSelectors.form(state, FORM_NAME))
 
-const flashcardDeckId = createSelector(
-  [flashcardDeck],
-  (flashcardDeck) => flashcardDeck.id
-)
-
-const flashcardDeckType = createSelector(
-  [flashcardDeck],
-  (flashcardDeck) => get(flashcardDeck, 'parameters.type')
-)
-
 const cards = createSelector(
   [flashcardDeck],
   (flashcardDeck) => flashcardDeck.cards || []
 )
 
-
 export const selectors = {
-  STORE_NAME,
   FORM_NAME,
-
-  flashcardDeckId,
-  flashcardDeckType,
   cards
 }
diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/player/components/end.jsx b/src/plugin/flashcard/Resources/modules/resources/flashcard/player/components/end.jsx
@@ -21,7 +21,8 @@ class PlayerEndComponent extends Component {
       >
         <section className="resource-parameters mb-3">
           <FlashcardInfo
-            flashcard={this.props.flashcard}
+            flashcardDeck={this.props.flashcardDeck}
+            flashcardDeckProgression={this.props.flashcardDeckProgression}
           />
         </section>
       </ResourceEnd>
@@ -44,7 +45,8 @@ PlayerEndComponent.propTypes = {
 const PlayerEnd = connect(
   (state) => ({
     flashcardDeck: baseSelectors.flashcardDeck(state),
-    evaluation: resourceSelectors.resourceEvaluation(state)
+    evaluation: resourceSelectors.resourceEvaluation(state),
+    flashcardDeckProgression: selectors.flashcardDeckProgression(state)
   })
 )(PlayerEndComponent)
 

diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/player/components/player.jsx b/src/plugin/flashcard/Resources/modules/resources/flashcard/player/components/player.jsx
@@ -8,22 +8,22 @@ import {CallbackButton} from '#/main/app/buttons/callback/components/button'
 import {CALLBACK_BUTTON} from '#/main/app/buttons'
 import { ContentHtml } from '#/main/app/content/components/html'
 import { ContentPlaceholder } from '#/main/app/content/components/placeholder'
+import {ProgressBar} from '#/main/app/content/components/progress-bar'
 
 import { FlashcardDeck } from '#/plugin/flashcard/resources/flashcard/prop-types'
-import {ProgressBar} from '#/main/app/content/components/progress-bar'
 
-const Player = ({ deck, updateUserProgression, draw }) => {
+const Player = props => {
   const history = useHistory()
   const match = useRouteMatch()
   const [isFlipped, setIsFlipped] = useState(false)
   const [currentCardIndex, setCurrentCardIndex] = useState(0)
-  const currentCard = deck.cards[currentCardIndex]
-  const maxCards = draw > 0 ? Math.min(draw, deck.cards.length) : deck.cards.length
+  const currentCard = props.flashcardDeck.cards[currentCardIndex]
+  const maxCards = props.draw > 0 ? Math.min(props.draw, props.flashcardDeck.cards.length) : props.flashcardDeck.cards.length
 
   const goToNextCard = () => {
     const isLastCard = currentCardIndex + 1 === maxCards
 
-    if (isLastCard && deck.end.display) {
+    if (isLastCard && props.flashcardDeck.end.display) {
       history.push(`${match.path}/end`)
     } else {
       const nextIndex = isLastCard ? 0 : currentCardIndex + 1
@@ -32,7 +32,7 @@ const Player = ({ deck, updateUserProgression, draw }) => {
   }
 
   const handleAnswer = (isSuccessful) => {
-    updateUserProgression(currentCard.id, isSuccessful).then(() => {
+    props.updateProgression(currentCard.id, isSuccessful).then(() => {
       setIsFlipped(false)
       setTimeout(goToNextCard, 100)
     })
@@ -74,8 +74,8 @@ const Player = ({ deck, updateUserProgression, draw }) => {
               {renderCardContent('hiddenContent')}
             </div>
           </div>
-          { maxCards > 1 && (!draw || currentCardIndex < draw - 1) && <div className="flashcard-element flashcard-element-1"></div> }
-          { maxCards > 2 && (!draw || currentCardIndex < draw - 2) && <div className="flashcard-element flashcard-element-2"></div> }
+          { maxCards > 1 && (!props.draw || currentCardIndex < props.draw - 1) && <div className="flashcard-element flashcard-element-1"></div> }
+          { maxCards > 2 && (!props.draw || currentCardIndex < props.draw - 2) && <div className="flashcard-element flashcard-element-2"></div> }
         </div>
       </div>
 
@@ -111,11 +111,11 @@ const Player = ({ deck, updateUserProgression, draw }) => {
 }
 
 Player.propTypes = {
-  deck: T.shape(
+  flashcardDeck: T.shape(
     FlashcardDeck.propTypes
   ).isRequired,
   draw: T.number,
-  updateUserProgression: T.func.isRequired
+  updateProgression: T.func.isRequired
 }
 
 export {

diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/player/containers/player.jsx b/src/plugin/flashcard/Resources/modules/resources/flashcard/player/containers/player.jsx
@@ -7,12 +7,13 @@ import {selectors, actions} from '#/plugin/flashcard/resources/flashcard/store'
 
 const Player = withRouter(connect(
   state => ({
-    deck: selectors.flashcardDeck(state),
-    draw: selectors.draw(state)
+    flashcardDeck: selectors.flashcardDeck(state),
+    draw: selectors.draw(state),
+    flashcardDeckProgression: selectors.flashcardDeckProgression(state)
   }),
   (dispatch) => ({
-    async updateUserProgression(cardId, isSuccessful) {
-      return dispatch(actions.updateUserProgression(cardId, isSuccessful))
+    async updateProgression(cardId, isSuccessful) {
+      return dispatch(actions.updateProgression(cardId, isSuccessful))
     }
   })
 )(PlayerComponent))

diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/store/actions.js b/src/plugin/flashcard/Resources/modules/resources/flashcard/store/actions.js
@@ -1,23 +1,39 @@
 import { API_REQUEST } from '#/main/app/api'
 import {makeActionCreator} from '#/main/app/store/actions'
-import {selectors} from '#/plugin/flashcard/resources/flashcard/store/selectors'
+
+import {actions as resourceActions} from '#/main/core/resource/store'
+
+export const FLASHCARD_GET_DECK = 'FLASHCARD_GET_DECK'
+export const FLASHCARD_UPDATE_PROGRESSION = 'FLASHCARD_UPDATE_PROGRESSION'
 
 export const actions = {}
 
-actions.updateProgressionProp = makeActionCreator(selectors.FLASHCARD_UPDATE_PROGRESSION, 'id', 'is_successful')
+actions.updateCardProgression = makeActionCreator(FLASHCARD_UPDATE_PROGRESSION, 'id', 'is_successful')
+actions.refreshDeckAction = makeActionCreator(FLASHCARD_GET_DECK, 'data')
 
-actions.updateUserProgression = (cardId, isSuccessful) => (dispatch) => dispatch({
+actions.updateProgression = (cardId, isSuccessful, silent = true) => ({
   [API_REQUEST]: {
-    silent: true,
-    url: ['apiv2_flashcard_progression_update', {
-      id: cardId,
-      isSuccessful: isSuccessful
-    } ],
+    silent: silent,
+    url: ['apiv2_flashcard_progression_update', {id: cardId, isSuccessful: isSuccessful}],
     request: {
       method: 'PUT'
     },
     success: (data, dispatch) => {
-      dispatch(actions.updateProgressionProp(cardId, isSuccessful))
+      dispatch(resourceActions.updateUserEvaluation(data.userEvaluation))
+      dispatch(actions.updateCardProgression(cardId, isSuccessful))
+    }
+  }
+})
+
+actions.refreshDeck = (deckId, silent = true) => ({
+  [API_REQUEST]: {
+    silent: silent,
+    url: ['apiv2_flashcard_deck_get', {id: deckId}],
+    request: {
+      method: 'GET'
+    },
+    success: (data, dispatch) => {
+      dispatch(actions.refreshDeckAction(data))
     }
   }
 })
diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/store/reducer.js b/src/plugin/flashcard/Resources/modules/resources/flashcard/store/reducer.js
@@ -8,11 +8,17 @@ import {RESOURCE_LOAD} from '#/main/core/resource/store/actions'
 
 import {selectors} from '#/plugin/flashcard/resources/flashcard/store/selectors'
 import {selectors as editorSelectors, reducer as editorReducer} from '#/plugin/flashcard/resources/flashcard/editor/store'
+import {FLASHCARD_GET_DECK, FLASHCARD_UPDATE_PROGRESSION} from '#/plugin/flashcard/resources/flashcard/store/actions'
 
 const reducer = combineReducers(Object.assign({
   data: makeReducer({}, {
     [makeInstanceAction(RESOURCE_LOAD, selectors.STORE_NAME)]: (state, action) => action.resourceData || state,
-    [selectors.FLASHCARD_UPDATE_PROGRESSION]: (state, action) => {
+    [FLASHCARD_GET_DECK] : (state, action) => {
+      const newState = cloneDeep(state)
+      newState.flashcardDeck = action.data
+      return newState
+    },
+    [FLASHCARD_UPDATE_PROGRESSION]: (state, action) => {
       const newState = cloneDeep(state)
       const cardProgression = newState.flashcardDeckProgression.filter((data) => data.flashcard.id === action.id)[0]
       if (cardProgression) {

diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/store/selectors.js b/src/plugin/flashcard/Resources/modules/resources/flashcard/store/selectors.js
@@ -2,7 +2,6 @@ import {createSelector} from 'reselect'
 import get from 'lodash/get'
 
 const STORE_NAME = 'flashcard'
-const FLASHCARD_UPDATE_PROGRESSION = 'FLASHCARD_UPDATE_PROGRESSION'
 
 const resource = (state) => state[STORE_NAME]
 
@@ -36,16 +35,6 @@ const empty = createSelector(
   (cards) => 0 === cards.length
 )
 
-const display = createSelector(
-  [flashcardDeck],
-  (flashcardDeck) => flashcardDeck.display || {}
-)
-
-const overviewMessage = createSelector(
-  [display],
-  (display) => display.description
-)
-
 const showOverview = createSelector(
   [flashcardDeck],
   (flashcardDeck) => get(flashcardDeck, 'overview.display') || false
@@ -58,7 +47,6 @@ const showEndPage = createSelector(
 
 export const selectors = {
   STORE_NAME,
-  FLASHCARD_UPDATE_PROGRESSION,
 
   resource,
   flashcardDeck,
@@ -67,7 +55,6 @@ export const selectors = {
   cards,
   draw,
   empty,
-  overviewMessage,
   showOverview,
   showEndPage
 }