profile refact

src/AppRouter.tsx

@@ -5,8 +5,7 @@ import { Auth } from "./pages/auth";
 import { Favourites } from "./pages/favourites/Favourites.tsx";
 import { CreateBook } from "./pages/createBook";
 import { Chat } from "./pages/chat/Chat.tsx";
-import { Profile } from "./pages/profile/Profile.tsx";
-import { User } from "./pages/user/User.tsx";
+import { Profile } from "./pages/profile";
 
 const Router = import.meta.env.SSR ? StaticRouter : BrowserRouter;
 
@@ -21,8 +20,7 @@ export function AppRouter({ location }: { location: string }) {
         <Route path="/favourites" element={<Favourites />} />
         <Route path="/createBook" element={<CreateBook />} />
         <Route path="/chats" element={<Chat />} />
-        <Route path="/profile" element={<Profile />} />
-        <Route path="/user/:userId" element={<User />} />
+        <Route path="/profile/:userId?" element={<Profile />} />
         <Route path={"*"} element={<div>404 page not found</div>} />
       </Routes>
     </Router>

src/pages/profile/Profile.tsx

@@ -1,25 +1,23 @@
-import styles from "./profile.module.scss";
 import { useGetProfileQuery } from "../../services/api/sharebookApi.ts";
-import { Button } from "antd";
-import photo from "./nikolay.png";
-import { UserComponent } from "../../components/UserComponent/UserComponent.tsx";
-
-const user = {
-  userId: "userId",
-  name: "Николай Андер",
-  photo,
-};
+import { ProfileInfo } from "./info";
+import { useParams } from "react-router";
+import { ProfileOwnButtons } from "./ownButtons";
+import { ProfileOtherButtons } from "./otherButtons";
 
 export function Profile() {
-  const { data } = useGetProfileQuery({ userId: "-1", zone: 1 });
+  let { userId } = useParams();
+
+  if (userId === "0" || userId === "my" || !userId || !isFinite(+userId)) {
+    userId = "-1";
+  }
+
+  const isOwnProfile = userId === "-1";
+
+  const { data } = useGetProfileQuery({ userId, zone: 1 });
 
-  console.log(data);
   return (
-    <UserComponent data={user}>
-      <>
-        <Button className={styles.settingsButton}>⚙️</Button>
-        <Button type="primary">Новое объявление</Button>
-      </>
-    </UserComponent>
+    <ProfileInfo profile={data} isOwnProfile={isOwnProfile}>
+      {isOwnProfile ? <ProfileOwnButtons /> : <ProfileOtherButtons />}
+    </ProfileInfo>
   );
 }

src/pages/profile/index.ts

@@ -0,0 +1 @@
+export { Profile } from "./Profile.tsx";

src/components/UserComponent/UserComponent.tsx → src/pages/profile/info/ProfileInfo.tsx

@@ -1,26 +1,33 @@
-import styles from "./userComponent.module.scss";
+import styles from "./profileInfo.module.scss";
 import { Avatar, Typography } from "antd";
+import photo from "./anna.png";
+import photo2 from "./nikolay.png";
+import {
+  UserProfileDto,
+  UserPublicProfileDto,
+} from "../../../services/api/sharebookApi.ts";
+import { PropsWithChildren } from "../../../types.ts";
 
 type Props = {
-  data: {
-    userId: string;
-    name: string;
-    photo: string;
-  };
-  children: JSX.Element;
+  profile?: UserPublicProfileDto | UserProfileDto;
+  isOwnProfile: boolean;
 };
 
-export function UserComponent({ data, children }: Props) {
+export function ProfileInfo({
+  profile,
+  isOwnProfile,
+  children,
+}: PropsWithChildren<Props>) {
   return (
     <div className={styles.wrapper}>
       <div className={styles.container}>
         <div className={styles.info}>
           <div className={styles.avatar}>
-            <Avatar size={150} src={data.photo} /> {/* Changed size to 128 */}
+            <Avatar size={150} src={isOwnProfile ? photo : photo2} />
           </div>
           <div className={styles.text}>
             <Typography.Title level={2} className={styles.name}>
-              {data.name}
+              {profile?.name}
             </Typography.Title>
             <Typography.Text className={styles.score}>
               <span className={styles.emoji}>🎯</span> Отдано 17 книг • Обменяно

src/pages/profile/info/index.tsx

@@ -0,0 +1 @@
+export { ProfileInfo } from "./ProfileInfo.tsx";

src/pages/profile/otherButtons/ProfileOtherButtons.tsx

@@ -0,0 +1,5 @@
+import { Button } from "antd";
+
+export function ProfileOtherButtons() {
+  return <Button type="primary">Написать</Button>;
+}

src/pages/profile/otherButtons/index.ts

@@ -0,0 +1 @@
+export { ProfileOtherButtons } from "./ProfileOtherButtons.tsx";

src/pages/profile/ownButtons/ProfileOwnButtons.tsx

@@ -0,0 +1,11 @@
+import { Button } from "antd";
+import styles from "./profileOwnButtons.module.scss";
+
+export function ProfileOwnButtons() {
+  return (
+    <>
+      <Button className={styles.settingsButton}>⚙️</Button>
+      <Button type="primary">Новое объявление</Button>
+    </>
+  );
+}

src/pages/profile/ownButtons/index.ts

@@ -0,0 +1 @@
+export { ProfileOwnButtons } from "./ProfileOwnButtons.tsx";