show other users

client/src/App.tsx

@@ -11,7 +11,7 @@ import { Login } from "./Login";
 import { Signup } from "./Signup";
 import { Home } from "./Home";
 import { loginAction, profileSelfAction, signupAction } from "./actions";
-import { homeLoader, profileSelfLoader } from "./loaders";
+import { homeLoader, profileLoader } from "./loaders";
 import { isError } from "./api/dto";
 import { Feed } from "./Feed";
 import { Messages } from "./Messages";
@@ -40,14 +40,14 @@ const router = createBrowserRouter([
             { path: "messages", element: <Messages /> },
             {
                 path: "profile",
-                loader: async () => {
-                    return await profileSelfLoader();
-                },
+                loader: profileLoader,
                 action: profileSelfAction,
                 element: <Profile self={true} />,
             },
             {
                 path: "profile/:username",
+                loader: profileLoader,
+                // action: profileSelfAction,
                 element: <Profile self={false} />,
             },
         ],

client/src/Profile.tsx

@@ -1,8 +1,7 @@
 import "./Profile.scss";
 import { Form, Link, useLoaderData } from "react-router-dom";
-import { LoaderToType, profileSelfLoader } from "./loaders";
+import { LoaderToType, profileLoader } from "./loaders";
 import { isError } from "./api/dto";
-import { ProfileCard } from "./ProfileCard";
 import { Post } from "./Post";
 
 export interface IProfileProps {
@@ -10,9 +9,7 @@ export interface IProfileProps {
 }
 
 export function Profile({ self }: IProfileProps) {
-    const loaderData = useLoaderData() as LoaderToType<
-        typeof profileSelfLoader
-    >;
+    const loaderData = useLoaderData() as LoaderToType<typeof profileLoader>;
 
     if (!loaderData || isError(loaderData)) {
         return <div>Error</div>;
@@ -28,14 +25,19 @@ export function Profile({ self }: IProfileProps) {
                 <span className={"fullName"}>{loaderData.user.fullName}</span>
                 <span className={"username"}>{loaderData.user.fullName}</span>
             </div>
-            <div className={"newPost"}>
-                <Form method="post">
-                    <textarea placeholder={"Write something!"} name="text" />
-                    <button name="intent" value="post" type="submit">
-                        Post
-                    </button>
-                </Form>
-            </div>
+            {self && (
+                <div className={"newPost"}>
+                    <Form method="post">
+                        <textarea
+                            placeholder={"Write something!"}
+                            name="text"
+                        />
+                        <button name="intent" value="post" type="submit">
+                            Post
+                        </button>
+                    </Form>
+                </div>
+            )}
             <div className={"posts"}>
                 {sortedPosts &&
                     sortedPosts.map((p) => {

client/src/api/Person.ts

@@ -16,3 +16,9 @@ export async function signup(
 export async function getSelf(): Promise<TPersonToResp> {
     return fetchJSONAuth("/person", "GET", PersonToResp);
 }
+
+export async function getPersonByUsername(
+    username: string,
+): Promise<TPersonToResp> {
+    return fetchJSONAuth("/person/" + username, "GET", PersonToResp);
+}

client/src/loaders.ts

@@ -1,4 +1,4 @@
-import { getSelf } from "./api/Person";
+import { getPersonByUsername, getSelf } from "./api/Person";
 import { deleteToken, getToken } from "./api/utils";
 import { redirect } from "react-router-dom";
 import { isError } from "./api/dto";
@@ -24,9 +24,15 @@ export async function homeLoader() {
     return await getCheckUserSelf();
 }
 
-export async function profileSelfLoader() {
-    const user = await getCheckUserSelf();
-    if (user instanceof Response) {
+export async function profileLoader({
+    params,
+}: {
+    params: { username?: string };
+}) {
+    const user = params.username
+        ? await getPersonByUsername(params.username)
+        : await getCheckUserSelf();
+    if (!user || user instanceof Response || isError(user)) {
         return user;
     }