Merge pull request learningequality#12438 from nathanaelg16/use_user_…

…composable Migrating existing references to session getters to use the useUser composable
BabyElias · Aug 8, 2024 · 5582278 · 5582278
2 parents 83edcef + 6ed9d99
commit 5582278
Show file tree

Hide file tree

Showing 66 changed files with 400 additions and 181 deletions.
diff --git a/kolibri/core/assets/src/views/AuthMessage.vue b/kolibri/core/assets/src/views/AuthMessage.vue
@@ -30,8 +30,8 @@
 
 <script>
 
-  import { mapGetters } from 'vuex';
   import urls from 'kolibri.urls';
+  import useUser from 'kolibri.coreVue.composables.useUser';
 
   const userRoles = [
     'admin',
@@ -44,6 +44,10 @@
 
   export default {
     name: 'AuthMessage',
+    setup() {
+      const { isUserLoggedIn } = useUser();
+      return { isUserLoggedIn };
+    },
     props: {
       authorizedRole: {
         type: String,
@@ -64,7 +68,6 @@
       },
     },
     computed: {
-      ...mapGetters(['isUserLoggedIn']),
       detailsText() {
         return this.details || this.$tr(this.authorizedRole);
       },

diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
@@ -58,6 +58,7 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { isTouchDevice } from 'kolibri.utils.browserInfo';
   import useUserSyncStatus from 'kolibri.coreVue.composables.useUserSyncStatus';
+  import useUser from 'kolibri.coreVue.composables.useUser';
   import AppBar from '../AppBar';
   import SideNav from '../SideNav';
   import ScrollingHeader from '../ScrollingHeader';
@@ -73,10 +74,12 @@
     setup() {
       const userDeviceStatus = useUserSyncStatus().deviceStatus;
       const { windowBreakpoint, windowIsSmall } = useKResponsiveWindow();
+      const { isAppContext } = useUser();
       return {
         userDeviceStatus,
         windowBreakpoint,
         windowIsSmall,
+        isAppContext,
       };
     },
     props: {
@@ -110,7 +113,7 @@
       };
     },
     computed: {
-      ...mapGetters(['isAppContext', 'isPageLoading']),
+      ...mapGetters(['isPageLoading']),
       isAppContextAndTouchDevice() {
         return this.isAppContext && isTouchDevice;
       },

diff --git a/kolibri/core/assets/src/views/ExamReport/AttemptTextDiff.vue b/kolibri/core/assets/src/views/ExamReport/AttemptTextDiff.vue
@@ -10,10 +10,14 @@
 
 <script>
 
-  import { mapGetters } from 'vuex';
+  import useUser from 'kolibri.coreVue.composables.useUser';
 
   export default {
     name: 'AttemptTextDiff',
+    setup() {
+      const { currentUserId } = useUser();
+      return { currentUserId };
+    },
     props: {
       correct: {
         type: Number,
@@ -29,7 +33,6 @@
       },
     },
     computed: {
-      ...mapGetters(['currentUserId']),
       isSecondPersonPerspective() {
         return this.userId === this.currentUserId;
       },

diff --git a/kolibri/core/assets/src/views/ExamReport/CurrentTryOverview.vue b/kolibri/core/assets/src/views/ExamReport/CurrentTryOverview.vue
@@ -100,12 +100,12 @@
   import get from 'lodash/get';
   import isPlainObject from 'lodash/isPlainObject';
   import isUndefined from 'lodash/isUndefined';
-  import { mapGetters } from 'vuex';
   import ElapsedTime from 'kolibri.coreVue.components.ElapsedTime';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import ProgressIcon from 'kolibri.coreVue.components.ProgressIcon';
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
   import MasteryModel from 'kolibri.coreVue.components.MasteryModel';
+  import useUser from 'kolibri.coreVue.composables.useUser';
   import { tryValidator } from './utils';
 
   export default {
@@ -117,6 +117,10 @@
       MasteryModel,
     },
     mixins: [commonCoreStrings],
+    setup() {
+      const { currentUserId } = useUser();
+      return { currentUserId };
+    },
     props: {
       // This should be an object with the following properties:
       // id: the unique id for the mastery log for this try
@@ -160,7 +164,6 @@
       },
     },
     computed: {
-      ...mapGetters(['currentUserId']),
       currentTryDefined() {
         return isPlainObject(this.currentTry);
       },

diff --git a/kolibri/core/assets/src/views/ExamReport/__tests__/AttemptTextDiff.spec.js b/kolibri/core/assets/src/views/ExamReport/__tests__/AttemptTextDiff.spec.js
@@ -1,15 +1,13 @@
 import { render, screen } from '@testing-library/vue';
 import '@testing-library/jest-dom';
+import useUser, { useUserMock } from 'kolibri.coreVue.composables.useUser';
 import AttemptTextDiff from '../AttemptTextDiff.vue';
 
+jest.mock('kolibri.coreVue.composables.useUser');
+
 const renderComponent = props => {
   return render(AttemptTextDiff, {
     props,
-    store: {
-      getters: {
-        currentUserId: () => 'mockUser1',
-      },
-    },
   });
 };
 
@@ -59,6 +57,10 @@ const testCases = [
 ];
 
 describe('AttemptTextDiff', () => {
+  beforeAll(() => {
+    useUser.mockImplementation(() => useUserMock({ currentUserId: 'mockUser1' }));
+  });
+
   testCases.forEach(({ caseName, correct, diff, userId, expectedMessage }) => {
     test(caseName, () => {
       renderComponent({ correct, diff, userId });

diff --git a/kolibri/core/assets/src/views/NotificationsRoot.vue b/kolibri/core/assets/src/views/NotificationsRoot.vue
@@ -42,14 +42,15 @@
 
 <script>
 
-  import { mapState, mapGetters } from 'vuex';
+  import { mapState } from 'vuex';
   import Lockr from 'lockr';
   import { UPDATE_MODAL_DISMISSED } from 'kolibri.coreVue.vuex.constants';
   import { currentLanguage, defaultLanguage } from 'kolibri.utils.i18n';
   import AuthMessage from 'kolibri.coreVue.components.AuthMessage';
   import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
   import AppError from 'kolibri-common/components/AppError';
   import GlobalSnackbar from 'kolibri-common/components/GlobalSnackbar';
+  import useUser from 'kolibri.coreVue.composables.useUser';
   import UpdateNotification from './UpdateNotification.vue';
 
   export default {
@@ -61,6 +62,14 @@
       GlobalSnackbar,
       UpdateNotification,
     },
+    setup() {
+      const { isAdmin, isSuperuser } = useUser();
+
+      return {
+        isAdmin,
+        isSuperuser,
+      };
+    },
     props: {
       authorized: {
         type: Boolean,
@@ -90,7 +99,6 @@
       };
     },
     computed: {
-      ...mapGetters(['isAdmin', 'isSuperuser']),
       ...mapState({
         error: state => state.core.error,
         notifications: state => state.core.notifications,

diff --git a/kolibri/core/assets/src/views/TotalPoints.vue b/kolibri/core/assets/src/views/TotalPoints.vue
@@ -31,11 +31,16 @@
 <script>
 
   import { mapGetters, mapActions } from 'vuex';
+  import useUser from 'kolibri.coreVue.composables.useUser';
 
   export default {
     name: 'TotalPoints',
+    setup() {
+      const { currentUserId, isUserLoggedIn } = useUser();
+      return { currentUserId, isUserLoggedIn };
+    },
     computed: {
-      ...mapGetters(['totalPoints', 'currentUserId', 'isUserLoggedIn']),
+      ...mapGetters(['totalPoints']),
     },
     watch: {
       currentUserId() {

diff --git a/kolibri/core/assets/src/views/UpdateNotification.vue b/kolibri/core/assets/src/views/UpdateNotification.vue
@@ -33,11 +33,16 @@
 <script>
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import { mapGetters, mapActions, mapMutations } from 'vuex';
+  import { mapActions, mapMutations } from 'vuex';
+  import useUser from 'kolibri.coreVue.composables.useUser';
 
   export default {
     name: 'UpdateNotification',
     mixins: [commonCoreStrings],
+    setup() {
+      const { isSuperuser } = useUser();
+      return { isSuperuser };
+    },
     props: {
       id: {
         type: String,
@@ -65,9 +70,6 @@
         dontShowNotificationAgain: false,
       };
     },
-    computed: {
-      ...mapGetters(['isSuperuser']),
-    },
     methods: {
       ...mapMutations({
         removeNotification: 'CORE_REMOVE_NOTIFICATION',

diff --git a/kolibri/core/assets/src/views/__tests__/TotalPoints.spec.js b/kolibri/core/assets/src/views/__tests__/TotalPoints.spec.js
@@ -1,17 +1,18 @@
 import { render, screen, fireEvent } from '@testing-library/vue';
+import useUser, { useUserMock } from 'kolibri.coreVue.composables.useUser';
 import TotalPoints from '../TotalPoints.vue';
 import '@testing-library/jest-dom';
 
 let store, storeActions;
 
+jest.mock('kolibri.coreVue.composables.useUser');
+
 // Create a mock Vuex store with the required getters and actions
 // This is a helper function to avoid create a new store for each test and not reuse the same object
 const getMockStore = () => {
   return {
     getters: {
       totalPoints: () => store.totalPoints,
-      currentUserId: () => store.currentUserId,
-      isUserLoggedIn: () => store.isUserLoggedIn,
     },
     actions: {
       fetchPoints: storeActions.fetchPoints,
@@ -28,18 +29,19 @@ const renderComponent = store => {
 
 describe('TotalPoints', () => {
   beforeEach(() => {
+    jest.clearAllMocks();
+    useUser.mockImplementation(() => useUserMock());
     store = {
       totalPoints: 0,
-      currentUserId: 1,
-      isUserLoggedIn: false,
     };
+
     storeActions = {
       fetchPoints: jest.fn(),
     };
   });
 
   test('renders when user is logged in', async () => {
-    store.isUserLoggedIn = true;
+    useUser.mockImplementation(() => useUserMock({ currentUserId: 1, isUserLoggedIn: true }));
     store.totalPoints = 100;
     renderComponent(getMockStore());
 
@@ -48,7 +50,7 @@ describe('TotalPoints', () => {
   });
 
   test('does not render when user is not logged in', async () => {
-    store.isUserLoggedIn = false;
+    useUser.mockImplementation(() => useUserMock({ currentUserId: 1, isUserLoggedIn: false }));
     store.totalPoints = 100;
     renderComponent(getMockStore());
 
@@ -57,15 +59,15 @@ describe('TotalPoints', () => {
   });
 
   test('fetchPoints method is called on created', async () => {
-    store.isUserLoggedIn = true;
+    useUser.mockImplementation(() => useUserMock({ currentUserId: 1, isUserLoggedIn: true }));
     const mockedStore = getMockStore();
     renderComponent(mockedStore);
 
     expect(mockedStore.actions.fetchPoints).toHaveBeenCalledTimes(1);
   });
 
   test('tooltip message is displayed correctly when the mouse hovers over the icon', async () => {
-    store.isUserLoggedIn = true;
+    useUser.mockImplementation(() => useUserMock({ currentUserId: 1, isUserLoggedIn: true }));
     store.totalPoints = 100;
     renderComponent(getMockStore());