Skip to content
Snippets Groups Projects
Commit baa35cf4 authored by Rémi PAILHAREY's avatar Rémi PAILHAREY :fork_knife_plate:
Browse files

Merge branch 'feat/US604-display-next-month-by-default' into 'dev' 

feat(Editing): display next month after the 5th

See merge request web-et-numerique/llle_project/backoffice-client!19
parents 9f5b9de9 42b08a02
No related branches found
No related tags found
3 merge requests!24fix(typo): écogestes + optionnel poll,!22feat: Add partners issue info,!19feat(Editing): display next month after the 5th
Pipeline #18076 passed
Stage: build
Stage: quality
Hide whitespace changes
Inline Side-by-side
src/components/Editing/Editing.tsx
+ 270
− 260
View file @ baa35cf4
import React, { useCallback, useContext, useEffect, useState } from 'react'
import DateSelector from '../DateSelector/DateSelector'
import { NewsletterService } from '../../services/newsletter.service'
import { UserContext, UserContextProps } from '../../hooks/userContext'
import { IMonthlyNews } from '../../models/monthlyNews.model'
import { IMonthlyInfo } from '../../models/monthlyInfo.model'
import { IPoll } from '../../models/poll.model'
import Poll from '../Poll/Poll'
import MonthlyInfo from '../MonthlyInfo/MonthlyInfo'
import MonthlyNews from '../MonthlyNews/MonthlyNews'
import Loader from '../Loader/Loader'
import Modal from '../Modal/Modal'
import './editing.scss'
export type ContentItems = 'monthlyInfo' | 'monthlyNews' | 'poll' | ''
const Editing: React.FC = () => {
const [date, setDate] = useState<Date>(new Date())
const [info, setInfo] = useState<string>('')
const [title, setTitle] = useState<string>('')
const [imageURL, setImageURL] = useState<string>('')
const [content, setContent] = useState<string>('')
const [question, setQuestion] = useState<string>('')
const [link, setLink] = useState<string>('')
const [isTouched, setIsTouched] = useState<boolean>(false)
const [refreshData, setRefreshData] = useState(false)
const [isLoading, setisLoading] = useState<boolean>(false)
const [warningModal, setwarningModal] = useState<boolean>(false)
const [toDelete, settoDelete] = useState<ContentItems>('')
const { user }: Partial<UserContextProps> = useContext(UserContext)
const newsletterService = new NewsletterService()
const handleSaveMonthlyInfo = async (): Promise<void> => {
if (user) {
const newsletterService = new NewsletterService()
await newsletterService.saveMonthlyInfo(
date,
info,
imageURL,
user.xsrftoken
)
setIsTouched(false)
}
}
const handleSaveMonthlyNews = async (): Promise<void> => {
if (user) {
const newsletterService = new NewsletterService()
await newsletterService.saveMonthlyNews(
date,
title,
content,
user.xsrftoken
)
setIsTouched(false)
}
}
const handleSavePoll = async (): Promise<void> => {
if (user) {
await newsletterService.savePoll(date, question, link, user.xsrftoken)
setIsTouched(false)
}
}
const handleCancel = useCallback(() => {
setRefreshData(true)
}, [])
const handleDeleteMonthlyInfo = async (): Promise<void> => {
if (user) {
await newsletterService.deleteMonthlyInfo(date, user.xsrftoken)
setRefreshData(true)
}
}
const handleDeleteMonthlyNews = async (): Promise<void> => {
if (user) {
await newsletterService.deleteMonthlyNews(date, user.xsrftoken)
setRefreshData(true)
}
}
const handleDeletePoll = async (): Promise<void> => {
if (user) {
await newsletterService.deletePoll(date, user.xsrftoken)
setRefreshData(true)
}
}
const handleOpenDeleteModal = (target: ContentItems) => {
settoDelete(target)
setwarningModal(true)
}
const handleConfirmAlert = () => {
if (toDelete === 'monthlyInfo') {
handleDeleteMonthlyInfo()
}
if (toDelete === 'monthlyNews') {
handleDeleteMonthlyNews()
}
if (toDelete === 'poll') {
handleDeletePoll()
}
setwarningModal(false)
}
const isEmpty = (): boolean => {
if (
(info !== '' ||
title !== '' ||
content !== '' ||
question !== '' ||
imageURL !== '' ||
link !== '') &&
isTouched
) {
return false
} else return true
}
const handleEditorChange = (
value: string,
type: 'info' | 'title' | 'content' | 'question' | 'link' | 'image'
): void => {
setIsTouched(true)
if (type === 'info') {
setInfo(value)
}
if (type === 'title') {
setTitle(value)
}
if (type === 'content') {
setContent(value)
}
if (type === 'question') {
setQuestion(value)
}
if (type === 'link') {
setLink(value)
}
if (type === 'image') {
setImageURL(value)
}
}
const resetFields = useCallback(() => {
setImageURL('')
setInfo('')
setTitle('')
setContent('')
setLink('')
setQuestion('')
}, [])
useEffect(() => {
let subscribed = true
resetFields()
setisLoading(true)
async function getCurrentMonthlyNews() {
if (user) {
const newsletterService = new NewsletterService()
const montlhyInfo: IMonthlyInfo | null =
await newsletterService.getSingleMonthlyInfo(date, user.xsrftoken)
const montlhyNews: IMonthlyNews | null =
await newsletterService.getSingleMonthlyNews(date, user.xsrftoken)
const poll: IPoll | null = await newsletterService.getSinglePoll(
date,
user.xsrftoken
)
if (montlhyInfo) {
setInfo(montlhyInfo.info)
setImageURL(montlhyInfo.image)
setIsTouched(false)
}
if (montlhyNews) {
setTitle(montlhyNews.title)
setContent(montlhyNews.content)
setIsTouched(false)
}
if (poll) {
setLink(poll.link)
setQuestion(poll.question)
setIsTouched(false)
}
}
setisLoading(false)
}
if (subscribed) {
getCurrentMonthlyNews()
}
return () => {
subscribed = false
setRefreshData(false)
}
}, [date, user, refreshData, resetFields])
return (
<>
<div className="header">
<p className="title pagetitle">Édition de la newsletter</p>
<DateSelector date={date} setDate={setDate} isEmpty={isEmpty} />
</div>
{isLoading ? (
<Loader />
) : (
<div className="content">
<MonthlyInfo
info={info}
onSave={handleSaveMonthlyInfo}
onCancel={handleCancel}
handleChange={handleEditorChange}
onDelete={handleOpenDeleteModal}
imageURL={imageURL}
/>
<hr />
<MonthlyNews
title={title}
content={content}
onSave={handleSaveMonthlyNews}
onCancel={handleCancel}
handleChange={handleEditorChange}
onDelete={handleOpenDeleteModal}
/>
<hr />
<Poll
question={question}
link={link}
onSave={handleSavePoll}
onCancel={handleCancel}
handleChange={handleEditorChange}
onDelete={handleOpenDeleteModal}
/>
</div>
)}
{warningModal && (
<Modal>
<>
<div className="modal-text">
Etes-vous sûr de vouloir supprimer{' '}
{toDelete === 'monthlyInfo'
? 'cette info mensuelle '
: toDelete === 'monthlyNews'
? 'cette news mensuelle'
: 'ce sondage'}{' '}
?
</div>
<div className="buttons">
<button
className="btnCancel"
onClick={() => setwarningModal(false)}
>
Annuler
</button>
<button className="btnValid" onClick={handleConfirmAlert}>
Continuer
</button>
</div>
</>
</Modal>
)}
</>
)
}
export default Editing
import React, { useCallback, useContext, useEffect, useState } from 'react'
import DateSelector from '../DateSelector/DateSelector'
import { NewsletterService } from '../../services/newsletter.service'
import { UserContext, UserContextProps } from '../../hooks/userContext'
import { IMonthlyNews } from '../../models/monthlyNews.model'
import { IMonthlyInfo } from '../../models/monthlyInfo.model'
import { IPoll } from '../../models/poll.model'
import Poll from '../Poll/Poll'
import MonthlyInfo from '../MonthlyInfo/MonthlyInfo'
import MonthlyNews from '../MonthlyNews/MonthlyNews'
import Loader from '../Loader/Loader'
import Modal from '../Modal/Modal'
import './editing.scss'
export type ContentItems = 'monthlyInfo' | 'monthlyNews' | 'poll' | ''
const Editing: React.FC = () => {
// Fonctional rule :
// Display next month after the 5th of the current month
const getCurrentNewsletterDate = (): Date => {
let newsletterDate = new Date()
if (newsletterDate.getDate() > 5) {
newsletterDate.setMonth(newsletterDate.getMonth() + 1)
}
return newsletterDate
}
const [date, setDate] = useState<Date>(getCurrentNewsletterDate())
const [info, setInfo] = useState<string>('')
const [title, setTitle] = useState<string>('')
const [imageURL, setImageURL] = useState<string>('')
const [content, setContent] = useState<string>('')
const [question, setQuestion] = useState<string>('')
const [link, setLink] = useState<string>('')
const [isTouched, setIsTouched] = useState<boolean>(false)
const [refreshData, setRefreshData] = useState(false)
const [isLoading, setisLoading] = useState<boolean>(false)
const [warningModal, setwarningModal] = useState<boolean>(false)
const [toDelete, settoDelete] = useState<ContentItems>('')
const { user }: Partial<UserContextProps> = useContext(UserContext)
const newsletterService = new NewsletterService()
const handleSaveMonthlyInfo = async (): Promise<void> => {
if (user) {
const newsletterService = new NewsletterService()
await newsletterService.saveMonthlyInfo(
date,
info,
imageURL,
user.xsrftoken
)
setIsTouched(false)
}
}
const handleSaveMonthlyNews = async (): Promise<void> => {
if (user) {
const newsletterService = new NewsletterService()
await newsletterService.saveMonthlyNews(
date,
title,
content,
user.xsrftoken
)
setIsTouched(false)
}
}
const handleSavePoll = async (): Promise<void> => {
if (user) {
await newsletterService.savePoll(date, question, link, user.xsrftoken)
setIsTouched(false)
}
}
const handleCancel = useCallback(() => {
setRefreshData(true)
}, [])
const handleDeleteMonthlyInfo = async (): Promise<void> => {
if (user) {
await newsletterService.deleteMonthlyInfo(date, user.xsrftoken)
setRefreshData(true)
}
}
const handleDeleteMonthlyNews = async (): Promise<void> => {
if (user) {
await newsletterService.deleteMonthlyNews(date, user.xsrftoken)
setRefreshData(true)
}
}
const handleDeletePoll = async (): Promise<void> => {
if (user) {
await newsletterService.deletePoll(date, user.xsrftoken)
setRefreshData(true)
}
}
const handleOpenDeleteModal = (target: ContentItems) => {
settoDelete(target)
setwarningModal(true)
}
const handleConfirmAlert = () => {
if (toDelete === 'monthlyInfo') {
handleDeleteMonthlyInfo()
}
if (toDelete === 'monthlyNews') {
handleDeleteMonthlyNews()
}
if (toDelete === 'poll') {
handleDeletePoll()
}
setwarningModal(false)
}
const isEmpty = (): boolean => {
if (
(info !== '' ||
title !== '' ||
content !== '' ||
question !== '' ||
imageURL !== '' ||
link !== '') &&
isTouched
) {
return false
} else return true
}
const handleEditorChange = (
value: string,
type: 'info' | 'title' | 'content' | 'question' | 'link' | 'image'
): void => {
setIsTouched(true)
if (type === 'info') {
setInfo(value)
}
if (type === 'title') {
setTitle(value)
}
if (type === 'content') {
setContent(value)
}
if (type === 'question') {
setQuestion(value)
}
if (type === 'link') {
setLink(value)
}
if (type === 'image') {
setImageURL(value)
}
}
const resetFields = useCallback(() => {
setImageURL('')
setInfo('')
setTitle('')
setContent('')
setLink('')
setQuestion('')
}, [])
useEffect(() => {
let subscribed = true
resetFields()
setisLoading(true)
async function getCurrentMonthlyNews() {
if (user) {
const newsletterService = new NewsletterService()
const montlhyInfo: IMonthlyInfo | null =
await newsletterService.getSingleMonthlyInfo(date, user.xsrftoken)
const montlhyNews: IMonthlyNews | null =
await newsletterService.getSingleMonthlyNews(date, user.xsrftoken)
const poll: IPoll | null = await newsletterService.getSinglePoll(
date,
user.xsrftoken
)
if (montlhyInfo) {
setInfo(montlhyInfo.info)
setImageURL(montlhyInfo.image)
setIsTouched(false)
}
if (montlhyNews) {
setTitle(montlhyNews.title)
setContent(montlhyNews.content)
setIsTouched(false)
}
if (poll) {
setLink(poll.link)
setQuestion(poll.question)
setIsTouched(false)
}
}
setisLoading(false)
}
if (subscribed) {
getCurrentMonthlyNews()
}
return () => {
subscribed = false
setRefreshData(false)
}
}, [date, user, refreshData, resetFields])
return (
<>
<div className="header">
<p className="title pagetitle">Édition de la newsletter</p>
<DateSelector date={date} setDate={setDate} isEmpty={isEmpty} />
</div>
{isLoading ? (
<Loader />
) : (
<div className="content">
<MonthlyInfo
info={info}
onSave={handleSaveMonthlyInfo}
onCancel={handleCancel}
handleChange={handleEditorChange}
onDelete={handleOpenDeleteModal}
imageURL={imageURL}
/>
<hr />
<MonthlyNews
title={title}
content={content}
onSave={handleSaveMonthlyNews}
onCancel={handleCancel}
handleChange={handleEditorChange}
onDelete={handleOpenDeleteModal}
/>
<hr />
<Poll
question={question}
link={link}
onSave={handleSavePoll}
onCancel={handleCancel}
handleChange={handleEditorChange}
onDelete={handleOpenDeleteModal}
/>
</div>
)}
{warningModal && (
<Modal>
<>
<div className="modal-text">
Etes-vous sûr de vouloir supprimer{' '}
{toDelete === 'monthlyInfo'
? 'cette info mensuelle '
: toDelete === 'monthlyNews'
? 'cette news mensuelle'
: 'ce sondage'}{' '}
?
</div>
<div className="buttons">
<button
className="btnCancel"
onClick={() => setwarningModal(false)}
>
Annuler
</button>
<button className="btnValid" onClick={handleConfirmAlert}>
Continuer
</button>
</div>
</>
</Modal>
)}
</>
)
}
export default Editing
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment