Merge pull request #19 from ElfenB:more-realistic-mockup

More-realistic-mockup

ios/App/Podfile.lock

@@ -1,11 +1,11 @@
 PODS:
-  - Capacitor (5.7.0):
+  - Capacitor (5.7.2):
     - CapacitorCordova
   - CapacitorApp (5.0.7):
     - Capacitor
   - CapacitorBrowser (5.2.0):
     - Capacitor
-  - CapacitorCordova (5.7.0)
+  - CapacitorCordova (5.7.2)
   - CapacitorHaptics (5.0.7):
     - Capacitor
   - CapacitorKeyboard (5.0.8):
@@ -39,10 +39,10 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/@capacitor/status-bar"
 
 SPEC CHECKSUMS:
-  Capacitor: fc155ee2ee45a2093d716f13cf5aa5a865e2d85a
+  Capacitor: fc7ef6d935eafb0df9eaaf109ca69be16c51a2d2
   CapacitorApp: 17fecd0e6cb23feafac7eb0939417389038b0979
   CapacitorBrowser: a6deae9e5bf87f62b62a753cff7992c5def9e771
-  CapacitorCordova: e825fce1a2e14e4b5730641c7e098dccf74397b7
+  CapacitorCordova: 70b13b8fddb6f35d8adcfe06cb5045c07f35f6de
   CapacitorHaptics: 7c7c206f0c96a628fed073830c96d28c4b2e772e
   CapacitorKeyboard: aec619a578235c6ce279075009a2689c2cf5c42c
   CapacitorStatusBar: f390fbb49b82ffb754ea4b3cf71dc8b048baf3e7

src/components/OfferCard.tsx

