-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5 from ElfenB/add-offer-overview
Add chats list component
- Loading branch information
Showing
10 changed files
with
222 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| .eslintrc* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { useAuth0 } from "@auth0/auth0-react"; | ||
| import { IonAvatar, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from "@ionic/react"; | ||
| import { useMemo } from "react"; | ||
| import type { Offer } from "./OfferCard.types"; | ||
|
|
||
| interface Props { | ||
| offer: Offer; | ||
| } | ||
|
|
||
| export function OfferCard({ offer }: Props) { | ||
| const { user } = useAuth0(); | ||
|
|
||
| const { description, id: offerId, image, offerType, title } = offer; | ||
|
|
||
| const shortenedDescription = useMemo(() => { | ||
| if (!description) { | ||
| return ""; | ||
| } | ||
|
|
||
| return description.length > 100 ? `${description.slice(0, 100)}...` : description; | ||
| }, [description]); | ||
|
|
||
| return ( | ||
| <IonCard routerDirection="forward" routerLink={`/offer/${offerId}`}> | ||
| {image && <img alt={title} src={image} style={{ height: "120px", objectFit: "cover", width: "100%" }} />} | ||
|
|
||
| <IonCardHeader> | ||
| <IonCardTitle>{title}</IonCardTitle> | ||
| <IonCardSubtitle>{offerType}</IonCardSubtitle> | ||
|
|
||
| {user && ( | ||
| <IonAvatar style={{ position: "absolute", right: "1rem", top: "1rem" }}> | ||
| <img alt={user.name} src={user.picture} /> | ||
| </IonAvatar> | ||
| )} | ||
| </IonCardHeader> | ||
|
|
||
| {shortenedDescription.length > 0 && <IonCardContent>{shortenedDescription}</IonCardContent>} | ||
| </IonCard> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| export interface Offer { | ||
| description?: string; | ||
| id: string; | ||
| image?: string; | ||
| offerType: "offer" | "request"; | ||
| title: string; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| /* eslint-disable sonarjs/no-duplicate-string */ | ||
|
|
||
| import type { Offer } from "./OfferCard.types"; | ||
|
|
||
| export const offerListMockData: Offer[] = [ | ||
| { | ||
| description: "Professional house cleaning services tailored to your needs. We'll leave your home spotless and fresh.", | ||
| id: "1", | ||
| image: "https://via.placeholder.com/300", | ||
| offerType: "offer", | ||
| 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", | ||
| }, | ||
| { | ||
| 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", | ||
| offerType: "offer", | ||
| 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", | ||
| offerType: "request", | ||
| 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", | ||
| }, | ||
| { | ||
| 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", | ||
| offerType: "request", | ||
| 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", | ||
| offerType: "offer", | ||
| 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", | ||
| offerType: "request", | ||
| 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", | ||
| }, | ||
| { | ||
| 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", | ||
| offerType: "request", | ||
| title: "Tutoring Assistance", | ||
| } | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { OfferCard } from "./OfferCard"; | ||
| import { offerListMockData } from "./OfferList.mockData"; | ||
|
|
||
| export function OfferList() { | ||
| return offerListMockData.map((offer) => <OfferCard offer={offer} />); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/react"; | ||
| import { useParams } from "react-router-dom"; | ||
| import { offerListMockData } from "../components/OfferList.mockData"; | ||
| import { useCallback, useState } from "react"; | ||
|
|
||
| export function OfferDetails() { | ||
| const { id } = useParams<{ id: string }>(); | ||
|
|
||
| const [imageHeight, setImageHeight] = useState<"25vh" | undefined>("25vh"); | ||
|
|
||
| const toggleImageHeight = useCallback( | ||
| () => setImageHeight(imageHeight === "25vh" ? undefined : "25vh"), | ||
| [imageHeight, setImageHeight], | ||
| ); | ||
|
|
||
| const offer = offerListMockData.find((offer) => offer.id === id); | ||
|
|
||
| const { title, image, description, offerType } = offer ?? { title: "Offer not found" }; | ||
|
|
||
| return ( | ||
| <IonPage> | ||
| <IonHeader> | ||
| <IonToolbar> | ||
| <IonButtons slot="start"> | ||
| <IonBackButton /> | ||
| </IonButtons> | ||
|
|
||
| <IonTitle>{title}</IonTitle> | ||
| </IonToolbar> | ||
| </IonHeader> | ||
|
|
||
| <IonContent fullscreen> | ||
| {image && ( | ||
| <img | ||
| onClick={toggleImageHeight} | ||
| src={image} | ||
| alt={title} | ||
| style={{ width: "100%", objectFit: "cover", height: imageHeight }} | ||
| /> | ||
| )} | ||
|
|
||
| {/* TODO: Make beautiful, look on Kleinanzeigen for reference */} | ||
| <div style={{ padding: "1rem" }}> | ||
| <h2> | ||
| {title} ({offerType}) | ||
| </h2> | ||
| <h3>Offer details</h3> | ||
| <p>{description}</p> | ||
| </div> | ||
|
|
||
| {/* <pre>{JSON.stringify(offer, null, 2)}</pre> */} | ||
| </IonContent> | ||
| </IonPage> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters