diff --git a/frontend/index.html b/frontend/index.html
index 4ce4daf..ad7e8a9 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,6 +3,8 @@
Ripcord log viewer
+
+
diff --git a/frontend/src/ChannelList.tsx b/frontend/src/ChannelList.tsx
index 6b591ad..c6b29a7 100644
--- a/frontend/src/ChannelList.tsx
+++ b/frontend/src/ChannelList.tsx
@@ -11,6 +11,13 @@ function channelsFirst(a: GQLChannel, b: GQLChannel): number {
return a.name > b.name ? 1 : -1;
}
+function isActive(currentChatData, ws, ch): boolean {
+ return (
+ currentChatData?.currentChat?.workspace == ws &&
+ currentChatData?.currentChat?.channel == ch
+ );
+}
+
export default function ChannelList() {
const { loading, error, data } = useQuery(gql`
{
@@ -31,6 +38,15 @@ export default function ChannelList() {
}
`);
+ const { loading: currentChatLoading, data: currentChatData } = useQuery(gql`
+ {
+ currentChat {
+ workspace
+ channel
+ }
+ }
+ `);
+
if (loading) {
return Loading
;
}
@@ -51,6 +67,9 @@ export default function ChannelList() {
{ws.channels.sort(channelsFirst).map(ch => (
gotoChat({
variables: { workspace: ws.name, channel: ch.name }
diff --git a/frontend/src/Chatroom.tsx b/frontend/src/Chatroom.tsx
index efe4d09..06108f9 100644
--- a/frontend/src/Chatroom.tsx
+++ b/frontend/src/Chatroom.tsx
@@ -1,8 +1,40 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
import { useQuery } from "@apollo/react-hooks";
import { gql } from "apollo-boost";
import { GQLMessage } from "./gql-types";
+function perDay(messages: GQLMessage[]) {
+ const days = messages.reduce((acc, msg) => {
+ const [day] = msg.time.split("T");
+ if (!(day in acc)) {
+ acc[day] = [];
+ }
+ acc[day].push(msg);
+ return acc;
+ }, {});
+ return Object.entries(days).sort(([a], [b]) => {
+ if (a > b) {
+ return 1;
+ }
+ return -1;
+ });
+}
+
+function formatTime(time: string): string {
+ const t = new Date(time);
+ return [t.getHours(), t.getMinutes(), t.getSeconds()]
+ .map(x => `0${x}`.slice(-2))
+ .join(":");
+}
+
+function colorname(name: string): string {
+ const n = name
+ .split("")
+ .map(x => x.charCodeAt(0))
+ .reduce((a, b) => a + b, 0);
+ return `hsl(${n % 360}, 60%, 50%)`;
+}
+
export default function Chatroom() {
const {
loading: localLoading,
@@ -47,6 +79,11 @@ export default function Chatroom() {
}
);
+ const lastMessage = useRef(null);
+ useEffect(() => {
+ lastMessage.current?.scrollIntoView();
+ });
+
if (localLoading || remoteLoading) {
return Loading
;
}
@@ -64,17 +101,34 @@ export default function Chatroom() {
return (
- {remoteData.messages.messages.map((msg: GQLMessage) => (
- -
-
-
- {msg.userRealname} ({msg.username}) ({msg.messageId})
-
-
{msg.content}
-
+ {perDay(remoteData.messages.messages).map(([day, messages]) => (
+ -
+
{day}
+
+ {messages.map((msg: GQLMessage) => (
+ -
+
+
+
{msg.content}
+
+
+ ))}
+
))}
+
);
}
diff --git a/frontend/src/gql-types.ts b/frontend/src/gql-types.ts
index c0a3516..b15f038 100644
--- a/frontend/src/gql-types.ts
+++ b/frontend/src/gql-types.ts
@@ -4,7 +4,7 @@ export interface GQLMessageList {
}
export interface GQLMessage {
- time: Date;
+ time: string;
content: string;
username: string;
userRealname: string;
diff --git a/frontend/style/layout.scss b/frontend/style/layout.scss
index 8b3c4e6..7418f19 100644
--- a/frontend/style/layout.scss
+++ b/frontend/style/layout.scss
@@ -3,10 +3,103 @@
flex: 1;
}
+
body,
.main {
@include full;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ margin: 0;
+ padding: 0;
+ height: 100vh;
+ width: 100vw;
+ overflow: hidden;
+ font-family: "Inter var", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
-@import "./sidebar.scss";
\ No newline at end of file
+.chatroom {
+ flex: 1;
+ overflow-y: scroll;
+
+ .day {
+ text-align: center;
+ padding: 10pt;
+ top: 0;
+ position: sticky;
+ }
+
+ .message {
+ header {
+ display: flex;
+
+ div {
+ padding: 0 5pt;
+ }
+
+ .time {
+ font-family: "Roboto Condensed";
+ color: grey;
+ }
+
+ .realname {
+ font-weight: bold;
+ }
+
+ .username {
+ color: grey;
+ }
+ }
+
+ p {
+ padding: 0 15pt;
+ margin: 5pt 0 15pt 0;
+ font-size: 11pt;
+ }
+ }
+
+ ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ }
+}
+
+.channelList {
+ flex: 0 200px;
+ overflow-y: scroll;
+
+ .workspace {
+
+ .title {
+ display: flex;
+ align-items: center;
+ padding: 10pt;
+
+ img {
+ max-height: 2em;
+ margin-right: 1em;
+ }
+ }
+
+ .chats {
+ ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ li {
+ padding: 4pt 5pt;
+ font-size: 10pt;
+ cursor: pointer;
+
+ &:hover {
+ background-color: grey;
+ }
+
+ &.active {
+ background-color: blue;
+ color: white;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/frontend/style/sidebar.scss b/frontend/style/sidebar.scss
deleted file mode 100644
index 1ff74ea..0000000
--- a/frontend/style/sidebar.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.channelList {
- .workspace {
- .title {
- display: flex;
- align-items: center;
-
- img {
- max-height: 2em;
- margin-right: 1em;
- }
- }
-
- .chats {
- ul {
- list-style-type: none;
- margin: 0;
- padding: 0;
- }
-
- li {
- padding: 2pt 0;
- }
- }
- }
-}
\ No newline at end of file