Newer
Older
import { useContext } from "preact/hooks";
import { Home, Users, Tool, Save } from "@styled-icons/feather";
import styled from "styled-components";
import Category from '../../ui/Category';
import PaintCounter from "../../../lib/PaintCounter";
import UserHeader from "../../common/user/UserHeader";
import { Channels } from "revolt.js/dist/api/objects";
import { connectState } from "../../../redux/connector";
import ConnectionStatus from '../items/ConnectionStatus';
import { WithDispatcher } from "../../../redux/reducers";
import { Unreads } from "../../../redux/reducers/unreads";
import { mapChannelWithUnread, useUnreads } from "./common";
import { Users as UsersNS } from 'revolt.js/dist/api/objects';
import ButtonItem, { ChannelButton } from '../items/ButtonItem';
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { Link, Redirect, useLocation, useParams } from "react-router-dom";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useDMs, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
type Props = WithDispatcher & {
unreads: Unreads;
}
const HomeBase = styled.div`
height: 100%;
width: 240px;
display: flex;
flex-shrink: 0;
flex-direction: column;
background: var(--secondary-background);
`;
const HomeList = styled.div`
padding: 6px;
flex-grow: 1;
overflow-y: scroll;
> svg {
width: 100%;
}
`;
function HomeSidebar(props: Props) {
const { pathname } = useLocation();
const obj = channels.find(x => x?._id === channel);
if (channel && !obj) return <Redirect to="/" />;
if (obj) useUnreads({ ...props, channel: obj });
const channelsArr = channels
.filter(x => x.channel_type !== 'SavedMessages')
const users = useUsers(
(channelsArr as (Channels.DirectMessageChannel | Channels.GroupChannel)[])
.reduce((prev: any, cur) => [ ...prev, ...cur.recipients ], [])
, ctx);
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
115
116
117
118
119
120
channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
return (
<HomeBase>
<UserHeader user={client.user!} />
<ConnectionStatus />
<HomeList>
{!isTouchscreenDevice && (
<>
<Link to="/">
<ButtonItem active={pathname === "/"}>
<Home size={20} />
<span><Text id="app.navigation.tabs.home" /></span>
</ButtonItem>
</Link>
<Link to="/friends">
<ButtonItem
active={pathname === "/friends"}
alert={
typeof users.find(
user =>
user?.relationship ===
UsersNS.Relationship.Incoming
) !== "undefined" ? 'unread' : undefined
}
>
<Users size={20} />
<span><Text id="app.navigation.tabs.friends" /></span>
</ButtonItem>
</Link>
</>
)}
<Link to="/open/saved">
<ButtonItem active={obj?.channel_type === "SavedMessages"}>
<Save size={20} />
<span><Text id="app.navigation.tabs.saved" /></span>
</ButtonItem>
</Link>
{import.meta.env.DEV && (
<Link to="/dev">
<ButtonItem active={pathname === "/dev"}>
<Tool size={20} />
<span><Text id="app.navigation.tabs.dev" /></span>
</ButtonItem>
</Link>
)}
<Localizer>
<Category
text={
(
<Text id="app.main.categories.conversations" />
) as any
}
action={() => openScreen({ id: "special_input", type: "create_group" })}
/>
</Localizer>
{channelsArr.length === 0 && <img src="/assets/images/placeholder.svg" />}
{channelsArr.map(x => {
let user;
if (x.channel_type === 'DirectMessage') {
let recipient = client.channels.getRecipient(x._id);
user = users.find(x => x?._id === recipient);
if (!user) {
console.warn(`Skipped DM ${x._id} because user was missing.`);
return null;
}
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
}
return (
<Link to={`/channel/${x._id}`}>
<ChannelButton
user={user}
channel={x}
alert={x.unread}
alertCount={x.alertCount}
active={x._id === channel}
/>
</Link>
);
})}
<PaintCounter />
</HomeList>
</HomeBase>
);
};
export default connectState(
HomeSidebar,
state => {
return {
unreads: state.unreads
};
},
true,
true
);