Spaces:
Running
Running
File size: 2,628 Bytes
57f5158 4bae792 57f5158 4bae792 1125afb 4bae792 4c47e22 57f5158 4bae792 57f5158 4bae792 4c47e22 4bae792 880ab03 57f5158 4bae792 57f5158 4bae792 57f5158 4bae792 | 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 | import { useEffect, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import MessagesButton from "./sidebar/MessagesButton";
import SpaceIcon from "./sidebar/SpaceIcon";
import {
navigateToSpace,
navigateToMessages,
openCreateSpace,
openSettings,
closeSettings,
} from "../store/slices/appSlice";
function Sidebar() {
const dispatch = useDispatch();
const appState = useSelector((state) => state.app);
const { activeView, activeSpace, isSettings } = appState;
const { isDark } = useSelector((state) => state.theme);
const { totalUnreadCount } = useSelector((state) => state.dm);
const { spaces, loading: spacesLoading, spacesFetched } = useSelector(
(state) => state.space,
);
const { isAuthenticated } = useSelector((state) => state.auth);
const currentView = isSettings ? "settings" : activeView;
console.log("[Sidebar] Render - spaces count:", spaces.length, "spacesLoading:", spacesLoading, "spaces:", spaces.map(s => ({ id: s.id, name: s.name })));
return (
<div
className="w-16 min-w-16 flex flex-col items-center py-3 px-0 gap-2"
style={{ background: "var(--bg-surface)" }}
>
<div className="flex flex-col items-center gap-2 flex-1 pt-1">
<MessagesButton
isActive={currentView === "messages"}
onClick={() => {
dispatch(navigateToMessages());
}}
unreadCount={totalUnreadCount}
/>
{spaces.map((space) => (
<SpaceIcon
key={space.id}
icon={space.icon_url}
name={space.name}
isActive={currentView === "space" && activeSpace === space.id}
hasNotification={space.hasNotification || false}
onClick={() => {
dispatch(navigateToSpace(space.id));
}}
title={space.name}
/>
))}
{spacesLoading && (
<div className="w-10 h-10 rounded-lg animate-pulse" style={{ background: "var(--hover-primary)" }} />
)}
<SpaceIcon
icon="plus"
isActive={currentView === "createSpace"}
hasNotification={false}
onClick={() => {
dispatch(openCreateSpace());
}}
title="Tạo Space mới"
/>
</div>
<div className="flex flex-col items-center gap-2">
<SpaceIcon
icon="settings"
isActive={currentView === "settings"}
hasNotification={false}
onClick={() => dispatch(openSettings())}
title="Settings"
/>
</div>
</div>
);
}
export default Sidebar;
|