show other users

This commit is contained in:
Stepan Usatiuk
2023-12-16 22:03:03 +01:00
parent f556f67db6
commit eea123a3f0
4 changed files with 35 additions and 21 deletions

View File

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

View File

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

View File

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

View File

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