@@ -1,4 +1,3 @@
-import { useAuth0 } from "@auth0/auth0-react";
 import {
   IonAvatar,
   IonCard,
@@ -10,6 +9,7 @@ import {
 } from "@ionic/react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { fallbackUserImage } from "./ChatList.consts";
 import type { Offer } from "./OfferCard.types";
 
 type Props = {
@@ -18,11 +18,10 @@ type Props = {
 
 export function OfferCard({ offer }: Props) {
   const { t } = useTranslation();
-  const { user } = useAuth0();
 
   const currentTab = useIonRouter().routeInfo.tab;
 
-  const { description, id: offerId, image, offerType, title } = offer;
+  const { description, id: offerId, image, offerType, person, title } = offer;
 
   const shortenedDescription = useMemo(() => {
     if (!description) {
@@ -40,11 +39,9 @@ export function OfferCard({ offer }: Props) {
         <IonCardTitle>{title}</IonCardTitle>
         <IonCardSubtitle>{t(offerType)}</IonCardSubtitle>
 
-        {user && (
-          <IonAvatar style={{ position: "absolute", right: "1rem", top: "1rem" }}>
-            <img alt={user.name} src={user.picture} />
-          </IonAvatar>
-        )}
+        <IonAvatar style={{ position: "absolute", right: "1rem", top: "1rem" }}>
+          <img alt={person.name} src={person.picture ?? fallbackUserImage} />
+        </IonAvatar>
       </IonCardHeader>
 
       {shortenedDescription.length > 0 && <IonCardContent>{shortenedDescription}</IonCardContent>}

src/components/OfferCard.types.ts

@@ -1,7 +1,10 @@
+import type { User } from "@auth0/auth0-react";
+
 export type Offer = {
   description?: string;
   id: string;
   image?: string;
   offerType: "offer" | "request";
+  person: User
   title: string;
 };

src/components/OfferList.mockData.ts

@@ -1,4 +1,4 @@
-/* eslint-disable sonarjs/no-duplicate-string */
+
 
 import type { Offer } from "./OfferCard.types";
 
@@ -9,75 +9,85 @@ export const offerListMockData: Offer[] = [
     id: "1",
     image: "https://via.placeholder.com/300",
     offerType: "offer",
-    title: "House Cleaning",
+    person: { name: "John Doe", picture: "https://i.pravatar.cc/300" },
+    title: "House Cleaning"
   },
   {
     description:
       "Need assistance with your garden? Our experienced team can help you with planting, pruning, and maintaining your outdoor space.",
     id: "2",
     offerType: "request",
-    title: "Gardening Help",
+    person: { name: "John Doe", picture: "https://i.pravatar.cc/400" },
+    title: "Gardening Help"
   },
   {
     description:
       "Transform your space with our top-notch painting services. From walls to ceilings, we'll give your home a fresh new look.",
     id: "3",
-    image: "https://via.placeholder.com/300",
+    image: "https://via.placeholder.com/400",
     offerType: "offer",
-    title: "Painting Services",
+    person: { name: "John Doe", picture: "https://i.pravatar.cc/200" },
+    title: "Painting Services"
   },
   {
     description:
       "Get reliable and efficient delivery assistance for all your packages and parcels. We'll ensure your items reach their destination safely.",
     id: "4",
-    image: "https://via.placeholder.com/300",
+    image: "https://via.placeholder.com/500",
     offerType: "request",
-    title: "Delivery Assistance",
+    person: { name: "John Doe", picture: "https://i.pravatar.cc/500" },
+    title: "Delivery Assistance"
   },
   {
     description:
       "Going away? Trust our experienced pet sitters to provide loving care for your furry friends while you're gone.",
     id: "5",
     offerType: "offer",
-    title: "Pet Sitting",
+    person: { name: "John Doe", picture: "https://i.pravatar.cc/800" },
+    title: "Pet Sitting"
   },
   {
     description:
       "Make your move stress-free with our professional moving help. We'll handle the heavy lifting and logistics, so you can focus on settling into your new home.",
     id: "6",
-    image: "https://via.placeholder.com/300",
+    image: "https://via.placeholder.com/600",
     offerType: "request",
-    title: "Moving Help",
+    person: { name: "John Doe", picture: "https://i.pravatar.cc/600" },
+    title: "Moving Help"
   },
   {
     description:
       "Planning an event? Let us take care of the setup. From decorations to seating arrangements, we'll create a memorable experience for your guests.",
     id: "7",
-    image: "https://via.placeholder.com/300",
+    image: "https://via.placeholder.com/700",
     offerType: "offer",
-    title: "Event Setup",
+    person: { name: "John Doe", picture: "https://i.pravatar.cc/700" },
+    title: "Event Setup"
   },
   {
     description:
       "Don't struggle with complicated instructions. Our skilled team will assemble your furniture quickly and correctly.",
     id: "8",
-    image: "https://via.placeholder.com/300",
+    image: "https://via.placeholder.com/800",
     offerType: "request",
-    title: "Furniture Assembly",
+    person: { name: "John Doe", picture: "https://i.pravatar.cc/900" },
+    title: "Furniture Assembly"
   },
   {
     description:
       "From minor repairs to home improvement projects, our handyman services are here to help. Trust us to tackle any task with precision and expertise.",
     id: "9",
     offerType: "offer",
-    title: "Handyman Services",
+    person: { name: "John Doe", picture: "https://i.pravatar.cc/800" },
+    title: "Handyman Services"
   },
   {
     description:
       "Need academic support? Our qualified tutors provide personalized assistance to help you excel in your studies.",
     id: "10",
-    image: "https://via.placeholder.com/300",
+    image: "https://via.placeholder.com/900",
     offerType: "request",
-    title: "Tutoring Assistance",
+    person: { name: "John Doe", picture: "https://i.pravatar.cc/700" },
+    title: "Tutoring Assistance"
   },
 ];

src/pages/Personal.tsx

@@ -1,12 +1,16 @@
+import { useAuth0 } from "@auth0/auth0-react";
 import { IonButton, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from "@ionic/react";
 import { cog } from "ionicons/icons";
 import { useTranslation } from "react-i18next";
+import { fallbackUserImage } from "../components/ChatList.consts";
 import { OfferList } from "../components/OfferList";
 import { offerListMockData } from "../components/OfferList.mockData";
 
 export function Personal() {
   const { t } = useTranslation();
 
+  const { user } = useAuth0();
+
   return (
     <IonPage>
       <IonHeader>
@@ -26,7 +30,12 @@ export function Personal() {
           </IonToolbar>
         </IonHeader>
 
-        <OfferList offerList={offerListMockData.sort((a, b) => a.id.localeCompare(b.id)).reverse()} />
+        <OfferList
+          offerList={offerListMockData
+            .sort((a, b) => a.id.localeCompare(b.id))
+            .reverse()
+            .map((o) => ({ ...o, person: { ...o.person, picture: user?.picture ?? fallbackUserImage } }))}
+        />
       </IonContent>
     </IonPage>
   );