Commit ce5e0d27 authored by insert's avatar insert

Begin work on channels.

parent 0b12ca29
Pipeline #271 failed with stage
in 1 minute and 45 seconds
import React, { useState, createContext, CSSProperties } from 'react';
import React, { useState, createContext, CSSProperties, useEffect } from 'react';
import Helmet from 'react-helmet';
import styles from './App.module.scss';
......@@ -55,18 +55,20 @@ export default function App() {
doRender(!dummyValue);
}
if (!ready) {
let token = localStorage.getItem('accessToken');
if (token) {
Instance.client
.login(token)
.catch(() => setPage(Page.LOGIN))
.finally(() => setReady(true));
} else {
setPage(Page.LOGIN);
setReady(true);
useEffect(() => {
if (!ready) {
let token = localStorage.getItem('accessToken');
if (token) {
Instance.client
.login(token)
.catch(() => setPage(Page.LOGIN))
.finally(() => setReady(true));
} else {
setPage(Page.LOGIN);
setReady(true);
}
}
}
}, [ready]);
let states = {
theme, setTheme,
......
......@@ -6,6 +6,7 @@ import { HomeSidebar } from './chat/sidebar/conversation/Home';
import { GuildSidebar } from './chat/sidebar/conversation/Guild';
import Browser from './chat/sidebar/Browser';
import { Profile } from './chat/sidebar/conversation/Profile';
import Channel from './chat/Channel';
export enum Page {
GUILD = 0x1, // switches to guild specific sidebar
......@@ -40,7 +41,7 @@ const Chat = memo(() => {
let body;
if (page & 0x7) {
// display a channel
body = <div>i am stuff</div>;
body = <Channel id={channel as string} />;
} else {
// other things
body = <div>other things yes</div>;
......
......@@ -83,8 +83,8 @@ export function Settings() {
setLogoutModal
} as any;
function doClose() {
if (showContent) {
function doClose(force?: any) {
if (showContent && force !== true) {
setShown(false);
} else {
app.setPage(AppPage.APP);
......@@ -122,7 +122,7 @@ export function Settings() {
{RenderPage(tab)}
</div>
<div className={styles.close}>
<Icon icon="xRegular" onClick={doClose} />
<Icon icon="xRegular" onClick={() => doClose(true)} />
</div>
</div>
</div>
......
.root {
display: flex;
flex-direction: column;
height: 100vh;
color: var(--body-text);
.header {
flex-shrink: 1;
}
.body {
flex-grow: 1;
display: flex;
flex-direction: row;
overflow: hidden;
min-height: 0;
.chat {
flex-grow: 1;
display: flex;
flex-direction: column;
.messages {
flex-grow: 1;
}
.messageBox {
flex-shrink: 1;
}
}
.sidebar {
flex-shrink: 1;
}
}
}
\ No newline at end of file
import React, { useContext, useState, useEffect } from 'react';
import styles from './Channel.module.scss';
import classNames from 'classnames';
import { ChatContext, Page } from '../Chat';
import { Channel as RChannel, Collection } from 'riotchat.js';
import { Instance } from '../../internal/Client';
import { string } from 'prop-types';
import { Message } from 'riotchat.js/dist/internal/Message';
import { scrollable } from '../../components/util/Scrollbar';
export default function Channel(props: { id: string }) {
let chat = useContext(ChatContext);
let channel: RChannel = Instance.client.channels.get(chat.channel as string) as any;
let [ synced, setSynced ] = useState(false);
useEffect(() => {
if (!synced) {
channel.fetchMessages()
.then(() => setSynced(true));
}
}, [chat.channel, channel, synced]);
let sidebar = classNames({
[styles.sidebar]: true,
[styles.visible]: !!((Page.GROUP | Page.GUILD) & chat.page)
});
let messages = (channel.messages as Collection<string, Message>).array();
return (
<div className={styles.root}>
<div className={styles.header}>
channel id = {channel.id}
</div>
<div className={styles.body}>
<div className={styles.chat}>
<div className={classNames(styles.messages, scrollable)}>
{ messages.map(m => <p>{m.author.username}: {m.content}</p>) }
</div>
<div className={styles.messageBox}>
box
</div>
</div>
<div className={classNames(sidebar, scrollable)}>
sidebar time
</div>
</div>
</div>
);
}
\ No newline at end of file
......@@ -31,9 +31,6 @@ export const HomeSidebar = memo(() => {
.array()
.filter(x => x instanceof props.type);
// make array longer
// array = array.concat(array, array, array, array, array, array, array);
return (
<Fragment>
<div className={styles.category}>
......
......@@ -4,7 +4,8 @@
--primary: #FBFBFB;
--secondary: #F0F0F0;
--profile: #E8E8E8;
--tertiary: #E8E8E8;
--main-text: #464646;
--body-text: #000000;
......@@ -14,7 +15,7 @@
--home-active: lighten(#BCBCBC, 10%);
--divider: lighten(#707070, 50%);
--button-hover: lighten(#E8E8E8; 10%);
--button-hover: #E8E8E8;
--button-active: #E8E8E8;
--button-call: #BCBCBC;
......
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