-
- {postData && postData.data ? (
-
- ) : (
-
Post not found.
- )}
-
-
-
-
-
+
+
+ {postData && postData.data ? (
+
+ ) : (
+
Post not found.
+ )}
+
+
+
+
+
);
diff --git a/web/src/components/pages/ExplorePage.tsx b/web/src/components/pages/ExplorePage.tsx
index 6dce50f4..af4a5a88 100644
--- a/web/src/components/pages/ExplorePage.tsx
+++ b/web/src/components/pages/ExplorePage.tsx
@@ -4,10 +4,40 @@ import { useLoaderData, useNavigate } from "react-router";
import type { components } from "../../lib/api/v1";
import type { AppClient } from "../../lib/client";
import ClientContext from "../../lib/client";
+import AppContext from "../../lib/state";
import PostComposerOverlay from "../common/PostComposerOverlay";
import { PostItem, type PostPresentable } from "../common/PostItem";
import Sidebar from "../common/Sidebar";
+function FoundUserItem({
+ account,
+}: {
+ account: components["schemas"]["Account"];
+}) {
+ const display = account.displayName || account.username;
+ const handle = account.acct || `@${account.username}`;
+ const initial = display?.slice(0, 1).toUpperCase() || "?";
+
+ return (
+
+ );
+}
+
export const loader = (client: AppClient) => async () => {
const opts = client.$api.queryOptions("get", "/api/posts", {});
await client.queryClient.ensureQueryData(opts);
@@ -16,6 +46,7 @@ export const loader = (client: AppClient) => async () => {
export default function ExplorePage() {
const client = useContext(ClientContext);
+ const appState = useContext(AppContext);
const navigate = useNavigate();
const { opts } = useLoaderData() as Awaited<
ReturnType
>
@@ -56,9 +87,9 @@ export default function ExplorePage() {
const handleSearch = async (event: React.FormEvent) => {
event.preventDefault();
const trimmed = searchTerm.trim();
- const handlePattern = /^@[A-Za-z0-9._-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
+ const handlePattern = /^@[A-Za-z0-9._-]+@[A-Za-z0-9.-]+(?::\d{2,5})?$/;
if (!handlePattern.test(trimmed)) {
- setSearchError("Format must be @user@instance.com");
+ setSearchError("Format must be @user@host or @user@host:port");
return;
}
if (!client) {
@@ -97,6 +128,22 @@ export default function ExplorePage() {
setSelectedPost(null);
};
+ const handleCreatePost = async (content: string) => {
+ const userId = appState?.userId ?? null;
+ if (!client || userId === null) {
+ throw new Error("User not authenticated");
+ }
+ await client.fetchClient.POST("/api/posts", {
+ body: { userID: userId, content },
+ });
+ await client.queryClient.invalidateQueries({
+ queryKey: ["user-posts", userId],
+ });
+ await client.queryClient.invalidateQueries({
+ queryKey: ["get", "/api/posts", {}],
+ });
+ };
+
const onSearchChange = (event: React.ChangeEvent) => {
setSearchTerm(event.target.value);
if (searchError) {
@@ -143,7 +190,7 @@ export default function ExplorePage() {
{searchError}
+
+
+
+
+ Warning!
+ {searchError === "Error during fetching client."
+ ? "Sorry, we coudn't find this profile. Are you sure you entered the username and host correctly?"
+ : searchError}
+
+
-
Search result
-
- {searchResult.displayName || searchResult.username}
-
-
- {searchResult.acct || `@${searchResult.username}`}
+
)}
@@ -241,6 +283,7 @@ export default function ExplorePage() {
isOpen={isComposerOpen}
onClose={closeComposer}
replyTo={selectedPost}
+ onSubmit={handleCreatePost}
/>
(null);
@@ -25,6 +27,22 @@ export default function LikesPage() {
setSelectedPost(null);
};
+ const handleCreatePost = async (content: string) => {
+ const userId = appState?.userId ?? null;
+ if (!client || userId === null) {
+ throw new Error("User not authenticated");
+ }
+ await client.fetchClient.POST("/api/posts", {
+ body: { userID: userId, content },
+ });
+ await client.queryClient.invalidateQueries({
+ queryKey: ["user-posts", userId],
+ });
+ await client.queryClient.invalidateQueries({
+ queryKey: ["get", "/api/posts", {}],
+ });
+ };
+
return (
@@ -44,6 +62,7 @@ export default function LikesPage() {
isOpen={isComposerOpen}
onClose={closeComposer}
replyTo={selectedPost}
+ onSubmit={handleCreatePost}
/>
);
diff --git a/web/src/components/pages/OtherUserPage.tsx b/web/src/components/pages/OtherUserPage.tsx
index 2d73e418..1b4088de 100644
--- a/web/src/components/pages/OtherUserPage.tsx
+++ b/web/src/components/pages/OtherUserPage.tsx
@@ -6,6 +6,7 @@ import type { components } from "../../lib/api/v1";
import type { AppClient } from "../../lib/client";
import ClientContext from "../../lib/client";
import AppContext from "../../lib/state";
+import PostComposerOverlay from "../common/PostComposerOverlay";
import { PostItem } from "../common/PostItem";
import Sidebar from "../common/Sidebar";
@@ -41,6 +42,7 @@ export default function OtherUserPage() {
const [isFollowed, setIsFollowed] = useState(false);
const [followError, setFollowError] = useState
(null);
const [followPending, setFollowPending] = useState(false);
+ const [isComposerOpen, setIsComposerOpen] = useState(false);
const { data: profileData } = useQuery({
queryKey: ["profile", handle ?? derivedUsername],
@@ -155,6 +157,27 @@ export default function OtherUserPage() {
setIsFollowed(followers.some((follower) => follower.id === tokenUserId));
}, [followers, tokenUserId]);
+ const openComposerForNewPost = () => {
+ setIsComposerOpen(true);
+ };
+
+ const closeComposer = () => setIsComposerOpen(false);
+
+ const handleCreatePost = async (content: string) => {
+ if (!client || tokenUserId === null) {
+ throw new Error("User not authenticated");
+ }
+ await client.fetchClient.POST("/api/posts", {
+ body: { userID: tokenUserId, content },
+ });
+ await client.queryClient.invalidateQueries({
+ queryKey: ["user-posts", tokenUserId],
+ });
+ await client.queryClient.invalidateQueries({
+ queryKey: ["get", "/api/posts", {}],
+ });
+ };
+
return (
@@ -233,8 +256,14 @@ export default function OtherUserPage() {
)}
-
+
);
}
diff --git a/web/src/components/pages/SharedPage.tsx b/web/src/components/pages/SharedPage.tsx
index 6c4d09c8..9b52103e 100644
--- a/web/src/components/pages/SharedPage.tsx
+++ b/web/src/components/pages/SharedPage.tsx
@@ -4,6 +4,7 @@ import { useLoaderData } from "react-router";
import type { components } from "../../lib/api/v1";
import type { AppClient } from "../../lib/client";
import ClientContext from "../../lib/client";
+import AppContext from "../../lib/state";
import PostComposerOverlay from "../common/PostComposerOverlay";
import { PostItem, type PostPresentable } from "../common/PostItem";
import Sidebar from "../common/Sidebar";
@@ -17,6 +18,7 @@ export const loader = (client: AppClient) => async () => {
export default function SharedPage() {
const client = useContext(ClientContext);
+ const appState = useContext(AppContext);
const { opts } = useLoaderData() as Awaited<
ReturnType>
>;
@@ -52,6 +54,22 @@ export default function SharedPage() {
setSelectedPost(null);
};
+ const handleCreatePost = async (content: string) => {
+ const userId = appState?.userId ?? null;
+ if (!client || userId === null) {
+ throw new Error("User not authenticated");
+ }
+ await client.fetchClient.POST("/api/posts", {
+ body: { userID: userId, content },
+ });
+ await client.queryClient.invalidateQueries({
+ queryKey: ["user-posts", userId],
+ });
+ await client.queryClient.invalidateQueries({
+ queryKey: ["get", "/api/posts", {}],
+ });
+ };
+
return (
@@ -97,6 +115,7 @@ export default function SharedPage() {
isOpen={isComposerOpen}
onClose={closeComposer}
replyTo={selectedPost}
+ onSubmit={handleCreatePost}
/>
);
diff --git a/web/src/components/pages/UserPage.tsx b/web/src/components/pages/UserPage.tsx
index 2f37b0e7..29a0f9ae 100644
--- a/web/src/components/pages/UserPage.tsx
+++ b/web/src/components/pages/UserPage.tsx
@@ -2,7 +2,6 @@ import { useQuery } from "@tanstack/react-query";
import { useContext, useMemo, useState } from "react";
import {
type LoaderFunctionArgs,
- Outlet,
useLoaderData,
useNavigate,
} from "react-router";
@@ -216,7 +215,6 @@ export default function UserPage() {
)}
)}
-