Add on site info on home page

This commit is contained in:
pikiou
2023-06-09 11:38:07 +02:00
parent 42f3e86381
commit 4c704e87d4
10 changed files with 322 additions and 25 deletions

View File

@@ -0,0 +1,98 @@
import { get, first, tail } from "lodash"
import { useSelector } from "react-redux"
import styles from "./styles.module.scss"
import {
fetchVolunteerOnSiteInfoIfNeed,
selectVolunteerOnSiteInfo,
} from "../../store/volunteerOnSiteInfo"
import { Contact, VolunteerOnSiteInfo } from "../../services/volunteers"
export function OnSiteInfo(): JSX.Element {
const userOnSiteInfo: VolunteerOnSiteInfo | undefined = useSelector(selectVolunteerOnSiteInfo)
const referents = get(userOnSiteInfo, "referents", [])
const members = get(userOnSiteInfo, "members", [])
// const isReferent = get(userOnSiteInfo, "isReferent", false)
const CAPilots = get(userOnSiteInfo, "CAPilots", [])
const pincipalReferent = first(referents)
const secondaryReferents = tail(referents)
return (
<div key="contacts">
<div className={styles.notificationsPage}>
<div className={styles.notificationsContent}>
<div className={styles.formLine}>
<div className={styles.title}>Contacts sur la pelouse</div>
<label>
{pincipalReferent && (
<div>
Référent.e{secondaryReferents.length > 0 && <> principal.e</>} :{" "}
{contactElement(pincipalReferent)}
<br />
<br />
</div>
)}
{secondaryReferents.length > 0 && (
<div>
Référent.e.s secondaire.s :{" "}
<div className={styles.contactList}>
{secondaryReferents.map((contact) => (
<div key={contact.firstname}>
{contactElement(contact)}
</div>
))}
<br />
</div>
</div>
)}
<div>Ton contact à la Paillante : à définir...</div>
<br />
<div>Si un exposant à une question : à définir...</div>
<br />
{CAPilots.length > 0 && (
<div>
Membre du CA si besoin :{" "}
<div className={styles.contactList}>
{CAPilots.map((contact) => (
<div key={contact.firstname}>
{contactElement(contact)}
</div>
))}
</div>
<br />
<br />
</div>
)}
Croix rouge présente sur le festival : tel prochainement
<br />
{members.length > 0 && (
<div>
Autre membres de l'équipe :{" "}
<div className={styles.contactList}>
{members.map((contact) => (
<div key={contact.firstname}>
{contactElement(contact)}
</div>
))}
<br />
</div>
</div>
)}
</label>
</div>
</div>
</div>
</div>
)
}
function contactElement(contact: Contact): JSX.Element {
return (
<div className={styles.contactList}>
{contact.firstname} <a href={`tel: ${contact.mobile}`}>{contact.mobile}</a>
</div>
)
}
// Fetch server-side data here
export const fetchFor = [fetchVolunteerOnSiteInfoIfNeed]

View File

@@ -15,6 +15,8 @@ import {
AskParticipationDetails,
fetchFor as fetchForParticipationDetails,
} from "./AskParticipationDetails"
import { OnSiteInfo, fetchFor as fetchForOnSiteInfo } from "./OnSiteInfo"
// import { AskPushNotif } from "./AskPushNotif"
const Asks = (): JSX.Element | null => {
@@ -35,27 +37,10 @@ const Asks = (): JSX.Element | null => {
// AskPushNotif(asks, 99)
const onSiteInfoElement = OnSiteInfo()
if (_.isEmpty(asks)) {
asks.push(
<div key="pushNotifs">
<div className={styles.notificationsPage}>
<div className={styles.notificationsContent}>
<div className={styles.formLine}>
<label>
Si tu veux changer la réponse à l'une des questions posées ici, va
dans <a href="/profil">Mon profil</a> :)
<br />
Tu as fait le tour des dernières infos ou questions importantes,
merci !
<br />
Nous te préviendrons quand il y en aura de nouvelles.
<br />
</label>
</div>
</div>
</div>
</div>
)
asks.push(onSiteInfoElement)
asks.push(asksEnd())
}
if (volunteerAsks === undefined) {
@@ -65,10 +50,33 @@ const Asks = (): JSX.Element | null => {
return <div>{asks.map<React.ReactNode>((t) => t).reduce((prev, curr) => [prev, curr])}</div>
}
function asksEnd(): JSX.Element {
return (
<div key="pushNotifs">
<div className={styles.notificationsPage}>
<div className={styles.notificationsContent}>
<div className={styles.formLine}>
<label>
Si tu veux changer la réponse à l'une des questions posées ici, va dans{" "}
<a href="/profil">Mon profil</a> :)
<br />
Tu as fait le tour des dernières infos ou questions importantes, merci !
<br />
Nous te préviendrons quand il y en aura de nouvelles.
<br />
</label>
</div>
</div>
</div>
</div>
)
}
export default memo(Asks)
// Fetch server-side data here
export const fetchFor = [
...fetchForOnSiteInfo,
// ...fetchForBrunch,
// ...fetchForRetex,
...fetchForDiscord,

View File

@@ -21,6 +21,11 @@
@include page-content-wrapper;
}
.title {
padding-bottom: 10px;
font-weight: bold;
}
.notifIntro {
margin-bottom: 10px;
}
@@ -28,6 +33,15 @@
text-align: center;
}
.contactList {
display: inline-block;
vertical-align: top;
}
.contactItem {
display: inline-block;
white-space: nowrap;
}
.formLine {
padding: 5px 0;