Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 2x 2x 2x 3x 3x 3x 3x 2x 2x 2x 2x 2x 2x 2x 2x 2x 3x 3x 3x 3x 2x 2x 2x 3x 3x 3x 3x 2x 2x 2x 2x 3x 3x 3x 3x | import { useDevicesStore } from "~/stores/useDevicesStore";
import { useHubFacadeStore } from "~/stores/useHubFacadeStore";
import { useThemeModeStore } from "~/stores/useThemeModeStore";
import { useTokenStore } from "~/stores/useTokenStore";
import { useMemo } from "react";
import { Stores } from "~/types/Stores";
import { useSocketConnectionStore } from "~/stores/useSocketConnectionStore";
import { useArchiveStore } from "~/stores/useArchiveStore";
import { useFontScaleModeStore } from "~/stores/useFontScaleModeStore";
/**
* A custom hook that combines multiple stores to provide centralized access
* to theme, hub, authentication, and archive data and actions.
*
* This hook aggregates state and actions from different stores into a structured
* format that is easy to use within React components.
*
* @returns {Stores} An object containing namespaces for theme, hub, authentication, and archive.
*
* @example
* // Access theme state and actions
* const { theme } = useStores();
* console.log(`Current theme: ${theme.isLight ? 'Light' : 'Dark'}`);
* theme.toggle(); // Toggle theme mode
*
* @example
* // Access hub devices and connection status
* const { hub } = useStores();
* const devicesCount = hub.devices.length;
* console.log(`Number of devices: ${devicesCount}`);
*
* @example
* // Use authentication token for authenticated actions
* const { auth } = useStores();
* if (auth.token) {
* // Perform authenticated actions
* }
*
* @example
* // Use archive-related actions for devices
* const { archive } = useStores();
* if (archive.contains(123)) {
* console.log('Device with id 123 is archived');
* }
* archive.add(123); // Archive a device
* archive.remove(123); // Unarchive a device
*/
export const useStores = (): Stores => {
// Theme-related state
const { isLight, toggleMode } = useThemeModeStore();
const { isLargeFont, toggleFontScaleMode } = useFontScaleModeStore();
// Hub-related state
const { devices } = useDevicesStore();
const { connectionStatus } = useSocketConnectionStore();
const { getService } = useHubFacadeStore();
// Authentication-related state
const { token, resetToken } = useTokenStore();
// Archive-related state
const { isDeviceArchived, archiveDevice, unarchiveDevice } =
useArchiveStore();
const theme = useMemo(
() => ({
isLight,
toggle: toggleMode,
}),
[isLight, toggleMode],
);
const fontScale = useMemo(
() => ({
isLargeFont,
toggle: toggleFontScaleMode,
}),
[isLargeFont, toggleFontScaleMode],
);
const hub = useMemo(
() => ({
devices,
connectionStatus,
service: {
close: getService().socket.close,
open: getService().socket.open,
controlDevice: getService().api.controlDevice,
pair: getService().api.pair,
},
}),
[devices, connectionStatus, getService],
);
const auth = useMemo(
() => ({
token,
revoke: resetToken,
}),
[token, resetToken],
);
const archive = useMemo(
() => ({
contains: isDeviceArchived,
add: archiveDevice,
remove: unarchiveDevice,
}),
[isDeviceArchived, archiveDevice, unarchiveDevice],
);
return { theme, fontScale, hub, auth, archive };
};
|