simple user viewing

client/src/App.tsx

@@ -11,12 +11,13 @@ import { Login } from "./Login";
 import { Signup } from "./Signup";
 import { Home } from "./Home";
 import { loginAction, profileSelfAction, signupAction } from "./actions";
-import { homeLoader, profileLoader } from "./loaders";
+import { homeLoader, profileLoader, userListLoader } from "./loaders";
 import { isError } from "./api/dto";
 import { Feed } from "./Feed";
 import { Messages } from "./Messages";
 import { Profile } from "./Profile";
-import { getSelf } from "./api/Person";
+import { UserList } from "./UserList";
+import { getAllPerson } from "./api/Person";
 
 const router = createBrowserRouter([
     {
@@ -38,6 +39,7 @@ const router = createBrowserRouter([
         children: [
             { path: "feed", element: <Feed /> },
             { path: "messages", element: <Messages /> },
+            { path: "users", element: <UserList />, loader: userListLoader },
             {
                 path: "profile",
                 loader: profileLoader,

client/src/Home.tsx

@@ -33,6 +33,9 @@ export function Home() {
                     <NavLink to={"messages"} className={activePendingClassName}>
                         Messages
                     </NavLink>
+                    <NavLink to={"users"} className={activePendingClassName}>
+                        Users
+                    </NavLink>
                     <NavLink to={"profile"} className={activePendingClassName}>
                         Profile
                     </NavLink>

client/src/ProfileCard.tsx

@@ -1,4 +1,5 @@
 import "./ProfileCard.scss";
+import { Link } from "react-router-dom";
 
 export function ProfileCard({
     username,
@@ -9,8 +10,12 @@ export function ProfileCard({
 }) {
     return (
         <div className={"profileCard"}>
-            <span className={"fullName"}>{fullName}</span>
-            <span className={"username"}>{username}</span>
+            <Link to={`/home/profile/${username}`} className={"fullName"}>
+                {fullName}
+            </Link>
+            <Link to={`/home/profile/${username}`} className={"username"}>
+                {username}
+            </Link>
         </div>
     );
 }

client/src/UserList.tsx

@@ -0,0 +1,26 @@
+import { useLoaderData } from "react-router-dom";
+import { LoaderToType, userListLoader } from "./loaders";
+import { isError } from "./api/dto";
+import { ProfileCard } from "./ProfileCard";
+
+export function UserList() {
+    const loaderData = useLoaderData() as LoaderToType<typeof userListLoader>;
+
+    if (!loaderData || isError(loaderData)) {
+        return <div>Error</div>;
+    }
+
+    return (
+        <div>
+            {loaderData.map((u) => {
+                return (
+                    <ProfileCard
+                        username={u.username}
+                        fullName={u.fullName}
+                        key={u.uuid}
+                    />
+                );
+            })}
+        </div>
+    );
+}

client/src/api/Person.ts

@@ -1,5 +1,10 @@
 import { fetchJSON, fetchJSONAuth } from "./utils";
-import { PersonToResp, TPersonToResp } from "./dto";
+import {
+    PersonToArrResp,
+    PersonToResp,
+    TPersonToArrResp,
+    TPersonToResp,
+} from "./dto";
 
 export async function signup(
     username: string,
@@ -13,12 +18,24 @@ export async function signup(
     });
 }
 
+export async function getPersonByUuid(uuid: string): Promise<TPersonToResp> {
+    return fetchJSONAuth("/person/by-uuid/" + uuid, "GET", PersonToResp);
+}
+
 export async function getSelf(): Promise<TPersonToResp> {
-    return fetchJSONAuth("/person", "GET", PersonToResp);
+    return fetchJSONAuth("/person/self", "GET", PersonToResp);
+}
+
+export async function getAllPerson(): Promise<TPersonToArrResp> {
+    return fetchJSONAuth("/person", "GET", PersonToArrResp);
 }
 
 export async function getPersonByUsername(
     username: string,
 ): Promise<TPersonToResp> {
-    return fetchJSONAuth("/person/" + username, "GET", PersonToResp);
+    return fetchJSONAuth(
+        "/person/by-username/" + username,
+        "GET",
+        PersonToResp,
+    );
 }

client/src/api/dto.ts

@@ -33,6 +33,12 @@ export type TPersonTo = z.infer<typeof PersonTo>;
 export const PersonToResp = CreateAPIResponse(PersonTo);
 export type TPersonToResp = z.infer<typeof PersonToResp>;
 
+export const PersonToArr = z.array(PersonTo);
+export type TPersonToArr = z.infer<typeof PersonToArr>;
+
+export const PersonToArrResp = CreateAPIResponse(PersonToArr);
+export type TPersonToArrResp = z.infer<typeof PersonToArrResp>;
+
 export const TokenRequestTo = z.object({
     username: z.string(),
     password: z.string(),

client/src/loaders.ts

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