add navigation atoms

This commit is contained in:
ajbura 2023-02-05 18:04:20 +05:30
parent c7e668eed2
commit 23de3aa4a3
4 changed files with 58 additions and 2 deletions

View file

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { Icon, Icons, Badge, AvatarFallback, Text } from 'folds'; import { Icon, Icons, Badge, AvatarFallback, Text } from 'folds';
import { useAtom } from 'jotai';
import { import {
Sidebar, Sidebar,
@ -8,8 +9,11 @@ import {
SidebarStack, SidebarStack,
SidebarAvatar, SidebarAvatar,
} from '../../components/sidebar'; } from '../../components/sidebar';
import { selectedTabAtom, SidebarTab } from '../../state/selectedTab';
export function Sidebar1() { export function Sidebar1() {
const [selectedTab, setSelectedTab] = useAtom(selectedTabAtom);
return ( return (
<Sidebar> <Sidebar>
<SidebarContent <SidebarContent
@ -17,12 +21,19 @@ export function Sidebar1() {
<> <>
<SidebarStack> <SidebarStack>
<SidebarAvatar <SidebarAvatar
active active={selectedTab === SidebarTab.Home}
outlined outlined
tooltip="Home" tooltip="Home"
avatarChildren={<Icon src={Icons.Home} filled />} avatarChildren={<Icon src={Icons.Home} filled />}
onClick={() => setSelectedTab(SidebarTab.Home)}
/>
<SidebarAvatar
active={selectedTab === SidebarTab.People}
outlined
tooltip="People"
avatarChildren={<Icon src={Icons.User} />}
onClick={() => setSelectedTab(SidebarTab.People)}
/> />
<SidebarAvatar outlined tooltip="People" avatarChildren={<Icon src={Icons.User} />} />
</SidebarStack> </SidebarStack>
<SidebarStackSeparator /> <SidebarStackSeparator />
<SidebarStack> <SidebarStack>

View file

@ -0,0 +1,3 @@
import { atom } from 'jotai';
export const selectedRoomAtom = atom<string | undefined>(undefined);

View file

@ -0,0 +1,8 @@
import { atom } from 'jotai';
export enum SidebarTab {
Home = 'Home',
People = 'People',
}
export const selectedTabAtom = atom<SidebarTab | string>(SidebarTab.Home);

View file

@ -0,0 +1,34 @@
import produce from 'immer';
import { atom } from 'jotai';
import { MatrixClient } from 'matrix-js-sdk';
type RoomInfo = {
roomId: string;
timestamp: number;
};
type TabToRoom = Map<string, RoomInfo>;
type TabToRoomAction = {
type: 'PUT';
tabInfo: { tabId: string; roomInfo: RoomInfo };
};
const baseTabToRoom = atom<TabToRoom>(new Map());
export const tabToRoomAtom = atom<TabToRoom, TabToRoomAction>(
(get) => get(baseTabToRoom),
(get, set, action) => {
if (action.type === 'PUT') {
set(
baseTabToRoom,
produce(get(baseTabToRoom), (draft) => {
draft.set(action.tabInfo.tabId, action.tabInfo.roomInfo);
})
);
}
}
);
export const useBindTabToRoomAtom = (mx: MatrixClient) => {
console.log(mx);
// TODO:
};