-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
94f3dcf
commit 518a183
Showing
26 changed files
with
504 additions
and
35 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 |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| NEXT_PUBLIC_BACKEND_URL= | ||
| NEXT_PUBLIC_BACKEND_HOSTNAME | ||
| NEXT_PUBLIC_GOOGLE_CLIENT_ID= |
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 |
|---|---|---|
| @@ -1,6 +1,9 @@ | ||
| /** @type {import('next').NextConfig} */ | ||
| const nextConfig = { | ||
| reactStrictMode: true, | ||
| } | ||
| images: { | ||
| domains: [process.env.NEXT_PUBLIC_BACKEND_HOSTNAME], | ||
| }, | ||
| }; | ||
|
|
||
| module.exports = nextConfig | ||
| module.exports = nextConfig; |
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
File renamed without changes.
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
101 changes: 101 additions & 0 deletions
101
src/components/announcements/preview-annoucement/AnnouncementPreviewIndex.tsx
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,101 @@ | ||
| import { NextSeo } from "next-seo"; | ||
| import { useRouter } from "next/router"; | ||
| import React, { useEffect, useState } from "react"; | ||
| import { ROUTES } from "../../../constants/routes"; | ||
| import AnnouncementService from "../../../services/annoucement.service"; | ||
| import { Announcement } from "../../../typings/announcement"; | ||
| import Loading from "../../shared/Loading"; | ||
| import BriefInfo from "./BriefInfo"; | ||
| import ContactForm from "./ContactForm"; | ||
| import Description from "./Description"; | ||
| import Gallery from "./Gallery"; | ||
| import PosterInfo from "./PosterInfo"; | ||
| import PriceInfo from "./PriceInfo"; | ||
|
|
||
| const announcementService = AnnouncementService.getInstance(); | ||
|
|
||
| const AnnouncementPreviewIndex: React.FC = () => { | ||
| const router = useRouter(); | ||
|
|
||
| const [annoucement, setAnnouncement] = | ||
| useState<Announcement.Announcement | null>(null); | ||
| const [loading, setLoading] = useState(true); | ||
|
|
||
| const getAnnouncement = async (id: number) => { | ||
| setLoading(true); | ||
| try { | ||
| const response = await announcementService.getAnnouncementById(id); | ||
| setAnnouncement(response.data); | ||
| } catch (e) { | ||
| await router.push(ROUTES.ERROR.path); | ||
| } finally { | ||
| setLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (router.query.id) { | ||
| if (typeof router.query.id === "string") { | ||
| getAnnouncement(parseInt(router.query.id)); | ||
| } else { | ||
| router.push(ROUTES.ERROR.path); | ||
| } | ||
| } | ||
| }, [router]); | ||
|
|
||
| return ( | ||
| <> | ||
| <NextSeo title={annoucement?.titre || ""} /> | ||
| {loading || !annoucement ? ( | ||
| <div className="flex h-96 items-center justify-center"> | ||
| <Loading /> | ||
| </div> | ||
| ) : ( | ||
| <div className="flex justify-center"> | ||
| <div className="container py-10 px-4"> | ||
| <div> | ||
| <h1 className="relative z-10 font-serif text-3xl font-semibold text-gray-900"> | ||
| {annoucement.titre} | ||
| </h1> | ||
| <div className="mt-10 grid grid-cols-1 gap-4 lg:grid-cols-6"> | ||
| <div className="lg:col-span-4"> | ||
| <div className="flex w-full flex-col rounded-sm bg-white shadow"> | ||
| <Gallery photos={annoucement.photos} /> | ||
| <hr /> | ||
| <div className="flex w-full justify-center px-4 py-6"> | ||
| <div className="flex w-full max-w-screen-sm flex-col gap-y-6"> | ||
| <BriefInfo | ||
| category={annoucement.categorie} | ||
| surface={annoucement.surface} | ||
| wilaya={annoucement.localisation.wilaya} | ||
| commun={annoucement.localisation.commune} | ||
| adress={annoucement.adresse} | ||
| /> | ||
| <PriceInfo price={annoucement.prix} /> | ||
| <Description text={annoucement.description || ""} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="lg:col-span-2"> | ||
| <div className="w-full gap-y-4 rounded-sm bg-blue-light shadow lg:col-span-2"> | ||
| <ContactForm /> | ||
| <hr /> | ||
| <PosterInfo | ||
| email={annoucement.auteur.email} | ||
| firstName={annoucement.auteur.nom} | ||
| lastName={annoucement.auteur.prenom} | ||
| phone={annoucement.auteur.tel} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default AnnouncementPreviewIndex; |
47 changes: 47 additions & 0 deletions
47
src/components/announcements/preview-annoucement/BriefInfo.tsx
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,47 @@ | ||
| import React from "react"; | ||
| import { ICONS } from "../../../constants/icons"; | ||
| import { Announcement } from "../../../typings/announcement"; | ||
|
|
||
| type Props = { | ||
| category: Announcement.Category; | ||
| surface?: number; | ||
| wilaya: string; | ||
| commun: string; | ||
| adress: string; | ||
| }; | ||
|
|
||
| const BriefInfo: React.FC<Props> = ({ | ||
| category, | ||
| surface, | ||
| wilaya, | ||
| commun, | ||
| adress, | ||
| }) => { | ||
| return ( | ||
| <div className="flex flex-col gap-y-6"> | ||
| <div className="flex flex-wrap items-center justify-center gap-x-16 gap-y-4 text-gray-800"> | ||
| <div className="flex items-center gap-4"> | ||
| <ICONS.Category className="text-2xl text-blue-primary" /> | ||
| <p className="font-serif font-bold">{category}</p> | ||
| </div> | ||
| <div className="flex items-center gap-4"> | ||
| <ICONS.Surface className="text-2xl text-blue-primary" /> | ||
| <p className="font-serif font-bold">{surface + " m²" || "Inconné"}</p> | ||
| </div> | ||
| <div className="flex items-center gap-4"> | ||
| <ICONS.Map className="text-2xl text-blue-primary" /> | ||
| <p className="font-serif font-bold"> | ||
| {commun}, {wilaya} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <p className="font-serif"> | ||
| <span className="text-lg font-bold">Adresse:</span> {adress} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default BriefInfo; |
38 changes: 38 additions & 0 deletions
38
src/components/announcements/preview-annoucement/ContactForm.tsx
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,38 @@ | ||
| import { useState } from "react"; | ||
|
|
||
| const ContactForm = () => { | ||
| const [message, setMessage] = useState<string>(""); | ||
|
|
||
| const sendMessage = async () => {}; | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-y-4 p-4"> | ||
| <p className="relative w-fit font-serif text-lg font-bold after:absolute after:bottom-0 after:left-0 after:h-1 after:w-full after:origin-left after:skew-y-[0.5deg] after:bg-blue-primary after:transition after:duration-300 hover:after:scale-x-100"> | ||
| Contactez nous | ||
| </p> | ||
| <div className="flex flex-col gap-y-2"> | ||
| <label className="text-sm font-medium text-gray-800" htmlFor="message"> | ||
| Message | ||
| </label> | ||
| <textarea | ||
| rows={5} | ||
| name="message" | ||
| id="message" | ||
| className="w-full rounded-sm border p-4 text-sm text-gray-900 shadow-sm outline-none" | ||
| placeholder="message" | ||
| /> | ||
| <p className="text-xs"> | ||
| Vos informations seront transmises au propriétaire de l'annonce. | ||
| </p> | ||
| <button | ||
| onClick={sendMessage} | ||
| className="rounded-sm bg-blue-primary px-4 py-2 text-sm text-white transition duration-200 hover:bg-blue-hover" | ||
| > | ||
| Envoyer | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ContactForm; |
24 changes: 24 additions & 0 deletions
24
src/components/announcements/preview-annoucement/Description.tsx
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,24 @@ | ||
| import React from "react"; | ||
|
|
||
| type Props = { | ||
| text: string; | ||
| }; | ||
|
|
||
| const Description: React.FC<Props> = ({ text }) => { | ||
| return ( | ||
| <div> | ||
| <h1 className="font-serif text-lg font-bold text-gray-900"> | ||
| Description: | ||
| </h1> | ||
| <div className="prose prose-sm prose-a:text-blue-primary"> | ||
| <div | ||
| dangerouslySetInnerHTML={{ | ||
| __html: text, | ||
| }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Description; |
Oops, something went wrong.