...
 
Commits (3)
.tabs {
width: 100%;
display: flex;
}
.tab {
flex: 1;
background: blue;
margin: 1em;
padding: 0.4em;
&[data-active=true] {
background: green;
}
}
\ No newline at end of file
import React, { ReactNode } from 'react';
import styles from './Tabs.module.scss';
interface TabProps {
children: ReactNode[],
index: number,
setIndex: (i: number) => void
};
export default function Tabs(props: TabProps) {
return (
<div className={styles.tabs}>
{
props.children
.map((child, i) =>
<div className={styles.tab}
onClick={() => props.setIndex(i)}
data-active={props.index === i}>
{ child }
</div>
)
}
</div>
);
}
\ No newline at end of file
......@@ -48,15 +48,14 @@ const Chat = memo(() => {
channel, setChannel,
setDrawer,
switch: (page: Page, channel?: string) => {
setPage(page);
setChannel(channel);
setPage(page);
setDrawer(false);
}
} as any;
let body;
if (page & 0x7) {
// display a channel
body = <Channel id={channel as string} />;
} else if (page & Page.HOME) {
body = <div>home-y</div>;
......@@ -91,7 +90,7 @@ const Chat = memo(() => {
{sidebar}
</MediaQuery>
<div className={styles.main}>
{ body }
{body}
</div>
</div>
</ChatContext.Provider>
......
......@@ -10,6 +10,7 @@ import { scrollable, hiddenScrollbar } from '../../components/util/Scrollbar';
import { Input } from '../../components/ui/elements/Input';
import Header from './channel/Header';
import MessageList from './channel/MessageList';
import { GroupChannel } from 'riotchat.js/dist/internal/Channel';
export const ChannelContext = createContext<RChannel | undefined>(undefined);
......@@ -77,7 +78,17 @@ export default function Channel(props: { id: string }) {
</div>
</div>
<div className={sidebar}>
sidebar time
{
channel instanceof GroupChannel
&& channel.group.members
.array()
.map(x =>
<div>
<img src={x.avatarURL} width="64" height="64" />
{x.username}
</div>
)
}
</div>
</div>
</div>
......
import React, { Fragment, useState } from 'react';
import styles from './Friends.module.scss';
import React, { Fragment, useState, useContext } from 'react';
//import styles from './Friends.module.scss';
import { Instance } from '../../internal/Client';
import SwipeableViews from 'react-swipeable-views';
import { User } from 'riotchat.js';
import Tabs from '../../components/ui/components/Tabs';
import { ChatContext, Page } from '../Chat';
function renderList(condition: (user: User) => boolean) {
function renderList(condition: (user: User) => boolean, switchTo: (user: User) => void) {
return <Fragment> {
Instance.client.users
.array()
.filter(condition)
.map(u =>
<div>{u.username} ({u.status})</div>)
<div onClick={async () => switchTo(u)}>{u.username} ({u.status})</div>)
} </Fragment>;
}
export default function Friends() {
let chat = useContext(ChatContext);
let [ index, setIndex ] = useState(0);
let [ requestIndex, setRequestIndex ] = useState(0);
async function switchTo(user: User) {
let channel = await user.openDM();
chat.switch(
Page.DM,
channel.id
);
}
return (
<Fragment>
<div className={styles.tabs}>
<span onClick={() => setIndex(0)} data-active={index === 0}>ONLINE</span>
<span onClick={() => setIndex(1)} data-active={index === 1}>ALL</span>
<span onClick={() => setIndex(2)} data-active={index === 2}>PENDING</span>
</div>
<Tabs index={index} setIndex={setIndex}>
<Fragment>ONLINE</Fragment>
<Fragment>ALL</Fragment>
<Fragment>REQUESTS</Fragment>
</Tabs>
<SwipeableViews index={index} onChangeIndex={setIndex}>
{ renderList(u => u.relation === 'active' && u.status !== 'offline') }
{ renderList(u => u.relation === 'active') }
{ renderList(u => u.relation === 'pending' || u.relation === 'incoming') }
{ renderList(u => u.relation === 'active' && u.status !== 'offline', switchTo) }
{ renderList(u => u.relation === 'active', switchTo) }
<Fragment>
<Tabs index={requestIndex} setIndex={setRequestIndex}>
<Fragment>PENDING</Fragment>
<Fragment>INCOMING</Fragment>
</Tabs>
<SwipeableViews index={requestIndex} onChangeIndex={setRequestIndex}>
{ renderList(u => u.relation === 'pending', switchTo) }
{ renderList(u => u.relation === 'incoming', switchTo) }
</SwipeableViews>
</Fragment>
</SwipeableViews>
</Fragment>
);
......