commit 7305f617c1a50f0ec713e2b1d47c00880fbb93f1
parent aa9c5c0fdd45c5545fbca0724aa86a61ea1fa4f3
Author: MTRNord <mtrnord1@gmail.com>
Date: Sat, 1 Jan 2022 21:13:37 +0100
Add tags and link to profile if logged in
Diffstat:
3 files changed, 37 insertions(+), 14 deletions(-)
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,7 +1,9 @@
import Link from "next/link";
import { Component } from "react";
+import { ClientContext } from "./ClientContext";
export default class Header extends Component {
+ declare context: React.ContextType<typeof ClientContext>;
render() {
return (
<>
@@ -22,6 +24,7 @@ export default class Header extends Component {
<nav className='flex flex-shrink-0 relative mr-0 h-full'>
<span className='px-4 h-auto min-w-[24px] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium'><Link href="/register">Join</Link></span>
<span className='px-4 h-auto min-w-[24px] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium'><Link href="/login">Log in</Link></span>
+ {this.context.client.isGuest ? <span className='px-4 h-auto min-w-[24px] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium'><Link href="/profile">Profile</Link></span> : null}
</nav>
</div>
<span className='lg:opacity-100 opacity-0 inline-block bg-gray-900 dark:bg-gray-200 w-[1px] h-[27px]'></span>
@@ -34,4 +37,5 @@ export default class Header extends Component {
</>
);
}
-}
-\ No newline at end of file
+}
+Header.contextType = ClientContext;
+\ No newline at end of file
diff --git a/helpers/matrix_client.ts b/helpers/matrix_client.ts
@@ -8,17 +8,20 @@ export default class MatrixClient {
private joinedRooms: Map<any, any>;
private userProfileCache: Map<any, any>;
private storage!: Storage;
- private serverUrl: string | undefined;
- private _userId: string | undefined;
- private _accessToken: string | undefined;
- private isGuest: boolean | undefined;
- private serverName: string | undefined;
+ private serverUrl?: string;
+ private _userId?: string;
+ private _accessToken?: string;
+ private _isGuest?: boolean;
+ private serverName?: string;
get userId(): string | undefined {
return this._userId;
}
get accessToken(): string | undefined {
return this._accessToken;
}
+ get isGuest(): boolean | undefined {
+ return this._isGuest;
+ }
constructor(storage: Storage) {
this.joinedRooms = new Map(); // room alias -> room ID
@@ -30,7 +33,7 @@ export default class MatrixClient {
this.serverUrl = storage.getItem("serverUrl");
this._userId = storage.getItem("userId");
this._accessToken = storage.getItem("accessToken");
- this.isGuest = (this.userId || "").indexOf("@matrix_art_guest_") === 0;
+ this._isGuest = (this.userId || "").indexOf("@matrix_art_guest_") === 0;
this.serverName = storage.getItem("serverName");
}
@@ -73,7 +76,7 @@ export default class MatrixClient {
this._userId = data.user_id;
this._accessToken = data.access_token;
this.serverName = data.home_server;
- this.isGuest = true;
+ this._isGuest = true;
this.saveAuthState();
console.log("Registered as guest ", username);
}
@@ -92,7 +95,7 @@ export default class MatrixClient {
this.serverUrl = undefined;
this._userId = undefined;
this._accessToken = undefined;
- this.isGuest = undefined;
+ this._isGuest = undefined;
this.serverName = undefined;
this.saveAuthState();
}
@@ -127,7 +130,7 @@ export default class MatrixClient {
this.serverUrl = serverUrl;
this._userId = data.user_id;
this._accessToken = data.access_token;
- this.isGuest = false;
+ this._isGuest = false;
this.serverName = data.home_server;
if (saveToStorage) {
this.saveAuthState();
@@ -148,7 +151,7 @@ export default class MatrixClient {
this.serverUrl = serverUrl;
this._userId = data.user_id;
this._accessToken = data.access_token;
- this.isGuest = false;
+ this._isGuest = false;
this.serverName = data.home_server;
this.saveAuthState();
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -143,8 +143,11 @@ class Post extends Component<Props, State> {
<main className='flex-col h-full flex lg:pt-[108px] pt-[216px] z-0'>
{isImageGalleryEvent(image_event) ? this.renderImageGalleryEvent(image_event, post_title) : isImageEvent(image_event) ? this.renderSingleImageEvent(image_event, post_title) : <div key={(image_event as MatrixEventBase).event_id}></div>}
<div className="grow bg-[#f8f8f8] dark:bg-[#06070D] min-h-[400px]">
- <h1 className="mx-16 my-4 text-6xl text-gray-900 dark:text-gray-200 font-bold">{post_title}</h1>
- <h3 className="mx-16 my-4 text-l text-gray-900 dark:text-gray-200 font-normal">{image_event.sender}</h3>
+ <div className="mx-16">
+ <h1 className="my-4 text-6xl text-gray-900 dark:text-gray-200 font-bold">{post_title}</h1>
+ <h3 className="my-4 text-l text-gray-900 dark:text-gray-200 font-normal">{image_event.sender}</h3>
+ {isImageGalleryEvent(image_event) ? this.renderImageGalleryTags(image_event) : isImageEvent(image_event) ? this.renderSingleImageTags(image_event) : <div key={(image_event as MatrixEventBase).event_id + "text"}></div>}
+ </div>
</div>
</main>
</div>
@@ -172,6 +175,19 @@ class Post extends Component<Props, State> {
}
}
+ renderSingleImageTags(image_event: ImageEvent): import("react").ReactNode {
+ const tags = image_event.content["matrixart.tags"].map((tag) => {
+ console.log(tag);
+ return <div className="mr-2 bg-slate-800 hover:bg-slate-600 p-2 rounded-sm cursor-default">{tag}</div>;
+ });
+ return (
+ <div className="flex flex-row items-center text-gray-900 dark:text-gray-200 font-medium" key={(image_event as MatrixEventBase).event_id + "text"}>{tags}</div>
+ );
+ }
+
+ renderImageGalleryTags(image_event: ImageGalleryEvent): import("react").ReactNode {
+ return <></>;
+ }
renderSingleImageEvent(imageEvent: ImageEvent, caption: string) {
const url = this.context.client?.downloadLink(imageEvent.content["m.file"].url);
