PeL/force-orange-2022
1
1
Fork 0
mirror of https://github.com/Paris-est-Ludique/intranet.git synced 2025-09-11 13:56:29 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add notifications to home page

Browse Source
This commit is contained in:
pikiou
2022-01-07 14:23:33 +01:00
parent adde4f366e
commit 5cbb5811ec
37 changed files with 661 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/LoginForm/LoginForm.tsx → src/components/LoginForm/index.tsx
View File

@@ -28,7 +28,7 @@ const LoginForm = ({ dispatch, error }: Props): JSX.Element => {
return (
<form onSubmit={onSubmit}>
<div className={styles.loginIntro} key="login-intro">
Connectez-vous pour accéder à votre espace.
Si vous êtes bénévole, connectez-vous pour accéder à votre espace.
</div>
<div className={styles.formLine} key="line-email">
<label htmlFor="email">Email</label>

162
src/components/Notifications/index.tsx Normal file
View File

@@ -0,0 +1,162 @@
import _ from "lodash"
import React, { memo, useCallback, useState } from "react"
import { AppDispatch } from "../../store"
import { fetchVolunteerNotifsSet } from "../../store/volunteerNotifsSet"
import { VolunteerNotifs } from "../../services/volunteers"
import styles from "./styles.module.scss"
import { logoutUser } from "../../store/auth"
import { unsetJWT } from "../../services/auth"
interface Props {
dispatch: AppDispatch
jwt: string
// eslint-disable-next-line react/require-default-props
volunteerNotifs?: VolunteerNotifs
}
const Notifications = ({ dispatch, jwt, volunteerNotifs }: Props): JSX.Element => {
const hidden = volunteerNotifs?.hiddenNotifs || []
const notifs: JSX.Element[] = []
const onSubmit1 = useCallback(
(event: React.SyntheticEvent): void => {
event.preventDefault()
dispatch(
fetchVolunteerNotifsSet(jwt, 0, {
hiddenNotifs: [...(volunteerNotifs?.hiddenNotifs || []), 1],
})
)
},
[dispatch, jwt, volunteerNotifs]
)
if (!_.includes(hidden, 1)) {
notifs.push(
<div key="1">
<div className={styles.notificationsPage}>
<div className={styles.notificationsContent}>
<form onSubmit={onSubmit1}>
Salut {volunteerNotifs?.firstname} !
<div className={styles.notifIntro} key="login-intro">
Ici tu seras notifié(e) des nouvelles importantes et des questions
pour lesquelles il nous faudrait absolument ta réponse.
<div className={styles.formButtons}>
<button type="submit">Ok, continuer</button>
</div>
</div>
</form>
</div>
</div>
</div>
)
}
const [participation, setParticipation] = useState(volunteerNotifs?.active || "inconnu")
const onChangeValue2 = (e: React.ChangeEvent<HTMLInputElement>) =>
setParticipation(e.target.value)
const onSubmit2 = useCallback(
(event: React.SyntheticEvent): void => {
event.preventDefault()
dispatch(
fetchVolunteerNotifsSet(jwt, 0, {
hiddenNotifs: [...(volunteerNotifs?.hiddenNotifs || []), 2],
active: participation,
})
)
},
[dispatch, jwt, volunteerNotifs, participation]
)
if (!_.includes(hidden, 2)) {
notifs.push(
<div key="2">
<div className={styles.notificationsPage}>
<div className={styles.notificationsContent}>
<div className={styles.formLine} key="line-participation">
<form onSubmit={onSubmit2}>
Si les conditions sanitaires te le permettent, souhaites-tu être
bénévole à PeL 2022 ?<br />
<input
type="radio"
value="inconnu"
name="gender"
checked={participation === "inconnu"}
onChange={onChangeValue2}
/>{" "}
-<br />
<input
type="radio"
value="oui"
name="gender"
checked={participation === "oui"}
onChange={onChangeValue2}
/>{" "}
Oui
<br />
<input
type="radio"
value="non"
name="gender"
checked={participation === "non"}
onChange={onChangeValue2}
/>{" "}
Non
<br />
<input
type="radio"
value="peut-etre"
name="gender"
checked={participation === "peut-etre"}
onChange={onChangeValue2}
/>{" "}
Je ne sais pas encore
<br />
{participation === "peut-etre" ? (
<div>
On te redemandera dans quelques temps. Si tu as des
questions
</div>
) : null}
<div className={styles.formButtons}>
<button type="submit">Confirmer</button>
</div>
</form>
</div>
</div>
</div>
</div>
)
}
/* DISCORD
Discord nous donne à tous la parole via nos téléphone ou navigateurs, pour organiser le meilleur des festivals !
Il permet de discuter sujet par sujet entre tous les bénévoles, entre les membres d'une même équipe, ou avec ton référent.
Il permet de choisir les sujets spécifiques sur lesquels être notifié de nouveaux messages.
Rejoindre les 86 bénévoles déjà présents sur le serveur se fait en cliquant ici.
Tu n'y es absolument pas obligé(e) ! C'est juste plus pratique.
*/
const onClick = useCallback(
(event: React.SyntheticEvent): void => {
event.preventDefault()
unsetJWT()
dispatch(logoutUser())
},
[dispatch]
)
notifs.push(
<div key="logout" className={styles.formButtons}>
<button type="button" onClick={onClick}>
Se déconnecter
</button>
</div>
)
return <div>{notifs.map<React.ReactNode>((t) => t).reduce((prev, curr) => [prev, curr])}</div>
}
export default memo(Notifications)

41
src/components/Notifications/styles.module.scss Executable file
View File

@@ -0,0 +1,41 @@
@import "../../theme/variables";
@import "../../theme/mixins";
.notificationsPage {
@include page-wrapper-center;
}
.notificationsContent {
@include page-content-wrapper;
}
.notifIntro {
margin-bottom: 10px;
}
.formLine {
padding: 5px 0;
label {
display: block;
margin-left: 5px;
}
select,
input {
width: 10%;
border: 1px solid #333;
border-radius: 4px;
}
}
.formButtons {
margin-top: 10px;
padding: 5px 0;
text-align: center;
}
.error {
margin-top: 10px;
color: rgb(255, 0, 0);
text-align: center;
}

6
src/components/RegisterForm/index.tsx → src/components/PreRegisterForm/index.tsx
View File

@@ -12,7 +12,7 @@ interface Props {
preVolunteerCount: number | undefined
}
const RegisterForm = ({ dispatch, preVolunteerCount }: Props): JSX.Element => {
const PreRegisterForm = ({ dispatch, preVolunteerCount }: Props): JSX.Element => {
const [firstname, setFirstname] = useState("")
const [lastname, setLastname] = useState("")
const [email, setEmail] = useState("")
@@ -97,7 +97,7 @@ const RegisterForm = ({ dispatch, preVolunteerCount }: Props): JSX.Element => {
return (
<form onSubmit={onSubmit}>
<dl className={styles.registerIntro} key="register-intro">
<dl className={styles.preRegisterIntro} key="preRegister-intro">
<dt>Qu&apos;est-ce que Paris est Ludique ?</dt>
<dd>
<p>
@@ -253,4 +253,4 @@ const RegisterForm = ({ dispatch, preVolunteerCount }: Props): JSX.Element => {
)
}
export default memo(RegisterForm)
export default memo(PreRegisterForm)

2
src/components/RegisterForm/styles.module.scss → src/components/PreRegisterForm/styles.module.scss
View File

@@ -1,7 +1,7 @@
@import "../../theme/variables";
@import "../../theme/mixins";
.registerIntro {
.preRegisterIntro {
dt {
font-weight: bold;
margin-top: 10px;

19
src/components/VolunteerInfo/__tests__/VolunteerInfo.tsx
View File

@@ -3,6 +3,7 @@
*/
import { render } from "@testing-library/react"
import { MemoryRouter } from "react-router-dom"
import { volunteerExample } from "../../../services/volunteers"
import VolunteerInfo from "../index"
@@ -10,23 +11,7 @@ describe("<VolunteerInfo />", () => {
it("renders", () => {
const tree = render(
<MemoryRouter>
<VolunteerInfo
item={{
id: 1,
firstname: "Aupeix",
lastname: "Amélie",
email: "pakouille.lakouille@yahoo.fr",
mobile: "0675650392",
photo: "images/volunteers/$taille/amélie_aupeix.jpg",
food: "Végétarien",
adult: 1,
privileges: 0,
active: 0,
created: new Date(0),
password1: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
password2: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
}}
/>
<VolunteerInfo item={volunteerExample} />
</MemoryRouter>
).container.firstChild

23
src/components/VolunteerList/__tests__/VolunteerList.tsx
View File

@@ -4,33 +4,14 @@
import { render } from "@testing-library/react"
import { MemoryRouter } from "react-router-dom"
import { volunteerExample } from "../../../services/volunteers"
import VolunteerList from "../index"
describe("<VolunteerList />", () => {
it("renders", () => {
const tree = render(
<MemoryRouter>
<VolunteerList
items={[
{
id: 1,
firstname: "Aupeix",
lastname: "Amélie",
email: "pakouille.lakouille@yahoo.fr",
mobile: "0675650392",
photo: "images/volunteers/$taille/amélie_aupeix.jpg",
food: "Végétarien",
adult: 1,
privileges: 0,
active: 0,
created: new Date(0),
password1:
"$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
password2:
"$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
},
]}
/>
<VolunteerList items={[volunteerExample]} />
</MemoryRouter>
).container.firstChild

20
src/components/VolunteerSet/__tests__/VolunteerSet.tsx
View File

@@ -3,6 +3,7 @@
*/
import { render } from "@testing-library/react"
import { MemoryRouter } from "react-router-dom"
import { volunteerExample } from "../../../services/volunteers"
import VolunteerSet from "../index"
@@ -11,24 +12,7 @@ describe("<SetVolunteer />", () => {
const dispatch = jest.fn()
const tree = render(
<MemoryRouter>
<VolunteerSet
dispatch={dispatch}
volunteer={{
id: 1,
firstname: "Aupeix",
lastname: "Amélie",
email: "pakouille.lakouille@yahoo.fr",
mobile: "0675650392",
photo: "images/volunteers/$taille/amélie_aupeix.jpg",
food: "Végétarien",
adult: 1,
privileges: 0,
active: 0,
created: new Date(0),
password1: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
password2: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
}}
/>
<VolunteerSet dispatch={dispatch} volunteer={volunteerExample} />
</MemoryRouter>
).container.firstChild

8
src/components/index.ts
View File

@@ -1,3 +1,5 @@
import LoginForm from "./LoginForm"
import Notifications from "./Notifications"
import VolunteerList from "./VolunteerList"
import JavGameList from "./JavGameList"
import VolunteerInfo from "./VolunteerInfo"
@@ -5,9 +7,11 @@ import VolunteerSet from "./VolunteerSet"
import ErrorBoundary from "./ErrorBoundary"
import Loading from "./Loading"
import WishAdd from "./WishAdd"
import RegisterForm from "./RegisterForm"
import PreRegisterForm from "./PreRegisterForm"
export {
LoginForm,
Notifications,
VolunteerList,
JavGameList,
VolunteerInfo,
@@ -15,5 +19,5 @@ export {
ErrorBoundary,
Loading,
WishAdd,
RegisterForm,
PreRegisterForm,
}