re-structure to monorepo.

packages/webapp/src/hooks/state/authentication.tsx

@@ -0,0 +1,66 @@
+// @ts-nocheck
+import { useDispatch, useSelector } from 'react-redux';
+import { useCallback } from 'react';
+import { isAuthenticated } from '@/store/authentication/authentication.reducer';
+import { setLogin } from '@/store/authentication/authentication.actions';
+import { useQueryClient } from 'react-query';
+import { removeCookie } from '@/utils';
+
+/**
+ * Removes the authentication cookies.
+ */
+function removeAuthenticationCookies() {
+  removeCookie('token');
+  removeCookie('organization_id');
+  removeCookie('tenant_id');
+  removeCookie('authenticated_user_id');
+  removeCookie('locale');
+}
+
+export const useAuthActions = () => {
+  const dispatch = useDispatch();
+  const queryClient = useQueryClient();
+
+  return {
+    setLogin: useCallback((login) => dispatch(setLogin(login)), [dispatch]),
+    setLogout: useCallback(() => {
+      // Resets store state.
+      // dispatch(setStoreReset());
+
+      // Remove all cached queries.
+      queryClient.removeQueries();
+
+      removeAuthenticationCookies();
+
+      window.location.reload();
+    }, [queryClient]),
+  };
+};
+
+/**
+ * Retrieve whether the user is authenticated.
+ */
+export const useIsAuthenticated = () => {
+  return useSelector(isAuthenticated);
+};
+
+/**
+ * Retrieve the authentication token.
+ */
+export const useAuthToken = () => {
+  return useSelector((state) => state.authentication.token);
+};
+
+/**
+ * Retrieve the authentication user.
+ */
+export const useAuthUser = () => {
+  return useSelector((state) => ({}));
+};
+
+/**
+ * Retrieve the authenticated organization id.
+ */
+export const useAuthOrganizationId = () => {
+  return useSelector((state) => state.authentication.organizationId);
+};

packages/webapp/src/hooks/state/dashboard.tsx

@@ -0,0 +1,79 @@
+// @ts-nocheck
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import {
+  splashStopLoading,
+  splashStartLoading,
+  dashboardPageTitle,
+  openSidebarSubmenu,
+  closeSidebarSubmenu,
+  openDialog,
+  closeDialog,
+} from '@/store/dashboard/dashboard.actions';
+
+export const useDispatchAction = (action) => {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (payload) => {
+      dispatch(action(payload));
+    },
+    [dispatch, action],
+  );
+};
+
+export const useDashboardPageTitle = () => {
+  return useDispatchAction(dashboardPageTitle);
+};
+
+/**
+ * Splash loading screen actions.
+ */
+export const useSplashLoading = () => {
+  return [
+    useDispatchAction(splashStartLoading),
+    useDispatchAction(splashStopLoading),
+  ];
+};
+
+/**
+ * Sidebar submenu actions.
+ */
+export const useSidebarSubmnuActions = () => {
+  return {
+    openSidebarSubmenu: useDispatchAction(openSidebarSubmenu),
+    closeSidebarSubmenu: useDispatchAction(closeSidebarSubmenu),
+    toggleSidebarSubmenu: useDispatchAction(openSidebarSubmenu),
+  };
+};
+
+/**
+ * Retrieves the sidebar submenu selector.
+ */
+const sidebarSubmenuSelector = createSelector(
+  (state) => state.dashboard.sidebarSubmenu,
+  (sidebarSubmenu) => sidebarSubmenu,
+);
+
+/**
+ * Retrieves the sidebar submenu selector.
+ */
+export const useSidebarSubmenu = () => {
+  const sidebarSubmenu = useSelector(sidebarSubmenuSelector);
+
+  return {
+    isOpen: sidebarSubmenu?.isOpen || false,
+    submenuId: sidebarSubmenu?.submenuId || null,
+  };
+};
+
+/**
+ * Dialogs actions.
+ */
+export const useDialogActions = () => {
+  return {
+    openDialog: useDispatchAction(openDialog),
+    closeDialog: useDispatchAction(closeDialog),
+  };
+};

packages/webapp/src/hooks/state/feature.tsx

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setFeatureDashboardMeta } from '@/store/dashboard/dashboard.actions';
+
+const featuresSelector = createSelector(
+  (state) => state.dashboard.features,
+  (features) => features,
+);
+
+export const useFeatureCan = () => {
+  const features = useSelector(featuresSelector);
+
+  return {
+    featureCan: (feature) => {
+      return !!features[feature];
+    },
+  };
+};
+
+/**
+ * Sets features.
+ */
+export const useSetFeatureDashboardMeta = () => {
+  const dispatch = useDispatch();
+
+  return React.useCallback(
+    (features) => {
+      dispatch(setFeatureDashboardMeta(features));
+    },
+    [dispatch],
+  );
+};

packages/webapp/src/hooks/state/globalErrors.tsx

@@ -0,0 +1,18 @@
+// @ts-nocheck
+import { useCallback } from 'react';
+import { useSelector, useDispatch } from "react-redux";
+import { setGlobalErrors } from '@/store/globalErrors/globalErrors.actions';
+
+export const useSetGlobalErrors = () => {
+  const dispatch = useDispatch();
+
+  return useCallback((errors) => {
+    dispatch(setGlobalErrors(errors));
+  }, [dispatch]);
+};
+
+export const useGlobalErrors = () => {
+  const globalErrors = useSelector(state => state.globalErrors.data);
+
+  return { globalErrors };
+}

packages/webapp/src/hooks/state/index.tsx

@@ -0,0 +1,8 @@
+// @ts-nocheck
+export * from './dashboard';
+export * from './authentication';
+export * from './globalErrors';
+export * from './subscriptions';
+export * from './organizations';
+export * from './settings';
+export * from './feature';

packages/webapp/src/hooks/state/organizations.tsx

@@ -0,0 +1,17 @@
+// @ts-nocheck
+import { useCallback } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { setOrganizations } from '@/store/organizations/organizations.actions';
+import { getCurrentOrganizationFactory } from '@/store/authentication/authentication.selectors';
+
+export const useSetOrganizations = () => {
+  const dispatch = useDispatch();
+
+  return useCallback((organizations) => {
+    dispatch(setOrganizations(organizations))    
+  }, [dispatch]);
+};
+
+export const useCurrentOrganization = () => {
+  return useSelector(getCurrentOrganizationFactory())
+};

packages/webapp/src/hooks/state/settings.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { setSettings } from '@/store/settings/settings.actions';
+
+export const useSetSettings = () => {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (settings) => {
+      dispatch(setSettings(settings));
+    },
+    [dispatch],
+  );
+};
+
+/**
+ * Retrieve the authentication token.
+ */
+export const useSettingsSelector = () => {
+  return useSelector((state) => state.settings.data);
+};

packages/webapp/src/hooks/state/subscriptions.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import { useCallback } from "react"
+import { useDispatch, useSelector } from "react-redux";
+import { setSubscriptions } from '@/store/subscription/subscription.actions';
+import {
+  isSubscriptionOnTrialFactory,
+  isSubscriptionInactiveFactory,
+  isSubscriptionActiveFactory,
+} from '@/store/subscription/subscription.selectors';
+
+/**
+ * Sets subscriptions.
+ */
+export const useSetSubscriptions = () => {
+  const dispatch = useDispatch();
+
+  return useCallback((subscriptions) => {
+    dispatch(setSubscriptions(subscriptions));
+  }, [dispatch]);
+}
+
+/**
+ * The organization subscription selector.
+ * @param   {string} slug 
+ * @returns {}
+ */
+export const useSubscription = (slug = 'main') => {
+  const isSubscriptionOnTrial = useSelector(isSubscriptionOnTrialFactory(slug));
+  const isSubscriptionInactive = useSelector(isSubscriptionInactiveFactory(slug));
+  const isSubscriptionActive = useSelector(isSubscriptionActiveFactory(slug));
+
+  return {
+    isSubscriptionActive,
+    isSubscriptionInactive,
+    isSubscriptionOnTrial
+  }
+}