commit 381a21a9f2596f32ba51e89415b71f86e4484f6d
parent bc8d15f872b62982140065356165424dc414e38d
Author: MTRNord <mtrnord1@gmail.com>
Date: Wed, 4 Jan 2023 00:51:02 +0100
Prefer Post page
Diffstat:
6 files changed, 27 insertions(+), 9 deletions(-)
diff --git a/src/app.tsx b/src/app.tsx
@@ -12,6 +12,7 @@ import Olm from '@matrix-org/olm';
import { Route, Routes } from 'react-router-dom';
const Join = lazy(() => import("./pages/Join"));
+const Post = lazy(() => import("./pages/Post"));
export function App() {
const [client, setClient] = useState<MatrixClient | undefined>(undefined);
@@ -86,6 +87,18 @@ export function App() {
<Join />
</Suspense>
} />
+ <Route path="/post/:postId" element={<Suspense fallback={
+ <div className="flex flex-col">
+ <header>
+ <Header />
+ </header>
+ <main className="m-12 mt-6 flex items-center justify-center">
+ <p className="text-lg text-data font-bold">Loading...</p>
+ </main>
+ </div>
+ }>
+ <Post />
+ </Suspense>} />
</Routes>
</Client.Provider>
);
diff --git a/public/Logo_colored.svg b/src/components/Logo_colored.svg
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,12 +1,13 @@
import { Link } from "react-router-dom";
import { useContext } from "react";
import { Client } from "../context";
+import logo_url from "./Logo_colored.svg";
export function Header() {
const client = useContext(Client);
return (
<div className="m-12 flex flex-col lg:flex-row items-center justify-between">
- <Link to="/"><img alt="Matrix Art" src="Logo_colored.svg" /></Link>
+ <Link to="/"><img alt="Matrix Art" src={logo_url} /></Link>
<div className="flex items-center mt-8 lg:mt-0 flex-col sm:flex-row">
<div className="flex items-center lg:justify-between w-80 max-w-80 mx-6 ease-in-out hover:scale-105 transform transition-transform duration-300">
<div className="absolute ml-4">
diff --git a/src/components/post.tsx b/src/components/post.tsx
@@ -3,6 +3,7 @@ import { PostData } from "../data/post";
import { UserData } from "../data/user";
import { SuspenseImage } from "../utils/asyncImages";
import { BounceLoader } from "react-spinners";
+import { Link } from "react-router-dom";
type Props = {
user: UserData;
@@ -10,12 +11,13 @@ type Props = {
};
export function Post({ user, post }: Props) {
+
return (
<Suspense fallback={<div className="flex flex-col w-full"><BounceLoader color="#FEA500" /></div>}>
<div className="flex flex-col">
- <a aria-label={`Open post by ${user.display_name}`} href={post.content.file.url} className="w-full" target="_blank" rel="noreferrer">
+ <Link aria-label={`Open post by ${user.display_name}`} to={`/post/${post.event_id}`} className="w-full">
<SuspenseImage className="rounded-3xl shadow object-cover transform transition-transform ease-in-out duration-300 hover:scale-105" src={post.content.file.url} />
- </a>
+ </Link>
<div className="flex items-center justify-between py-4">
<a className="flex items-center" href="#">
<img className="w-11 h-11 rounded-full mr-4 border-2 border-[#AAB3CF] hover:border-indigo-300 ease-in-out duration-150" src={user.avatar_url} />
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -24,22 +24,22 @@ export function Home() {
<Plock gap={"24px"} breakpoints={BREAKPOINTS}>
{/*
// @ts-ignore */}
- <Post user={new UserData("", "Person A", "https://images.unsplash.com/photo-1519699047748-de8e457a634e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3NzYyNA&ixlib=rb-4.0.3&q=80&w=922")} post={new PostData("", { file: { url: "https://images.unsplash.com/photo-1648773009733-1eab564f3330?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3Nzk0MA&ixlib=rb-4.0.3&q=80&w=614" } })} />
+ <Post user={new UserData("", "Person A", "https://images.unsplash.com/photo-1519699047748-de8e457a634e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3NzYyNA&ixlib=rb-4.0.3&q=80&w=922")} post={new PostData("a", { file: { url: "https://images.unsplash.com/photo-1648773009733-1eab564f3330?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3Nzk0MA&ixlib=rb-4.0.3&q=80&w=614" } })} />
{/*
// @ts-ignore */}
- <Post user={new UserData("", "Person B", "https://images.unsplash.com/photo-1485893086445-ed75865251e0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3Nzc2Ng&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("", { file: { url: "https://images.unsplash.com/photo-1648775933902-f633de370964?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODE1OQ&ixlib=rb-4.0.3&q=80&w=1383" } })} />
+ <Post user={new UserData("", "Person B", "https://images.unsplash.com/photo-1485893086445-ed75865251e0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3Nzc2Ng&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("b", { file: { url: "https://images.unsplash.com/photo-1648775933902-f633de370964?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODE1OQ&ixlib=rb-4.0.3&q=80&w=1383" } })} />
{/*
// @ts-ignore */}
- <Post user={new UserData("", "Person C", "https://images.unsplash.com/photo-1584997159889-8bb96d0a2217?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODAxNw&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("", { file: { url: "https://images.unsplash.com/photo-1648793633175-f3635585014b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODIwNA&ixlib=rb-4.0.3&q=80&w=614" } })} />
+ <Post user={new UserData("", "Person C", "https://images.unsplash.com/photo-1584997159889-8bb96d0a2217?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODAxNw&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("c", { file: { url: "https://images.unsplash.com/photo-1648793633175-f3635585014b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODIwNA&ixlib=rb-4.0.3&q=80&w=614" } })} />
{/*
// @ts-ignore */}
- <Post user={new UserData("", "Person D", "https://images.unsplash.com/photo-1543123820-ac4a5f77da38?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODA0Ng&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("", { file: { url: "https://images.unsplash.com/photo-1648775170273-dcbe48fb12a0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODI1Ng&ixlib=rb-4.0.3&q=80&w=1229" } })} />
+ <Post user={new UserData("", "Person D", "https://images.unsplash.com/photo-1543123820-ac4a5f77da38?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODA0Ng&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("d", { file: { url: "https://images.unsplash.com/photo-1648775170273-dcbe48fb12a0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODI1Ng&ixlib=rb-4.0.3&q=80&w=1229" } })} />
{/*
// @ts-ignore */}
- <Post user={new UserData("", "Person E", "https://images.unsplash.com/photo-1595687825617-10c4d36566e7?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODA3Mw&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("", { file: { url: "https://images.unsplash.com/photo-1648769244858-6e20b5999a6b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODI5Nw&ixlib=rb-4.0.3&q=80&w=651" } })} />
+ <Post user={new UserData("", "Person E", "https://images.unsplash.com/photo-1595687825617-10c4d36566e7?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODA3Mw&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("e", { file: { url: "https://images.unsplash.com/photo-1648769244858-6e20b5999a6b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODI5Nw&ixlib=rb-4.0.3&q=80&w=651" } })} />
{/*
// @ts-ignore */}
- <Post user={new UserData("", "Person E", "https://images.unsplash.com/photo-1609010586352-ce4e725aa565?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODA5Mg&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("", { file: { url: "https://images.unsplash.com/photo-1648750690732-f6eb85984ff8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=921&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODM1NQ&ixlib=rb-4.0.3&q=80&w=614" } })} />
+ <Post user={new UserData("", "Person E", "https://images.unsplash.com/photo-1609010586352-ce4e725aa565?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODA5Mg&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("f", { file: { url: "https://images.unsplash.com/photo-1648750690732-f6eb85984ff8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=921&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODM1NQ&ixlib=rb-4.0.3&q=80&w=614" } })} />
</Plock>
</div>
</main>
diff --git a/src/pages/Post.tsx b/src/pages/Post.tsx
@@ -1,7 +1,9 @@
import React from "react";
+import { useParams } from "react-router-dom";
import { Header } from "../components/header";
export default function Post() {
+ let { postId } = useParams();
return (
<div className="flex flex-col">
<header>
