Skip to content

Commit

Permalink
get profile updates working
Browse files Browse the repository at this point in the history
  • Loading branch information
targoninc-alex committed May 30, 2024
1 parent fff9149 commit 7ec4128
Show file tree
Hide file tree
Showing 12 changed files with 258 additions and 130 deletions.
2 changes: 1 addition & 1 deletion ui/actions.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export function toast(message, type = "info", timeout = 5) {

setTimeout(() => {
toast.remove();
}, timeout * 10000);
}, timeout * 1000);
}

export function popup(popup, classes = []) {
Expand Down
56 changes: 56 additions & 0 deletions ui/api/Popups.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import {popup, removePopups, toast} from "../actions.mjs";
import {PopupComponents} from "../components/popup.mjs";
import {Api} from "./Api.mjs";
import {Live} from "../live/Live.mjs";
import {CommonTemplates} from "../components/common.mjs";
import {signal} from "https://fjs.targoninc.com/f.js";
import {Store} from "./Store.mjs";

export class Popups {
static newDm() {
const userSearchResults = signal([]);
const channels = Store.get("channels");

popup(PopupComponents.searchPopup(() => {
removePopups();
}, (e) => {
const query = e.target.value;
if (query.length < 3) {
userSearchResults.value = [];
return;
}

Api.search(query).then((res) => {
if (res.status !== 200) {
toast("Failed to search for users", "error");
return;
}
userSearchResults.value = res.data.filter(user => {
return !channels.value.some(channel => {
if (channel.type === "dm" && channel.members.length === 1) {
return channel.members[0].id === user.id;
}

return channel.type === "dm" && channel.members[1].id === user.id;
});
});
})
}, () => {}, userSearchResults, (result) => {
return CommonTemplates.chatWithButton(result.username, () => {
Api.createDirect(result.id).then((res) => {
if (res.status !== 200) {
toast("Failed to create DM", "error");
removePopups();
return;
}
toast("DM created", "success");
Live.send({
type: "createChannel",
channelId: res.data.id,
});
removePopups();
});
});
}, "New DM", "Search for users"));
}
}
2 changes: 1 addition & 1 deletion ui/api/Store.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export class Store {
static definition = {
user: {
type: "object",
default: null,
default: signal(null),
},
currentChannelId: {
type: "number",
Expand Down
6 changes: 6 additions & 0 deletions ui/classes.css
Original file line number Diff line number Diff line change
Expand Up @@ -275,4 +275,10 @@

.resize-indicator:hover {
background: rgba(150, 150, 150, 0.2);
}

.one-line {
white-space: nowrap;
overflow: hidden;
max-width: 100%;
}
67 changes: 67 additions & 0 deletions ui/components/channel.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import {computedSignal, create, ifjs, signal, signalMap} from "https://fjs.targoninc.com/f.js";
import {Live} from "../live/Live.mjs";
import {truncate} from "../tooling/Text.mjs";

export class ChannelTemplates {
static dmChannel(channel, messages, activeChannel) {
const activeClass = computedSignal(activeChannel, (id) => id === channel.id ? "active" : "_");

return create("div")
.classes("channel", "flex-v", "no-gap", "full-width", activeClass)
.onclick(() => {
activeChannel.value = channel.id;
})
.children(
create("span")
.text(channel.name)
.build(),
create("span")
.classes("text-small", "one-line")
.text(truncate(messages.value[channel.id]?.at(-1)?.text || "No messages", 100))
.build(),
).build();
}

static groupChannel(channel, messages, activeChannel) {
const activeClass = computedSignal(activeChannel, (id) => id === channel.id ? "active" : "_");
const editing = signal(false);

return create("div")
.classes("channel", "flex-v", "full-width", activeClass)
.onclick(() => {
activeChannel.value = channel.id;
})
.children(
ifjs(editing, create("input")
.type("text")
.value(channel.name)
.onchange((e) => {
Live.send({
type: "updateChannel",
channelId: channel.id,
name: e.target.value,
});
}).build()),
ifjs(editing, create("span")
.text(channel.name)
.build(), true),
create("span")
.classes("text-small")
.text("Group")
.build(),
).build();
}

static channelList(channels, messages, activeChannel) {
return signalMap(channels,
create("div")
.classes("flex-v", "no-gap")
, channel => {
if (channel.type === "gr") {
return ChannelTemplates.groupChannel(channel, messages, activeChannel);
} else {
return ChannelTemplates.dmChannel(channel, messages, activeChannel);
}
});
}
}
27 changes: 26 additions & 1 deletion ui/components/common.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import {create, FjsObservable, ifjs} from "https://fjs.targoninc.com/f.js";
import {create, FjsObservable, ifjs, signal, signalFromProperty} from "https://fjs.targoninc.com/f.js";
import {popup, removePopups, toast} from "../actions.mjs";
import {PopupComponents} from "./popup.mjs";
import {Api} from "../api/Api.mjs";
import {Live} from "../live/Live.mjs";
import {Popups} from "../api/Popups.mjs";

export class CommonTemplates {
static icon(icon, classes = [], tag = "span") {
Expand Down Expand Up @@ -73,6 +78,26 @@ export class CommonTemplates {
).build();
}

static actions(userSignal) {
const username = signalFromProperty(userSignal, "username");
const displayname = signalFromProperty(userSignal, "displayname");

return create("div")
.classes("flex", "align-center", "full-width", "space-between", "padded")
.children(
CommonTemplates.buttonWithIcon("chat", "Chat", () => window.router.navigate('chat')),
CommonTemplates.buttonWithIcon("person_add", "New DM", () => Popups.newDm()),
create("div")
.classes("padded")
.children(
CommonTemplates.userInList("face_5", displayname, username, () => {
window.router.navigate('profile');
})
).build(),
CommonTemplates.pageLink("Logout", "logout")
).build();
}

static userInList(image, name, text, onclick) {
return create("button")
.classes("flex")
Expand Down
128 changes: 3 additions & 125 deletions ui/components/pages/chat.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@ import {computedSignal, create, ifjs, signal, signalMap} from "https://fjs.targo
import {LayoutTemplates} from "../layout.mjs";
import {Store} from "../../api/Store.mjs";
import {CommonTemplates} from "../common.mjs";
import {Api} from "../../api/Api.mjs";
import {popup, removePopups, toast} from "../../actions.mjs";
import {Hooks, removeMessage} from "../../api/Hooks.mjs";
import {Time} from "../../tooling/Time.mjs";
import {Live} from "../../live/Live.mjs";
import {PopupComponents} from "../popup.mjs";
import {ChannelTemplates} from "../channel.mjs";

export class ChatComponent {
static render() {
Expand Down Expand Up @@ -47,30 +45,17 @@ export class ChatComponent {
return create("div")
.classes("panes-v", "full-width", "full-height")
.children(
ChatComponent.actions(user, channels),
CommonTemplates.actions(user, channels),
create("div")
.classes("panes", "full-width", "flex-grow")
.children(
LayoutTemplates.resizableFromRight(ChatComponent.channelList(displayChannels, messages, activeChannel), "50%", "200px", "50%"),
LayoutTemplates.resizableFromRight(ChannelTemplates.channelList(displayChannels, messages, activeChannel), "50%", "200px", "50%"),
ifjs(activeChannel, LayoutTemplates.flexPane(ChatComponent.chat(activeChannel, messages), "300px", "100%")),
ifjs(activeChannel, LayoutTemplates.flexPane(create("span").text("No channel selected").build(), "300px", "100%"), true)
).build()
).build();
}

static channelList(channels, messages, activeChannel) {
return signalMap(channels,
create("div")
.classes("flex-v", "no-gap")
, channel => {
if (channel.type === "gr") {
return ChatComponent.groupChannel(channel, messages, activeChannel);
} else {
return ChatComponent.dmChannel(channel, messages, activeChannel);
}
});
}

static chat(activeChannel, allMessages) {
const sending = signal(false);
const messageText = signal("");
Expand Down Expand Up @@ -133,94 +118,6 @@ export class ChatComponent {
}, sending, ["rounded-max", "double"]);
}

static actions(user, channels) {
const userSearchResults = signal([]);

return create("div")
.classes("flex", "align-center", "full-width", "space-between")
.children(
CommonTemplates.buttonWithIcon("person_add", "New DM", () => {
popup(PopupComponents.searchPopup(() => {
removePopups();
}, (e) => {
const query = e.target.value;
if (query.length < 3) {
userSearchResults.value = [];
return;
}

Api.search(query).then((res) => {
if (res.status !== 200) {
toast("Failed to search for users", "error");
return;
}
userSearchResults.value = res.data.filter(user => {
return !channels.value.some(channel => {
if (channel.type === "dm" && channel.members.length === 1) {
return channel.members[0].id === user.id;
}

return channel.type === "dm" && channel.members[1].id === user.id;
});
});
})
}, () => {}, userSearchResults, (result) => {
return CommonTemplates.chatWithButton(result.username, () => {
Api.createDirect(result.id).then((res) => {
if (res.status !== 200) {
toast("Failed to create DM", "error");
removePopups();
return;
}
toast("DM created", "success");
Live.send({
type: "createChannel",
channelId: res.data.id,
});
removePopups();
});
});
}, "New DM", "Search for users"));
}),
create("div")
.classes("padded")
.children(
CommonTemplates.userInList("face_5", user.displayname ?? user.displayname, user.username, () => {})
).build(),
CommonTemplates.pageLink("Logout", "logout")
).build();
}

static groupChannel(channel, messages, activeChannel) {
const activeClass = computedSignal(activeChannel, (id) => id === channel.id ? "active" : "_");
const editing = signal(false);

return create("div")
.classes("channel", "flex-v", "full-width", activeClass)
.onclick(() => {
activeChannel.value = channel.id;
})
.children(
ifjs(editing, create("input")
.type("text")
.value(channel.name)
.onchange((e) => {
Live.send({
type: "updateChannel",
channelId: channel.id,
name: e.target.value,
});
}).build()),
ifjs(editing, create("span")
.text(channel.name)
.build(), true),
create("span")
.classes("text-small")
.text("Group")
.build(),
).build();
}

static message(message, messages) {
const messageIndex = messages.value.indexOf(message);
const previousMessage = messages.value[messageIndex - 1];
Expand Down Expand Up @@ -289,23 +186,4 @@ export class ChatComponent {
}),
).build();
}

static dmChannel(channel, messages, activeChannel) {
const activeClass = computedSignal(activeChannel, (id) => id === channel.id ? "active" : "_");

return create("div")
.classes("channel", "flex-v", "full-width", activeClass)
.onclick(() => {
activeChannel.value = channel.id;
})
.children(
create("span")
.text(channel.name)
.build(),
create("span")
.classes("text-small")
.text(messages.value[channel.id]?.at(-1)?.text || "No messages")
.build(),
).build();
}
}
Loading

0 comments on commit 7ec4128

Please sign in to comment.