From 882c0dfdc1b0dc6a8fc573963c979a2052434a78 Mon Sep 17 00:00:00 2001 From: Maciej Krawczyk <63869461+wzarek@users.noreply.github.com> Date: Thu, 13 Jun 2024 01:01:36 +0200 Subject: [PATCH] [RSN-70] - Implemented base user info page (for me and for user/username) (#57) --- .../reasn-client/apps/web/app/me/layout.tsx | 20 +++ Client/reasn-client/apps/web/app/me/page.tsx | 9 ++ .../apps/web/app/user/[username]/layout.tsx | 20 +++ .../apps/web/app/user/[username]/page.tsx | 10 ++ .../ui/src/components/shared/Interest.tsx | 21 +++ .../ui/src/components/shared/form/Button.tsx | 11 +- .../ui/src/components/shared/form/Input.tsx | 2 + .../ui/src/components/shared/index.tsx | 1 + .../packages/ui/src/components/web/index.tsx | 3 +- .../src/components/web/main/QuickFilters.tsx | 20 +-- .../components/web/user/SharedUserPage.tsx | 122 ++++++++++++++++++ 11 files changed, 226 insertions(+), 13 deletions(-) create mode 100644 Client/reasn-client/apps/web/app/me/layout.tsx create mode 100644 Client/reasn-client/apps/web/app/me/page.tsx create mode 100644 Client/reasn-client/apps/web/app/user/[username]/layout.tsx create mode 100644 Client/reasn-client/apps/web/app/user/[username]/page.tsx create mode 100644 Client/reasn-client/packages/ui/src/components/shared/Interest.tsx create mode 100644 Client/reasn-client/packages/ui/src/components/web/user/SharedUserPage.tsx diff --git a/Client/reasn-client/apps/web/app/me/layout.tsx b/Client/reasn-client/apps/web/app/me/layout.tsx new file mode 100644 index 00000000..f2789e2e --- /dev/null +++ b/Client/reasn-client/apps/web/app/me/layout.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +const LoginLayout = ({ + children, + params, +}: { + children: React.ReactNode; + params: { + tag: string; + item: string; + }; +}) => { + return ( +
+ {children} +
+ ); +}; + +export default LoginLayout; diff --git a/Client/reasn-client/apps/web/app/me/page.tsx b/Client/reasn-client/apps/web/app/me/page.tsx new file mode 100644 index 00000000..cf0ff705 --- /dev/null +++ b/Client/reasn-client/apps/web/app/me/page.tsx @@ -0,0 +1,9 @@ +"use client"; + +import { SharedUserPage } from "@reasn/ui/src/components/web"; + +const MePage = () => { + return ; +}; + +export default MePage; diff --git a/Client/reasn-client/apps/web/app/user/[username]/layout.tsx b/Client/reasn-client/apps/web/app/user/[username]/layout.tsx new file mode 100644 index 00000000..f6795feb --- /dev/null +++ b/Client/reasn-client/apps/web/app/user/[username]/layout.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +const UserLayout = ({ + children, + params, +}: { + children: React.ReactNode; + params: { + tag: string; + item: string; + }; +}) => { + return ( +
+ {children} +
+ ); +}; + +export default UserLayout; diff --git a/Client/reasn-client/apps/web/app/user/[username]/page.tsx b/Client/reasn-client/apps/web/app/user/[username]/page.tsx new file mode 100644 index 00000000..f7b02311 --- /dev/null +++ b/Client/reasn-client/apps/web/app/user/[username]/page.tsx @@ -0,0 +1,10 @@ +"use client"; +import { SharedUserPage } from "@reasn/ui/src/components/web"; +import React from "react"; + +const UserPage = ({ params }: { params: { username: string } }) => { + const { username } = params; + return ; +}; + +export default UserPage; diff --git a/Client/reasn-client/packages/ui/src/components/shared/Interest.tsx b/Client/reasn-client/packages/ui/src/components/shared/Interest.tsx new file mode 100644 index 00000000..cc1767e2 --- /dev/null +++ b/Client/reasn-client/packages/ui/src/components/shared/Interest.tsx @@ -0,0 +1,21 @@ +"use client"; + +import React from "react"; + +interface InterestProps { + text: string; + onDelete: () => void; +} + +export const Interest = (props: InterestProps) => { + const { text, onDelete } = props; + + return ( +
+

{text}

+ +
+ ); +}; diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx index f3a6d78d..b24da98b 100644 --- a/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx +++ b/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx @@ -1,16 +1,23 @@ +"use client"; + +import clsx from "clsx"; import React from "react"; interface ButtonProps { text: string; + className?: string; onClick: () => void; } export const ButtonBase = (props: ButtonProps) => { - const { text, onClick } = props; + const { text, className, onClick } = props; return ( diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/Input.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/Input.tsx index 9e611f2b..dcd63bff 100644 --- a/Client/reasn-client/packages/ui/src/components/shared/form/Input.tsx +++ b/Client/reasn-client/packages/ui/src/components/shared/form/Input.tsx @@ -1,3 +1,5 @@ +"use client"; + import clsx from "clsx"; import React, { useState } from "react"; diff --git a/Client/reasn-client/packages/ui/src/components/shared/index.tsx b/Client/reasn-client/packages/ui/src/components/shared/index.tsx index 91d5fa00..8ccb7bc1 100644 --- a/Client/reasn-client/packages/ui/src/components/shared/index.tsx +++ b/Client/reasn-client/packages/ui/src/components/shared/index.tsx @@ -1,3 +1,4 @@ export { Card, CardVariant } from "./Card"; export { Navbar } from "./Navbar"; export { Footer } from "./Footer"; +export { Interest } from "./Interest"; diff --git a/Client/reasn-client/packages/ui/src/components/web/index.tsx b/Client/reasn-client/packages/ui/src/components/web/index.tsx index 4d44a237..7474135d 100644 --- a/Client/reasn-client/packages/ui/src/components/web/index.tsx +++ b/Client/reasn-client/packages/ui/src/components/web/index.tsx @@ -1,3 +1,4 @@ export { HeroSection } from "./main/HeroSection"; -export { QuickFilters } from "./main/QuickFilters"; +export { QuickFilters, QuickFilterButton } from "./main/QuickFilters"; export { CTASection } from "./main/CTASection"; +export { SharedUserPage } from "./user/SharedUserPage"; diff --git a/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx b/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx index e45dca67..69024f10 100644 --- a/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx +++ b/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx @@ -4,7 +4,7 @@ import { Card, CardVariant } from "@reasn/ui/src/components/shared"; import { ButtonBase } from "@reasn/ui/src/components/shared/form"; interface QuickFiltersButtonProps { - title: string; + text: string; selected?: boolean; onClick: () => void; } @@ -16,37 +16,37 @@ export const QuickFilters = () => {
setSelectedFilter("Today")} selected={selectedFilter === "Today"} /> setSelectedFilter("Tommorow")} selected={selectedFilter === "Tommorow"} /> setSelectedFilter("In Progress")} selected={selectedFilter === "In Progress"} /> setSelectedFilter("This Week")} selected={selectedFilter === "This Week"} /> setSelectedFilter("Wro")} selected={selectedFilter === "Wro"} /> setSelectedFilter("Krk")} selected={selectedFilter === "Krk"} /> setSelectedFilter("Remote")} selected={selectedFilter === "Remote"} /> @@ -77,7 +77,7 @@ export const QuickFilters = () => { }; export const QuickFilterButton = (props: QuickFiltersButtonProps) => { - const { title, onClick, selected } = props; + const { text, onClick, selected } = props; return (
); diff --git a/Client/reasn-client/packages/ui/src/components/web/user/SharedUserPage.tsx b/Client/reasn-client/packages/ui/src/components/web/user/SharedUserPage.tsx new file mode 100644 index 00000000..6b159f76 --- /dev/null +++ b/Client/reasn-client/packages/ui/src/components/web/user/SharedUserPage.tsx @@ -0,0 +1,122 @@ +"use client"; + +import React, { useState } from "react"; +import { ButtonBase } from "../../shared/form"; +import { Card, CardVariant, Interest } from "../../shared"; +import { QuickFilterButton } from "../main/QuickFilters"; + +interface SharedUserPageProps { + username: string; +} + +export const SharedUserPage = (props: SharedUserPageProps) => { + const { username } = props; + const isMePage = username === "memememe"; + + return ( +
+
+
+ avatar +
+
+
+ {isMePage ? ( +

+ Imię Nazwisko{" "} + ({username}) +

+ ) : ( +

{username}

+ )} +

Wrocław, Polska

+
+ {isMePage && ( + {}} + className="ml-auto" + /> + )} +
+ {isMePage ? : } +
+ ); +}; + +const MeUserContent = () => { + const [selectedFilter, setSelectedFilter] = useState("Wszystkie"); + return ( + <> +
+

Trwające wydarzenia:

+
+ + +
+
+
+

Nadchodzące wydarzenia:

+
+ setSelectedFilter("Wszystkie")} + selected={selectedFilter === "Wszystkie"} + /> + setSelectedFilter("Biorę udział")} + selected={selectedFilter === "Biorę udział"} + /> + setSelectedFilter("Polubione")} + selected={selectedFilter === "Polubione"} + /> +
+
+ + +
+
+
+

Twoje zainteresowania:

+
+ {}} /> + {}} /> + {}} /> + {}} className="ml-auto w-16" /> +
+
+ + ); +}; + +const UserContent = () => { + return ( + <> +
+

+ Obecne wydarzenia tego użytkownika: +

+
+ + +
+
+
+

+ Polubione wydarzenia tego użytkownika: +

+
+ + +
+
+ + ); +};