refactor(theme): refactor useUiState (#595)

Co-authored-by: Bartosz Herba <[email protected]>

Author: bartoszherba

packages/theme/components/__tests__/LoginModal.spec.js

@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { waitFor } from '@testing-library/vue';
 import { useUser, useForgotPassword } from '@vue-storefront/magento';
 import { render, useUserMock, useForgotPasswordMock } from '~/test-utils';
-import useUiState from '~/composables/useUiState.ts';
+import useUiState from '~/composables/useUiState/useUiState.ts';
 
 import LoginModal from '../LoginModal';
 

packages/theme/composables/useUiState.ts renamed to packages/theme/composables/useUiState/index.ts

@@ -1,6 +1,7 @@
 import { computed, reactive } from '@nuxtjs/composition-api';
+import { StateInterface, UseUiStateInterface } from '~/composables/useUiState/useUiState';
 
-const state = reactive({
+const state = reactive<StateInterface>({
   isCartSidebarOpen: false,
   isWishlistSidebarOpen: false,
   isLoginModalOpen: false,
@@ -11,7 +12,7 @@ const state = reactive({
   isMobileMenuOpen: false,
 });
 
-const useUiState = () => {
+const useUiState = (): UseUiStateInterface => {
   const isMobileMenuOpen = computed(() => state.isMobileMenuOpen);
   const toggleMobileMenu = () => {
     state.isMobileMenuOpen = !state.isMobileMenuOpen;

packages/theme/composables/useUiState/useUiState.d.ts

@@ -0,0 +1,33 @@
+import { computed, ComputedRef } from '@nuxtjs/composition-api';
+
+interface StateInterface {
+  isCartSidebarOpen: boolean,
+  isWishlistSidebarOpen: boolean,
+  isLoginModalOpen: boolean,
+  isNewsletterModalOpen: boolean,
+  isCategoryGridView: boolean,
+  isWishlistGridView: boolean,
+  isFilterSidebarOpen: boolean,
+  isMobileMenuOpen: boolean,
+}
+
+interface UseUiStateInterface {
+  isMobileMenuOpen: ComputedRef<boolean>,
+  toggleMobileMenu (): void,
+  isCartSidebarOpen: ComputedRef<boolean>,
+  isWishlistSidebarOpen: ComputedRef<boolean>,
+  toggleWishlistSidebar (): void,
+  isLoginModalOpen: ComputedRef<boolean>,
+  toggleLoginModal (): void,
+  isNewsletterModalOpen: ComputedRef<boolean>,
+  toggleNewsletterModal (): void,
+  isCategoryGridView: ComputedRef<boolean>,
+  isWishlistGridView: ComputedRef<boolean>,
+  changeToCategoryGridView (): void,
+  changeToCategoryListView (): void,
+  changeToWishlistGridView (): void,
+  changeToWishlistListView (): void,
+  isFilterSidebarOpen: ComputedRef<boolean>,
+  toggleFilterSidebar (): void,
+  toggleCartSidebar (): void,
+}