diff --git a/next.config.js b/next.config.js index e34c6b5..2c05107 100644 --- a/next.config.js +++ b/next.config.js @@ -41,7 +41,15 @@ const nextConfig = { ]; }, images: { - domains: ["unsplash.com", "images.unsplash.com", "res.cloudinary.com"], + domains: [ + "unsplash.com", + "images.unsplash.com", + "res.cloudinary.com", + "mingly.cz", + "wikipedia.org", + "gravatar.com", + "www.gravatar.com", + ], }, images: { remotePatterns: [ diff --git a/src/app/api/member/member.ts b/src/app/api/member/member.ts index 3efd193..f41585f 100644 --- a/src/app/api/member/member.ts +++ b/src/app/api/member/member.ts @@ -23,10 +23,10 @@ import { // TODO: Invalidate cache after PUT requests export const getMembers = async (options: Record, _requestParams: IMembersRequestParams) => { - try { - const session = await getServerSession(authOptions); - if (!session) return; + const session = await getServerSession(authOptions); + if (!session) return; + try { const response = await http.get(`${process.env.WP_API_URL}/members`, { data: _requestParams, headers: { Authorization: session.wpJwtToken }, @@ -61,6 +61,7 @@ export const getMemberById = async ( } }; +export const getProfileDataById = async (id: number) => {}; // FIXME: The updateMember() does not seem to be working. Postman can change data, but this request not (but still the received status code is 200). // TODO: Is the updateMember() function needed? Fix or remove. export const updateMember = async ( diff --git a/src/app/api/member/member.type.ts b/src/app/api/member/member.type.ts index 0f57115..6990bde 100644 --- a/src/app/api/member/member.type.ts +++ b/src/app/api/member/member.type.ts @@ -27,23 +27,23 @@ export interface IMemberResponse { } export type Xprofile = { groups: { [key: string]: Group }; -} +}; export type Group = { - name: string; + name: string; fields: { [key: string]: Field }; -} +}; export type Field = { - name: string; + name: string; value: Value; -} +}; export type Value = { - raw: string; + raw: string; unserialized: string[]; - rendered: string; -} + rendered: string; +}; /** * GET /buddypress/v1/members * https://developer.buddypress.org/bp-rest-api/reference/members/#list-members diff --git a/src/app/api/profile-field/profileField.ts b/src/app/api/profile-field/profileField.ts index 55a9b7d..bf7e50f 100644 --- a/src/app/api/profile-field/profileField.ts +++ b/src/app/api/profile-field/profileField.ts @@ -61,7 +61,6 @@ export const getProfileField = async (args: { userId: number; fieldId: number }) }), headers: { Authorization: session.wpJwtToken }, }); - return response.data; }; diff --git a/src/app/lovereport/create/components/CreateLoveReportWizard.tsx b/src/app/lovereport/create/components/CreateLoveReportWizard.tsx index cfbe19f..54426c9 100644 --- a/src/app/lovereport/create/components/CreateLoveReportWizard.tsx +++ b/src/app/lovereport/create/components/CreateLoveReportWizard.tsx @@ -1,4 +1,5 @@ "use client"; +"use client"; import StepperMenu, { StepperStep } from "library/molecules/ProgressStepper"; import { useState } from "react"; import LoveReportFieldInput from "../../common/components/LoveReportFieldInput"; @@ -17,7 +18,6 @@ type Props = { const CreateLoveReportWizard = (props: Props) => { const router = useRouter(); const [currentStep, setStep] = useState(1); - const inputFields = props.fields.filter(e => isInput(e.type)); const maxStep = inputFields[inputFields.length - 1].group; @@ -111,59 +111,43 @@ const CreateLoveReportWizard = (props: Props) => { {e.field.placeholder} ))} -
- {currentStep > 1 ? ( -
+ {currentStep > 1 && ( + + )} + {currentStep + 1 <= maxStep && ( + + )} + + {currentStep === maxStep ? ( + + ) : ( + <> + )} ); }; diff --git a/src/app/lovereport/create/page.tsx b/src/app/lovereport/create/page.tsx index f2829b6..09acdf5 100644 --- a/src/app/lovereport/create/page.tsx +++ b/src/app/lovereport/create/page.tsx @@ -9,7 +9,6 @@ export const metadata: Metadata = { const CreateLoveReport = async () => { const result = await getLoveReportFields(); - return ( <> diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx index 404a9ba..a3fed8f 100644 --- a/src/app/profile/page.tsx +++ b/src/app/profile/page.tsx @@ -12,7 +12,6 @@ export const metadata: Metadata = { export default async function Profile() { const profile = await getCurrentMember(); - if (!profile) return
Nebylo možné načíst data
; diff --git a/src/app/user-profile/[id]/page.tsx b/src/app/user-profile/[id]/page.tsx new file mode 100644 index 0000000..66ca0b4 --- /dev/null +++ b/src/app/user-profile/[id]/page.tsx @@ -0,0 +1,16 @@ +import { getMemberById } from "app/api/member/member"; +import UserProfile from "app/user-profile/components/UserProfile"; + +export default async function Page({ params }: { params: { id: string } }) { + const id = Number(params?.id); + + const memberData = await getMemberById(id); + + if (!memberData) return
Nebylo možné načíst data
; + + return ( +
+ +
+ ); +} diff --git a/src/app/user-profile/components/ContentBox.tsx b/src/app/user-profile/components/ContentBox.tsx new file mode 100644 index 0000000..3265295 --- /dev/null +++ b/src/app/user-profile/components/ContentBox.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import CardContainer from "library/atoms/CardContainer"; + +type Props = { + fields: ArrayProps[]; + groupName: string; +}; + +type ArrayProps = { + fieldName: string; + value: any; +}; + +const ContentBox = ({ fields, groupName }: Props) => { + return ( + //
+ +
{groupName}
+

+ {fields.map(field => { + return ( +
    +
  • {field.value}
    • +
+ ); + })} + + //
+ ); +}; + +export default ContentBox; diff --git a/src/app/user-profile/components/UserProfile.tsx b/src/app/user-profile/components/UserProfile.tsx new file mode 100644 index 0000000..f568da2 --- /dev/null +++ b/src/app/user-profile/components/UserProfile.tsx @@ -0,0 +1,109 @@ +"use client"; + +import { useState } from "react"; +import Image from "next/image"; +import { getProfileFieldValue, getAllFieldsByGroupName, calculateAge } from "../utils"; +import ContentBox from "./ContentBox"; + +export type UserDetailsProps = { + memberData?: any; +}; + +const FIELD_NAMES = { + GENDER: "Pohlaví", + AGE: "Věk", + CITY: "Město", + REGION: "Kraj", + DESCRIPTION: "Medailonek", + FAMILY_STATE: "Status", + HOBBIES: "Moje záliby", + SPORTS: "Sporty", + APPEARENCE: "Jak vypadám", + RELATIONSHIP: "Vztah a rodina", + EDUCATION: "Vzdělání a práce", + INVALIDITY: "Hendikep", + LIFESTYLE: "Životní styl", + PREFERENCES: "Koho hledám", +}; + +export default function UserProfile({ memberData }: UserDetailsProps) { + const [showMore, setShowMore] = useState(false); + const [showAlert, setShowAlert] = useState(false); + console.log(memberData); + const profilePhotoUrl = + memberData.avatar_urls?.full.slice(0, 4) === "http" + ? memberData.avatar_urls?.full + : `https:${memberData.avatar_urls?.full}`; + + const mainInfo = getAllFieldsByGroupName("Základní", memberData.xprofile); + const gender = getProfileFieldValue(mainInfo.fields, FIELD_NAMES.GENDER); + const memberAge = getProfileFieldValue(mainInfo.fields, FIELD_NAMES.AGE); + const age = calculateAge(memberAge); + + const city = getProfileFieldValue(mainInfo.fields, FIELD_NAMES.CITY); + const region = getProfileFieldValue(mainInfo.fields, FIELD_NAMES.REGION); + const location = `${city}, ${region} kraj`; + const description = getProfileFieldValue(mainInfo.fields, FIELD_NAMES.DESCRIPTION); + + const hobbies = getAllFieldsByGroupName(FIELD_NAMES.HOBBIES, memberData.xprofile); + const sports = getAllFieldsByGroupName(FIELD_NAMES.SPORTS, memberData.xprofile); + const appearence = getAllFieldsByGroupName(FIELD_NAMES.APPEARENCE, memberData.xprofile); + const relationship = getAllFieldsByGroupName(FIELD_NAMES.RELATIONSHIP, memberData.xprofile); + + const familyState = getProfileFieldValue(relationship.fields, FIELD_NAMES.FAMILY_STATE); + + const education = getAllFieldsByGroupName(FIELD_NAMES.EDUCATION, memberData.xprofile); + const invalidity = getAllFieldsByGroupName(FIELD_NAMES.INVALIDITY, memberData.xprofile); + const lifestyle = getAllFieldsByGroupName(FIELD_NAMES.LIFESTYLE, memberData.xprofile); + const preferences = getAllFieldsByGroupName(FIELD_NAMES.PREFERENCES, memberData.xprofile); + + return ( +
+
+
+ User photo +
+

{familyState || "Neznámý stav"}

+
+
+
+
@{memberData.user_login || "No name"}
+
{`${gender || "No gender"}, ${age || "No age"} let`}
+
{location || "No location"}
+
+
+

{description || "No description"}

+
+ +
+
+ + + +
Fotky...
+
+ + + + + + + + +
+
+ + {showAlert && ( +
+

+ Jsi přesvědčený/á, že je tento profil falešný, nebo ses setkal/a s obtěžováním ze strany tohoto + uživatele? +

+ +
+ )} +
+
+
+ ); +} diff --git a/src/app/user-profile/utils/index.ts b/src/app/user-profile/utils/index.ts new file mode 100644 index 0000000..63e32c5 --- /dev/null +++ b/src/app/user-profile/utils/index.ts @@ -0,0 +1,38 @@ +export const getProfileFieldValue = (fieldsArray: any[], fieldName: string) => { + return fieldsArray.find(field => field.fieldName === fieldName)?.value; +}; + +export const getAllFieldsByGroupName = (groupName: string, xprofile: any) => { + let fields: Array<{ fieldName: string; value: any }> = []; + + Object.values(xprofile.groups).forEach((group: any) => { + if (group.name === groupName) { + Object.values(group.fields).forEach((field: any) => { + if (field && field.value) { + fields.push({ + fieldName: field.name, + value: field.value.unserialized, + }); + } + }); + } + }); + + return { + groupName: groupName, + fields: fields, + }; +}; + +export function calculateAge(birthDateString: string) { + const birthDate = new Date(birthDateString); + const today = new Date(); + let age = today.getFullYear() - birthDate.getFullYear(); + const monthDifference = today.getMonth() - birthDate.getMonth(); + + if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) { + age--; + } + + return age; +} diff --git a/src/library/molecules/cards/ProfileCard.tsx b/src/library/molecules/cards/ProfileCard.tsx index 0b58bdc..5efe161 100644 --- a/src/library/molecules/cards/ProfileCard.tsx +++ b/src/library/molecules/cards/ProfileCard.tsx @@ -16,7 +16,7 @@ type Props = { gender: string; age: number; location: string; - status: "seznamuji se"; + status: string; tags: string[]; className?: string; };