commit 21b4f2bfc1e620b4ea093264d1514a5160d664fa
parent 3d05a14f120476d85ee6058aef365611cf1b3570
Author: MTRNord <mtrnord1@gmail.com>
Date: Tue, 3 Jan 2023 19:52:54 +0100
Fix grid and js-sdk
Diffstat:
10 files changed, 29 insertions(+), 107 deletions(-)
diff --git a/package-lock.json b/package-lock.json
@@ -4030,7 +4030,7 @@
},
"node_modules/react-plock": {
"version": "0.0.0",
- "resolved": "git+ssh://git@github.com/MTRNord/react-plock.git#0342e5a9730ee64a60527ec3f823af8bbb9f7dd9",
+ "resolved": "git+ssh://git@github.com/MTRNord/react-plock.git#76cec000de7fa44fe358fa760755c4f89f9f4ea1",
"license": "MIT",
"dependencies": {
"core-js": "^3.6.5",
@@ -7792,8 +7792,8 @@
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg=="
},
"react-plock": {
- "version": "git+ssh://git@github.com/MTRNord/react-plock.git#0342e5a9730ee64a60527ec3f823af8bbb9f7dd9",
- "from": "react-plock@MTRNord/react-plock#MTRNord/patch-react",
+ "version": "git+ssh://git@github.com/MTRNord/react-plock.git#76cec000de7fa44fe358fa760755c4f89f9f4ea1",
+ "from": "react-plock@github:MTRNord/react-plock#MTRNord/patch-react",
"requires": {
"core-js": "^3.6.5",
"react": "18.1.0",
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
"name": "matrix-art",
"private": true,
"version": "0.0.0",
+ "type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
diff --git a/postcss.config.js b/postcss.config.cjs
diff --git a/src/matrix/client.ts b/src/matrix/client.ts
@@ -13,8 +13,6 @@ import {
UNSTABLE_MSC3088_PURPOSE,
UNSTABLE_MSC3089_TREE_SUBTYPE
} from 'matrix-js-sdk';
-// @ts-ignore
-import { WebStorageSessionStore } from "matrix-js-sdk/lib/store/session/webstorage";
import {
MEGOLM_ALGORITHM
} from 'matrix-js-sdk/lib/crypto/olmlib';
@@ -68,7 +66,6 @@ export class MatrixClient {
userId: mxid,
accessToken: token,
deviceId: device_id,
- sessionStore: new WebStorageSessionStore(window.localStorage),
// @ts-ignore - The function currently comes with incorrect types
store: new IndexedDBStore({
indexedDB: window.indexedDB,
@@ -83,7 +80,7 @@ export class MatrixClient {
guest_client.setGuest(true);
} {
- const tmpClient = createClient(import.meta.env.VITE_MATRIX_SERVER_URL);
+ const tmpClient = createClient({ baseUrl: import.meta.env.VITE_MATRIX_SERVER_URL });
// @ts-ignore - The function currently comes with incorrect types
const { user_id, device_id, access_token } = await tmpClient.registerGuest();
@@ -93,7 +90,6 @@ export class MatrixClient {
userId: user_id,
accessToken: access_token,
deviceId: device_id,
- sessionStore: new WebStorageSessionStore(window.localStorage),
// @ts-ignore - The function currently comes with incorrect types
store: new IndexedDBStore({
indexedDB: window.indexedDB,
@@ -124,7 +120,6 @@ export class MatrixClient {
userId: mxid,
accessToken: token,
deviceId: device_id,
- sessionStore: new WebStorageSessionStore(window.localStorage),
// @ts-ignore - The function currently comes with incorrect types
store: new IndexedDBStore({
indexedDB: window.indexedDB,
@@ -175,7 +170,6 @@ export class MatrixClient {
baseUrl: homeserver,
userId: username,
deviceId: "Matrix Art",
- sessionStore: new WebStorageSessionStore(window.localStorage),
// @ts-ignore - The function currently comes with incorrect types
store: new IndexedDBStore({
indexedDB: window.indexedDB,
@@ -192,12 +186,12 @@ export class MatrixClient {
window.localStorage.setItem("server", homeserver);
window.localStorage.setItem("mxid", username);
- window.localStorage.setItem("access_token", this.client.getAccessToken());
+ window.localStorage.setItem("access_token", this.client.getAccessToken() ?? "unknown");
window.localStorage.setItem("device_id", "Matrix Art");
await this.start();
if (createProfile) {
const subdirs = this.rootDirectory?.getDirectories();
- const id = this.client.getUserId().replace(":", "_");
+ const id = this.client.getUserId()?.replace(":", "_");
if (subdirs?.some((directory) => directory.room.name === id)) {
this.rootDirectory = subdirs?.find((directory) => directory.room.name === id);
} else {
@@ -214,7 +208,6 @@ export class MatrixClient {
baseUrl: homeserver,
userId: username,
deviceId: "Matrix Art",
- sessionStore: new WebStorageSessionStore(window.localStorage),
// @ts-ignore - The function currently comes with incorrect types
store: new IndexedDBStore({
indexedDB: window.indexedDB,
@@ -230,13 +223,13 @@ export class MatrixClient {
window.localStorage.setItem("server", homeserver);
window.localStorage.setItem("mxid", username);
- window.localStorage.setItem("access_token", this.client.getAccessToken());
+ window.localStorage.setItem("access_token", this.client.getAccessToken() ?? "unknown");
window.localStorage.setItem("device_id", "Matrix Art");
await this.start();
if (createProfile) {
const subdirs = this.rootDirectory?.getDirectories();
console.log(subdirs);
- const id = this.client.getUserId().replace(":", "_");
+ const id = this.client.getUserId()?.replace(":", "_");
if (subdirs?.some((directory) => directory.room.name === id)) {
this.rootDirectory = subdirs?.find((directory) => directory.room.name === id);
} else {
@@ -255,8 +248,8 @@ export class MatrixClient {
await delay(1000);
this.rootDirectory = new MSC3089TreeSpace(this.client, room.roomId);
// Create the user folder and add it to the top folder
- const id = this.client.getUserId().replace(":", "_");
- this.currentUserDirectory = await this.createPublicSubDirectory(this.rootDirectory, id);
+ const id = this.client.getUserId()?.replace(":", "_");
+ this.currentUserDirectory = await this.createPublicSubDirectory(this.rootDirectory, id ?? "unknown");
// Create the public timeline for the user. We dont need it saved as we can get it again later using the users dir.
await this.createPublicSubDirectory(this.currentUserDirectory, "Timeline");
}
@@ -286,7 +279,7 @@ export class MatrixClient {
// We want to be able to moderate this as the instance admin for legal reasons
[import.meta.env.VITE_MATRIX_INSTANCE_ADMIN]: 100,
// We initially need to use 100 to be able to create the room...
- [this.client.getUserId()]: 100,
+ [this.client.getUserId() ?? "broken"]: 100,
},
},
invite: [
@@ -328,11 +321,11 @@ export class MatrixClient {
});
// Demote ourself
const room = this.client.getRoom(roomId);
- const powerLevelEvent = room?.getLiveTimeline().getState(EventTimeline.FORWARDS).getStateEvents(EventType.RoomPowerLevels, "");
+ const powerLevelEvent = room?.getLiveTimeline().getState(EventTimeline.FORWARDS)?.getStateEvents(EventType.RoomPowerLevels, "");
if (!powerLevelEvent) {
throw new Error("Failed to find PL event");
}
- await this.client.setPowerLevel(roomId, this.client.getUserId(), 50, powerLevelEvent);
+ await this.client.setPowerLevel(roomId, this.client.getUserId() ?? "unknown", 50, powerLevelEvent);
return new MSC3089TreeSpace(this.client, roomId);
}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -6,40 +6,14 @@ import { Plock } from "react-plock";
import { UserData } from "../data/user";
import { PostData } from "../data/post";
-type State = {
- columns: number;
-};
-
-export class Home extends PureComponent<any, State> {
- constructor() {
- super();
- this.state = {
- columns: this.settingColumns(),
- };
- }
-
- // TODO: Factor in the amount of images
- // If we have less than the result then only use the number of images as columns
- private settingColumns(): number {
- if (window.innerWidth >= 1400) {
- return 4;
- } else if (window.innerWidth >= 800) {
- return 3;
- } else if (window.innerWidth >= 500) {
- return 2;
- } else {
- return 1;
- }
- }
-
- componentDidMount() {
- window.addEventListener('resize', () => this.setState({ columns: this.settingColumns() }));
- }
-
- componentWillUnmount() {
- window.removeEventListener('resize', () => this.setState({ columns: this.settingColumns() }));
- }
+const BREAKPOINTS = [
+ { size: 500, columns: 1 },
+ { size: 800, columns: 2 },
+ { size: 1400, columns: 3 },
+ { size: 1401, columns: 4 },
+];
+export class Home extends PureComponent {
render() {
return (
<div class="flex flex-col">
@@ -49,7 +23,7 @@ export class Home extends PureComponent<any, State> {
<main class="m-12 mt-6">
<h1 class="text-3xl font-bold mb-4 text-white">Explore</h1>
<div class="flex justify-center" id="gallery">
- <Plock gap={"24px"} breakpoints={this.state.columns}>
+ <Plock gap={"24px"} breakpoints={BREAKPOINTS}>
<Post user={new UserData("", "Person A", "https://unsplash.com/photos/_cvwXhGqG-o/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8OHx8ZmFjZXxlbnwwfDJ8fHwxNjQ4Nzc5NzYx")} post={new PostData("", { file: { url: "https://unsplash.com/photos/UWmrTAQ75iA/download?ixid=MnwxMjA3fDB8MXxhbGx8Mnx8fHx8fDJ8fDE2NDg4MzI0Njg" } })} />
<Post user={new UserData("", "Person B", "https://unsplash.com/photos/uJ8LNVCBjFQ/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MTN8fGZhY2V8ZW58MHwyfHx8MTY0ODc3OTc2MQ")} post={new PostData("", { file: { url: "https://unsplash.com/photos/7ptbiEPxKMQ/download?ixid=MnwxMjA3fDB8MXxhbGx8OXx8fHx8fDJ8fDE2NDg4MzI0Njg" } })} />
<Post user={new UserData("", "Person C", "https://unsplash.com/photos/u3pi6HhSYew/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MTd8fGZhY2V8ZW58MHwyfHx8MTY0ODc3OTc2MQ")} post={new PostData("", { file: { url: "https://unsplash.com/photos/ZiPlVmmKEYA/download?ixid=MnwxMjA3fDB8MXxhbGx8Mzl8fHx8fHwyfHwxNjQ4ODM2MDIz" } })} />
diff --git a/tailwind.config.js b/tailwind.config.cjs
diff --git a/tsconfig.browser.json b/tsconfig.browser.json
@@ -1,29 +0,0 @@
-{
- "compilerOptions": {
- "composite": true,
- "rootDir": "./src",
- "target": "ESNext",
- "useDefineForClassFields": true,
- "lib": [
- "DOM",
- "DOM.Iterable",
- "ESNext"
- ],
- "allowJs": false,
- "skipLibCheck": true,
- "esModuleInterop": false,
- "allowSyntheticDefaultImports": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
- "module": "ESNext",
- "moduleResolution": "Node",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "jsx": "preserve",
- "jsxFactory": "h",
- "jsxFragmentFactory": "Fragment"
- },
- "include": [
- "./src/**/*"
- ]
-}
-\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
@@ -18,20 +18,9 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
- "jsx": "preserve",
- "jsxFactory": "h",
- "jsxFragmentFactory": "Fragment"
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact"
},
- "exclude": [
- "./src/**/*",
- "./scripts/**/*"
- ],
- "references": [
- {
- "path": "./tsconfig.node.json"
- },
- {
- "path": "./tsconfig.browser.json"
- }
- ]
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
}
\ No newline at end of file
diff --git a/tsconfig.node.json b/tsconfig.node.json
@@ -1,8 +1,8 @@
{
"compilerOptions": {
"composite": true,
- "module": "esnext",
- "moduleResolution": "node"
+ "module": "ESNext",
+ "moduleResolution": "Node"
},
"include": [
"vite.config.ts",
diff --git a/vite.config.ts b/vite.config.ts
@@ -5,12 +5,7 @@ import preact from '@preact/preset-vite';
export default defineConfig({
plugins: [preact(), splitVendorChunkPlugin()],
resolve: {
- alias: {
- react: 'preact/compat',
- 'react-dom': 'preact/compat',
- 'react-dom/test-utils': 'preact/test-utils',
- 'react/jsx-runtime': 'preact/jsx-runtime'
- }
+ browserField: false,
},
worker: {
format: 'iife',
