Merge pull request #26 from cesko-digital/users-page

Users page

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: [

src/app/api/member/member.ts

@@ -23,10 +23,10 @@ import {
 // TODO: Invalidate cache after PUT requests
 
 export const getMembers = async (options: Record<string, unknown>, _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<IMemberResponse[]>(`${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 (

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

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;
 };
 

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) => {
             <span>{e.field.placeholder}</span>
           </div>
         ))}
-      <div className="flex gap-5 mt-8">
-        {currentStep > 1 ? (
-          <Button
-            className="w-1/2"
-            color="secondary"
-            buttonText="Zpět"
-            onClick={() => {
-              if (validateStep(form, currentStep - 1, currentStep)) {
-                setStep(currentStep - 1);
-                saveToSession(form.getValues());
-              }
-            }}
-          />
-        ) : (
-          <Button
-            className="w-1/2"
-            color="secondary"
-            buttonText="Zrušit"
-            //TODO: Doplnit funkcionalitu pro odchod z formuláře
-            /*  onClick={() => {
-              if (validateStep(form, currentStep - 1, currentStep)) {
-                setStep(currentStep - 1);
-                saveToSession(form.getValues());
-              }
-            }} */
-          />
-        )}
-        {currentStep + 1 <= maxStep ? (
-          <Button
-            className="w-1/2"
-            color="primary"
-            buttonText="Pokračovat"
-            onClick={() => {
-              if (validateStep(form, currentStep + 1, currentStep)) {
-                setStep(currentStep + 1);
-                saveToSession(form.getValues());
-              }
-            }}
-          />
-        ) : (
-          currentStep === maxStep && (
-            <Button
-              className="w-1/2"
-              color="primary"
-              buttonText="Pokračovat"
-              onClick={() => {
-                saveToSession(form.getValues());
-                router.push("/lovereport/shrnuti");
-              }}
-            />
-          )
-        )}
-      </div>
+      {currentStep > 1 && (
+        <Button
+          color={"secondary"}
+          buttonText="Zpět"
+          onClick={() => {
+            if (validateStep(form, currentStep - 1, currentStep)) {
+              setStep(currentStep - 1);
+              saveToSession(form.getValues());
+            }
+          }}
+        ></Button>
+      )}
+      {currentStep + 1 <= maxStep && (
+        <Button
+          color={"primary"}
+          buttonText="Pokračovat"
+          onClick={() => {
+            if (validateStep(form, currentStep + 1, currentStep)) {
+              setStep(currentStep + 1);
+              saveToSession(form.getValues());
+            }
+          }}
+        ></Button>
+      )}
+
+      {currentStep === maxStep ? (
+        <Button
+          color="primary"
+          buttonText="Pokračovat"
+          onClick={() => {
+            saveToSession(form.getValues());
+            router.push("/lovereport/shrnuti");
+          }}
+        ></Button>
+      ) : (
+        <></>
+      )}
     </div>
   );
 };

src/app/lovereport/create/page.tsx

@@ -9,7 +9,6 @@ export const metadata: Metadata = {
 
 const CreateLoveReport = async () => {
   const result = await getLoveReportFields();
-
   return (
     <>
       <CreateLoveReportWizard fields={getFieldsWithGroups(result)}></CreateLoveReportWizard>

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 <div>Nebylo možné načíst data</div>;
 

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 <div>Nebylo možné načíst data</div>;
+
+  return (
+    <main className="w-full p-5">
+      <UserProfile memberData={memberData} />
+    </main>
+  );
+}

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 (
+    // <main className="w-full pt-2">
+    <CardContainer variant="default" className="flex flex-col items-start gap-4">
+      <div>{groupName}</div>
+      <br></br>
+      {fields.map(field => {
+        return (
+          <ul key={field.fieldName}>
+            <li>{field.value}</li>
+          </ul>
+        );
+      })}
+    </CardContainer>
+    // </main>
+  );
+};
+
+export default ContentBox;

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 (
+    <main className="w-full pt-2">
+      <div className="flex flex-col space-y-5">
+        <div className="justify-center items-center relative">
+          <Image src={profilePhotoUrl} alt="User photo" width={358} height={280} className={"rounded-3xl"} />
+          <div className="absolute bottom-4 right-8 text-white px-3 p-1 rounded-lg bg-primary">
+            <p>{familyState || "Neznámý stav"}</p>
+          </div>
+        </div>
+        <div>
+          <div className="text-[24px]">@{memberData.user_login || "No name"}</div>
+          <div className="text-[18px]">{`${gender || "No gender"}, ${age || "No age"} let`}</div>
+          <div className="text-[18px]">{location || "No location"}</div>
+        </div>
+        <div className="text-[18px]">
+          <p className={`${showMore ? "max-h-full" : "line-clamp-2"}`}>{description || "No description"}</p>
+          <div className="flex justify-end p-2">
+            <button onClick={() => setShowMore(!showMore)}>{showMore ? "Skrýt" : "Zobrazit více"}</button>
+          </div>
+        </div>
+        <button>Poslat zpravu</button>
+        <button>Pridat do pratel</button>
+        <button>Oznacit jako oblibeny</button>
+        <div>Fotky...</div>
+        <div>
+          <ContentBox fields={hobbies.fields} groupName={"Moje záliby"} />
+          <ContentBox fields={sports.fields} groupName={"Sporty"} />
+          <ContentBox fields={appearence.fields} groupName={appearence.groupName} />
+          <ContentBox fields={relationship.fields} groupName={relationship.groupName} />
+          <ContentBox fields={education.fields} groupName={education.groupName} />
+          <ContentBox fields={invalidity.fields} groupName={invalidity.groupName} />
+          <ContentBox fields={lifestyle.fields} groupName={lifestyle.groupName} />
+          <ContentBox fields={preferences.fields} groupName={preferences.groupName} />
+        </div>
+        <div className="flex flex-col">
+          <button onClick={() => setShowAlert(!showAlert)}> Falesny nebo obtezujici ucet ?</button>
+          {showAlert && (
+            <div className="flex flex-col">
+              <p>
+                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?
+              </p>
+              <button> Nahlásit profil </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}