From f90973a404ff5b7d93062895286c1bce916846d8 Mon Sep 17 00:00:00 2001 From: Maciej Krawczyk <63869461+wzarek@users.noreply.github.com> Date: Sun, 23 Jun 2024 17:32:52 +0200 Subject: [PATCH] [RSN-83] - Implemented UI of user edit page (#74) * feat: implemented UI of user edit page * feat: changed middleware --- .../apps/web/app/me/edit/page.tsx | 8 + .../web/app/user/[username]/edit/page.tsx | 8 + Client/reasn-client/apps/web/middleware.ts | 7 +- .../src/components/shared/form/Dropdown.tsx | 3 + .../packages/ui/src/components/web/index.tsx | 1 + .../src/components/web/main/QuickFilters.tsx | 2 + .../web/user/SharedEditUserPage.tsx | 193 ++++++++++++++++++ .../components/web/user/SharedUserPage.tsx | 8 +- 8 files changed, 228 insertions(+), 2 deletions(-) create mode 100644 Client/reasn-client/apps/web/app/me/edit/page.tsx create mode 100644 Client/reasn-client/apps/web/app/user/[username]/edit/page.tsx create mode 100644 Client/reasn-client/packages/ui/src/components/web/user/SharedEditUserPage.tsx diff --git a/Client/reasn-client/apps/web/app/me/edit/page.tsx b/Client/reasn-client/apps/web/app/me/edit/page.tsx new file mode 100644 index 00000000..6b6057be --- /dev/null +++ b/Client/reasn-client/apps/web/app/me/edit/page.tsx @@ -0,0 +1,8 @@ +import { SharedEditUserPage } from "@reasn/ui/src/components/web"; +import React from "react"; + +const MeEditPage = () => { + return ; +}; + +export default MeEditPage; diff --git a/Client/reasn-client/apps/web/app/user/[username]/edit/page.tsx b/Client/reasn-client/apps/web/app/user/[username]/edit/page.tsx new file mode 100644 index 00000000..74a1246c --- /dev/null +++ b/Client/reasn-client/apps/web/app/user/[username]/edit/page.tsx @@ -0,0 +1,8 @@ +import { SharedEditUserPage } from "@reasn/ui/src/components/web"; +import React from "react"; + +const UserEditPage = () => { + return ; +}; + +export default UserEditPage; diff --git a/Client/reasn-client/apps/web/middleware.ts b/Client/reasn-client/apps/web/middleware.ts index 55effad4..1b59c67f 100644 --- a/Client/reasn-client/apps/web/middleware.ts +++ b/Client/reasn-client/apps/web/middleware.ts @@ -9,6 +9,10 @@ export const middleware = (req: NextRequest) => { const isAuthPath = path.startsWith("/login") || path.startsWith("/register"); + if (path.startsWith("/user") && session.user?.role !== UserRole.ADMIN) { + return NextResponse.redirect(new URL(path.replace("/edit", ""), req.url)); + } + if (!session.isAuthenticated()) { if (isAuthPath) return NextResponse.next(); return NextResponse.redirect(new URL("/login", req.url)); @@ -20,7 +24,7 @@ export const middleware = (req: NextRequest) => { if (path.startsWith("/events") && session.user?.role === UserRole.USER) { return NextResponse.redirect(new URL("/events", req.url)); - } + } }; export const config = { @@ -29,6 +33,7 @@ export const config = { "/events/(.*)/(.*)", "/me", "/me/(.*)", + "/user/(.*)/edit", "/login", "/register", "/register/(.*)", diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx index 6a2ddb7c..ba01bb03 100644 --- a/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx +++ b/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx @@ -8,6 +8,7 @@ import { CaretDown, CaretUp } from "../../../icons"; interface DropdownProps { label: string; options: string[]; + className?: string; } interface SingleDropdownProps extends DropdownProps { @@ -80,6 +81,7 @@ export const SingleDropdown = (props: SingleDropdownProps) => { options, selectedOption, selectedOptionClass, + className, setSelectedOption, } = props; @@ -115,6 +117,7 @@ export const SingleDropdown = (props: SingleDropdownProps) => { className={clsx( "relative flex w-full cursor-pointer flex-col gap-2 rounded-lg bg-[#232327]", { "rounded-b-none": isExpanded }, + className, )} onClick={toggleExpanded} ref={ref} 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 7474135d..f0ad05bf 100644 --- a/Client/reasn-client/packages/ui/src/components/web/index.tsx +++ b/Client/reasn-client/packages/ui/src/components/web/index.tsx @@ -2,3 +2,4 @@ export { HeroSection } from "./main/HeroSection"; export { QuickFilters, QuickFilterButton } from "./main/QuickFilters"; export { CTASection } from "./main/CTASection"; export { SharedUserPage } from "./user/SharedUserPage"; +export { SharedEditUserPage } from "./user/SharedEditUserPage"; 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 4a95ce2d..8acc21eb 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 @@ -1,3 +1,5 @@ +"use client"; + import clsx from "clsx"; import React, { useState } from "react"; import { Card, CardVariant } from "@reasn/ui/src/components/shared"; diff --git a/Client/reasn-client/packages/ui/src/components/web/user/SharedEditUserPage.tsx b/Client/reasn-client/packages/ui/src/components/web/user/SharedEditUserPage.tsx new file mode 100644 index 00000000..b21350c0 --- /dev/null +++ b/Client/reasn-client/packages/ui/src/components/web/user/SharedEditUserPage.tsx @@ -0,0 +1,193 @@ +"use client"; + +import React, { ChangeEvent, useRef, useState } from "react"; +import { + ButtonBase, + FloatingInput, + SearchMultiDropdown, + SingleDropdown, +} from "../../shared/form"; +import { UserRole } from "@reasn/common/src/enums/schemasEnums"; +import { Upload } from "../../../icons"; + +const MOCK_TAGS = [ + "abcd", + "efgh", + "ijkl", + "mnop", + "qrst", + "uvwx", + "yzab", + "cdef", + "ghij", + "dada", + "vvvv", + "bgbfgb", + "nfnfnf", + "mmjmjm", + ",lkyt", + "t554", + "fsdfs", + "hhhhh", + "fsf", + "u234ghhvwx", + "nh", + "sdfsf4", + "ses5", +]; + +interface SharedEditUserPageProps { + username: string; +} + +export const SharedEditUserPage = (props: SharedEditUserPageProps) => { + const { username } = props; + const [tags, setTags] = useState(MOCK_TAGS.slice(0, 5)); + const [selectedRole, setSelectedRole] = useState(UserRole.USER); + const imageInputRef = useRef(null); + const [img, setImg] = useState( + "https://avatars.githubusercontent.com/u/63869461?v=4", + ); + + const isAdmin = username === "memememe"; + + const handleImageUpload = (event: ChangeEvent) => { + const file = event?.target?.files?.[0]; + if (file) { + const fileURL = URL.createObjectURL(file); + setImg(fileURL); + } + }; + + return ( +
+
+
+ avatar +
+
{ + const element = imageInputRef.current; + if (element instanceof HTMLInputElement) { + element.click(); + } + }} + className="absolute left-0 top-0 z-20 flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-black opacity-0 duration-300 group-hover:opacity-50" + > + +
+ +
+ + {isAdmin && ( +
+ +
+ )} + +
+
+
+

Dane kontaktowe

+ + + + +
+ +
+

Dane adresowe

+ + + + + +
+
+

Zainteresowania

+ +
+
+
+ ); +}; 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 index 6b159f76..1cb8921e 100644 --- a/Client/reasn-client/packages/ui/src/components/web/user/SharedUserPage.tsx +++ b/Client/reasn-client/packages/ui/src/components/web/user/SharedUserPage.tsx @@ -4,6 +4,7 @@ import React, { useState } from "react"; import { ButtonBase } from "../../shared/form"; import { Card, CardVariant, Interest } from "../../shared"; import { QuickFilterButton } from "../main/QuickFilters"; +import { useRouter } from "next/navigation"; interface SharedUserPageProps { username: string; @@ -12,6 +13,11 @@ interface SharedUserPageProps { export const SharedUserPage = (props: SharedUserPageProps) => { const { username } = props; const isMePage = username === "memememe"; + const router = useRouter(); + + const handleEditButtonClick = () => { + router.push("/me/edit"); + }; return (
@@ -38,7 +44,7 @@ export const SharedUserPage = (props: SharedUserPageProps) => { {isMePage && ( {}} + onClick={handleEditButtonClick} className="ml-auto" /> )}