Commit 07806407 authored by insert's avatar insert

Added friends menu.

parent 6e9e4e97
Pipeline #282 passed with stage
in 4 minutes and 15 seconds
......@@ -11,6 +11,7 @@ import Browser from './chat/sidebar/Browser';
import { Profile } from './chat/sidebar/conversation/Profile';
import Channel from './chat/Channel';
import { useVar } from '../components/util/CSS';
import Friends from './friends/Friends';
export enum Page {
GUILD = 0x1, // switches to guild specific sidebar
......@@ -62,7 +63,7 @@ const Chat = memo(() => {
} else if (page & Page.FEED) {
body = <div>feedy</div>;
} else if (page & Page.FRIENDS) {
body = <div>you have no friends lol</div>;
body = <Friends />;
}
let sidebar = <div className={styles.sidebar}>
......
.tabs {
display: flex;
width: 100vw;
[data-active=true] {
color: green;
}
}
\ No newline at end of file
import React, { Fragment, useState } from 'react';
import styles from './Friends.module.scss';
import { Instance } from '../../internal/Client';
import SwipeableViews from 'react-swipeable-views';
import { User } from 'riotchat.js';
function renderList(condition: (user: User) => boolean) {
return <Fragment> {
Instance.client.users
.array()
.filter(condition)
.map(u =>
<div>{u.username} ({u.status})</div>)
} </Fragment>;
}
export default function Friends() {
let [ index, setIndex ] = useState(0);
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>
<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') }
</SwipeableViews>
</Fragment>
);
}
\ No newline at end of file
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment